:root {
    --paper: #F7F5F1;
    --ivory: #EFEAE1;
    --sand: #E2DACB;
    --stone: #B9B0A1;
    --bronze: #8C7247;
    --charcoal: #2E2A25;
    --ink: #1B1815;
    --rule: #DCD5C8;

    --display: "Playfair Display", Georgia, serif;
    --text: "Archivo", -apple-system, "Segoe UI", sans-serif;

    --t-xs: 0.75rem;
    --t-sm: 0.8125rem;
    --t-base: 1.0625rem;
    --t-lg: 1.3125rem;
    --t-xl: 1.75rem;
    --t-2xl: 2.375rem;
    --t-3xl: 3.25rem;
    --t-4xl: 4.5rem;

    --s1: 0.5rem;
    --s2: 1rem;
    --s3: 1.5rem;
    --s4: 2rem;
    --s5: 3rem;
    --s6: 4rem;
    --s7: 6rem;
    --s8: 8rem;
    --s9: 10rem;

    --shell: 1360px;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--charcoal);
    font-family: var(--text);
    font-size: var(--t-base);
    font-weight: 400;
    line-height: 1.65;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

button {
    font: inherit;
}

:focus-visible {
    outline: 2px solid var(--bronze);
    outline-offset: 3px;
}

h1,
h2,
h3 {
    font-family: var(--display);
    font-weight: 500;
    line-height: 1.12;
    margin: 0;
}

p {
    margin: 0;
}

.shell {
    width: min(100% - 4rem, var(--shell));
    margin-inline: auto;
}

@media (max-width: 640px) {
    .shell {
        width: min(100% - 3rem, var(--shell));
    }
}
/* ============================================================
   HEADER
   ============================================================ */

.utility {
    background: var(--ivory);
    border-bottom: 1px solid var(--rule);
    font-size: var(--t-xs);
    color: #7B7369;
}

.utility__in {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
}

.utility__where {
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.utility__where span + span {
    border-inline-start: 1px solid var(--rule);
    padding-inline-start: var(--s2);
}

.masthead {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--ivory);
    border-bottom: 1px solid var(--rule);
}

.masthead__in {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--s3);
    padding-block: var(--s3);
}

.wordmark {
    font-family: var(--display);
    font-size: clamp(1.75rem, 2.9vw, 2.6rem);
    font-weight: 500;
    letter-spacing: .14em;
    line-height: 1;
    white-space: nowrap;
    text-indent: .14em;
}

.tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s3);
}

.tools a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    font-size: var(--t-sm);
}

.tools a:hover {
    color: var(--bronze);
}

.cart__count {
    font-size: var(--t-xs);
    color: var(--bronze);
}

.nav {
    display: flex;
    justify-content: center;
    gap: var(--s5);
    padding-bottom: var(--s2);
}

.nav a {
    position: relative;
    padding-block: .35rem;
    font-size: 1.0625rem;
    font-weight: 400;
}

.nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--bronze);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s var(--ease);
}

.nav a:hover::after {
    transform: scaleX(1);
}

.burger {
    display: inline-flex;
    align-items: center;
    visibility: hidden;
    background: none;
    border: 0;
    cursor: pointer;
    min-height: 44px;
}
/* ============================================================
   RESPONSIVE HEADER
   ============================================================ */

@media (max-width: 900px) {
    .nav,
    .tools__desk {
        display: none;
    }

    .burger {
    visibility: visible;
}

    .utility__where {
        display: none;
    }

    .utility__in {
        justify-content: center;
    }

    .masthead__in {
        grid-template-columns: 1fr auto 1fr;
        padding-block: var(--s2);
    }
}

@media (max-width: 560px) {
    .wordmark {
        font-size: 1.3rem;
        letter-spacing: .09em;
        text-indent: .09em;
    }
}
/* ============================================================
   FOOTER
   ============================================================ */

.footer {
    margin-top: var(--s8);
    padding-block: var(--s6) var(--s3);
    background: var(--ink);
    color: var(--paper);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
    gap: var(--s5);
    padding-bottom: var(--s6);
}

.footer__mark {
    font-family: var(--display);
    font-size: var(--t-xl);
    letter-spacing: .08em;
    margin-bottom: var(--s2);
}

.footer h3 {
    font-family: var(--text);
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: var(--s2);
}

.footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer li + li {
    margin-top: .6rem;
}

.footer a {
    color: var(--paper);
}

.footer a:hover {
    color: var(--sand);
}

.footer__text {
    max-width: 28rem;
    color: var(--stone);
    font-size: var(--t-sm);
}

.signup {
    display: flex;
    margin-top: var(--s2);
    border-bottom: 1px solid var(--stone);
}

.signup input {
    flex: 1;
    min-width: 0;
    padding: .8rem 0;
    border: 0;
    background: transparent;
    color: var(--paper);
    font: inherit;
}

.signup input::placeholder {
    color: var(--stone);
}

.signup input:focus {
    outline: none;
}

.signup button {
    border: 0;
    background: transparent;
    color: var(--paper);
    cursor: pointer;
    padding-inline: var(--s2);
}

.signup button:hover {
    color: var(--sand);
}

.colophon {
    display: flex;
    justify-content: space-between;
    gap: var(--s3);
    padding-top: var(--s3);
    border-top: 1px solid #3C3731;
    color: var(--stone);
    font-size: var(--t-xs);
}

@media (max-width: 900px) {
    .footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--s4);
    }

    .colophon {
        flex-direction: column;
    }
}
/* ============================================================
   HOMEPAGE SHARED ELEMENTS
   ============================================================ */

.rule {
    height: 1px;
    background: var(--rule);
    border: 0;
    margin: 0;
}

.meta {
    font-size: var(--t-sm);
    font-weight: 400;
    letter-spacing: .1em;
    color: var(--bronze);
}

.note {
    font-size: var(--t-sm);
    color: #736C61;
}

.accession {
    font-size: var(--t-xs);
    letter-spacing: .14em;
    color: var(--stone);
}

.price {
    font-family: var(--display);
    font-size: var(--t-lg);
    font-weight: 500;
}

.btn {
    display: inline-block;
    padding: 1rem 2.25rem;
    font-size: var(--t-sm);
    font-weight: 400;
    letter-spacing: .08em;
    border: 1px solid transparent;
    transition:
        background .4s var(--ease),
        color .4s var(--ease),
        border-color .4s var(--ease);
}

.btn--solid {
    background: var(--charcoal);
    color: var(--ivory);
}

.btn--solid:hover {
    background: var(--bronze);
}

.btn--onDark {
    border-color: rgba(239, 234, 225, .35);
    color: var(--ivory);
}

.btn--onDark:hover {
    background: var(--ivory);
    color: var(--ink);
    border-color: var(--ivory);
}

.link {
    border-bottom: 1px solid var(--bronze);
    padding-bottom: 2px;
    font-size: var(--t-sm);
}

.link:hover {
    color: var(--bronze);
}


/* ============================================================
   IMAGE PLATES
   ============================================================ */

.plate {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--sand);
}

.plate--tall {
    aspect-ratio: 3 / 4;
}

.plate img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}

.card:hover .plate img,
.hero__plate a:hover img {
    transform: scale(1.025);
}


/* ============================================================
   HOMEPAGE HERO
   ============================================================ */

.hero {
    padding-block: var(--s7) var(--s6);
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--s7);
    align-items: center;
}

.hero__standfirst {
    margin-bottom: var(--s4);
    display: flex;
    align-items: baseline;
    gap: var(--s2);
}

.hero__standfirst .rule {
    flex: 1;
}

.hero h1 {
    font-size: clamp(2.5rem, 5.2vw, var(--t-4xl));
    margin-block: var(--s2) var(--s3);
}

.hero__desc {
    max-width: 46ch;
    margin-bottom: var(--s4);
}

.hero__record {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s5);
    padding-block: var(--s3);
    border-block: 1px solid var(--rule);
    margin-bottom: var(--s4);
}

.hero__record dt {
    font-size: var(--t-xs);
    letter-spacing: .13em;
    color: var(--stone);
    margin-bottom: .35rem;
}

.hero__record dd {
    margin: 0;
    font-size: var(--t-sm);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    align-items: center;
}


/* ============================================================
   HOMEPAGE SECTIONS
   ============================================================ */

.band {
    padding-block: var(--s8);
}

.band--ivory {
    background: var(--ivory);
}

.band--ink {
    background: var(--ink);
    color: var(--ivory);
}

.head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s4);
    flex-wrap: wrap;
    margin-bottom: var(--s5);
}

.head h2 {
    font-size: clamp(1.9rem, 3.4vw, var(--t-2xl));
}

.head__aside {
    display: flex;
    align-items: baseline;
    gap: var(--s3);
}


/* ============================================================
   PRODUCT CARDS
   ============================================================ */

.entries {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s5) var(--s4);
}

.card {
    display: block;
}

.card__body {
    padding-top: var(--s3);
}

.card__topline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s2);
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--rule);
}

.card__name {
    font-family: var(--display);
    font-size: var(--t-lg);
    font-weight: 500;
    line-height: 1.25;
}

.card .note {
    margin-top: var(--s2);
}

.card__foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s2);
    margin-top: var(--s2);
}

span.single {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--t-xs);
    letter-spacing: .08em;
    color: var(--bronze);
}

span.single::before {
    content: "";
    width: 5px;
    height: 5px;
    background: var(--bronze);
    transform: rotate(45deg);
}


/* ============================================================
   ONE OF ONE SECTION
   ============================================================ */

.rarity__simple {
    max-width: 760px;
}

.rarity__simple h2 {
    color: var(--ivory);
    font-size: clamp(2.1rem, 4.4vw, var(--t-3xl));
    margin-block: var(--s2) var(--s3);
}

.rarity__simple p {
    max-width: 48ch;
    color: #C6BEB2;
    margin-bottom: var(--s4);
}

.rarity .meta {
    color: #A98F5E;
}


/* ============================================================
   HOMEPAGE RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
    .hero__grid {
        gap: var(--s5);
    }
}

@media (max-width: 900px) {
    .hero {
        padding-block: var(--s4) var(--s5);
    }

    .hero__grid {
        grid-template-columns: 1fr;
    }

    .hero__plate {
        order: -1;
    }

    .entries {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    .hero__actions {
        align-items: stretch;
    }

    .hero__actions .btn {
        text-align: center;
    }

    .entries {
        grid-template-columns: 1fr;
    }

    .band {
        padding-block: var(--s6);
    }
}
/* ============================================================
   SHOP / CATALOGUE
   ============================================================ */

.shopHead {
    padding-block: var(--s6) var(--s5);
}

.shopHead__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    gap: var(--s6);
    align-items: end;
}

.shopHead h1 {
    font-size: clamp(2.5rem, 5vw, var(--t-3xl));
}

.shopHead__lede {
    max-width: 46ch;
    margin-top: var(--s3);
    color: #6E665B;
}

.shopHead__count {
    display: flex;
    align-items: baseline;
    gap: var(--s2);
    padding-bottom: .4rem;
}

.shopHead__count .num {
    font-family: var(--display);
    font-size: var(--t-2xl);
    line-height: 1;
}


/* ============================================================
   CATEGORY CHIPS
   ============================================================ */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
    padding-block: var(--s3);
    border-block: 1px solid var(--rule);
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .6rem 1.15rem;
    border: 1px solid transparent;
    color: #6E665B;
    font-size: var(--t-sm);
    transition:
        color .3s var(--ease),
        border-color .3s var(--ease),
        background .3s var(--ease);
}

