@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');

/* ==========================================================================
   Crew — Custom homepage (Figma node 2:5193)
   Every rule is scoped under .crew-home-page.
   ========================================================================== */

.crew-home-page {
    --crew-navy: #030883;
    --crew-blue: #3e509e;
    --crew-gray: #f0eeed;
    --crew-chip: #e4e4e6;
    --crew-muted: #6b6e74;
    --crew-red: #ff3333;
    --crew-gold: #ffc933;
    --crew-gap: 64px;

    display: block;
    width: 100%;
    /* WoodMart wraps the template in <main> with 40px top/bottom padding: cancel it so the hero meets the header */
    margin-block: -40px;
    padding-block: 0 55px;
    background: #fff;
    color: #000;
    font-family: 'Almarai', Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: normal;
    -webkit-font-smoothing: antialiased;
}

.crew-home-page *,
.crew-home-page *::before,
.crew-home-page *::after {
    box-sizing: border-box;
}

.crew-home-page img {
    display: block;
    max-width: 100%;
    height: auto;
}

.crew-home-page ul,
.crew-home-page ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.crew-home-page li {
    margin: 0;
    padding: 0;
}

.crew-home-page h1,
.crew-home-page h2,
.crew-home-page h3,
.crew-home-page p {
    margin: 0;
    padding: 0;
    color: inherit;
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.crew-home-page a {
    color: inherit;
    text-decoration: none;
}

.crew-home-page button {
    font-family: inherit;
}

.crew-home-page .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.crew-home-page :focus-visible {
    outline: 2px solid var(--crew-navy);
    outline-offset: 3px;
}

.crew-home-page .crew-container {
    width: min(1240px, calc(100% - 40px));
    margin-inline: auto;
}

/* Full-bleed band: home.js sets --crew-vw to the viewport width without the scrollbar */
.crew-home-page .crew-bleed {
    width: var(--crew-vw, 100vw);
    margin-inline: calc(50% - var(--crew-vw, 100vw) / 2);
}

/* ---------- Section scaffolding ---------- */

.crew-home-page .crew-section {
    margin-top: var(--crew-gap);
}

.crew-home-page .crew-section__head {
    display: flex;
    flex-direction: column;
    gap: 17px;
    margin-bottom: 64px;
}

.crew-home-page .crew-section__head--row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.crew-home-page .crew-section__head--center {
    align-items: center;
    text-align: center;
}

.crew-home-page .crew-section__title {
    color: var(--crew-navy);
    font-size: 40px;
    font-weight: 700;
    line-height: 41.6px;
}

.crew-home-page .crew-section__sub {
    color: var(--crew-muted);
    font-size: 22px;
    font-weight: 300;
    line-height: 25.6px;
}

.crew-home-page .crew-cats .crew-section__title + .crew-section__sub {
    margin-top: 17px;
}

.crew-home-page .crew-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    transition: opacity 0.2s, transform 0.2s;
}

.crew-home-page .crew-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.crew-home-page .crew-btn--primary {
    height: 45px;
    padding-inline: 24px;
    background: var(--crew-navy);
    color: #fbfcfd;
}

.crew-home-page .crew-btn--light {
    height: 52px;
    min-width: 204px;
    padding-inline: 54px;
    background: #fff;
    color: var(--crew-navy);
}

.crew-home-page .crew-empty {
    padding: 48px 0;
    color: var(--crew-muted);
    font-size: 18px;
    text-align: center;
}

/* ---------- Hero ---------- */

.crew-home-page .crew-hero {
    position: relative;
    min-height: 663px;
    padding-top: 160px;
    background: #050510 var(--hero) center / cover no-repeat;
    color: #fff;
}

.crew-home-page .crew-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: 529px;
}

.crew-home-page .crew-hero__title {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: 0.25px;
    line-height: 63px;
}

.crew-home-page .crew-hero__text {
    max-width: 494px;
    font-size: 24px;
    line-height: 30px;
}

.crew-home-page .crew-hero__cta {
    width: min(506px, 100%);
    margin-top: 9px;
}

/* ---------- Slider (categories, new arrivals, reviews) ---------- */

.crew-home-page .crew-slider-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: none;
}

.crew-home-page .crew-slider-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: #000;
    cursor: pointer;
    transition: opacity 0.2s;
}

.crew-home-page .crew-slider-nav__btn:disabled {
    opacity: 0.25;
    cursor: default;
}

/* the SVG points left (next in RTL); prev is its mirror image */
.crew-home-page .crew-slider-nav__btn--prev svg {
    transform: scaleX(-1);
}

