/* ==========================================================================
   LmdfStore — storefront pages (home, shop, product, basket, content, vCard)
   Builds on the La Crèmerie tokens and components in site.css; never redefines them.
   Logical properties only (RTL mirrors for free); Arabic reads --track/--upper (0/none).
   Breakpoints: 760px and 1100px, mobile first.
   ========================================================================== */

/* 1. Shared bits ----------------------------------------------------------- */

.sf-label-long {
    display: none;
}

@media (min-width: 760px) {
    .sf-label-long {
        display: inline;
    }

    .sf-label-short {
        display: none;
    }
}

.product-card__form {
    width: 100%;
    margin-top: auto;
    display: flex;
}

/* The card once its item is in the basket: − quantity + across the card, in place of "Add to basket". */
.product-card__stepper {
    justify-content: space-between;
    min-height: var(--card-button-h);
    border-color: var(--bordeaux);
}

.product-card__stepper .qty-stepper__button {
    color: var(--bordeaux);
}

.product-card__stepper .qty-stepper__button:disabled {
    color: var(--disabled);
}

.product-card__in-basket {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ink);
}

.product-qty__in-basket {
    margin-top: 8px;
    font-size: 15px;
}

.product-qty__in-basket a {
    color: var(--bordeaux);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.product-card .mat img {
    height: auto;
}

/* Toast after a basket change (post → redirect → get). */
/* Floats at the bottom of the screen: after adding from a card the page returns to that card, far below the top. */
.sf-toast {
    position: fixed;
    z-index: 40;
    inset-inline: 12px;
    bottom: 12px;
    max-width: 640px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 10px 16px;
    background: var(--ink);
    color: var(--on-dark);
    font-size: 15px;
    box-shadow: 0 10px 30px rgba(42, 33, 28, 0.28);
    transition: opacity 200ms ease, transform 200ms ease;
}

.sf-toast--leaving {
    opacity: 0;
    transform: translateY(8px);
}

@media (prefers-reduced-motion: no-preference) {
    .sf-toast {
        animation: sf-toast-in 220ms ease-out;
    }

    @keyframes sf-toast-in {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .sf-toast {
        transition: none;
    }
}

:root:lang(ar) .sf-toast {
    font-size: 16px;
}

.sf-toast--error {
    background: var(--bordeaux);
}

.sf-toast__text {
    flex: 1 1 280px;
}

.sf-toast__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sf-toast__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--target);
    color: var(--on-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 6px;
}

.sf-toast__close {
    width: var(--target);
    height: var(--target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    color: var(--on-dark);
}

.sf-toast :focus-visible {
    outline-color: var(--on-dark);
}

/* 2. Home ------------------------------------------------------------------ */

.app-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "mark text dismiss"
        "links links links";
    align-items: center;
    gap: 6px 14px;
    padding-block: 10px;
    padding-inline: var(--gutter) 12px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-small);
}

.app-banner__mark {
    grid-area: mark;
    width: 48px;
}

.app-banner__text {
    grid-area: text;
    line-height: 1.4;
}

.app-banner__links {
    grid-area: links;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    padding-inline-start: 62px;
}

.app-banner__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--target);
    color: var(--bordeaux);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.app-banner__dismiss {
    grid-area: dismiss;
}

@media (min-width: 760px) {
    .app-banner {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        grid-template-areas: "mark text links dismiss";
    }

    .app-banner__links {
        padding-inline-start: 0;
    }
}

/* The prototype shows the app banner on phones and tablets only. */
@media (min-width: 1100px) {
    .app-banner {
        display: none;
    }
}

.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    padding: 20px var(--gutter) 56px;
}

.home-hero__arch {
    width: 100%;
    max-width: 360px;
    justify-self: center;
    padding: 8px;
    border: 1px solid var(--gilt);
    border-radius: 999px 999px 0 0;
}

.home-hero__frame {
    height: 380px;
    overflow: hidden;
    border-radius: 999px 999px 0 0;
    background: var(--photo-ground);
}

.home-hero__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

.home-hero__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.home-hero__title {
    line-height: 1;
}

:root:lang(ar) .home-hero__title {
    line-height: 1.35;
}

.home-hero__line {
    display: block;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
}

@media (min-width: 760px) {
    .home-hero {
        padding: 40px var(--gutter) 80px;
    }

    .home-hero__arch {
        max-width: 440px;
        padding: 10px;
    }

    .home-hero__frame {
        height: 520px;
    }
}