.chip:hover {
    color: var(--charcoal);
    border-color: var(--rule);
}

.chip[aria-current="page"] {
    background: var(--charcoal);
    color: var(--ivory);
}

.chip .n {
    margin-inline-start: .5rem;
    font-size: var(--t-xs);
    opacity: .6;
}


/* ============================================================
   SHOP BODY
   ============================================================ */

.shopCatalogue {
    padding-block: var(--s5) var(--s8);
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s3);
    flex-wrap: wrap;
    padding-bottom: var(--s3);
    margin-bottom: var(--s4);
    border-bottom: 1px solid var(--rule);
}

.toolbar__count {
    color: #736C61;
    font-size: var(--t-sm);
}

.sort {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--stone);
    font-size: var(--t-xs);
}

.sort .woocommerce-ordering {
    margin: 0;
}

.sort select {
    min-height: 44px;
    padding: .45rem .2rem;
    border: 0;
    border-bottom: 1px solid var(--rule);
    background: transparent;
    color: var(--charcoal);
    font: inherit;
    cursor: pointer;
}

.sort select:focus {
    outline: none;
    border-color: var(--bronze);
}


/* ============================================================
   SHOP PRODUCT GRID
   ============================================================ */

.shopGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s6) var(--s4);
}

.shopCard {
    min-width: 0;
}

.shopCard__link {
    display: block;
}

.shopCard__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--sand);
}

.shopCard__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}

.shopCard:hover .shopCard__image img {
    transform: scale(1.025);
}

.shopCard__state {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: .55rem 1.1rem;
    background: var(--ivory);
    color: var(--charcoal);
    font-size: var(--t-xs);
    letter-spacing: .12em;
}

.shopCard__body {
    padding-top: var(--s3);
}

.shopCard__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s2);
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--rule);
}

.shopCard__name {
    font-family: var(--display);
    font-size: var(--t-lg);
    font-weight: 500;
    line-height: 1.25;
}

.shopCard__category {
    margin-top: .8rem;
    color: #6E665B;
    font-family: var(--display);
    font-style: italic;
    font-size: 1rem;
}

.shopCard__category a:hover {
    color: var(--bronze);
}

.shopCard__desc {
    margin-top: var(--s2);
    color: #736C61;
    font-size: var(--t-sm);
}

.shopCard__foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s2);
    margin-top: var(--s2);
}

.gone {
    font-size: var(--t-xs);
    color: var(--stone);
}


/* ============================================================
   SOLD PRODUCT
   ============================================================ */

.shopCard--sold .shopCard__image {
    background: #E9E4DA;
}

.shopCard--sold .shopCard__image img {
    opacity: .65;
}

.shopCard--sold .shopCard__name,
.shopCard--sold .price {
    color: #8A8378;
}

.shopCard--sold:hover .shopCard__image img {
    transform: none;
}


/* ============================================================
   SHOP PAGINATION
   ============================================================ */

.shopPagination {
    display: flex;
    justify-content: center;
    gap: var(--s1);
    margin-top: var(--s7);
}

.shopPagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding-inline: .8rem;
    border: 1px solid var(--rule);
    font-size: var(--t-sm);
}

.shopPagination .page-numbers:hover,
.shopPagination .page-numbers.current {
    background: var(--charcoal);
    color: var(--ivory);
    border-color: var(--charcoal);
}


/* ============================================================
   EMPTY SHOP
   ============================================================ */

.shopEmpty {
    padding-block: var(--s7);
    text-align: center;
    border-block: 1px solid var(--rule);
}

.shopEmpty h2 {
    font-size: var(--t-2xl);
    margin-bottom: var(--s2);
}

.shopEmpty p {
    max-width: 40ch;
    margin: 0 auto var(--s3);
    color: #736C61;
}


/* ============================================================
   SHOP RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .shopHead__in {
        grid-template-columns: 1fr;
        gap: var(--s3);
    }

    .shopHead__count {
        padding-bottom: 0;
    }

    .shopGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s5) var(--s3);
    }

    .chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .chips::-webkit-scrollbar {
        display: none;
    }

    .chip {
        flex: none;
    }
}

@media (max-width: 640px) {

    .shopHead {
        padding-block: var(--s4) var(--s3);
    }

    .shopGrid {
        gap: var(--s4) var(--s2);
    }

    .shopCard__desc {
        display: none;
    }

    .shopCard__name {
        font-size: 1.05rem;
    }

    .shopCard .price {
        font-size: 1.05rem;
    }
}

@media (max-width: 420px) {

    .shopGrid {
        grid-template-columns: 1fr;
    }

    .shopCard__desc {
        display: block;
    }

    .shopCard__name {
        font-size: var(--t-lg);
    }
}
/* ============================================================
   PRODUCT DETAIL PAGE
   ============================================================ */

/* ---------- breadcrumb ---------- */

.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding-block: var(--s3);
    color: var(--stone);
    font-size: var(--t-xs);
    letter-spacing: .06em;
}

.crumbs a {
    color: #736C61;
}

.crumbs a:hover {
    color: var(--bronze);
}

.crumbs .sep {
    color: var(--rule);
}

.crumbs [aria-current="page"] {
    color: var(--charcoal);
}


/* ============================================================
   MAIN PRODUCT LAYOUT
   ============================================================ */

.pdp {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--s7);
    align-items: start;
    padding-block: var(--s4) var(--s8);
}

.pdpRail {
    position: sticky;
    top: 8.5rem;
}


/* ============================================================
   PRODUCT GALLERY
   ============================================================ */

.gmain {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--sand);
}

.gslide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity .55s var(--ease),
        visibility .55s var(--ease);
}

.gslide.is-active {
    opacity: 1;
    visibility: visible;
}

.gslide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gthumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s2);
    margin-top: var(--s2);
}

.gthumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1px solid transparent;
    background: var(--sand);
    cursor: pointer;
}

.gthumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .7;
    transition: opacity .3s var(--ease);
}

.gthumb:hover img,
.gthumb[aria-current="true"] img {
    opacity: 1;
}

.gthumb[aria-current="true"] {
    border-color: var(--charcoal);
}


/* sold product gets a quieter gallery */

.product-page.is-sold .gmain,
.product-page.is-sold .gthumb {
    background: #E9E4DA;
}

.product-page.is-sold .gslide img,
.product-page.is-sold .gthumb img {
    opacity: .65;
}


/* ============================================================
   PRODUCT INFORMATION
   ============================================================ */

.pdp__cat {
    display: inline-block;
    margin-bottom: var(--s2);
}

.pdp h1 {
    max-width: 12ch;
    margin-bottom: var(--s2);
    font-size: clamp(2.1rem, 4vw, var(--t-2xl));
}

.pdp__ref {
    display: block;
    margin-bottom: var(--s4);
}

.pdp__avail {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s2) var(--s3);
    padding-block: var(--s3);
    border-block: 1px solid var(--rule);
    margin-bottom: var(--s4);
}

.pdp__price {
    font-family: var(--display);
    font-size: var(--t-xl);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.product-page.is-sold .pdp__price {
    color: #8A8378;
}

.pdp__lead {
    max-width: 44ch;
    margin-bottom: var(--s4);
    color: #736C61;
}

.pdp__lead p {
    margin: 0;
}

.pdp__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    margin-bottom: var(--s4);
    color: #736C61;
    font-size: var(--t-sm);
}

.pdp__facts span + span {
    padding-inline-start: var(--s3);
    border-inline-start: 1px solid var(--rule);
}


/* ============================================================
   PURCHASE AREA
   ============================================================ */

.pdp__action {
    margin-top: var(--s4);
}

.btn--line {
    border-color: var(--stone);
    color: var(--charcoal);
}

.btn--line:hover {
    border-color: var(--charcoal);
    background: var(--charcoal);
    color: var(--ivory);
}


/* sold archive notice */

.soldNotice {
    margin-bottom: var(--s3);
    padding: var(--s4);
    border: 1px solid var(--rule);
    background: var(--ivory);
}

.soldNotice__title {
    display: block;
    margin-bottom: var(--s2);
    font-family: var(--display);
    font-size: var(--t-lg);
}

.soldNotice p {
    max-width: 38ch;
    margin: 0;
    color: #736C61;
}


/* ============================================================
   LIVE WOO ADD TO CART
   ============================================================ */

.pdp__buy form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin: 0;
}

.pdp__buy .quantity {
    margin: 0 !important;
}

.pdp__buy .qty {
    width: 64px;
    min-height: 52px;
    border: 1px solid var(--rule);
    background: transparent;
    text-align: center;
    font: inherit;
}

.pdp__buy .single_add_to_cart_button {
    min-height: 52px;
    padding: 1rem 2.25rem;
    border: 0;
    background: var(--charcoal);
    color: var(--ivory);
    font: inherit;
    font-size: var(--t-sm);
    cursor: pointer;
}

.pdp__buy .single_add_to_cart_button:hover {
    background: var(--bronze);
}

.pdp__quantity-note {
    margin-top: var(--s2);
    color: var(--stone);
    font-size: var(--t-xs);
}


/* ============================================================
   CATALOGUE ENTRY
   ============================================================ */

.productEntry__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--s7);
    align-items: start;
}

.productEntry__head {
    margin-bottom: var(--s4);
}

.productEntry__description {
    max-width: 56ch;
}

.productEntry__description p + p {
    margin-top: var(--s3);
}


/* ============================================================
   SPECIFICATION TABLE
   ============================================================ */

.spec {
    margin: 0;
}

.spec__row {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: var(--s2);
    padding-block: var(--s2);
    border-bottom: 1px solid var(--rule);
}

.spec__row:first-child {
    border-top: 1px solid var(--rule);
}

.spec dt {
    padding-top: .2rem;
    color: var(--stone);
    font-size: var(--t-xs);
    letter-spacing: .1em;
}

.spec dd {
    margin: 0;
    font-size: var(--t-sm);
}


/* ============================================================
   RELATED PRODUCTS
   ============================================================ */

.productRelated {
    background: var(--paper);
}


/* ============================================================
   PRODUCT PAGE RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {

    .pdp {
        gap: var(--s5);
    }

    .productEntry__grid {
        gap: var(--s5);
    }

    .spec__row {
        grid-template-columns: 9rem minmax(0, 1fr);
    }
}

@media (max-width: 900px) {

    .pdp {
        grid-template-columns: 1fr;
        gap: var(--s4);
        padding-block: var(--s2) var(--s6);
    }

    .pdpRail {
        position: static;
    }

    .productEntry__grid {
        grid-template-columns: 1fr;
        gap: var(--s5);
    }

    .gmain {
        aspect-ratio: 4 / 5;
    }

    .gthumbs {
        grid-template-columns: repeat(4, 1fr);
    }

    .pdp h1 {
        max-width: none;
    }
}

@media (max-width: 640px) {

    .spec__row {
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    .pdp__facts {
        gap: var(--s2);
    }

    .pdp__facts span {
        flex-basis: 100%;
    }

    .pdp__facts span + span {
        padding-inline-start: 0;
        border-inline-start: 0;
    }

    .pdp__buy form.cart {
        align-items: stretch;
    }

    .pdp__buy .single_add_to_cart_button {
        flex: 1;
    }
}
/* SINGLE PRODUCT - ADD TO CART BUTTON */
.single-product .single_add_to_cart_button,
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart .single_add_to_cart_button.button {
    background: #1f1916 !important;
    color: #f6f0e8 !important;
    border: 1px solid #1f1916 !important;
    border-radius: 0 !important;
    padding: 16px 34px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
    min-height: auto !important;
}