html:not([dir='rtl']) .crew-home-page .crew-slider-nav__btn--next svg {
    transform: scaleX(-1);
}

html:not([dir='rtl']) .crew-home-page .crew-slider-nav__btn--prev svg {
    transform: none;
}

.crew-home-page .crew-slider__track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.crew-home-page .crew-slider__track::-webkit-scrollbar {
    display: none;
}

.crew-home-page .crew-slider__track > * {
    flex: none;
    scroll-snap-align: start;
}

.crew-home-page .crew-slider__track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

/* ---------- Category chips ---------- */

.crew-home-page .crew-cats .crew-section__head {
    margin-bottom: 16px;
}

.crew-home-page .crew-chips {
    padding-block: 24px;
}

.crew-home-page .crew-chip {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    min-height: 47px;
    padding: 10px 30px;
    border-radius: 60px;
    background: var(--crew-chip);
    font-size: 22px;
    letter-spacing: 0.2px;
    line-height: 16.8px;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.crew-home-page .crew-chip:hover {
    background: var(--crew-navy);
    color: #fff;
}

.crew-home-page .crew-chip img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.crew-home-page .crew-chip:hover img {
    filter: brightness(0) invert(1);
}

/* ---------- Product filter select ---------- */

.crew-home-page .crew-select {
    position: relative;
    display: inline-block;
    flex: none;
}

.crew-home-page .crew-select select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 193px;
    height: 37px;
    margin: 0;
    padding: 0 44px 0 20px;
    border: 0;
    border-radius: 60px;
    background: var(--crew-chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 20px center / 12px 8px;
    color: #000;
    font-family: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
}

.crew-home-page .crew-select select:focus {
    box-shadow: none;
}

/* ---------- Product grid / card ---------- */

.crew-home-page .crew-products .crew-section__head {
    margin-bottom: 64px;
}

.crew-home-page .crew-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.crew-home-page .crew-grid[hidden],
.crew-home-page .crew-empty[hidden] {
    display: none;
}

.crew-home-page .crew-slider__track--cards {
    gap: 20px;
}

.crew-home-page .crew-slider__track--cards > .crew-card {
    width: calc((100% - 60px) / 4);
}

.crew-home-page .crew-card {
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-width: 0;
}

.crew-home-page .crew-card__media {
    position: relative;
    aspect-ratio: 295 / 298;
    overflow: hidden;
    border-radius: 20px;
    background: var(--crew-gray);
}

.crew-home-page .crew-card__img {
    position: absolute;
    inset: 0;
    display: block;
}

.crew-home-page .crew-card__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.35s;
}

.crew-home-page .crew-card:hover .crew-card__img img {
    transform: scale(1.04);
}

.crew-home-page .crew-card__stock {
    position: absolute;
    inset-inline-end: 12px;
    bottom: 12px;
    padding: 4px 12px;
    border-radius: 62px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 12px;
}

.crew-home-page .crew-card--out .crew-card__img {
    opacity: 0.55;
}

/* WoodMart wishlist button, restyled with the Figma heart */
.crew-home-page .crew-card .wd-wishlist-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    margin: 0;
}

.crew-home-page .crew-card .wd-wishlist-btn > a {
    display: block;
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.crew-home-page .crew-card .wd-wishlist-btn .wd-action-icon,
.crew-home-page .crew-card .wd-wishlist-btn .wd-action-text {
    display: none;
}

.crew-home-page .crew-card .wd-wishlist-btn > a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--crew-red);
    -webkit-mask: url('../images/heart.svg') center / 20px 17px no-repeat;
    mask: url('../images/heart.svg') center / 20px 17px no-repeat;
    transition: transform 0.2s;
}

.crew-home-page .crew-card .wd-wishlist-btn > a:hover::before {
    transform: scale(1.12);
}

.crew-home-page .crew-card .wd-wishlist-btn.wd-added > a::before,
.crew-home-page .crew-card .wd-wishlist-btn > a.added::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.6 4.6 0 0 1 8-3 4.6 4.6 0 0 1 8 3c0 5.8-8 11-8 11z'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.6 4.6 0 0 1 8-3 4.6 4.6 0 0 1 8 3c0 5.8-8 11-8 11z'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