/* Side by side from 1100px; the display heading scales with the text column so "Bienvenue" never overflows. */
@media (min-width: 1100px) {
    .home-hero {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
        gap: clamp(48px, 6vw, 96px);
        padding: 64px var(--gutter) 104px;
    }

    .home-hero__arch {
        max-width: 560px;
        padding: 12px;
    }

    .home-hero__frame {
        height: clamp(520px, 46vw, 640px);
    }

    .home-hero__text {
        gap: 28px;
    }

    .home-hero__title {
        font-size: clamp(64px, 7vw, var(--fs-display));
        line-height: 0.98;
    }

    :root:lang(ar) .home-hero__title {
        line-height: 1.3;
    }
}

.home-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-head--center {
    align-items: center;
    text-align: center;
}

.home-head--split {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.home-head__titles {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-head__title {
    font-size: var(--fs-h2);
}

.home-rooms__grid {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: var(--grid-row-gap);
}

@media (min-width: 760px) {
    .home-rooms__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .home-rooms__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.home-room {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    color: var(--ink);
    text-decoration: none;
}

.home-room__photo img {
    height: auto;
}

.home-room:hover .home-room__photo {
    border-color: var(--gilt);
}

.home-room__name {
    font-family: var(--font-name);
    font-weight: var(--weight-name);
    font-size: 21px;
    line-height: 1.25;
}

:root:lang(ar) .home-room__name {
    font-size: 18px;
}

.home-room:hover .home-room__name {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.home-room__text {
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--taupe);
}

@media (min-width: 1100px) {
    .home-room__name {
        font-size: 28px;
    }

    :root:lang(ar) .home-room__name {
        font-size: 23px;
    }
}

.home-platters {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.home-platters__photo img {
    height: auto;
}

.home-platters__text {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.home-platters__intro {
    color: var(--body);
}

@media (min-width: 1100px) {
    .home-platters {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 88px;
    }

    .home-platters__photo {
        padding: 16px;
    }
}

.platter-ladder {
    list-style: none;
    padding: 0;
    border-top: 1px solid var(--ink);
}

.platter-ladder__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.platter-ladder__label {
    min-width: 0;
}

.platter-ladder__name {
    font-family: var(--font-name);
    font-weight: var(--weight-name);
    font-size: 19px;
    color: var(--ink);
    text-decoration: none;
}

:root:lang(ar) .platter-ladder__name {
    font-size: 17px;
}

.platter-ladder__name:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.platter-ladder__detail {
    margin-inline-start: 6px;
    font-size: var(--fs-small);
    color: var(--taupe);
}

@media (min-width: 1100px) {
    .platter-ladder__name {
        font-size: 22px;
    }

    :root:lang(ar) .platter-ladder__name {
        font-size: 19px;
    }
}

.home-promises {
    padding-block: 48px;
}

.home-promises__list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 32px;
}

@media (min-width: 760px) {
    .home-promises__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 40px;
    }
}

@media (min-width: 1100px) {
    .home-promises {
        padding-block: 72px;
    }

    .home-promises__list {
        gap: 56px;
    }
}

.promise {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.promise__number {
    font-family: var(--font-latin-display);
    font-size: 30px;
    line-height: 1;
    color: var(--gilt);
}

.promise__title {
    font-family: var(--font-name);
    font-weight: var(--weight-name);
    font-size: 22px;
    line-height: 1.3;
}

:root:lang(ar) .promise__title {
    font-size: 20px;
}

@media (min-width: 1100px) {
    .promise__title {
        font-size: 26px;
    }

    :root:lang(ar) .promise__title {
        font-size: 22px;
    }
}

.promise__text {
    font-size: var(--fs-small);
    color: var(--body);
}

/* 3. Shop ------------------------------------------------------------------ */

.shop-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

:root:lang(ar) .shop-head .title,
:root:lang(ar) .content-head .title,
:root:lang(ar) .basket-head .title {
    line-height: 1.4;
}

.shop-head__count,
.basket-head__count {
    font-size: var(--fs-small);
    color: var(--taupe);
}

.shop-search {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 640px;
}

.shop-search__row {
    display: flex;
    gap: 8px;
}

.shop-search__input {
    flex: 1 1 auto;
    min-width: 0;
}

.shop-search__button {
    min-height: var(--control-h);
    padding: 0 22px;
}

.shop-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.shop-aside {
    display: none;
}

.shop-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

@media (min-width: 1100px) {
    .shop-layout {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 56px;
    }

    .shop-aside {
        display: flex;
        flex-direction: column;
        gap: 28px;
        padding-inline-end: 28px;
        border-inline-end: 1px solid var(--line);
    }

}

.facet {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.facet__title {
    margin-bottom: 6px;
    font-family: var(--font-ui);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--track);
    text-transform: var(--upper);
    line-height: 1.4;
    color: var(--bordeaux);
}

.facet__list {
    list-style: none;
    padding: 0;
}

.facet__link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--target);
    color: var(--ink);
    font-size: var(--fs-small);
    text-decoration: none;
}

.facet__link::before {
    content: "";
    flex: none;
    width: 14px;
    height: 1px;
    background: var(--muted-mark);
}

.facet__link:hover .facet__label {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.facet__link[aria-current] {
    color: var(--bordeaux);
    font-weight: 600;
}

.facet__link[aria-current]::before {
    background: var(--bordeaux);
}

.facet__label {
    min-width: 0;
}

.facet__count {
    margin-inline-start: auto;
    font-family: var(--font-latin-ui);
    font-size: 13px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--taupe);
}

.shop-chips {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Phones and tablets filter with chips and the "Refine" panel; desktop has the sidebar. */
@media (min-width: 1100px) {
    .shop-chips,
    .shop-refine {
        display: none;
    }
}

.shop-refine {
    border: 1px solid var(--field);
    background: var(--mat);
}

.shop-refine__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--target);
    padding: 0 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.shop-refine__badge {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bordeaux);
    color: var(--on-dark);
    font-family: var(--font-latin-ui);
    font-size: 12px;
}

.shop-refine__body {
    display: grid;
    gap: 20px;
    padding: 8px 16px 18px;
    border-top: 1px solid var(--line);
}

@media (min-width: 760px) {
    .shop-refine__body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.shop-sort {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}

.shop-sort__label {
    margin-inline-end: 8px;
    font-size: var(--fs-small);
    color: var(--taupe);
}

.shop-toolbar__clear {
    display: inline-flex;
    align-items: center;
    min-height: var(--target);
    font-size: var(--fs-small);
}

.shop-empty__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-style: var(--italic);
    line-height: var(--lh-heading);
}

.shop-pagination {
    padding-top: 8px;
}

.shop-pagination__gap {
    display: inline-flex;
    align-items: center;
    min-height: var(--target);
    padding: 0 6px;
    color: var(--taupe);
}

/* 4. Product --------------------------------------------------------------- */

.product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

@media (min-width: 1100px) {
    .product-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 80px;
    }
}