.single-product .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button.button:hover {
    background: transparent !important;
    color: #1f1916 !important;
    border-color: #1f1916 !important;
}

.single-product .single_add_to_cart_button:focus,
.woocommerce div.product form.cart .button:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(31, 25, 22, 0.12) !important;
}

/* PRODUCT PAGE CART AREA */
.woocommerce div.product form.cart {
    margin-top: 24px !important;
}

.woocommerce div.product form.cart .quantity {
    margin-inline-end: 14px !important;
}

.single-product .product_meta,
.single-product .posted_in,
.single-product .sku_wrapper,
.single-product .tagged_as {
    color: #8f836f;
}

/* OPTIONAL - SMALL TEXT UNDER BUTTON */
.single-product .foundnorth-note,
.single-product .one-piece-note {
    margin-top: 12px;
    color: #9a8e7d;
    font-size: 14px;
}
/* ============================================================
   CART PAGE — WOOCOMMERCE CART BLOCK
   ============================================================ */

.commercePageHead {
    padding-block: var(--s6) var(--s4);
}

.commercePageHead h1 {
    margin-top: var(--s1);
    font-size: clamp(2.5rem, 5vw, var(--t-3xl));
}

.woocommerce-cart .page-content__inner {
    padding-bottom: var(--s8);
}


/* main cart layout */

.woocommerce-cart .wp-block-woocommerce-cart {
    margin: 0;
}

.woocommerce-cart .wc-block-cart {
    gap: var(--s6);
}

.woocommerce-cart .wc-block-cart-items {
    border: 0 !important;
}


/* product table headings */

.woocommerce-cart .wc-block-cart-items thead th {
    padding-block: var(--s2) !important;
    border-bottom: 1px solid var(--rule) !important;
    color: var(--stone);
    font-size: var(--t-xs) !important;
    font-weight: 400 !important;
    letter-spacing: .08em;
}


/* individual antique */

.woocommerce-cart .wc-block-cart-items__row td {
    padding-block: var(--s3) !important;
    border-bottom: 1px solid var(--rule) !important;
}

.woocommerce-cart .wc-block-cart-item__image {
    width: 120px !important;
}

.woocommerce-cart .wc-block-cart-item__image img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--sand);
}

.woocommerce-cart .wc-block-components-product-name {
    font-family: var(--display) !important;
    font-size: var(--t-lg) !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
}

.woocommerce-cart .wc-block-components-product-name:hover {
    color: var(--bronze);
}

.woocommerce-cart .wc-block-components-product-price {
    font-family: var(--display);
    font-size: var(--t-lg);
}

.woocommerce-cart .wc-block-components-product-metadata {
    color: #736C61;
    font-size: var(--t-sm);
}


/* remove item */

.woocommerce-cart .wc-block-cart-item__remove-link {
    color: #8A8378 !important;
    font-size: var(--t-xs) !important;
    text-decoration: none !important;
}

.woocommerce-cart .wc-block-cart-item__remove-link:hover {
    color: var(--charcoal) !important;
}


/* ============================================================
   CART TOTALS
   ============================================================ */

.woocommerce-cart .wc-block-cart__sidebar {
    padding-inline-start: var(--s4);
}

.woocommerce-cart .wc-block-cart__totals-title {
    padding-bottom: var(--s2) !important;
    border-bottom: 1px solid var(--rule);
    font-family: var(--text) !important;
    font-size: var(--t-sm) !important;
    font-weight: 500 !important;
    letter-spacing: .06em;
}

.woocommerce-cart .wc-block-components-totals-wrapper {
    padding-block: var(--s3) !important;
    border-bottom: 1px solid var(--rule) !important;
}

.woocommerce-cart .wc-block-components-totals-item {
    padding: 0 !important;
}

.woocommerce-cart .wc-block-components-totals-item__label {
    font-size: var(--t-sm);
}

.woocommerce-cart .wc-block-components-totals-item__value {
    font-family: var(--display);
}

.woocommerce-cart .wc-block-components-totals-footer-item {
    padding-block: var(--s3) !important;
}

.woocommerce-cart
.wc-block-components-totals-footer-item
.wc-block-components-totals-item__label,
.woocommerce-cart
.wc-block-components-totals-footer-item
.wc-block-components-totals-item__value {
    font-size: var(--t-lg) !important;
}


/* coupon */

.woocommerce-cart .wc-block-components-totals-coupon__button {
    color: var(--charcoal) !important;
}

.woocommerce-cart .wc-block-components-totals-coupon__button:hover {
    color: var(--bronze) !important;
}


/* checkout button */

.woocommerce-cart .wc-block-cart__submit-container {
    margin-top: var(--s3);
}

.woocommerce-cart .wc-block-cart__submit-button {
    min-height: 58px !important;
    border: 1px solid var(--charcoal) !important;
    border-radius: 0 !important;
    background: var(--charcoal) !important;
    color: var(--ivory) !important;
    font-size: var(--t-sm) !important;
    letter-spacing: .06em;
    text-decoration: none !important;
    box-shadow: none !important;
    transition:
        background .3s var(--ease),
        color .3s var(--ease);
}

.woocommerce-cart .wc-block-cart__submit-button:hover {
    background: transparent !important;
    color: var(--charcoal) !important;
}


/* ============================================================
   EMPTY CART
   ============================================================ */

.woocommerce-cart .wc-block-cart__empty-cart__title {
    font-family: var(--display);
    font-size: var(--t-2xl);
    font-weight: 500;
}


/* ============================================================
   CART RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .woocommerce-cart .wc-block-cart__sidebar {
        padding-inline-start: 0;
    }

    .woocommerce-cart .wc-block-cart-item__image {
        width: 100px !important;
    }
}

@media (max-width: 640px) {

    .commercePageHead {
        padding-block: var(--s4) var(--s3);
    }

    .woocommerce-cart .wc-block-cart-item__image {
        width: 86px !important;
    }

    .woocommerce-cart .wc-block-components-product-name {
        font-size: 1.1rem !important;
    }
}
/* ============================================================
   CART DESKTOP LAYOUT FIX
   ============================================================ */

@media (min-width: 901px) {

    .woocommerce-cart .wc-block-cart {
        display: grid !important;
        grid-template-columns: minmax(0, 1.65fr) minmax(320px, .85fr) !important;
        gap: var(--s6) !important;
        align-items: start !important;
    }

    .woocommerce-cart .wc-block-cart__main {
        width: 100% !important;
        max-width: none !important;
        padding-inline-end: 0 !important;
    }

    .woocommerce-cart .wc-block-cart__sidebar {
        width: 100% !important;
        max-width: none !important;
        padding-inline-start: 0 !important;
        position: sticky;
        top: 9rem;
    }
}
/* ============================================================
   CHECKOUT PAGE — WOOCOMMERCE CHECKOUT BLOCK
   ============================================================ */

.woocommerce-checkout .page-content__inner {
    padding-bottom: var(--s8);
}

.woocommerce-checkout .wp-block-woocommerce-checkout {
    margin: 0;
}


/* ============================================================
   CHECKOUT LAYOUT
   ============================================================ */

.woocommerce-checkout .wc-block-checkout {
    gap: var(--s6);
}

.woocommerce-checkout .wc-block-checkout__main {
    padding-inline-end: 0 !important;
}

.woocommerce-checkout .wc-block-checkout__sidebar {
    padding-inline-start: var(--s4);
}


/* ============================================================
   SECTION HEADINGS
   ============================================================ */

.woocommerce-checkout
.wc-block-components-checkout-step__heading {
    margin-bottom: var(--s2);
}

.woocommerce-checkout
.wc-block-components-checkout-step__title {
    font-family: var(--display) !important;
    font-size: var(--t-xl) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}

.woocommerce-checkout
.wc-block-components-checkout-step__description {
    color: #736C61;
    font-size: var(--t-sm);
}


/* ============================================================
   CHECKOUT FORM FIELDS
   ============================================================ */

.woocommerce-checkout
.wc-block-components-text-input input,
.woocommerce-checkout
.wc-block-components-combobox-control input {
    min-height: 54px !important;
    border: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--charcoal) !important;
    box-shadow: none !important;
    font-family: var(--text) !important;
}

.woocommerce-checkout
.wc-block-components-text-input input:focus,
.woocommerce-checkout
.wc-block-components-combobox-control input:focus {
    border-color: var(--bronze) !important;
    box-shadow: 0 0 0 1px var(--bronze) !important;
}

.woocommerce-checkout
.wc-block-components-text-input label,
.woocommerce-checkout
.wc-block-components-combobox-control label {
    color: #736C61 !important;
}


/* ============================================================
   ADDRESS + SHIPPING + PAYMENT PANELS
   ============================================================ */

.woocommerce-checkout
.wc-block-components-address-card,
.woocommerce-checkout
.wc-block-components-radio-control-accordion-option,
.woocommerce-checkout
.wc-block-components-radio-control__option {
    border-radius: 0 !important;
}

.woocommerce-checkout
.wc-block-components-address-card {
    border-color: var(--rule) !important;
    background: transparent !important;
}

.woocommerce-checkout
.wc-block-components-radio-control-accordion-option {
    border-color: var(--rule) !important;
    background: transparent !important;
}

.woocommerce-checkout
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    border-color: var(--charcoal) !important;
    box-shadow: none !important;
}


/* ============================================================
   CHECKBOXES + RADIO BUTTONS
   ============================================================ */

.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"] {
    accent-color: var(--charcoal);
}


/* ============================================================
   ORDER SUMMARY
   ============================================================ */

.woocommerce-checkout .wc-block-checkout__sidebar {
    border: 0 !important;
}

.woocommerce-checkout .wc-block-components-sidebar-layout {
    gap: var(--s6);
}

.woocommerce-checkout .wc-block-components-order-summary {
    border: 1px solid var(--rule);
    border-radius: 0 !important;
    padding: var(--s3);
}

.woocommerce-checkout
.wc-block-components-order-summary__button-text {
    font-family: var(--display);
    font-size: var(--t-xl);
}

.woocommerce-checkout
.wc-block-components-order-summary-item__description
.wc-block-components-product-name {
    font-family: var(--display);
    font-size: var(--t-base);
    font-weight: 500;
}

.woocommerce-checkout
.wc-block-components-order-summary-item__total-price {
    font-family: var(--display);
}

.woocommerce-checkout
.wc-block-components-totals-wrapper {
    border-top: 1px solid var(--rule) !important;
}

.woocommerce-checkout
.wc-block-components-totals-footer-item
.wc-block-components-totals-item__label,
.woocommerce-checkout
.wc-block-components-totals-footer-item
.wc-block-components-totals-item__value {
    font-size: var(--t-lg) !important;
}

.woocommerce-checkout
.wc-block-components-totals-footer-item
.wc-block-components-totals-item__value {
    font-family: var(--display);
}


/* ============================================================
   PLACE ORDER BUTTON
   ============================================================ */

.woocommerce-checkout
.wc-block-components-checkout-place-order-button {
    min-height: 58px !important;
    border: 1px solid var(--charcoal) !important;
    border-radius: 0 !important;
    background: var(--charcoal) !important;
    color: var(--ivory) !important;
    box-shadow: none !important;
    font-family: var(--text) !important;
    font-size: var(--t-sm) !important;
    letter-spacing: .06em;
    transition:
        background .3s var(--ease),
        color .3s var(--ease);
}