.crew-home-page .crew-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.crew-home-page .crew-card__title {
    flex: 1;
    min-width: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.crew-home-page .crew-card__title a:hover {
    color: var(--crew-navy);
}

/* Add-to-cart: real WooCommerce link (ajax), drawn with the Figma cart icon */
.crew-home-page .crew-card__cart {
    flex: none;
    display: block;
    position: relative;
    width: 32px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: url('../images/cart.svg') left center / 61px 20.25px no-repeat;
    box-shadow: none;
    transition: transform 0.2s, opacity 0.2s;
}

.crew-home-page .crew-card__cart:hover {
    transform: scale(1.1);
}

.crew-home-page .crew-card__cart.loading {
    opacity: 0.4;
    pointer-events: none;
}

.crew-home-page .crew-card__cart.loading::after,
.crew-home-page .crew-card__cart.added::after {
    display: none;
}

.crew-home-page .crew-card__cart.added {
    opacity: 0.55;
}

.crew-home-page .crew-card .added_to_cart {
    display: none;
}

.crew-home-page .crew-card__rating {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 14px;
}

.crew-home-page .crew-card__score b {
    font-weight: 400;
    color: rgba(0, 0, 0, 0.6);
}

.crew-home-page .crew-stars {
    display: inline-block;
    flex: none;
    width: 104px;
    height: 18.5px;
    background: linear-gradient(to right, var(--crew-gold) var(--p, 0%), #e2e2e2 var(--p, 0%));
    -webkit-mask: url('../images/star.svg') left top / 20.8px 18.5px repeat-x;
    mask: url('../images/star.svg') left top / 20.8px 18.5px repeat-x;
}

html[dir='rtl'] .crew-home-page .crew-stars {
    background: linear-gradient(to left, var(--crew-gold) var(--p, 0%), #e2e2e2 var(--p, 0%));
    -webkit-mask-position: right top;
    mask-position: right top;
}

.crew-home-page .crew-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.25;
}

.crew-home-page .crew-card__price .woocommerce-Price-amount,
.crew-home-page .crew-card__price bdi {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.crew-home-page .crew-card__price ins {
    order: -1;
    background: none;
    color: #000;
    text-decoration: none;
}

.crew-home-page .crew-card__price del {
    color: #999;
    opacity: 1;
}

.crew-home-page .crew-card__price .screen-reader-text {
    display: none;
}

.crew-home-page .crew-card__badge {
    padding: 6px 14px;
    border-radius: 62px;
    background: rgba(255, 51, 51, 0.1);
    color: #f33;
    font-size: 12px;
    line-height: normal;
    white-space: nowrap;
    direction: ltr;
}

/* ---------- Category photo tiles ---------- */

.crew-home-page .crew-section--tiles {
    margin-top: 125px;
}

.crew-home-page .crew-tiles .crew-section__head {
    margin-bottom: 40px;
}

.crew-home-page .crew-tiles__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 17px 20px;
}

.crew-home-page .crew-tile {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: end;
    grid-column: span 2;
    min-height: 422px;
    padding: 0 21px 30px 53px;
    overflow: hidden;
    border-radius: 20px;
    background: #111;
    color: #fff;
    isolation: isolate;
}

.crew-home-page .crew-tile--wide {
    grid-column: span 3;
    padding-left: 73px;
}

.crew-home-page .crew-tile__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.crew-home-page .crew-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.6);
}

.crew-home-page .crew-tile:hover .crew-tile__img {
    transform: scale(1.05);
}

.crew-home-page .crew-tile__label {
    display: flex;
    flex-direction: column;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 0.06px;
    line-height: 1.35;
}

.crew-home-page .crew-tile__arrow {
    align-self: center;
    display: flex;
    transition: transform 0.25s;
}

.crew-home-page .crew-tile__arrow svg {
    width: 36px;
    height: 36px;
}

.crew-home-page .crew-tile:hover .crew-tile__arrow {
    transform: translateX(-6px);
}

html:not([dir='rtl']) .crew-home-page .crew-tile__arrow svg {
    transform: scaleX(-1);
}

/* ---------- Weekly deal ---------- */

.crew-home-page .crew-deal {
    margin-top: 75px;
    padding-block: 64px;
    background: var(--crew-navy);
    color: #fff;
}

.crew-home-page .crew-deal .crew-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 29px;
    text-align: center;
}

.crew-home-page .crew-deal__timer {
    display: flex;
    gap: 31px;
}

.crew-home-page .crew-deal__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 132px;
    padding: 20px 10px;
    border: 1px solid #76fff5;
    border-radius: 15px;
    background: rgba(245, 245, 245, 0.2);
}

.crew-home-page .crew-deal__box strong {
    font-size: 36px;
    font-weight: 800;
    line-height: 30px;
    font-variant-numeric: tabular-nums;
}