.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.product-gallery__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.product-gallery__slide {
    scroll-snap-align: start;
    padding: 8px;
}

@media (min-width: 1100px) {
    .product-gallery__slide {
        padding: 18px;
    }
}

.product-gallery__slide img {
    height: auto;
}

.product-gallery__thumbs {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-gallery__thumb {
    display: block;
    width: 64px;
    padding: 4px;
    background: var(--mat);
    border: 1px solid var(--line);
}

.product-gallery__thumb:hover,
.product-gallery__thumb[aria-current="true"] {
    border-color: var(--bordeaux);
}

.product-gallery__thumb img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.product-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.product-title {
    font-family: var(--font-name);
    font-weight: var(--weight-name);
    font-size: 38px;
    line-height: 1.2;
}

:root:lang(ar) .product-title {
    font-size: 30px;
    line-height: 1.45;
}

@media (min-width: 1100px) {
    .product-title {
        font-size: 56px;
    }

    :root:lang(ar) .product-title {
        font-size: 40px;
    }
}

.product-latin {
    margin-top: -8px;
    font-family: var(--font-latin-display);
    font-style: italic;
    font-size: 20px;
    color: var(--taupe);
    text-align: end;
}

.product-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
}

.product-price__main {
    font-size: 22px;
    font-weight: 600;
}

@media (min-width: 1100px) {
    .product-price__main {
        font-size: 26px;
    }
}

.product-price__unit {
    font-size: 16px;
    font-weight: 400;
    color: var(--taupe);
}

.product-price__kg {
    font-size: 15px;
    color: var(--taupe);
}

.product-description {
    color: var(--body);
    white-space: pre-line;
}

.product-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    margin: 0;
    border-block: 1px solid var(--line);
}

.product-facts__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-block: 14px;
    padding-inline-end: 12px;
}

.product-facts__item--wide {
    grid-column: 1 / -1;
}