.woocommerce-checkout
.wc-block-components-checkout-place-order-button:hover {
    background: transparent !important;
    color: var(--charcoal) !important;
}


/* ============================================================
   CHECKOUT LINKS
   ============================================================ */

.woocommerce-checkout .wc-block-components-button__text,
.woocommerce-checkout a {
    text-decoration-thickness: 1px;
}

.woocommerce-checkout
.wc-block-components-checkout-return-to-cart-button {
    color: #736C61;
}

.woocommerce-checkout
.wc-block-components-checkout-return-to-cart-button:hover {
    color: var(--bronze);
}


/* ============================================================
   CHECKOUT RESPONSIVE
   ============================================================ */

@media (min-width: 901px) {

    .woocommerce-checkout .wc-block-checkout {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(340px, .75fr) !important;
        gap: var(--s6) !important;
        align-items: start;
    }

    .woocommerce-checkout .wc-block-checkout__sidebar {
        width: 100% !important;
        padding-inline-start: 0 !important;
        position: sticky;
        top: 9rem;
    }
}

@media (max-width: 900px) {

    .woocommerce-checkout .wc-block-checkout__sidebar {
        padding-inline-start: 0;
    }
}

@media (max-width: 640px) {

    .woocommerce-checkout
    .wc-block-components-checkout-step__title {
        font-size: 1.5rem !important;
    }

    .woocommerce-checkout
    .wc-block-components-order-summary {
        padding: var(--s2);
    }
}
/* ============================================================
   CHECKOUT WIDTH FIX
   ============================================================ */

.woocommerce-checkout .page-content__inner,
.woocommerce-checkout .wp-block-woocommerce-checkout,
.woocommerce-checkout .wc-block-checkout,
.woocommerce-checkout .wc-block-components-sidebar-layout {
    width: 100% !important;
    max-width: none !important;
}

/* Undo the grid we accidentally put on the wrong element */
.woocommerce-checkout .wc-block-checkout {
    display: block !important;
}

@media (min-width: 901px) {

    .woocommerce-checkout .wc-block-components-sidebar-layout {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(360px, .75fr) !important;
        gap: var(--s6) !important;
        align-items: start !important;
    }

    .woocommerce-checkout .wc-block-components-main,
    .woocommerce-checkout .wc-block-components-sidebar,
    .woocommerce-checkout .wc-block-checkout__main,
    .woocommerce-checkout .wc-block-checkout__sidebar {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-inline-start: 0 !important;
        padding-inline-end: 0 !important;
    }

    .woocommerce-checkout .wc-block-checkout__sidebar {
        position: sticky;
        top: 9rem;
    }
}
/* ============================================================
   CHECKOUT SIDE SPACING FIX
   ============================================================ */

.woocommerce-checkout .page-content__inner {
    width: min(100% - 4rem, var(--shell)) !important;
    max-width: var(--shell) !important;
    margin-inline: auto !important;
}

@media (max-width: 640px) {
    .woocommerce-checkout .page-content__inner {
        width: min(100% - 3rem, var(--shell)) !important;
    }
}
/* ============================================================
   MY ACCOUNT — WOOCOMMERCE
   ============================================================ */

.woocommerce-account .accountPageHead {
    padding-bottom: var(--s3);
}

.woocommerce-account .page-content__inner {
    padding-bottom: var(--s8);
}


/* ============================================================
   ACCOUNT MAIN LAYOUT
   ============================================================ */

.woocommerce-account .page-content__inner > .woocommerce {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: var(--s7);
    align-items: start;
}

.woocommerce-account
.page-content__inner
> .woocommerce
> .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
}


/* remove WooCommerce's old float layout */

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
    float: none !important;
    width: 100% !important;
}


/* ============================================================
   ACCOUNT NAVIGATION
   ============================================================ */

.woocommerce-account .woocommerce-MyAccount-navigation {
    position: sticky;
    top: 9rem;
    border-top: 1px solid var(--rule);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--rule);
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    min-height: 54px;
    padding: .9rem 0;
    color: #6E665B;
    font-size: var(--t-sm);
    letter-spacing: .06em;
    transition: color .3s var(--ease);
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
    color: var(--charcoal);
}

.woocommerce-account
.woocommerce-MyAccount-navigation
.is-active a {
    color: var(--charcoal);
}

.woocommerce-account
.woocommerce-MyAccount-navigation
.is-active a::after {
    content: "";
    width: 6px;
    height: 6px;
    flex: none;
    background: var(--bronze);
    transform: rotate(45deg);
}

/* We sell physical antiques, so Downloads isn't useful. */
.woocommerce-account
.woocommerce-MyAccount-navigation-link--downloads {
    display: none;
}

.woocommerce-account
.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: var(--stone);
}


/* ============================================================
   ACCOUNT CONTENT
   ============================================================ */

.woocommerce-account .woocommerce-MyAccount-content {
    min-width: 0;
    font-size: var(--t-base);
}

.woocommerce-account .woocommerce-MyAccount-content > p {
    max-width: 65ch;
    color: #5F584F;
}

.woocommerce-account
.woocommerce-MyAccount-content
> p + p {
    margin-top: var(--s2);
}

.woocommerce-account .woocommerce-MyAccount-content a {
    text-decoration: none;
}

.woocommerce-account
.woocommerce-MyAccount-content
p a:not(.button) {
    border-bottom: 1px solid var(--bronze);
}

.woocommerce-account
.woocommerce-MyAccount-content
p a:not(.button):hover {
    color: var(--bronze);
}


/* ============================================================
   WOOCOMMERCE NOTICES
   ============================================================ */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
    position: relative;
    margin: 0 0 var(--s4) !important;
    padding: var(--s3) var(--s4) !important;
    border: 1px solid var(--rule) !important;
    border-top: 1px solid var(--rule) !important;
    border-inline-start: 3px solid var(--bronze) !important;
    border-radius: 0 !important;
    background: var(--ivory) !important;
    color: var(--charcoal) !important;
    list-style: none !important;
}

.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before {
    display: none !important;
}

.woocommerce-account .woocommerce-message::after,
.woocommerce-account .woocommerce-info::after,
.woocommerce-account .woocommerce-error::after {
    display: none !important;
}

.woocommerce-account
.woocommerce-message
.button,
.woocommerce-account
.woocommerce-info
.button {
    float: right;
}


/* ============================================================
   ACCOUNT BUTTONS
   ============================================================ */

.woocommerce-account .woocommerce .button,
.woocommerce-account button.button,
.woocommerce-account input.button {
    min-height: 48px;
    padding: .85rem 1.5rem !important;
    border: 1px solid var(--charcoal) !important;
    border-radius: 0 !important;
    background: var(--charcoal) !important;
    color: var(--ivory) !important;
    font-family: var(--text) !important;
    font-size: var(--t-sm) !important;
    font-weight: 400 !important;
    letter-spacing: .04em;
    box-shadow: none !important;
    cursor: pointer;
    transition:
        background .3s var(--ease),
        color .3s var(--ease);
}

.woocommerce-account .woocommerce .button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account input.button:hover {
    background: transparent !important;
    color: var(--charcoal) !important;
}


/* ============================================================
   ORDERS
   ============================================================ */

.woocommerce-account
.woocommerce-orders-table {
    width: 100%;
    margin: 0;
    border: 0 !important;
    border-collapse: collapse;
}

.woocommerce-account
.woocommerce-orders-table
thead th {
    padding: var(--s2) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rule) !important;
    color: var(--stone);
    font-size: var(--t-xs);
    font-weight: 400;
    letter-spacing: .08em;
    text-align: start;
}

.woocommerce-account
.woocommerce-orders-table
tbody td {
    padding: var(--s3) var(--s2) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rule) !important;
    background: transparent !important;
}

.woocommerce-account
.woocommerce-orders-table
.woocommerce-orders-table__cell-order-number a {
    font-family: var(--display);
    font-size: var(--t-lg);
}

.woocommerce-account
.woocommerce-orders-table
.woocommerce-orders-table__cell-order-total {
    font-family: var(--display);
}

.woocommerce-account
.woocommerce-orders-table
.woocommerce-orders-table__cell-order-actions {
    text-align: end;
}

.woocommerce-account
.woocommerce-orders-table
.woocommerce-orders-table__cell-order-actions
.button {
    min-height: auto;
    padding: .65rem 1rem !important;
}


/* ============================================================
   ADDRESSES
   ============================================================ */

.woocommerce-account
.woocommerce-Addresses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s3);
    margin-top: var(--s4);
}

.woocommerce-account
.woocommerce-Address {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: var(--s4);
    border: 1px solid var(--rule);
    background: var(--ivory);
}

.woocommerce-account
.woocommerce-Address-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.woocommerce-account
.woocommerce-Address-title h2 {
    float: none !important;
    margin: 0;
    font-size: var(--t-lg);
}

.woocommerce-account
.woocommerce-Address-title .edit {
    float: none !important;
    border-bottom: 1px solid var(--bronze);
    color: #6E665B;
    font-size: var(--t-sm);
}

.woocommerce-account
.woocommerce-Address-title .edit:hover {
    color: var(--bronze);
}

.woocommerce-account
.woocommerce-Address address {
    color: #6E665B;
    font-size: var(--t-sm);
    font-style: normal;
    line-height: 1.9;
}


/* ============================================================
   ACCOUNT FORMS
   ============================================================ */

.woocommerce-account
.woocommerce-MyAccount-content
form {
    max-width: 850px;
}

.woocommerce-account
.woocommerce-MyAccount-content
.form-row {
    margin-bottom: var(--s3) !important;
}

.woocommerce-account
.woocommerce-MyAccount-content
label {
    display: block;
    margin-bottom: .4rem;
    color: #736C61;
    font-size: var(--t-sm);
}

.woocommerce-account
.woocommerce-MyAccount-content
input.input-text,
.woocommerce-account
.woocommerce-MyAccount-content
textarea,
.woocommerce-account
.woocommerce-MyAccount-content
select {
    width: 100%;
    min-height: 54px;
    padding: .8rem 1rem;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: transparent;
    color: var(--charcoal);
    font-family: var(--text);
    font-size: var(--t-base);
    box-shadow: none;
}

.woocommerce-account
.woocommerce-MyAccount-content
textarea {
    min-height: 130px;
    resize: vertical;
}

.woocommerce-account
.woocommerce-MyAccount-content
input.input-text:focus,
.woocommerce-account
.woocommerce-MyAccount-content
textarea:focus,
.woocommerce-account
.woocommerce-MyAccount-content
select:focus {
    outline: none;
    border-color: var(--bronze);
    box-shadow: 0 0 0 1px var(--bronze);
}


/* password section */

.woocommerce-account
.woocommerce-MyAccount-content
fieldset {
    margin: var(--s5) 0 var(--s4);
    padding: var(--s4);
    border: 1px solid var(--rule);
}

.woocommerce-account
.woocommerce-MyAccount-content
fieldset legend {
    padding: 0 var(--s1);
    font-family: var(--display);
    font-size: var(--t-lg);
}


/* ============================================================
   LOGIN / REGISTER — LOGGED OUT ACCOUNT
   ============================================================ */

.woocommerce-account:not(.logged-in)
.page-content__inner > .woocommerce {
    display: block;
}

.woocommerce-account:not(.logged-in) .u-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s6);
}

.woocommerce-account:not(.logged-in) .u-column1,
.woocommerce-account:not(.logged-in) .u-column2 {
    float: none !important;
    width: auto !important;
}