.crew-home-page .crew-deal__box span {
    color: #f0f0f0;
    font-size: 24px;
    line-height: 26px;
}

.crew-home-page .crew-deal__title {
    font-size: 96px;
    font-weight: 700;
    letter-spacing: 0.25px;
    line-height: 100px;
}

.crew-home-page .crew-deal__product {
    font-size: 36px;
    font-weight: 700;
}

/* ---------- Payments ---------- */

.crew-home-page .crew-pay {
    margin-top: 65px;
    padding-block: 64px;
    background: rgba(243, 244, 248, 0.8);
}

.crew-home-page .crew-pay .crew-section__head {
    max-width: 992px;
    margin: 0 auto 27px;
    gap: 17px;
}

.crew-home-page .crew-pay__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px 55.87px;
}

.crew-home-page .crew-pay__list img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* ---------- FAQ ---------- */

.crew-home-page .crew-faq .crew-section__head {
    margin-bottom: 32px;
}

.crew-home-page .crew-faq__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.crew-home-page .crew-faq__item {
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 23px;
    background: rgba(62, 80, 158, 0.02);
}

.crew-home-page .crew-faq__heading {
    margin: 0;
    font-size: inherit;
}

.crew-home-page .crew-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 24px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--crew-muted);
    font-size: 24px;
    font-weight: 400;
    line-height: 33.6px;
    text-align: start;
    text-transform: none;
    cursor: pointer;
}

.crew-home-page .crew-faq__q:hover {
    color: var(--crew-navy);
}

.crew-home-page .crew-faq__icon {
    flex: none;
    width: 13px;
    height: 13px;
    background: var(--crew-blue);
    -webkit-mask: url('../images/faq-plus.svg') center / contain no-repeat;
    mask: url('../images/faq-plus.svg') center / contain no-repeat;
    transition: transform 0.25s;
}

.crew-home-page .crew-faq__q[aria-expanded='true'] .crew-faq__icon {
    transform: rotate(45deg);
}

.crew-home-page .crew-faq__a {
    padding: 0 24px 24px;
    color: var(--crew-muted);
    font-size: 18px;
    font-weight: 300;
    line-height: 30px;
}

.crew-home-page .crew-faq__a[hidden] {
    display: none;
}

/* ---------- Reviews ---------- */

.crew-home-page .crew-reviews .crew-section__head {
    margin-bottom: 32px;
}

.crew-home-page .crew-reviews__track {
    gap: 20px;
    /* bleed to the trailing viewport edge so the next card peeks, like the design */
    margin-inline-end: calc(-1 * (var(--crew-vw, 100vw) - 100%) / 2);
    padding-block: 4px;
}

.crew-home-page .crew-review {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 400px;
    min-height: 240px;
    padding: 32px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 24px;
    background: #fff;
}

.crew-home-page .crew-review .crew-stars {
    width: 138px;
    height: 24.5px;
    -webkit-mask-size: 27.6px 24.5px;
    mask-size: 27.6px 24.5px;
}

.crew-home-page .crew-review__name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