.product-facts dt {
    font-size: var(--fs-tag);
    letter-spacing: var(--track-s);
    text-transform: var(--upper);
    color: var(--taupe);
}

.product-facts dd {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
}

.product-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.product-errors__title {
    margin-bottom: 4px;
    font-weight: 600;
}

.product-errors a {
    color: var(--bordeaux);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.product-options {
    gap: 10px;
    padding-inline-start: 0;
}

.product-options--invalid {
    padding-inline-start: 12px;
    border-inline-start: 3px solid var(--bordeaux);
}

/* Two classes: beats the generic `.fieldset > legend` (display face at 30px, Aref Ruqaa on Arabic pages). */
.product-options > .product-options__legend {
    margin-bottom: 4px;
    font-family: var(--font-name);
    font-weight: var(--weight-name);
    font-size: 20px;
    line-height: 1.3;
}

.product-options__count {
    margin-inline-start: 6px;
    font-weight: 600;
    color: var(--ink);
}

.product-options__choices {
    display: grid;
    gap: 0 20px;
}

@media (min-width: 760px) {
    .product-options__choices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.product-option {
    align-items: center;
    font-size: 15px;
    cursor: pointer;
}

.product-option input {
    margin-top: 0;
}

.product-qty {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product-qty__label {
    font-size: 14px;
    font-weight: 600;
}

:root:lang(ar) .product-qty__label {
    font-size: 16px;
}

.product-qty__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}

.product-qty__select {
    width: auto;
    min-width: 180px;
}

/* storefront.js swaps the select for the −/+ stepper once it is wired up (both submit the same value);
   if the script never runs, the select stays. */
.is-qty-enhanced .product-qty__fallback {
    display: none;
}

.product-qty__total {
    font-size: 16px;
    color: var(--body);
}

.product-qty__total strong {
    font-size: 20px;
    color: var(--ink);
}

.product-qty__note {
    font-size: 14px;
    color: var(--taupe);
}

.product-add {
    min-height: 58px;
    letter-spacing: var(--track-s);
}

.product-delivery {
    font-size: 14px;
    color: var(--taupe);
    text-align: center;
}

.product-related {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
}

.product-related__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--fs-h2);
}

@media (min-width: 1100px) {
    .product-related {
        padding-top: 56px;
    }
}

.product-unavailable {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.product-unavailable__photo {
    max-width: 320px;
}

.product-unavailable__photo img {
    height: auto;
    filter: grayscale(0.35) sepia(0.06);
}

.product-unavailable__text {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

@media (min-width: 760px) {
    .product-unavailable {
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 48px;
    }
}

/* 5. Basket ---------------------------------------------------------------- */

.basket-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 20px;
}

.basket-empty__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-style: var(--italic);
    line-height: var(--lh-heading);
}

.basket-empty__text {
    color: var(--body);
}

.basket-lines {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.basket-list {
    list-style: none;
    padding: 0;
    border-top: 1px solid var(--ink);
}

.basket-line {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px 16px;
    align-items: start;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
}

.basket-line--issue .basket-line__photo img {
    filter: grayscale(0.6);
    opacity: 0.7;
}

.basket-line__photo {
    padding: 6px;
}

.basket-line__photo img {
    height: auto;
}

.basket-line__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.basket-line__name {
    font-family: var(--font-name);
    font-weight: var(--weight-name);
    font-size: 19px;
    line-height: 1.25;
}

:root:lang(ar) .basket-line__name {
    font-size: 17px;
}

.basket-line__name a {
    color: var(--ink);
    text-decoration: none;
}

.basket-line__name a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.basket-line__unit {
    font-size: 14px;
    color: var(--taupe);
}

.basket-line__options {
    font-size: 14px;
    color: var(--body);
}

.basket-line__options-title {
    font-weight: 600;
}

.basket-line__options ul {
    margin: 0;
    padding-inline-start: 18px;
}

.basket-line__issue {
    padding: 8px 12px;
    background: var(--alert-bg);
    color: var(--bordeaux);
    font-size: 14px;
    font-weight: 600;
}

.basket-line__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-top: 4px;
}

/* A 44px target even for the short Arabic word; the negative margin keeps the text aligned with the line. */
.basket-line__remove-button {
    min-width: var(--target);
    min-height: var(--target);
    margin-inline-start: -8px;
    padding-inline: 8px;
    text-align: start;
    color: var(--taupe);
    font-size: 14px;
}

.basket-line__total {
    grid-column: 2;
    font-size: 18px;
    font-weight: 600;
    text-align: end;
}