.woocommerce-account:not(.logged-in) .u-column1 h2,
.woocommerce-account:not(.logged-in) .u-column2 h2 {
    margin-bottom: var(--s3);
    font-size: var(--t-xl);
}

.woocommerce-account:not(.logged-in)
form.login,
.woocommerce-account:not(.logged-in)
form.register {
    margin: 0 !important;
    padding: var(--s4) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    background: var(--ivory);
}


/* ============================================================
   LOST PASSWORD
   ============================================================ */

.woocommerce-account .lost_reset_password {
    max-width: 650px;
}

.woocommerce-account
.woocommerce-LostPassword {
    margin-top: var(--s2);
    font-size: var(--t-sm);
}


/* ============================================================
   ACCOUNT RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {

    .woocommerce-account
    .page-content__inner
    > .woocommerce {
        gap: var(--s5);
    }
}

@media (max-width: 900px) {

    .woocommerce-account
    .page-content__inner
    > .woocommerce {
        grid-template-columns: 1fr;
        gap: var(--s4);
    }

    .woocommerce-account
    .woocommerce-MyAccount-navigation {
        position: static;
        overflow-x: auto;
        border-top: 0;
        border-bottom: 1px solid var(--rule);
        scrollbar-width: none;
    }

    .woocommerce-account
    .woocommerce-MyAccount-navigation::-webkit-scrollbar {
        display: none;
    }

    .woocommerce-account
    .woocommerce-MyAccount-navigation ul {
        display: flex;
        width: max-content;
    }

    .woocommerce-account
    .woocommerce-MyAccount-navigation li {
        flex: none;
        border-bottom: 0;
    }

    .woocommerce-account
    .woocommerce-MyAccount-navigation a {
        min-height: 52px;
        padding-inline: 1rem;
    }

    .woocommerce-account
    .woocommerce-MyAccount-navigation
    .is-active a {
        box-shadow: inset 0 -2px 0 var(--bronze);
    }

    .woocommerce-account
    .woocommerce-MyAccount-navigation
    .is-active a::after {
        display: none;
    }

    .woocommerce-account
    .woocommerce-Addresses {
        grid-template-columns: 1fr;
    }

    .woocommerce-account:not(.logged-in) .u-columns {
        grid-template-columns: 1fr;
        gap: var(--s4);
    }
}

@media (max-width: 640px) {

    .woocommerce-account .accountPageHead {
        padding-bottom: var(--s2);
    }

    .woocommerce-account
    .woocommerce-message,
    .woocommerce-account
    .woocommerce-info,
    .woocommerce-account
    .woocommerce-error {
        padding: var(--s3) !important;
    }

    .woocommerce-account
    .woocommerce-message
    .button,
    .woocommerce-account
    .woocommerce-info
    .button {
        float: none;
        display: table;
        margin-top: var(--s2);
    }

    .woocommerce-account
    .woocommerce-orders-table
    thead {
        display: none;
    }

    .woocommerce-account
    .woocommerce-orders-table,
    .woocommerce-account
    .woocommerce-orders-table
    tbody,
    .woocommerce-account
    .woocommerce-orders-table
    tr,
    .woocommerce-account
    .woocommerce-orders-table
    td {
        display: block;
        width: 100%;
    }

    .woocommerce-account
    .woocommerce-orders-table
    tr {
        padding-block: var(--s3);
        border-bottom: 1px solid var(--rule);
    }

    .woocommerce-account
    .woocommerce-orders-table
    tbody td {
        display: flex;
        justify-content: space-between;
        gap: var(--s3);
        padding: .5rem 0 !important;
        border-bottom: 0 !important;
        text-align: end;
    }

    .woocommerce-account
    .woocommerce-orders-table
    tbody td::before {
        color: var(--stone);
        font-size: var(--t-xs);
        text-align: start;
    }
}
/* ============================================================
   MY ACCOUNT GRID POSITION FIX
   ============================================================ */

@media (min-width: 901px) {

    .woocommerce-account
    .page-content__inner
    > .woocommerce {
        grid-template-columns: 230px minmax(0, 1fr);
        grid-template-areas:
            "notices notices"
            "nav content";
    }

    .woocommerce-account
    .page-content__inner
    > .woocommerce
    > .woocommerce-notices-wrapper {
        grid-area: notices;
    }

    .woocommerce-account
    .page-content__inner
    > .woocommerce
    > .woocommerce-MyAccount-navigation {
        grid-area: nav;
    }

    .woocommerce-account
    .page-content__inner
    > .woocommerce
    > .woocommerce-MyAccount-content {
        grid-area: content;
        min-width: 0;
    }
}

@media (max-width: 900px) {

    .woocommerce-account
    .page-content__inner
    > .woocommerce {
        grid-template-areas:
            "notices"
            "nav"
            "content";
    }
}
/* ============================================================
   MY ACCOUNT — ADDRESS LAYOUT FIX
   ============================================================ */

.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-Addresses {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--s4) !important;
    width: 100% !important;
    margin-top: var(--s4) !important;
}

.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-Addresses::before,
.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-Addresses::after {
    display: none !important;
    content: none !important;
}

.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-Addresses
.woocommerce-Address {
    float: none !important;
    clear: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: var(--s4) !important;
    box-sizing: border-box !important;

    border: 1px solid var(--rule) !important;
    background: var(--ivory) !important;
}


/* force WooCommerce col-1 / col-2 to behave as normal grid items */

.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-Addresses
.col-1,

.woocommerce-account
.woocommerce-MyAccount-content
.woocommerce-Addresses
.col-2 {
    float: none !important;
    clear: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}


/* address box heading */

.woocommerce-account
.woocommerce-Address-title {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s3);
    margin-bottom: var(--s3);
}

.woocommerce-account
.woocommerce-Address-title::before,
.woocommerce-account
.woocommerce-Address-title::after {
    display: none !important;
}

.woocommerce-account
.woocommerce-Address-title h2 {
    float: none !important;
    margin: 0 !important;
    font-family: var(--display);
    font-size: var(--t-lg);
    font-weight: 500;
}

.woocommerce-account
.woocommerce-Address-title .edit {
    float: none !important;
    flex: none;
    color: #6E665B;
    font-size: var(--t-sm);
    border-bottom: 1px solid var(--bronze);
}

.woocommerce-account
.woocommerce-Address-title .edit:hover {
    color: var(--bronze);
}


/* address text */

.woocommerce-account
.woocommerce-Address address {
    margin: 0 !important;
    color: #6E665B;
    font-size: var(--t-sm);
    font-style: normal;
    line-height: 1.9;
}


/* intro line above addresses */

.woocommerce-account
.woocommerce-MyAccount-content
> p:first-child {
    margin-bottom: var(--s3);
}


/* mobile */

@media (max-width: 800px) {

    .woocommerce-account
    .woocommerce-MyAccount-content
    .woocommerce-Addresses {
        grid-template-columns: 1fr !important;
    }
}
/* ============================================================
   MY ACCOUNT — LOGIN / REGISTER LAYOUT FIX
   ============================================================ */

.woocommerce-account:not(.logged-in)
.page-content__inner
> .woocommerce {
    display: block !important;
}


/* kill WooCommerce's old clearfix / float layout */

.woocommerce-account:not(.logged-in)
.u-columns.col2-set {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--s6) !important;
    align-items: start !important;

    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.woocommerce-account:not(.logged-in)
.u-columns.col2-set::before,

.woocommerce-account:not(.logged-in)
.u-columns.col2-set::after {
    display: none !important;
    content: none !important;
}


/* login + register columns */

.woocommerce-account:not(.logged-in)
.u-columns.col2-set
.u-column1,

.woocommerce-account:not(.logged-in)
.u-columns.col2-set
.u-column2,

.woocommerce-account:not(.logged-in)
.u-columns.col2-set
.col-1,

.woocommerce-account:not(.logged-in)
.u-columns.col2-set
.col-2 {
    float: none !important;
    clear: none !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* headings */

.woocommerce-account:not(.logged-in)
.u-columns h2 {
    margin: 0 0 var(--s3) !important;
    font-family: var(--display);
    font-size: var(--t-xl);
    font-weight: 500;
}


/* login + register cards */

.woocommerce-account:not(.logged-in)
form.login,

.woocommerce-account:not(.logged-in)
form.register {
    width: 100% !important;
    margin: 0 !important;
    padding: var(--s4) !important;

    border: 1px solid var(--rule) !important;
    border-radius: 0 !important;

    background: var(--ivory) !important;
    box-sizing: border-box !important;
}


/* form fields */

.woocommerce-account:not(.logged-in)
form.login .form-row,

.woocommerce-account:not(.logged-in)
form.register .form-row {
    margin-bottom: var(--s3) !important;
}

.woocommerce-account:not(.logged-in)
form.login input.input-text,

.woocommerce-account:not(.logged-in)
form.register input.input-text {
    width: 100% !important;
    min-height: 54px;

    padding: .8rem 1rem;

    border: 1px solid var(--rule);
    border-radius: 0;

    background: var(--paper);
    color: var(--charcoal);

    font-family: var(--text);
    font-size: var(--t-base);

    box-shadow: none;
}

.woocommerce-account:not(.logged-in)
form.login input.input-text:focus,

.woocommerce-account:not(.logged-in)
form.register input.input-text:focus {
    outline: none;
    border-color: var(--bronze);
    box-shadow: 0 0 0 1px var(--bronze);
}


/* registration privacy text */

.woocommerce-account:not(.logged-in)
.woocommerce-privacy-policy-text {
    color: #6E665B;
    font-size: var(--t-sm);
    line-height: 1.7;
}


/* lost password */

.woocommerce-account:not(.logged-in)
.woocommerce-LostPassword {
    margin-top: var(--s2);
    font-size: var(--t-sm);
}

.woocommerce-account:not(.logged-in)
.woocommerce-LostPassword a {
    border-bottom: 1px solid var(--bronze);
}


/* ============================================================
   LOGIN / REGISTER RESPONSIVE
   ============================================================ */

@media (max-width: 800px) {

    .woocommerce-account:not(.logged-in)
    .u-columns.col2-set {
        grid-template-columns: 1fr !important;
        gap: var(--s5) !important;
    }
}
/* ============================================================
   ABOUT + CONTACT
   ============================================================ */

.infoHero {
    padding-block: var(--s7) var(--s6);
    border-bottom: 1px solid var(--rule);
}

.infoHero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    gap: var(--s7);
    align-items: end;
}

.infoHero h1 {
    margin-top: var(--s2);
    font-size: clamp(3rem, 6vw, var(--t-4xl));
}

.infoHero__lede {
    max-width: 48ch;
    color: #6E665B;
    font-size: var(--t-lg);
}


/* ============================================================
   ABOUT SECTIONS
   ============================================================ */

.infoSection {
    padding-block: var(--s8);
}

.infoSection--ivory {
    background: var(--ivory);
}

.infoSplit {
    display: grid;
    grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
    gap: var(--s7);
}

.infoSplit h2 {
    margin-top: var(--s2);
    font-size: clamp(2rem, 3vw, var(--t-2xl));
}

.infoCopy {
    max-width: 60ch;
}

.infoCopy p + p {
    margin-top: var(--s3);
}

.infoCopy .btn {
    margin-top: var(--s4);
}


/* ============================================================
   CONTACT
   ============================================================ */

.contactSection {
    padding-block: var(--s7);
}

.contactGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--rule);
}

.contactMethod {
    min-height: 230px;
    padding: var(--s4);
    border-inline-end: 1px solid var(--rule);
}