.crew-home-page .crew-review__check {
    flex: none;
    order: 2;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #12a84a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.crew-home-page .crew-review__text {
    color: var(--crew-muted);
    font-size: 16px;
    font-weight: 300;
    line-height: 22px;
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1024px) {
    .crew-home-page {
        --crew-gap: 48px;
    }

    .crew-home-page .crew-section__title {
        font-size: 34px;
        line-height: 1.3;
    }

    .crew-home-page .crew-section__sub {
        font-size: 19px;
        line-height: 1.5;
    }

    .crew-home-page .crew-section__head,
    .crew-home-page .crew-products .crew-section__head {
        margin-bottom: 36px;
    }

    .crew-home-page .crew-hero {
        min-height: 520px;
        padding-top: 110px;
    }

    .crew-home-page .crew-hero__title {
        font-size: 38px;
        line-height: 1.35;
    }

    .crew-home-page .crew-hero__text {
        font-size: 20px;
        line-height: 1.5;
    }

    .crew-home-page .crew-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crew-home-page .crew-slider__track--cards > .crew-card {
        width: calc((100% - 20px) / 2.3);
    }

    .crew-home-page .crew-section--tiles {
        margin-top: 80px;
    }

    .crew-home-page .crew-tiles__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crew-home-page .crew-tile,
    .crew-home-page .crew-tile--wide {
        grid-column: span 1;
        min-height: 320px;
        padding: 0 20px 24px 32px;
    }

    .crew-home-page .crew-tile:last-child {
        grid-column: 1 / -1;
    }

    .crew-home-page .crew-tile__label {
        font-size: 30px;
    }

    .crew-home-page .crew-deal {
        margin-top: 56px;
    }

    .crew-home-page .crew-deal__title {
        font-size: 64px;
        line-height: 1.1;
    }

    .crew-home-page .crew-deal__product {
        font-size: 28px;
    }

    .crew-home-page .crew-pay {
        margin-top: 48px;
    }

    .crew-home-page .crew-faq__q {
        font-size: 20px;
        line-height: 1.5;
    }

    .crew-home-page .crew-review {
        width: 340px;
    }
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 640px) {
    .crew-home-page {
        --crew-gap: 40px;
        padding-bottom: 32px;
    }

    .crew-home-page .crew-container {
        width: calc(100% - 32px);
    }

    .crew-home-page .crew-section__title {
        font-size: 26px;
    }

    .crew-home-page .crew-section__sub {
        font-size: 16px;
    }

    .crew-home-page .crew-section__head--row {
        gap: 12px;
    }

    .crew-home-page .crew-section__head,
    .crew-home-page .crew-products .crew-section__head {
        margin-bottom: 24px;
    }

    .crew-home-page .crew-hero {
        min-height: 440px;
        padding-top: 72px;
    }

    .crew-home-page .crew-hero__title {
        font-size: 30px;
        line-height: 1.4;
    }

    .crew-home-page .crew-hero__text {
        font-size: 17px;
    }

    .crew-home-page .crew-chip {
        padding: 8px 20px;
        font-size: 18px;
    }

    .crew-home-page .crew-chips {
        gap: 12px;
        padding-block: 12px;
    }

    .crew-home-page .crew-products .crew-section__head--row {
        flex-wrap: wrap;
    }

    .crew-home-page .crew-select select {
        min-width: 150px;
        font-size: 16px;
    }

    .crew-home-page .crew-grid {
        gap: 24px 12px;
    }

    .crew-home-page .crew-slider__track--cards {
        gap: 12px;
    }

    .crew-home-page .crew-slider__track--cards > .crew-card {
        width: 62%;
    }

    .crew-home-page .crew-card__title {
        font-size: 15px;
    }

    .crew-home-page .crew-card__price {
        font-size: 17px;
        gap: 4px 6px;
    }

    .crew-home-page .crew-card__rating {
        gap: 8px;
        font-size: 12px;
    }

    .crew-home-page .crew-stars {
        width: 83.2px;
        height: 14.8px;
        -webkit-mask-size: 16.64px 14.8px;
        mask-size: 16.64px 14.8px;
    }

    .crew-home-page .crew-section--tiles {
        margin-top: 56px;
    }

    .crew-home-page .crew-tiles__grid {
        grid-template-columns: 1fr;
    }

    .crew-home-page .crew-tile,
    .crew-home-page .crew-tile--wide {
        min-height: 240px;
        padding: 0 18px 20px 24px;
    }

    .crew-home-page .crew-tile__label {
        font-size: 26px;
    }

    .crew-home-page .crew-tile__arrow svg {
        width: 28px;
        height: 28px;
    }

    .crew-home-page .crew-deal {
        margin-top: 40px;
        padding-block: 40px;
    }

    .crew-home-page .crew-deal .crew-container {
        gap: 20px;
    }

    .crew-home-page .crew-deal__timer {
        gap: 8px;
        width: 100%;
    }

    .crew-home-page .crew-deal__box {
        flex: 1;
        width: auto;
        padding: 12px 4px;
        border-radius: 12px;
    }

    .crew-home-page .crew-deal__box strong {
        font-size: 24px;
    }

    .crew-home-page .crew-deal__box span {
        font-size: 14px;
    }

    .crew-home-page .crew-deal__title {
        font-size: 44px;
    }

    .crew-home-page .crew-deal__product {
        font-size: 22px;
    }

    .crew-home-page .crew-pay {
        margin-top: 40px;
        padding-block: 40px;
    }

    .crew-home-page .crew-pay__list {
        gap: 20px 28px;
    }

    .crew-home-page .crew-pay__list img {
        width: auto;
        max-height: 44px;
    }

    .crew-home-page .crew-faq__q {
        padding: 16px;
        font-size: 17px;
    }

    .crew-home-page .crew-faq__a {
        padding: 0 16px 16px;
        font-size: 16px;
    }

    .crew-home-page .crew-review {
        width: 280px;
        min-height: 0;
        padding: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .crew-home-page *,
    .crew-home-page *::before,
    .crew-home-page *::after {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}