@media (min-width: 1100px) {
    .basket-line {
        grid-template-columns: 120px minmax(0, 1fr) auto;
        gap: 12px 24px;
    }

    .basket-line__total {
        grid-column: auto;
    }

    .basket-line__name {
        font-size: 24px;
    }

    :root:lang(ar) .basket-line__name {
        font-size: 20px;
    }
}

.basket-continue {
    align-self: flex-start;
}

.basket-summary .summary__row > :last-child,
.basket-summary .summary__total > :last-child {
    text-align: end;
}

.basket-summary__nudge {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
}

/* 6. Content pages --------------------------------------------------------- */

.content-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

@media (min-width: 1100px) {
    .content-layout {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
        gap: 72px;
    }
}

.content-figure img {
    height: auto;
}

.content-body {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.content-body > * + * {
    margin-top: 0;
}

.content-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.content-section__title {
    font-family: var(--font-name);
    font-weight: var(--weight-name);
    font-size: 24px;
    line-height: 1.3;
    color: var(--ink);
}

:root:lang(ar) .content-section__title {
    font-size: 21px;
}

.content-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
}

.content-draft {
    max-width: 68ch;
    color: var(--body);
}

.delivery-rules {
    display: grid;
    gap: 28px;
}

@media (min-width: 760px) {
    .delivery-rules {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 56px;
    }
}

.delivery-rule {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--body);
}

.delivery-rule__title {
    font-family: var(--font-name);
    font-weight: var(--weight-name);
    font-size: 22px;
    line-height: 1.3;
    color: var(--ink);
}

:root:lang(ar) .delivery-rule__title {
    font-size: 20px;
}

.delivery-areas {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
}

.delivery-areas__title {
    font-size: var(--fs-h2);
}

.delivery-table-wrap {
    overflow-x: auto;
    background: var(--paper);
    border: 1px solid var(--line);
}

.delivery-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.delivery-table caption {
    padding: 14px 16px;
    text-align: start;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
}

.delivery-table th,
.delivery-table td {
    padding: 12px 16px;
    text-align: start;
    border-bottom: 1px solid var(--line);
}

.delivery-table thead th {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--track-s);
    text-transform: var(--upper);
    color: var(--taupe);
}

.delivery-table tbody th {
    font-weight: 500;
}

.delivery-table tbody tr:last-child > * {
    border-bottom: 0;
}

.delivery-table__amount {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.delivery-table th.delivery-table__amount,
.delivery-table td.delivery-table__amount {
    text-align: end;
}

.contact-grid {
    display: grid;
    gap: 20px;
}

@media (min-width: 760px) {
    .contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

.contact-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    background: var(--paper);
    border: 1px solid var(--line);
}

.contact-card__title {
    font-family: var(--font-name);
    font-weight: var(--weight-name);
    font-size: 22px;
    line-height: 1.3;
}

:root:lang(ar) .contact-card__title {
    font-size: 20px;
}

.contact-card__text {
    color: var(--body);
}

.contact-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.contact-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.contact-list a {
    display: inline-flex;
    align-items: center;
    min-height: var(--target);
    color: var(--ink);
}

.contact-list a:hover {
    color: var(--bordeaux);
}

.contact-list__label {
    min-width: 7em;
    font-size: 14px;
    color: var(--taupe);
}

/* 7. vCard ----------------------------------------------------------------- */

.vcard-page {
    align-items: center;
}

.vcard {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 24px;
    text-align: center;
    background: var(--paper);
    border: 1px solid var(--line);
}

.vcard__mark {
    width: 170px;
}

.vcard__name {
    font-family: var(--font-name);
    font-weight: var(--weight-name);
    font-size: 30px;
    line-height: 1.25;
}

.vcard__title {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--track);
    text-transform: var(--upper);
    color: var(--bordeaux);
}

.vcard__list {
    list-style: none;
    width: 100%;
    padding: 12px 0;
    border-block: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 15px;
}

.vcard__list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 10px;
    min-height: var(--target);
}

.vcard__list a {
    display: inline-flex;
    align-items: center;
    min-height: var(--target);
    color: var(--ink);
}

.vcard__label {
    color: var(--taupe);
    font-size: 14px;
}

/* 8. Print ----------------------------------------------------------------- */

@media print {
    .sf-toast,
    .app-banner,
    .shop-aside,
    .shop-chips,
    .shop-refine,
    .shop-search,
    .product-form,
    .basket-line__controls {
        display: none;
    }
}