.contactMethod:first-child {
    padding-inline-start: 0;
}

.contactMethod:last-child {
    border-inline-end: 0;
}

.contactMethod h2 {
    margin-block: var(--s2) var(--s3);
    font-size: var(--t-xl);
}

.contactMethod p {
    color: #736C61;
}

.contactFormPlaceholder {
    padding-block: var(--s7);
    background: var(--ivory);
}

.contactFormPlaceholder__grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: var(--s7);
    align-items: start;
}

.contactFormPlaceholder h2 {
    margin-top: var(--s2);
    font-size: var(--t-2xl);
}

.placeholderPanel {
    padding: var(--s4);
    border: 1px solid var(--rule);
    background: var(--paper);
}

.placeholderPanel p + p {
    margin-top: var(--s2);
}


/* ============================================================
   ABOUT + CONTACT RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .infoHero__grid,
    .infoSplit,
    .contactFormPlaceholder__grid {
        grid-template-columns: 1fr;
        gap: var(--s4);
    }

    .contactGrid {
        grid-template-columns: 1fr;
    }

    .contactMethod {
        min-height: auto;
        padding: var(--s4) 0;
        border-inline-end: 0;
        border-bottom: 1px solid var(--rule);
    }

    .contactMethod:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 640px) {

    .infoHero {
        padding-block: var(--s5) var(--s4);
    }

    .infoSection,
    .contactSection,
    .contactFormPlaceholder {
        padding-block: var(--s6);
    }
}

/* ============================================================
   LANGUAGE SWITCHER
   ============================================================

   Renders as:  EN / العربية

   Both halves are written by header.php. No TranslatePress
   markup reaches the page, so there is nothing to override,
   no flag to hide and no dropdown to flatten.
   ============================================================ */

.foundNorthLanguageSwitch {
    display: flex;
    align-items: center;
    gap: .6rem;

    /* the pair always reads EN / العربية, in that order */
    direction: ltr;
}

.foundNorthLanguageSwitch .lang__link {
    display: inline-flex;
    align-items: center;

    padding: .35rem .05rem;

    color: #7B7369;
    font-family: var(--text);
    font-size: var(--t-xs);
    font-weight: 400;
    line-height: 1;

    text-decoration: none;
    white-space: nowrap;

    transition: color .25s var(--ease);
}

.foundNorthLanguageSwitch .lang__link--ar {
    font-family: "IBM Plex Sans Arabic", sans-serif;
    font-size: .875rem;
}

/* the language you are already viewing */
.foundNorthLanguageSwitch .lang__link.is-active {
    color: var(--charcoal);
    cursor: default;
}

/* fallback state: TranslatePress did not return a URL */
.foundNorthLanguageSwitch .lang__link.is-muted {
    color: var(--stone);
    cursor: default;
}

a.lang__link:hover,
a.lang__link:focus-visible {
    color: var(--charcoal);
}

.foundNorthLanguageSwitch .lang__bar {
    color: var(--stone);
    line-height: 1;
}


/* ============================================================
   ARABIC / RTL
   ============================================================ */

html[lang^="ar"] {
    direction: rtl;

    --display: "Amiri", Georgia, serif;
    --text: "IBM Plex Sans Arabic", -apple-system, "Segoe UI", sans-serif;
}

html[lang^="ar"] body {
    direction: rtl;
    text-align: right;
    font-family: var(--text);
    font-weight: 300;
}

html[lang^="ar"] h1,
html[lang^="ar"] h2,
html[lang^="ar"] h3,
html[lang^="ar"] .wordmark {
    font-family: var(--display);
}

html[lang^="ar"] h1,
html[lang^="ar"] h2,
html[lang^="ar"] h3 {
    font-weight: 400;
    line-height: 1.45;
}

html[lang^="ar"] .wordmark {
    letter-spacing: 0;
    text-indent: 0;
    font-size: clamp(1.9rem, 3.1vw, 2.9rem);
    font-weight: 400;
}

html[lang^="ar"] .meta,
html[lang^="ar"] .nav,
html[lang^="ar"] .tools,
html[lang^="ar"] .utility {
    letter-spacing: 0;
}

/*
 * Keep the language choices visually fixed as:
 * EN / العربية
 * even when the rest of the page is RTL.
 */
html[lang^="ar"] .foundNorthLanguageSwitch {
    direction: ltr;
}

/*
 * The utility bar divider now uses logical properties, so it
 * mirrors on its own. The old RTL patch that lived here has been
 * removed rather than left stacked on top.
 */

/* ============================================================
   MOBILE NAVIGATION DRAWER
   ============================================================ */

.mobileMenu,
.mobileMenuBackdrop {
    display: none;
}

@media (max-width: 900px) {

    body.mobile-menu-open {
        overflow: hidden;
    }

    .mobileMenuBackdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 110;

        background: rgba(27, 24, 21, .34);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transition:
            opacity .35s var(--ease),
            visibility .35s var(--ease);
    }

    .mobileMenu {
        display: flex;
        flex-direction: column;

        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 120;

        width: min(86vw, 390px);
        padding: var(--s3);

        background: var(--ivory);
        border-inline-end: 1px solid var(--rule);

        transform: translateX(-100%);
        visibility: hidden;

        transition:
            transform .4s var(--ease),
            visibility .4s var(--ease);

        overflow-y: auto;
        overscroll-behavior: contain;
    }

    :dir(rtl) .mobileMenu {
        transform: translateX(100%);
    }

    body.mobile-menu-open .mobileMenuBackdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body.mobile-menu-open .mobileMenu {
        transform: translateX(0);
        visibility: visible;
    }

    .mobileMenu__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s3);

        padding-bottom: var(--s4);
        border-bottom: 1px solid var(--rule);
    }

    .mobileMenu__brand {
        font-family: var(--display);
        font-size: 1.25rem;
        font-weight: 500;
        letter-spacing: .1em;
        line-height: 1.2;
    }

    .mobileMenu__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;

        width: 44px;
        height: 44px;
        padding: 0;

        border: 1px solid var(--rule);
        border-radius: 0;
        background: transparent;
        color: var(--charcoal);

        cursor: pointer;
    }

    .mobileMenu__close span {
        display: block;
        margin-top: -.1em;
        font-size: 2rem;
        font-weight: 300;
        line-height: 1;
    }

    .mobileMenu__close:hover {
        border-color: var(--bronze);
        color: var(--bronze);
    }

    .mobileMenu__nav {
        display: grid;
        margin-block: var(--s4) auto;
    }

    .mobileMenu__nav a {
        display: flex;
        align-items: center;
        justify-content: space-between;

        min-height: 64px;
        padding-block: .75rem;

        border-bottom: 1px solid var(--rule);

        font-family: var(--display);
        font-size: clamp(1.75rem, 8vw, 2.35rem);
        font-weight: 500;
        line-height: 1.15;

        transition:
            color .25s var(--ease),
            padding-inline-start .25s var(--ease);
    }

    .mobileMenu__nav a:hover {
        color: var(--bronze);
        padding-inline-start: .35rem;
    }

    .mobileMenu__utility {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s3);

        margin-top: var(--s5);
        padding-top: var(--s3);
        border-top: 1px solid var(--rule);

        font-size: var(--t-sm);
    }

    .mobileMenu__utility a {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        min-height: 44px;
    }

    .mobileMenu__utility a:hover {
        color: var(--bronze);
    }

    /* The desktop header already hides the nav at this breakpoint. */
    .burger {
        gap: .55rem;
        color: var(--charcoal);
    }
}

@media (max-width: 560px) {

    .mobileMenu {
        width: min(91vw, 390px);
        padding: var(--s2) var(--s3) var(--s3);
    }

    .mobileMenu__brand {
        font-size: 1.1rem;
        letter-spacing: .08em;
    }

    .mobileMenu__nav a {
        min-height: 58px;
        font-size: 1.9rem;
    }
}

/* Keep the Arabic mobile wordmark typography consistent with the site. */
:dir(rtl) .mobileMenu__brand,
:dir(rtl) .mobileMenu__nav a {
    letter-spacing: 0;
}


/* ============================================================
   PRODUCT SEARCH
   ============================================================ */

.tools__search {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: color .25s var(--ease);
}

.tools__search:hover {
    color: var(--bronze);
}

.tools__searchIcon {
    flex: none;
}

.searchPanel {
    border-block-start: 1px solid var(--rule);
    background: var(--ivory);
}

.searchPanel[hidden] {
    display: none;
}

.searchPanel__in {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding-block: var(--s3);
}

.searchForm {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex: 1;
    min-width: 0;
}

.searchForm__input {
    flex: 1;
    min-width: 0;
    padding: .85rem 0;
    border: 0;
    border-block-end: 1px solid var(--rule);
    background: none;
    color: var(--charcoal);
    font-family: var(--text);
    font-size: 1.0625rem;
}

.searchForm__input:focus {
    outline: none;
    border-block-end-color: var(--bronze);
}

.searchForm__input::placeholder {
    color: var(--stone);
}

.searchForm__submit {
    min-height: 44px;
    padding-inline: var(--s3);
    border: 1px solid var(--charcoal);
    background: var(--charcoal);
    color: var(--ivory);
    font-family: var(--text);
    font-size: var(--t-sm);
    cursor: pointer;
    transition: background .3s var(--ease), border-color .3s var(--ease);
}

.searchForm__submit:hover {
    background: var(--bronze);
    border-color: var(--bronze);
}

.searchPanel__close {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--stone);
    font-family: var(--text);
    font-size: var(--t-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: color .25s var(--ease);
}

.searchPanel__close:hover {
    color: var(--charcoal);
}


/* ============================================================
   SHOP LAYOUT + CATEGORY RAIL
   ============================================================ */

.shopLayout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--s6);
    align-items: start;
}

/* no categories yet: the catalogue simply uses the full width */
.shopLayout--noRail {
    grid-template-columns: minmax(0, 1fr);
}

.catNav {
    position: sticky;
    top: 9rem;
}

.catNav__title {
    margin-bottom: var(--s2);
    padding-bottom: var(--s2);
    border-block-end: 1px solid var(--rule);
    font-family: var(--text);
    font-size: var(--t-xs);
    font-weight: 400;
    letter-spacing: .14em;
    color: var(--stone);
    text-transform: none;
}

.catNav__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* subcategories sit indented beneath their parent */
.catNav__list--depth-1 {
    margin-inline-start: var(--s2);
    padding-inline-start: var(--s2);
    border-inline-start: 1px solid var(--rule);
}

.catNav__list--depth-2 {
    margin-inline-start: var(--s2);
    padding-inline-start: var(--s2);
    border-inline-start: 1px solid var(--rule);
}

.catNav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    min-height: 44px;
    padding-block: .35rem;
    color: #6E665B;
    font-size: var(--t-sm);
    text-decoration: none;
    transition: color .25s var(--ease);
}

.catNav__link:hover {
    color: var(--charcoal);
}

.catNav__item.is-current > .catNav__link,
.catNav__item.is-ancestor > .catNav__link {
    color: var(--charcoal);
}

.catNav__item.is-current > .catNav__link {
    font-weight: 500;
}

.catNav__count {
    flex: none;
    font-size: var(--t-xs);
    color: var(--stone);
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   FOOTER SPACING
   ============================================================

   .footer carries margin-top: var(--s8) so that pages ending on
   the page background get breathing room before the dark footer.

   The homepage ends with a full-bleed .band--ink that already
   carries padding-block: var(--s8) of its own, so that margin
   showed as a bare strip of page background between two dark
   blocks. The margin is simply not needed there.
   ============================================================ */

.home + .footer {
    margin-top: 0;
}


/* ============================================================
   SEARCH + RAIL, RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    /* the rail moves above the catalogue rather than beside it */
    .shopLayout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s4);
    }

    .catNav {
        position: static;
        padding-bottom: var(--s3);
        border-block-end: 1px solid var(--rule);
    }

    .catNav__list--depth-0 {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s1) var(--s3);
    }

    .catNav__list--depth-0 > .catNav__item {
        flex: none;
    }

    /* nested levels stay stacked so the hierarchy stays readable */
    .catNav__list--depth-1,
    .catNav__list--depth-2 {
        flex-basis: 100%;
    }
}

@media (max-width: 640px) {

    .searchPanel__in {
        flex-wrap: wrap;
        gap: var(--s2);
    }

    .searchForm {
        flex-basis: 100%;
    }

    .searchPanel__close {
        margin-inline-start: auto;
    }
}


/* ============================================================
   SHOP DROPDOWN (desktop nav)
   ============================================================ */

.nav__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.nav__subToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    min-height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    transition: transform .25s var(--ease), color .25s var(--ease);
}

.nav__subToggle:hover {
    color: var(--bronze);
}

.nav__subToggle[aria-expanded="true"] {
    transform: rotate(180deg);
}

.nav__sub {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 70;
    min-width: 230px;
    margin: 0;
    padding: var(--s2) 0;
    list-style: none;
    background: var(--ivory);
    border: 1px solid var(--rule);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
        opacity .25s var(--ease),
        visibility .25s var(--ease),
        transform .25s var(--ease);
}

/* mouse users get hover, keyboard users get focus and the button */
.nav__item--hasSub:hover .nav__sub,
.nav__item--hasSub:focus-within .nav__sub,
.nav__sub.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav__sub a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    min-height: 44px;
    padding-inline: var(--s3);
    color: #6E665B;
    font-size: var(--t-sm);
    text-decoration: none;
    transition: color .2s var(--ease), background .2s var(--ease);
}

.nav__sub a:hover {
    color: var(--charcoal);
    background: var(--paper);
}

.nav__subCount {
    flex: none;
    font-size: var(--t-xs);
    color: var(--stone);
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   SHOP CATEGORIES (mobile drawer)
   ============================================================ */

.mobileMenu__subToggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    width: 100%;
    min-height: 48px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--stone);
    font-family: var(--text);
    font-size: var(--t-sm);
    text-align: start;
    cursor: pointer;
    transition: color .25s var(--ease);
}

.mobileMenu__subToggle:hover {
    color: var(--charcoal);
}

.mobileMenu__subToggle svg {
    flex: none;
    transition: transform .25s var(--ease);
}

.mobileMenu__subToggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.mobileMenu__sub {
    margin: 0 0 var(--s2);
    padding: 0;
    list-style: none;
    border-inline-start: 1px solid var(--rule);
    padding-inline-start: var(--s3);
}

.mobileMenu__sub[hidden] {
    display: none;
}

.mobileMenu__sub a {
    display: flex;
    align-items: center;
    min-height: 48px;
    color: #6E665B;
    font-size: 1.0625rem;
    text-decoration: none;
}

.mobileMenu__sub a:hover {
    color: var(--charcoal);
}


/* ============================================================
   CONTACT DETAILS
   ============================================================ */

/* two sections rather than three; the 900px rule below still
   stacks them on small screens */
@media (min-width: 901px) {

    .contactGrid--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.contactLinks {
    margin: 0;
    padding: 0;
    list-style: none;
}

.contactLinks li + li {
    margin-block-start: var(--s2);
}

.contactLink {
    display: block;
    padding-block: .45rem;
    color: var(--charcoal);
    text-decoration: none;
    transition: color .25s var(--ease);
}

.contactLink:hover,
.contactLink:focus-visible {
    color: var(--bronze);
}

.contactLink__label {
    display: block;
    font-size: var(--t-xs);
    letter-spacing: .13em;
    color: var(--stone);
}

.contactLink__value {
    display: block;
    margin-block-start: .25rem;
    font-size: 1.0625rem;

    /* the number and address stay left-to-right inside Arabic */
    unicode-bidi: isolate;
}


/* ============================================================
   FOOTER CONTACT
   ============================================================ */

.footer__contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__contact li + li {
    margin-block-start: var(--s2);
}

.footer__contact a {
    display: block;
    min-height: 44px;
    text-decoration: none;
}

.footer__contactLabel {
    display: block;
    font-size: var(--t-xs);
    letter-spacing: .12em;
    opacity: .7;
}

.footer__contactValue {
    display: block;
    margin-block-start: .2rem;
    unicode-bidi: isolate;
}


/* ============================================================
   ABOUT PAGE ALIGNMENT + BODY TEXT
   ============================================================

   The hero used a different column ratio to the sections below
   it, so the intro paragraph started further in than the section
   copy. Scoped to .aboutPage so the Contact hero is untouched,
   and wrapped in min-width so the existing 900px stacking rule
   still wins on small screens.
   ============================================================ */

@media (min-width: 901px) {

    .aboutPage .infoHero__grid {
        grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
    }
}

/* section copy now matches the intro paragraph */
.aboutPage .infoCopy {
    max-width: 48ch;
    color: #6E665B;
    font-size: var(--t-lg);
}


/* ============================================================
   MOBILE HEADER OVERFLOW
   ============================================================

   .masthead__in is a 1fr auto 1fr grid. The middle column holds
   the wordmark, which carries white-space: nowrap, so that column
   takes its full intrinsic width and cannot shrink. On a narrow
   phone the three columns together needed more than the viewport,
   which is what let the page scroll sideways and clipped the
   header.

   Fixed by letting the wordmark column flex and be centred within
   whatever space is left, rather than dictating the row width.
   No overflow-x: hidden, because that hides the symptom and can
   break the sticky masthead.
   ============================================================ */

/* "( 0 )" must never break across lines */
.cart__count {
    white-space: nowrap;
}

@media (max-width: 640px) {

    .masthead__in {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: var(--s2);
    }

    .wordmark {
        min-width: 0;
        text-align: center;
    }

    .tools {
        gap: var(--s2);
    }

    .burger {
        white-space: nowrap;
    }
}

@media (max-width: 560px) {

    .wordmark {
        font-size: 1.05rem;
        letter-spacing: .05em;
        text-indent: .05em;
    }

    html[lang^="ar"] .wordmark {
        font-size: 1.5rem;
    }

    .tools {
        gap: var(--s1);
    }
}


/* ============================================================
   CART + CHECKOUT PRICE OVERFLOW ON MOBILE
   ============================================================

   The KWD price format joins the amount and the symbol with a
   non-breaking space, so "0.000 KWD" is a single unbreakable
   token. In the cart table the line-total column sizes itself to
   that token, and on a narrow phone that forced the whole row
   wider than the screen, which is what let the page scroll
   sideways and clipped the header.

   Arabic escaped it because "د.ك" is short enough to fit.

   On mobile the line total is redundant: the same figure already
   appears under the product name. Hiding the duplicate column
   removes the widest element and loses no information. The
   wrapping rules are a safety net for the remaining prices.
   ============================================================ */

@media (max-width: 640px) {

    .woocommerce-cart .wc-block-cart-items__header-total,
    .woocommerce-cart .wc-block-cart-item__total {
        display: none !important;
    }

    /* nothing in a price should be able to force the row wider */
    .woocommerce-cart .wc-block-components-product-price,
    .woocommerce-cart .wc-block-components-formatted-money-amount,
    .woocommerce-checkout .wc-block-components-order-summary-item__total-price,
    .woocommerce-checkout .wc-block-components-order-summary-item__individual-price,
    .woocommerce-checkout .wc-block-components-formatted-money-amount {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .woocommerce-cart .wc-block-cart-items,
    .woocommerce-cart .wc-block-cart-items__row {
        max-width: 100%;
    }
}
/* ============================================================
   CONTACT DETAILS
   ============================================================ */

/* two sections rather than three; the 900px rule below still
   stacks them on small screens */
@media (min-width: 901px) {

    .contactGrid--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.contactLinks {
    margin: 0;
    padding: 0;
    list-style: none;
}

.contactLinks li + li {
    margin-block-start: var(--s2);
}

.contactLink {
    display: block;
    padding-block: .45rem;
    color: var(--charcoal);
    text-decoration: none;
    transition: color .25s var(--ease);
}

.contactLink:hover,
.contactLink:focus-visible {
    color: var(--bronze);
}

.contactLink__label {
    display: block;
    font-size: var(--t-xs);
    letter-spacing: .13em;
    color: var(--stone);
}

.contactLink__value {
    display: block;
    margin-block-start: .25rem;
    font-size: 1.0625rem;

    /* the number and address stay left-to-right inside Arabic */
    unicode-bidi: isolate;
}


/* ============================================================
   FOOTER CONTACT
   ============================================================ */

.footer__contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__contact li + li {
    margin-block-start: var(--s2);
}

.footer__contact a {
    display: block;
    min-height: 44px;
    text-decoration: none;
}

.footer__contactLabel {
    display: block;
    font-size: var(--t-xs);
    letter-spacing: .12em;
    opacity: .7;
}

.footer__contactValue {
    display: block;
    margin-block-start: .2rem;
    unicode-bidi: isolate;
}


/* ============================================================
   ABOUT PAGE ALIGNMENT + BODY TEXT
   ============================================================

   The hero used a different column ratio to the sections below
   it, so the intro paragraph started further in than the section
   copy. Scoped to .aboutPage so the Contact hero is untouched,
   and wrapped in min-width so the existing 900px stacking rule
   still wins on small screens.
   ============================================================ */

@media (min-width: 901px) {

    .aboutPage .infoHero__grid {
        grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
    }
}

/* section copy now matches the intro paragraph */
.aboutPage .infoCopy {
    max-width: 48ch;
    color: #6E665B;
    font-size: var(--t-lg);
}


/* ============================================================
   SOCIAL LINKS
   ============================================================ */

.footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s3);
    margin: var(--s3) 0 0;
    padding: 0;
    list-style: none;
}

.footer__social a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--t-sm);
    text-decoration: none;
}

.contactLink--social .contactLink__value {
    margin-block-start: 0;
    font-size: 1.0625rem;
}


/* ============================================================
   CONTACT FORM
   ============================================================ */

.contactFormWrap {
    max-width: 46rem;
}

.contactForm__intro {
    margin-block-end: var(--s3);
}

.formField {
    margin-block-end: var(--s3);
}

.formField label {
    display: block;
    margin-block-end: .5rem;
    font-size: var(--t-xs);
    letter-spacing: .13em;
    color: var(--stone);
}

.formField input,
.formField textarea {
    width: 100%;
    padding: .85rem 1rem;
    border: 1px solid var(--rule);
    background: var(--paper);
    color: var(--charcoal);
    font-family: inherit;
    font-size: 1.0625rem;
    line-height: 1.6;
    transition: border-color .25s var(--ease);
}

.formField textarea {
    resize: vertical;
    min-height: 9rem;
}

.formField input:focus,
.formField textarea:focus {
    outline: none;
    border-color: var(--bronze);
}

/* the spam trap must be unreachable, not merely invisible */
.formTrap {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.formNotice {
    margin-block-end: var(--s3);
    padding: var(--s3);
    border: 1px solid var(--rule);
    font-size: 1.0625rem;
}

.formNotice--ok {
    border-color: var(--bronze);
    color: var(--charcoal);
}

.formNotice--error {
    border-color: var(--bronze);
    background: var(--ivory);
    color: var(--charcoal);
}

@media (max-width: 640px) {

    .contactFormWrap {
        max-width: none;
    }
}


/* ============================================================
   SOCIAL ICONS
   ============================================================ */

/*
 * .footer li + li adds a top margin to every list in the footer,
 * which pushed the second and third social item out of line.
 * Same specificity, declared later, so this wins without
 * !important.
 */
.footer__social li + li {
    margin-top: 0;
}

.footer__social {
    align-items: center;
    gap: var(--s1);
}

.footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: inherit;
    transition: color .25s var(--ease);
}

.footer__social a:hover,
.footer__social a:focus-visible {
    color: var(--bronze);
}

.socialIcon {
    display: block;
    flex: none;
}

/* Contact page keeps the name beside the icon */
.contactLink--social {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.contactLink--social .socialIcon {
    color: var(--bronze);
}


/* ============================================================
   FOOTER + CONTACT FORM ON MOBILE
   ============================================================

   The social row, the footer columns and the contact form all
   needed tightening once the stylesheet was complete. Grouped
   here so the mobile refinements sit in one place.
   ============================================================ */

/* social icons: always a row, never a stack */
.footer__social {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--s1);
    margin-block-start: var(--s3);
}

.footer__social li {
    margin: 0 !important;
    flex: none;
}

.footer__social a {
    width: 40px;
    height: 40px;
}


/* ---------- contact form ---------- */

.contactForm {
    margin-block-start: var(--s4);
}

.formField {
    display: block;
    margin-block-end: var(--s4);
}

.formField label {
    display: block !important;
    width: 100%;
    margin-block-end: .6rem;
    font-family: var(--text);
    font-size: var(--t-xs);
    font-weight: 400;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--stone);
}

.formField input,
.formField textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: .95rem 1.1rem;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: var(--paper);
    color: var(--charcoal);
    font-family: var(--text);
    font-size: 1.0625rem;
    line-height: 1.6;
    box-sizing: border-box;
    transition: border-color .25s var(--ease);
}

.formField textarea {
    min-height: 11rem;
    resize: vertical;
}

.formField input:focus,
.formField textarea:focus {
    outline: none;
    border-color: var(--bronze);
    box-shadow: 0 0 0 1px var(--bronze);
}

/* the spam trap must never be visible or reachable */
.formTrap {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.contactForm .btn {
    margin-block-start: var(--s2);
    min-height: 54px;
    padding-inline: var(--s5);
    border: 1px solid var(--charcoal);
    cursor: pointer;
}

.contactForm__intro {
    margin-block-end: var(--s4);
    color: #6E665B;
}


@media (max-width: 640px) {

    .contactForm .btn {
        display: block;
        width: 100%;
        text-align: center;
    }

    .formField {
        margin-block-end: var(--s3);
    }

    /* the footer reads as one calm column on a phone */
    .footer__grid {
        gap: var(--s5);
    }

    .footer__contact a {
        min-height: 48px;
    }
}


/* ============================================================
   FOOTER SOCIAL ICONS — LARGER
   ============================================================ */

.footer__social {
    gap: var(--s2);
    margin-block-start: var(--s4);
}

.footer__social a {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(239, 234, 225, .25);
    color: var(--paper);
    transition:
        color .25s var(--ease),
        border-color .25s var(--ease),
        background .25s var(--ease);
}

.footer__social a:hover,
.footer__social a:focus-visible {
    color: var(--ink);
    background: var(--paper);
    border-color: var(--paper);
}

.footer__social .socialIcon {
    width: 26px;
    height: 26px;
}

/* the contact block has no heading now, so it needs its own top space */
.footer__contact {
    margin-block-start: .2rem;
}


/* ============================================================
   HEADER CART + ACCOUNT
   ============================================================

   The cart gains an icon and the count sits beside it as a solid
   bronze marker rather than loose brackets. Account stays as text,
   but it is no longer hidden on mobile, where it previously
   rendered as an empty, unreachable link.
   ============================================================ */

.tools__cart {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.tools__cartIcon {
    flex: none;
}

.tools__cart:hover .tools__cartIcon {
    color: var(--bronze);
}

.cart__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding-inline: .35rem;
    background: var(--bronze);
    color: var(--ivory);
    font-family: var(--text);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tools__account {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.tools__accountLabel {
    font-family: var(--text);
    font-size: var(--t-base);
    font-weight: 500;
    letter-spacing: .02em;
}


@media (max-width: 900px) {

    /* Account was hidden here and left an empty link. Keep it. */
    .tools__accountLabel {
        display: inline-block;
        font-size: var(--t-sm);
    }

    .tools {
        gap: var(--s2);
    }
}

@media (max-width: 560px) {

    .tools {
        gap: .6rem;
    }

    .tools__accountLabel {
        font-size: .8125rem;
    }

    .tools__cartIcon {
        width: 19px;
        height: 19px;
    }

    .cart__count {
        min-width: 19px;
        height: 19px;
        font-size: .6875rem;
    }

    .footer__social a {
        width: 46px;
        height: 46px;
    }
}


/* ============================================================
   HEADER OVERLAP BETWEEN 640px AND 900px
   ============================================================

   .masthead__in is 1fr auto 1fr, which forces the two outer
   columns to equal width. The tools side (search, Account, cart
   icon, count) needs more room than the Menu side, but the grid
   refuses to give it any, so it overflowed across the wordmark.

   The earlier fix only reached 640px. Sizing each side to its
   own content across the whole mobile range, and letting the
   wordmark clip rather than overlap if it ever runs out of room.
   ============================================================ */

@media (max-width: 900px) {

    .masthead__in {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: var(--s2);
    }

    .wordmark {
        min-width: 0;
        text-align: center;
        font-size: clamp(1.05rem, 3.4vw, 1.7rem);

        /* never allowed to sit on top of the controls */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    html[lang^="ar"] .wordmark {
        font-size: clamp(1.4rem, 4.2vw, 2.1rem);
    }

    .tools {
        gap: var(--s2);
        flex: none;
    }

    .burger {
        flex: none;
        white-space: nowrap;
    }
}

@media (max-width: 560px) {

    .wordmark {
        font-size: clamp(.95rem, 3.6vw, 1.15rem);
    }

    html[lang^="ar"] .wordmark {
        font-size: clamp(1.25rem, 4.6vw, 1.5rem);
    }

    .tools {
        gap: .55rem;
    }
}


/* ============================================================
   TWO-ROW MOBILE HEADER
   ============================================================

   Squeezing Menu, the wordmark, search, Account and the cart onto
   one line left the brand truncated to "Mathaher C...". Below
   900px the wordmark now takes a row of its own and the controls
   sit beneath it, so the company name is always complete.

   Slightly taller header, full brand. Uses named areas on the
   existing three children, so no markup change.
   ============================================================ */

@media (max-width: 900px) {

    .masthead__in {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "brand brand"
            "menu  tools";
        row-gap: var(--s2);
        column-gap: var(--s2);
        padding-block: var(--s3) var(--s2);
    }

    .burger {
        grid-area: menu;
        justify-self: start;
    }

    .wordmark {
        grid-area: brand;
        justify-self: center;
        text-align: center;

        /* room for the full name now, so no clipping */
        overflow: visible;
        text-overflow: clip;
        font-size: clamp(1.4rem, 5.4vw, 2.1rem);
    }

    html[lang^="ar"] .wordmark {
        font-size: clamp(1.7rem, 6.4vw, 2.4rem);
    }

    .tools {
        grid-area: tools;
        justify-self: end;
        gap: var(--s3);
    }
}

@media (max-width: 560px) {

    .wordmark {
        font-size: clamp(1.2rem, 5.6vw, 1.6rem);
    }

    html[lang^="ar"] .wordmark {
        font-size: clamp(1.5rem, 6.6vw, 1.9rem);
    }

    .tools {
        gap: var(--s2);
    }
}


/* ============================================================
   FOOTER SOCIAL ICONS — LARGER STILL
   ============================================================

   Four marks now: WhatsApp, Instagram, TikTok, Snapchat.
   Sized up and allowed to wrap so the row never forces the
   footer wider than the screen on a narrow phone.
   ============================================================ */

.footer__social {
    flex-wrap: wrap;
    gap: var(--s2);
}

.footer__social a {
    width: 56px;
    height: 56px;
}

.footer__social .socialIcon {
    width: 30px;
    height: 30px;
}

@media (max-width: 560px) {

    .footer__social a {
        width: 52px;
        height: 52px;
    }

    .footer__social .socialIcon {
        width: 28px;
        height: 28px;
    }
}


/* ============================================================
   FOOTER SOCIAL — BRAND MARKS
   ============================================================

   Three are official brand PNGs, one is inline SVG. They need to
   sit at the same visual size and keep their own colours, so the
   outlined button treatment is dropped here: full-colour marks
   inside bordered boxes read as cluttered.
   ============================================================ */

.footer__social a {
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    opacity: 1;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}

.footer__social a:hover,
.footer__social a:focus-visible {
    background: none;
    border: 0;
    opacity: .78;
    transform: translateY(-1px);
}

.footer__social .socialIcon {
    width: 34px;
    height: 34px;
}

/* PNGs must not stretch, whatever aspect they ship at */
.socialIcon--img {
    object-fit: contain;
    display: block;
}

@media (max-width: 560px) {

    .footer__social a {
        width: 42px;
        height: 42px;
    }

    .footer__social .socialIcon {
        width: 32px;
        height: 32px;
    }
}


/* ============================================================
   CONTACT PAGE SOCIAL MARKS
   ============================================================

   The Follow us card now uses the same brand images as the
   footer, with the platform name beside each. The whole row is
   the link, so name and icon are both clickable.
   ============================================================ */

.contactLink--social {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-height: 48px;
}

.contactLink--social .socialIcon {
    width: 28px;
    height: 28px;
    flex: none;
    color: inherit;
}

.contactLink--social .contactLink__value {
    margin-block-start: 0;
    font-size: 1.0625rem;
}

.contactLink--social:hover .socialIcon,
.contactLink--social:focus-visible .socialIcon {
    opacity: .8;
}


/* ============================================================
   FOOTER COLUMN ALIGNMENT
   ============================================================

   The SHOP and INFORMATION headings were removed from
   footer.php. Without them the two link columns rose to the top
   of the grid row and their first link sat higher than the
   WhatsApp number in the contact column.

   This pushes them down by the exact height of the contact
   label row, so "Shop" and "Our Story" start level with the
   phone number. Built from the same custom properties the label
   itself uses, so it follows any later change to the type scale
   rather than drifting out of step with it:

     .2rem                  .footer__contact margin-block-start
     var(--t-xs) * 1.65     the label's line box (body line-height)
     .2rem                  .footer__contactValue margin-block-start

   padding-block-start is direction-neutral, so Arabic RTL is
   unaffected.

   At 900px the grid drops to two columns and the offset still
   keeps each pair level. At 600px and below it becomes a single
   stacked column, where the offset would only add stray space
   above the links, so it is removed there and .footer__grid gap
   handles the rhythm on its own.
   ============================================================ */

.footer__col--links {
    padding-block-start: calc(.4rem + (var(--t-xs) * 1.65));
}

@media (max-width: 600px) {

    .footer__col--links {
        padding-block-start: 0;
    }
}