/* Chrome's "auto dark mode" repaints light pages on some Android and
   desktop setups, which turns this cream ground into mud and recolours
   links to its own defaults. The design is light on purpose, so declare
   that and opt out. */
:root {
    color-scheme: only light;

    /* ---------------------------------------------------------------
       Layering scale

       The header in store.css is z-index 100. Anything meant to sit over
       it has to clear that, and picking numbers per component is how the
       bag ended up underneath. One scale, stated once:

         100  site header              (store.css)
         200  mobile menu drawer       (store.css)
         300  bag scrim
         310  bag drawer
         400  QPay modal
         500  toast

       Gaps of 100 leave room to insert something later without renumbering.
       --------------------------------------------------------------- */
    --z-bag-scrim: 300;
    --z-bag:       310;
    --z-modal:     400;
    --z-toast:     500;
}

/* =====================================================================
   Coconut girl — pages the homepage design did not cover.

   store.css holds the original design verbatim; nothing here overrides
   it. Everything below is built from the same tokens (--choc, --paper,
   --rose, --line) so the bag, product page, catalogue and QPay checkout
   read as the same store.

   Kept separate so you can re-export the homepage design over
   store.css without losing this.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Bag drawer
   --------------------------------------------------------------------- */
.bag-scrim {
    position: fixed;
    inset: 0;
    background: rgba(60, 40, 27, .38);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: var(--z-bag-scrim);
}
.bag-scrim.open { opacity: 1; pointer-events: auto; }

.bag {
    position: fixed;
    top: 0; right: 0;
    height: 100%;
    width: min(430px, 100%);
    background: var(--paper);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.22,.7,.28,1);
    z-index: var(--z-bag);
    display: flex;
    flex-direction: column;
}
.bag.open { transform: none; }

.bag-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 24px; border-bottom: 1px solid var(--line);
}
.bag-body { flex: 1; overflow-y: auto; padding: 8px 24px 20px; }
.bag-foot { border-top: 1px solid var(--line); padding: 20px 24px 26px; background: var(--cream); }

.bagline {
    display: grid;
    grid-template-columns: 72px minmax(0,1fr) auto;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}
.bagline img { width: 72px; height: 72px; object-fit: cover; background: var(--sand); }
.bagline .bl-name { font-family: var(--serif); font-size: 17px; line-height: 1.15; }
.bagline .bl-meta { font-size: 12px; opacity: .68; margin-top: 3px; }
.bagline .bl-amt { text-align: right; font-size: 13px; white-space: nowrap; }

.stepper {
    display: inline-flex; align-items: center; gap: 2px;
    border: 1px solid var(--line); margin-top: 9px;
}
.stepper button {
    width: 26px; height: 26px; border: 0; background: none;
    color: var(--choc); cursor: pointer; font-size: 14px; line-height: 1;
}
.stepper button:hover { background: var(--sand); }
.stepper span { font-size: 12.5px; min-width: 26px; text-align: center; }

.bl-remove {
    display: block; margin-top: 8px; background: none; border: 0; padding: 0;
    font-family: var(--sans); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; opacity: .55; cursor: pointer; color: inherit;
}
.bl-remove:hover { opacity: 1; }

.bag-total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 4px; font-size: 15px;
}
.bag-total .lbl { font-family: var(--sans); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; opacity: .7; }
.bag-note { font-size: 11.5px; opacity: .6; margin-bottom: 16px; }

/* Empty states are an invitation, not an apology */
.blank { text-align: center; padding: 54px 16px; }
.blank h4 { font-family: var(--serif); font-size: 22px; margin-bottom: 6px; }
.blank p { font-size: 13.5px; opacity: .7; margin-bottom: 20px; }

/* ---------------------------------------------------------------------
   Catalogue filters
   --------------------------------------------------------------------- */
.shop-head { padding-top: 46px; padding-bottom: 26px; text-align: center; }
.shop-head h1 { font-size: clamp(30px, 4.2vw, 46px); margin: 12px 0 8px; }
.shop-head p { opacity: .75; max-width: 52ch; margin: 0 auto; font-size: 15px; }

.filterbar {
    display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-end;
    padding: 20px 0 22px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 34px;
}
.fgroup { display: flex; flex-direction: column; gap: 10px; }
.fgroup > .kicker { opacity: .6; }
.pills { display: flex; gap: 7px; flex-wrap: wrap; }

.pill-btn {
    font-family: var(--sans); font-weight: 500;
    text-transform: uppercase; letter-spacing: .12em; font-size: 10px;
    padding: 7px 13px; border: 1px solid var(--line); border-radius: 2px;
    background: transparent; color: var(--choc); cursor: pointer;
    transition: background .18s, color .18s, border-color .18s;
}
.pill-btn:hover { border-color: var(--choc); }
.pill-btn[aria-pressed="true"] { background: var(--choc); border-color: var(--choc); color: var(--paper); }

.frange { display: flex; align-items: center; gap: 12px; }
.frange input[type="range"] { width: 180px; accent-color: var(--choc); }
.frange output { font-size: 13px; white-space: nowrap; }

select.fsort {
    font-family: var(--sans); font-size: 12px; padding: 8px 12px;
    border: 1px solid var(--line); border-radius: 2px;
    background: var(--paper); color: var(--choc);
}
.filterbar .fclear { margin-left: auto; }

.grid-all {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 34px 22px;
}
.grid-all .pcard { width: auto; }

/* ---------------------------------------------------------------------
   Product page
   --------------------------------------------------------------------- */
.crumbs { padding-top: 22px; font-size: 12px; opacity: .65; }
.crumbs a:hover { border-bottom: 1px solid var(--line); }

/* padding-top/bottom as longhands: these classes sit on the same element
   as .wrap, and a "padding: 28px 0 70px" shorthand sets left and right
   back to zero, wiping out the gutter .wrap provides. */
.pdp { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 54px; padding-top: 28px; padding-bottom: 70px; }

.pdp-gallery { display: flex; flex-direction: column; gap: 12px; }
.pdp-main { aspect-ratio: 1; background: var(--sand); overflow: hidden; }
.pdp-main img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumbs { display: flex; gap: 10px; }
.pdp-thumbs button {
    width: 74px; aspect-ratio: 1; padding: 0; overflow: hidden;
    border: 1px solid transparent; background: var(--sand); cursor: pointer;
}
.pdp-thumbs button[aria-current="true"] { border-color: var(--choc); }
.pdp-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pdp-info h1 { font-size: clamp(28px, 3.6vw, 40px); margin: 10px 0 8px; }
.pdp-info .lede { font-size: 15px; opacity: .78; margin-bottom: 18px; }

.pdp-price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 24px; }
.pdp-price .now { font-size: 22px; }
.pdp-price s { font-size: 14px; opacity: .55; }
.pdp-price .save {
    font-family: var(--sans); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; background: var(--rose); padding: 4px 8px; border-radius: 2px;
}

.pdp-block { padding: 20px 0; border-top: 1px solid var(--line); }
.pdp-block > .kicker { display: block; opacity: .6; margin-bottom: 12px; }

.sw-picker { display: flex; gap: 12px; flex-wrap: wrap; }
.sw-opt {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    background: none; border: 0; cursor: pointer; padding: 0; width: 62px;
    font-size: 10.5px; line-height: 1.25; text-align: center; color: inherit; opacity: .7;
}
.sw-opt .dot {
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid var(--line); box-shadow: 0 0 0 0 var(--choc);
    transition: box-shadow .18s ease;
}
.sw-opt[aria-pressed="true"] { opacity: 1; }
/* .sw-opt sets display:flex, which beats the hidden attribute. Without this
   the designs of every material stayed on screen when one material was picked. */
.sw-picker [hidden] { display: none !important; }
.sw-opt[aria-pressed="true"] .dot { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--choc); }

/* A variant with a photograph shows the photograph. Squared off rather
   than round, because a round crop of a claw clip cuts off the teeth. */
.sw-opt .sw-thumb {
    width: 52px;
    height: 52px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 2px;
    box-shadow: 0 0 0 0 var(--choc);
    transition: box-shadow .18s ease;
}
.sw-opt[aria-pressed="true"] .sw-thumb {
    box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--choc);
}

/* Any row containing a photograph sizes every option the same, so a
   half-photographed set still lines up. A shop owner adding pictures one
   at a time sits in that mixed state until they finish, and it should not
   look broken while they do. */
.sw-opt.sized { width: 66px; }
.sw-opt.sized .dot {
    width: 52px;
    height: 52px;
    border-radius: 2px;   /* square, to match the thumbnails beside it */
}

/* Neither a photograph nor a colour: show the name rather than a blank
   grey square, which is what the neutral fallback would render as. */
.dot-text {
    display: grid;
    place-items: center;
    background: var(--sand);
    color: rgba(81, 54, 37, .75);
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .08em;
}

/* The strike-through for a sold-out option was positioned for the round
   dot; the thumbnail is wider and taller. */
.sw-opt.has-image.is-out .sw-thumb { opacity: .45; }

.pdp-buy { display: flex; gap: 12px; align-items: stretch; margin: 24px 0 10px; }
.pdp-buy .stepper { margin: 0; }
.pdp-buy .btn { flex: 1; }

.stock-note { font-size: 12px; opacity: .7; }
.stock-note.low { color: #9a3d2c; opacity: 1; }

.spec-list { list-style: none; display: grid; gap: 8px; font-size: 13.5px; }
.spec-list li { display: flex; justify-content: space-between; gap: 20px; }
.spec-list .k { opacity: .6; }

/* ---------------------------------------------------------------------
   Checkout
   --------------------------------------------------------------------- */
.checkout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 54px; padding-top: 34px; padding-bottom: 80px; align-items: start; }

.steps { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.steps .st {
    flex: 1; padding: 0 0 14px;
    font-family: var(--sans); font-weight: 500; font-size: 10.5px;
    letter-spacing: .16em; text-transform: uppercase; opacity: .45;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.steps .st[aria-current="step"] { opacity: 1; border-bottom-color: var(--choc); }
.steps .st .n { opacity: .55; margin-right: 7px; }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 17px; }
.field label { font-family: var(--sans); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .65; }
.field input, .field textarea, .field select {
    font-family: var(--sans); font-size: 14px; color: var(--choc);
    padding: 12px 13px; border: 1px solid var(--line); border-radius: 2px; background: var(--paper);
}
.field input:focus, .field textarea:focus { border-color: var(--choc); outline: none; }
.field .hint { font-size: 11.5px; opacity: .6; }
.field.bad input, .field.bad textarea { border-color: #9a3d2c; }
.field .err { font-size: 11.5px; color: #9a3d2c; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }

.paylist { display: flex; flex-direction: column; gap: 11px; margin-bottom: 24px; }
.payopt {
    display: flex; align-items: center; gap: 13px;
    padding: 16px 17px; border: 1px solid var(--line); border-radius: 2px; cursor: pointer;
}
.payopt:has(input:checked) { border-color: var(--choc); background: var(--cream); }
.payopt input { accent-color: var(--choc); }
.payopt .t { font-size: 14.5px; }
.payopt .s { font-size: 12px; opacity: .65; }

.summary { background: var(--cream); border: 1px solid var(--line); padding: 26px 24px; position: sticky; top: 96px; }
.summary h3 { font-family: var(--serif); font-size: 22px; margin-bottom: 18px; }
.sumline { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.sumline:last-of-type { border-bottom: 0; }
.sumtotal { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--choc); font-size: 19px; }

.notice {
    padding: 13px 16px; border-left: 2px solid var(--choc);
    background: var(--sand); font-size: 13px; margin-bottom: 22px;
}
.notice.bad { border-left-color: #9a3d2c; }

/* ---------------------------------------------------------------------
   QPay modal
   --------------------------------------------------------------------- */
.qp-scrim {
    position: fixed; inset: 0; background: rgba(60,40,27,.5);
    display: grid; place-items: center; padding: 20px; z-index: var(--z-modal);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.qp-scrim.open { opacity: 1; pointer-events: auto; }

.qp-sheet {
    background: var(--paper); border: 1px solid var(--line);
    width: min(440px, 100%); max-height: 92vh; overflow-y: auto;
    padding: 30px 28px 32px; text-align: center;
    transform: translateY(10px); transition: transform .24s cubic-bezier(.22,.7,.28,1);
}
.qp-scrim.open .qp-sheet { transform: none; }

.qp-amount { font-family: var(--serif); font-size: 34px; margin: 8px 0 2px; }
.qp-order { font-size: 11.5px; letter-spacing: .12em; opacity: .6; text-transform: uppercase; }

.qp-qr { background: #fff; border: 1px solid var(--line); padding: 16px; margin: 22px auto 14px; width: 244px; }
.qp-qr img, .qp-qr svg { width: 100%; height: auto; display: block; }

.qp-poll {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    font-family: var(--sans); font-size: 10.5px; letter-spacing: .16em;
    text-transform: uppercase; opacity: .7; margin-bottom: 24px;
}
.qp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--matcha); animation: qpp 1.4s ease-in-out infinite; }
@keyframes qpp { 0%,100% { opacity: .25 } 50% { opacity: 1 } }

.qp-banks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.qp-bank {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 13px 6px; border: 1px solid var(--line); background: var(--paper);
    font-size: 11px; line-height: 1.25; text-align: center; color: var(--choc); cursor: pointer;
}
.qp-bank:hover { border-color: var(--choc); background: var(--sand); }
.qp-bank img { width: 30px; height: 30px; object-fit: contain; border-radius: 50%; }
.qp-bank .ini {
    width: 30px; height: 30px; border-radius: 50%; background: var(--sand);
    display: grid; place-items: center; font-size: 11px; letter-spacing: .04em;
}

.qp-done .tick {
    width: 62px; height: 62px; margin: 6px auto 18px; border-radius: 50%;
    border: 1px solid var(--matcha); color: var(--olive);
    display: grid; place-items: center; font-size: 26px;
}
.qp-done h3 { font-family: var(--serif); font-size: 26px; margin-bottom: 8px; }
.qp-done p { font-size: 13.5px; opacity: .75; margin-bottom: 24px; }

/* ---------------------------------------------------------------------
   Confirmation
   --------------------------------------------------------------------- */
.thanks { max-width: 620px; margin: 0 auto; text-align: center; padding-top: 70px; padding-bottom: 90px; }
.thanks h1 { font-size: clamp(30px, 4vw, 44px); margin: 14px 0 12px; }
.thanks p { opacity: .78; margin-bottom: 26px; }
.thanks .card { background: var(--cream); border: 1px solid var(--line); padding: 26px 24px; text-align: left; margin-bottom: 28px; }

/* ---------------------------------------------------------------------
   Toast
   --------------------------------------------------------------------- */
.toast {
    position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px);
    background: var(--choc); color: var(--paper);
    font-family: var(--sans); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
    padding: 13px 22px; border-radius: 2px; z-index: var(--z-toast);
    opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
    .pdp, .checkout { grid-template-columns: 1fr; gap: 34px; }
    .summary { position: static; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------------
   Instagram embed

   Instagram injects an iframe with its own fixed styling, so the job here
   is only to frame it: cream band, our heading above, embed centred and
   capped so it does not stretch on a wide screen.
   --------------------------------------------------------------------- */
.ig-follow {
    background: var(--cream);
    border-top: 1px solid var(--line);
    padding: 52px 0 56px;
}

.ig-head { text-align: center; margin-bottom: 26px; }
.ig-head .kicker { display: block; opacity: .6; margin-bottom: 10px; }
.ig-head h2 {
    font-family: var(--serif);
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 400;
    margin: 0 0 8px;
}
.ig-head h2 a { border-bottom: 1px solid var(--line); }
.ig-head h2 a:hover { border-bottom-color: var(--choc); }
.ig-head p { font-size: 13.5px; opacity: .75; margin: 0; }

.ig-embed { display: flex; justify-content: center; }

/* The injected iframe carries inline width/margin; centre it regardless. */
.ig-embed iframe.instagram-media {
    margin: 0 auto !important;
    max-width: 658px !important;
    min-width: 0 !important;
}
.ig-embed .instagram-media { margin: 0 auto !important; }


/* ---------------------------------------------------------------------
   Free-gift meter in the bag

   The announcement bar promises a mini charm over a threshold; this shows
   how close the customer actually is, which is the only place that
   promise can do any work.
   --------------------------------------------------------------------- */
.gift-meter { margin-bottom: 16px; }

.gift-note {
    font-family: var(--sans);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .75;
    margin: 0 0 7px;
}

.gift-track {
    height: 4px;
    background: var(--sand);
    border-radius: 2px;
    overflow: hidden;
}
.gift-track > span {
    display: block;
    height: 100%;
    background: var(--choc);
    border-radius: 2px;
    transition: width .35s cubic-bezier(.2, .7, .3, 1);
}
.gift-track > span.full { background: var(--olive, #4C5A38); }

@media (prefers-reduced-motion: reduce) {
    .gift-track > span { transition: none; }
}

/* Sold-out variant stays selectable — you should be able to see its price
   and read that it is gone, rather than wonder why it vanished. */
.sw-opt.is-out .dot { opacity: .4; }
.sw-opt.is-out::after {
    /* A diagonal from bottom-left to top-right ACROSS the swatch. It starts
       on the circle's lower-left edge and runs one diameter: the round dot is
       30px, centred in a 62px button, so its centre is (31, 15). */
    content: '';
    position: absolute;
    left: 20.4px; top: 25.6px;
    width: 30px; height: 1.5px;
    background: var(--choc);
    transform: rotate(-45deg);
    transform-origin: left center;
    opacity: .6;
    pointer-events: none;
}
/* Photo or square swatch: 52px square centred in a 66px button, so the line
   runs corner to corner, from (7, 52) to (59, 0): 52 x sqrt(2) = 73.5px. */
.sw-opt.sized.is-out::after { left: 7px; top: 52px; width: 73.5px; }
/* Material buttons are padded and already faded; a line drawn for a dot
   landed above them. Cross out the name instead. */
.sw-opt.sw-group.is-out::after { display: none; }
.sw-opt.sw-group.is-out > span:last-child { text-decoration: line-through; }
.sw-opt { position: relative; }

/* =====================================================================
   Shared storefront components

   Moved out of home.css. The product card, section headings, button and
   carousel are used by index.php, shop.php and product.php alike — living
   in a stylesheet only the homepage loaded is why the shop page rendered
   raw browser buttons and stray badge text.

   home.css keeps only what is genuinely homepage-specific: the hero, the
   claw band, the tiles, the feature split and the wide banner.
   ===================================================================== */

:root { --white: #FFFFFF; }

/* ---------------------------------------------------------------------
   Shared section furniture
   --------------------------------------------------------------------- */
.sec { padding: 62px 0; }
.sec.tight { padding: 44px 0; }
.sec.flush { padding: 0; }

.sec-title {
    font-family: var(--sans);
    font-size: clamp(19px, 2.4vw, 27px);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--choc);
    margin: 0 0 26px;
}
.sec-title.mid { text-align: center; }

/* Solid brown action button, the mockup's default */
.cg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 26px;
    /* Each falls back to the design's own value, so a theme setting left
       empty changes nothing. */
    background: var(--btn-bg, var(--choc));
    color: var(--btn-text, var(--paper));
    border: 1px solid var(--btn-bg, var(--choc));
    border-radius: var(--btn-radius, 0);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--btn-track, .16em);
    text-transform: var(--btn-caps, uppercase);
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.cg-btn:hover { background: var(--choc-deep); border-color: var(--choc-deep); }

.cg-btn.ghost { background: transparent; color: var(--btn-bg, var(--choc)); }
.cg-btn.ghost:hover { background: var(--choc); color: var(--paper); }

.cg-btn.on-dark { background: var(--paper); color: var(--choc); border-color: var(--paper); }
.cg-btn.on-dark:hover { background: transparent; color: var(--paper); }

.cg-btn.outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.85); }
.cg-btn.outline-light:hover { background: #fff; color: var(--choc); }


/* ---------------------------------------------------------------------
   Product carousel
   --------------------------------------------------------------------- */
.carousel-wrap { position: relative; }

.cg-rail {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 6px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.cg-rail::-webkit-scrollbar { display: none; }
.cg-rail { align-items: stretch; }
.cg-rail > * { scroll-snap-align: start; flex: 0 0 250px; }

.rail-arrow {
    position: absolute;
    top: 34%;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--choc);
    cursor: pointer;
    z-index: 3;
    opacity: 0;
    transition: opacity .18s ease, background .18s ease;
}
.carousel-wrap:hover .rail-arrow, .rail-arrow:focus-visible { opacity: 1; }
.rail-arrow:hover { background: var(--cream); }
.rail-arrow.prev { left: -18px; }
.rail-arrow.next { right: -18px; }
.rail-arrow[disabled] { opacity: 0 !important; pointer-events: none; }

/* ---------------------------------------------------------------------
   Product card
   --------------------------------------------------------------------- */
.pc { display: flex; flex-direction: column; gap: 9px; height: 100%; }
.pc-name { margin-top: 2px; }
.pc-price { margin-top: auto; }

.pc-media {
    display: block;
    position: relative;
    aspect-ratio: 1;
    background: var(--white);
    overflow: hidden;
}
.pc-media picture { display: block; width: 100%; height: 100%; }
.pc-media img {
    width: 100%; height: 100%;
    /* contain, because these are cut-outs and packshots — cover would
       crop a necklace in half. Small padding so the piece fills the
       frame instead of floating in a white box. */
    object-fit: contain;
    padding: 3%;
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.pc:hover .pc-media img { transform: scale(1.03); }

.pc-flag {
    position: absolute; top: 10px; left: 10px;
    font-family: var(--sans);
    font-size: 8.5px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase;
    padding: 4px 8px; border-radius: 2px;
    background: rgba(81, 54, 37, .92); color: var(--paper);
    max-width: calc(100% - 20px);
    line-height: 1.3;
}
.pc-flag.sale { background: #8C2F39; }
.pc-flag.out  { background: var(--choc); opacity: .8; }

/* Image dots — the mockup's little indicator row under each card */
.pc-dots { display: flex; gap: 5px; min-height: 13px; }
.pc-dots button {
    width: 7px; height: 7px; padding: 0;
    border: 0; border-radius: 50%;
    background: #CFC7B6;
    cursor: pointer;
}
.pc-dots button[aria-current="true"] { background: var(--choc); }

.pc-name {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--choc);
    line-height: 1.4;
}
.pc-name:hover { text-decoration: underline; }

.pc-price {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--choc);
}
.pc-price s { opacity: .5; margin-left: 6px; font-size: 12px; }

.pc .cg-btn { align-self: stretch; justify-content: center; padding: 11px 18px; font-size: 10px; }
.pc .cg-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------------------------------------------------------------------
   Catalogue grid

   The card is authored for a fixed-width carousel slide; in the grid it
   has to fill its column instead.
   --------------------------------------------------------------------- */
.grid-all .pc { width: auto; }
.grid-all .pc-media { aspect-ratio: 1; }

/* The flag reads as a caption when it is not over the image. */
.grid-all .pc-flag,
.cg-rail .pc-flag { position: absolute; }

/* Sold-out cards stay legible rather than looking like a rendering fault. */
.pc:has(.cg-btn[disabled]) .pc-media img { opacity: .55; }


/* =====================================================================
   Header additions

   The header itself is store.css, unchanged — it was right the first
   time and my rewrite of it was a mistake. Only two things are added
   here: the announcement bar has to hold several rotating messages
   rather than one fixed line, and one nav item is set in the italic
   serif.
   ===================================================================== */

/* ---- Announcement bar: several messages in one line's worth of space ---- */

/* Messages are stacked in the same grid cell and cross-faded, so the bar
   never changes height between a short message and a long one. */
/* Messages are stacked in one grid cell so the bar keeps its height, but
   the cell is as wide as the longest message — without this a short one
   sits left of centre while a long one looks correct. */
.ann-track { display: grid; justify-items: center; text-align: center; }

.ann-item {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.ann-item.on { opacity: 1; pointer-events: auto; }
.ann-item a { color: inherit; border-bottom: 1px solid rgba(252, 248, 238, .4); }
.ann-item a:hover { border-bottom-color: currentColor; }

/* The arrows replace the design's decorative ← → spans and do the same
   job visually, so they inherit .ar's placement from store.css. */
.announce .ann-arrow {
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    opacity: .55;
    padding: 0;
}
.announce .ann-arrow:hover { opacity: 1; }

/* ---- One nav item in cursive ---- */
.site-head a.link.cursive,
header a.link.cursive {
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    letter-spacing: .01em;
    text-transform: none;
}

/* ---- Search panel ----

   Search drops out of the header rather than navigating away, so a search
   that finds nothing has not cost the customer their place on the page. */
.search-panel {
    border-top: 1px solid var(--line);
    background: var(--paper);
    animation: searchDrop .22s ease;
}
@keyframes searchDrop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.search-form {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
}
.search-form svg { width: 20px; height: 20px; color: var(--choc); opacity: .55; flex-shrink: 0; }

.search-form input {
    flex: 1;
    min-width: 0;
    font-family: var(--sans);
    font-size: 16px;
    color: var(--choc);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 8px 0;
}
.search-form input:focus { outline: none; border-bottom-color: var(--choc); }
.search-form input::placeholder { color: rgba(81, 54, 37, .45); }

.search-close {
    background: none;
    border: 0;
    font-size: 24px;
    line-height: 1;
    color: var(--choc);
    opacity: .5;
    cursor: pointer;
    padding: 0 4px;
}
.search-close:hover { opacity: 1; }

/* ---- Empty search result ---- */
.search-note {
    padding: 44px 20px;
    text-align: center;
    border: 1px dashed var(--line);
}
.search-note strong { display: block; font-family: var(--serif); font-size: 20px; margin-bottom: 6px; }
.search-note p { font-size: 13.5px; opacity: .75; margin: 0 0 16px; }

@media (max-width: 860px) {
    /* store.css already handles the header at this width — it hides the
       menu and shows the burger. Only the two things added here need a
       narrow-screen rule. */
    .search-form { padding: 14px 16px; gap: 8px; }
    .search-form .cg-btn { display: none; }
}

/* ---------------------------------------------------------------------
   Variant chips on a product card

   A colour dot cannot describe "Tortoiseshell", and on a card there is
   nothing else to tell two variants apart. When a variant has its own
   photograph the chip becomes that photograph.
   --------------------------------------------------------------------- */
.pc-dots--thumbs { gap: 6px; min-height: 30px; }

.pc-dots--thumbs button.chip-image {
    width: 28px;
    height: 28px;
    padding: 1px;
    border-radius: 3px;
    border: 1px solid rgba(81, 54, 37, .18);
    background: #fff;
    overflow: hidden;
    box-shadow: 0 0 0 0 var(--choc);
    transition: box-shadow .16s ease, border-color .16s ease;
}
.pc-dots--thumbs button.chip-image img {
    width: 100%; height: 100%; object-fit: contain; display: block;
}
.pc-dots--thumbs button.chip-image[aria-current="true"] {
    box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 2.5px var(--choc);
    border-color: transparent;
}

/* A colour chip sitting in a row of photographs is squared off to match,
   so the row does not read as two different kinds of control. */
.pc-dots--thumbs button.chip-colour,
.pc-dots--thumbs button.chip-text {
    width: 28px;
    height: 28px;
    border-radius: 3px;
    border: 1px solid rgba(81, 54, 37, .18);
}
.pc-dots--thumbs button.chip-colour[aria-current="true"],
.pc-dots--thumbs button.chip-text[aria-current="true"] {
    box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 2.5px var(--choc);
}

/* Third state: no photograph and no colour. Two letters of the name say
   more than a grey square. */
button.chip-text {
    display: grid;
    place-items: center;
    background: var(--sand);
    padding: 0;
}
button.chip-text span {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .04em;
    color: rgba(81, 54, 37, .78);
}

/* =====================================================================
   Small screens

   One block rather than the three that had accumulated. Two of them both
   set .grid-all's gap, which is the sort of thing that makes a value
   impossible to trace when it is wrong.

   The recurring problem on a phone was doubled padding: .wrap already
   inserts a gutter and several panels added their own on top, so on a
   375px screen the content started 52px in before anything else applied.
   ===================================================================== */

@media (max-width: 700px) {
    /* 26px each side costs 14% of a 375px screen before any component
       adds its own padding. */
    .wrap { padding: 0 16px; }

    /* ---- Shop ---- */
    .shop-head { padding-top: 26px; padding-bottom: 16px; }
    .shop-head p { font-size: 13px; }
    .crumbs { padding-top: 14px; font-size: 11.5px; }

    .filterbar { gap: 14px; }
    .filterbar .fclear { margin-left: 0; }

    .grid-all { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
    .grid-all .pc-name { font-size: 11.5px; }
    .grid-all .cg-btn { width: 100%; padding: 10px 6px; font-size: 9.5px; }

    /* ---- Product ---- */
    .pdp { gap: 24px; padding-top: 14px; padding-bottom: 48px; }
    .pdp-block { padding: 16px 0; }
    .pdp-thumbs { gap: 8px; }
    .sw-picker { gap: 10px; }

    /* The stepper keeps its width; the button takes what is left rather
       than pushing the row past the screen edge. */
    .pdp-buy { gap: 10px; margin: 18px 0 8px; }
    .pdp-buy .btn { flex: 1 1 auto; min-width: 0; }

    /* ---- Checkout ---- */
    .checkout { gap: 26px; padding-top: 18px; padding-bottom: 56px; }

    /* .summary sits inside .wrap, so its own 24px was doubling the
       gutter. Less padding, and the panel pulled out to the screen edges
       so it reads as a band rather than a cramped box. */
    .summary {
        padding: 20px 16px;
        margin: 0 -16px;
        border-left: 0;
        border-right: 0;
    }

    .duo { grid-template-columns: 1fr; }
    .qp-banks { grid-template-columns: repeat(2, 1fr); gap: 8px; }

    /* ---- Shared ---- */
    .ig-follow { padding: 34px 0 38px; }
}

@media (max-width: 400px) {
    /* Two cards stop being legible much below this width. */
    .grid-all { grid-template-columns: 1fr; gap: 22px; }
    .grid-all .pc-name { font-size: 12.5px; }
    .grid-all .cg-btn { font-size: 10px; }
    .qp-banks { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Language switcher

   Shows the language you would switch TO, not the one you are in. Someone
   who cannot read the current language needs to see a word they can.
   --------------------------------------------------------------------- */
.lang-switch {
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .14em;
    color: var(--choc);
    padding: 5px 9px;
    border: 1px solid var(--line);
    border-radius: 2px;
    line-height: 1;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}
.lang-switch:hover { background: var(--choc); color: var(--paper); }

@media (max-width: 700px) {
    /* The drawer carries the switcher on a phone; the header is short of room. */
    .site-head .lang-switch { display: none; }
}

/* A colour beside each material in the filter bar — "Rose Gold" and
   "Gold" are hard to tell apart as words alone. */
.pill-btn .pill-dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: baseline;
    border: 1px solid rgba(81, 54, 37, .2);
}

/* ---------------------------------------------------------------------
   Menu items to the right of the wordmark

   store.css styles .nav-right for icons only, so links placed there need
   the same treatment the left-hand ones get.
   --------------------------------------------------------------------- */
.site-head .nav-right a.link {
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: .06em;
    color: var(--choc);
    white-space: nowrap;
}
.site-head .nav-right a.link.cursive {
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    letter-spacing: .01em;
    text-transform: none;
}

/* ---------------------------------------------------------------------
   Search in the phone drawer

   The header magnifier is hidden at this width, so without this there is
   no way to search on a phone at all.
   --------------------------------------------------------------------- */
.drawer-search {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 4px 0 14px;
    padding: 11px 13px;
    background: var(--cream, #F4EEE2);
    border-radius: 2px;
}
.drawer-search svg { width: 17px; height: 17px; color: var(--choc); opacity: .5; flex-shrink: 0; }
.drawer-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    font-family: var(--sans);
    font-size: 15px;      /* 16px or above, or iOS zooms the page on focus */
    color: var(--choc);
}
.drawer-search input:focus { outline: none; }
.drawer-search input::placeholder { color: rgba(81, 54, 37, .45); }

@media (max-width: 860px) {
    /* Right-hand menu items live in the drawer at this width, like the
       left-hand ones. */
    .site-head .nav-right a.link { display: none; }
}

/* An item that moved across keeps its spacing from the left-hand group
   rather than inheriting the tighter icon gap. */
.site-head .nav-right a.link.is-moved { margin-right: 2px; }

/* Both groups have run out of room. The menu scrolls sideways rather than
   sitting under the wordmark — losing an item silently is worse than a
   row that can be swiped. */
.site-head .nav.is-crowded .nav-left {
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
}
.site-head .nav.is-crowded .nav-left::-webkit-scrollbar { display: none; }

/* =====================================================================
   Montserrat corrections

   Montserrat is a wider, rounder face than the Jost the design shipped
   with, and it carries Cyrillic — which Jost does not, so every Mongolian
   string was falling back to a system font before this.

   Two consequences worth correcting: wide-tracked uppercase runs longer,
   and Montserrat's lowercase is optically larger at the same size.
   ===================================================================== */

/* Uppercase micro-labels: the design's tracking was tuned for a narrower
   face and now pushes these past their containers. */
.kicker,
.eyebrow,
.announce .ann-item,
.pc-flag,
.sec-title {
    letter-spacing: .14em;
}

/* Section headings sit a touch smaller so the wider face does not read as
   louder than the design intended. */
.sec-title {
    font-size: clamp(17px, 2.1vw, var(--type-section-title-size, 25px));
    font-weight: var(--type-section-title-weight, 500);
}

/* Nav links: 15px Montserrat measures like 17px Jost, so the menu had
   grown noticeably. */
.site-head .nav-left a.link,
.site-head .nav-right a.link { font-size: 14px; }

/* The italic accent keeps its size — it is one word, and shrinking it
   would lose the contrast it exists for. */
.site-head a.link.cursive { font-size: 16px; letter-spacing: 0; }

/* Buttons are short uppercase runs where the extra width shows most. */
.cg-btn, .btn { letter-spacing: .1em; }

/* Cyrillic has no true italic in Montserrat — the browser would slant the
   upright letters, which looks like a mistake in Mongolian. Upright, with
   the weight carrying the emphasis instead. */
html[lang="mn"] .site-head a.link.cursive {
    font-style: normal;
    font-weight: 500;
}

/* The bar itself, at every width. store.css centres it with flex, but the
   arrows are absolutely positioned inside it, so on a narrow screen a long
   message could run under them. */
.announce {
    text-align: center;
    padding-left: 46px;
    padding-right: 46px;
}
@media (max-width: 560px) {
    .announce { padding-left: 38px; padding-right: 38px; }
    .announce .ar, .announce .ann-arrow { width: 34px; }
}

/* Editable elsewhere in the type scale. Each keeps the design's value as
   its fallback, so clearing a field in the admin restores it. */
.pc-name {
    font-size: var(--type-product-name-size, 12px);
    font-weight: var(--type-product-name-weight, 500);
}
body {
    font-size: var(--type-body-size, 14px);
    font-weight: var(--type-body-weight, 400);
}

/* ---------------------------------------------------------------------
   Order confirmation: the number, and how to pay for it

   The order number is the one thing on this page a customer may need
   later — to quote on the phone, or to write on a transfer. Everything
   else is a receipt.
   --------------------------------------------------------------------- */
.order-id {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 22px;
    padding: 16px 20px;
    background: var(--cream, #F4EEE2);
    border-radius: 2px;
}
.order-id .kicker { flex-basis: 100%; opacity: .6; }
.order-id-value {
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    font-size: clamp(19px, 4vw, 26px);
    letter-spacing: .04em;
}

.copy-btn {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 5px 10px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--choc);
    border-radius: 2px;
    cursor: pointer;
}
.copy-btn:hover { border-color: var(--choc); }
.copy-btn.is-done { background: var(--choc); color: var(--paper); border-color: var(--choc); }

.pay-details { text-align: left; }
.pay-rows { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; margin: 14px 0 0; }
.pay-rows dt { font-size: 12px; opacity: .6; }
.pay-rows dd {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 14px;
}
.pay-rows .mono { font-family: var(--mono, ui-monospace, Menlo, monospace); letter-spacing: .02em; }

/* The reference is the field people skip, and skipping it is what makes a
   payment impossible to match. */
.pay-rows dt.is-key, .pay-rows dd.is-key { padding-top: 10px; border-top: 1px solid var(--line); }
.pay-rows dd.is-key .mono { font-size: 16px; font-weight: 500; }

.pay-warn {
    margin: 14px 0 0;
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.6;
    background: rgba(200, 139, 46, .12);
    border-left: 2px solid #C88B2E;
}

.pay-chosen { font-size: 13.5px; opacity: .75; margin: 0 0 20px; }

@media (max-width: 560px) {
    .pay-rows { grid-template-columns: 1fr; gap: 3px 0; }
    .pay-rows dd { margin-bottom: 10px; }
}

/* Wide-tracked uppercase, centred: the trailing letter-space is counted
   when centring, so the visible text sits half a space to the left. Any
   centred label with heavy tracking needs the indent back. */
.sec-title.mid,
.announce .ann-item,
.hero-copy .eyebrow,
.banner-card .kicker,
.feature .copy .kicker {
    text-indent: .2em;
}

/* Not the ones aligned left — there the trailing space falls off the end
   where nobody sees it, and an indent would visibly shift the text. */
.pdp-block .kicker,
.summary .kicker { text-indent: 0; }

/* ---------------------------------------------------------------------
   404

   Not an apology screen. Somebody arrived wanting something; the useful
   response is a search box already filled with what the URL suggests
   they were after, then a way into the catalogue.
   --------------------------------------------------------------------- */
.notfound {
    text-align: center;
    padding-top: clamp(48px, 9vh, 96px);
    padding-bottom: 40px;
    max-width: 620px;
}
.notfound .kicker { display: block; opacity: .55; margin-bottom: 14px; }
.notfound h1 {
    font-family: var(--serif);
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 14px;
}
.notfound-lead { font-size: 15px; line-height: 1.7; opacity: .75; margin: 0 auto 28px; max-width: 44ch; }

.notfound-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 14px;
    background: var(--cream, #F4EEE2);
    border-radius: 2px;
    margin-bottom: 22px;
}
.notfound-search svg { width: 18px; height: 18px; opacity: .5; flex-shrink: 0; }
.notfound-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    font-family: var(--sans);
    font-size: 15px;   /* 16px or below zooms iOS on focus; 15 is the floor that does not */
    color: var(--choc);
}
.notfound-search input:focus { outline: none; }
.notfound-search .cg-btn { flex-shrink: 0; }

.notfound-cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.notfound-cats a {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--choc);
}
.notfound-cats a:hover { border-color: var(--choc); background: var(--cream, #F4EEE2); }

.notfound-picks { padding-bottom: clamp(56px, 9vh, 96px); }
.notfound-picks .sec-title { margin-bottom: 22px; }

@media (max-width: 560px) {
    .notfound-search { flex-wrap: wrap; padding: 12px; }
    .notfound-search input { flex-basis: calc(100% - 30px); }
    .notfound-search .cg-btn { width: 100%; margin-top: 8px; }
}

/* Delivery options at checkout share the payment list's shape. */
/* Name on the left, price on the right, with the gap between them the
   line's own. A float inside .t did nothing, because .t is an inline span
   and a float in one pushes nothing aside — so the price ended up welded
   to the last letter of the name. */
.payopt > span:last-child { flex: 1; min-width: 0; }

.payopt .t {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.payopt .ship-cost {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: .85;
}

/* A long Mongolian name and its price stack rather than squeezing. */
@media (max-width: 420px) {
    .payopt .t { flex-wrap: wrap; gap: 2px 16px; }
}

.payopt .ship-gap { display: block; opacity: .8; margin-top: 3px; }

/* The note under the name. It carried a <br> before .t became a block;
   without that it needs to be a block itself or it sits on the same line. */
.payopt .s { display: block; margin-top: 3px; }

/* ---------------------------------------------------------------------
   Promo code at checkout
   --------------------------------------------------------------------- */
.promo-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

.promo-label {
    display: block;
    font-family: var(--sans);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .6;
    margin-bottom: 8px;
}

.promo-row { display: flex; gap: 8px; }
.promo-input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    background: var(--paper);
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    font-size: 14px;         /* below 15px and iOS zooms the page on focus */
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--choc);
}
.promo-input:focus { outline: none; border-color: var(--choc); }

.promo-on {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    background: var(--sand, #EFE6D5);
}
.promo-code {
    font-family: var(--mono, ui-monospace, Menlo, monospace);
    font-size: 13px;
    letter-spacing: .06em;
}
.promo-x {
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--choc);
    opacity: .65;
    padding: 2px 4px;
}
.promo-x:hover { opacity: 1; }

.promo-note { margin: 9px 0 0; font-size: 12.5px; line-height: 1.5; }
.promo-note.is-ok  { color: #1F6B45; }
.promo-note.is-bad { color: #8E0B21; }

/* A discount reads as money coming off, so it is the one figure in the
   summary that is not the shop's colour. */
.sumline.is-discount span:last-child { color: #1F6B45; }

/* ---------------------------------------------------------------------
   Payment link page

   Opened from a chat, on a phone, by someone with no account and no bag.
   One column, nothing else on it.
   --------------------------------------------------------------------- */
.paypage {
    max-width: 520px;
    padding-top: clamp(32px, 7vh, 64px);
    padding-bottom: clamp(48px, 9vh, 88px);
    text-align: center;
}
.paypage .kicker { display: block; opacity: .6; margin-bottom: 10px; }
.paypage h1 {
    font-family: var(--serif);
    font-size: clamp(24px, 5vw, 34px);
    font-weight: 400;
    margin: 0 0 18px;
}
.paypage-lead { font-size: 14.5px; line-height: 1.7; opacity: .8; margin: 0 auto 24px; max-width: 40ch; }
.paypage-warn {
    margin: 0 0 20px;
    padding: 10px 14px;
    font-size: 13px;
    background: rgba(200, 139, 46, .14);
    border-left: 2px solid #C88B2E;
    text-align: left;
}
.paypage-ok { font-size: 14.5px; color: #1F6B45; margin: 20px 0 0; }

.paycard {
    text-align: left;
    background: var(--cream, #F4EEE2);
    padding: 16px 18px;
    margin-bottom: 20px;
}
.payline {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    font-size: 14px;
}
.payline + .payline { border-top: 1px solid rgba(81, 54, 37, .1); }
.payline-sub { display: block; font-size: 12px; opacity: .6; }
.payline.is-sub { font-size: 13px; opacity: .8; }
.payline.is-total { font-size: 16px; font-weight: 500; border-top: 1px solid var(--choc); margin-top: 4px; }
.payline .mono { font-family: var(--mono, ui-monospace, Menlo, monospace); white-space: nowrap; }

.paypage-pay { width: 100%; padding: 15px; font-size: 13px; }
.paypage-foot { font-size: 12.5px; opacity: .65; margin: 22px 0 0; line-height: 1.6; }

/* ---------------------------------------------------------------------
   Section heading block

   The product rail rendered only its heading, so an eyebrow and a
   paragraph typed on the Homepage page went nowhere. Now that they
   render, they need to be told what to look like — otherwise they arrive
   at body size, which is how the admin hints looked.
   --------------------------------------------------------------------- */
.sec-head { margin-bottom: clamp(18px, 3vw, 30px); }
.sec-head .kicker { display: block; opacity: .6; margin-bottom: 8px; }
.sec-head .sec-title { margin: 0; }

.sec-body {
    margin: 10px 0 0;
    max-width: 52ch;
    font-size: 14.5px;
    line-height: 1.7;
    opacity: .78;
}

/* Centred sections centre their copy with them. */
.sec-center .sec-head,
.sec-head.mid { text-align: center; }
.sec-center .sec-body,
.sec-head.mid .sec-body { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------------
   Sub-menus in the header

   The parent stays a real link. A menu heading that goes nowhere is a
   dead end for anyone who taps rather than hovers, which is everyone on
   a touchscreen.
   --------------------------------------------------------------------- */
.site-head .has-sub { position: relative; display: inline-flex; align-items: center; }

/* The link carries the caret, so it has to be the row. store.css sets a
   global "svg { display: block }" for images, which put the caret on its
   own line underneath the word. */
.site-head .has-sub > a.link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.site-head .sub-caret {
    width: 8px; height: 5px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    opacity: .55;
    transition: transform .18s ease;
}
.site-head .has-sub:hover .sub-caret,
.site-head .has-sub:focus-within .sub-caret { transform: rotate(180deg); }

.site-head .submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    min-width: 176px;
    padding: 8px 0;
    background: var(--paper);
    border: 1px solid var(--line);
    z-index: 120;

    /* Hidden by opacity rather than display, so it can fade and so a
       keyboard can still reach it while it animates. */
    opacity: 0;
    visibility: hidden;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.site-head .has-sub:hover .submenu,
.site-head .has-sub:focus-within .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* A gap between the link and the panel would close the menu as the
   pointer crossed it. This bridges it without being visible. */
.site-head .submenu::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -6px;
    height: 6px;
}

.site-head .submenu a {
    display: block;
    padding: 7px 18px;
    font-family: var(--sans);
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--choc);
    white-space: nowrap;
}
.site-head .submenu a:hover { background: var(--cream, #FBF3DA); }

/* In the drawer there is room, so sub-items are simply indented — one
   less tap is one less way to lose someone. */
.drawer a.drawer-sub {
    padding-left: 18px;
    font-size: 15px;
    opacity: .78;
}
.drawer a.drawer-sub::before {
    content: '';
    display: inline-block;
    width: 10px;
    margin-right: 8px;
    border-top: 1px solid currentColor;
    vertical-align: middle;
    opacity: .4;
}

@media (max-width: 860px) {
    /* The header menu is in the drawer at this width, so a hover panel
       would be unreachable. */
    .site-head .submenu { display: none; }
    .site-head .sub-caret { display: none; }
}

/* ---------------------------------------------------------------------
   Mega menu

   Full width, so the columns line up with the page rather than with the
   word that opened them.
   --------------------------------------------------------------------- */
.site-head .has-sub.is-mega { position: static; }

.site-head .megamenu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    z-index: 120;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.site-head .has-sub.is-mega:hover .megamenu,
.site-head .has-sub.is-mega:focus-within .megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.megamenu-in {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 26px 32px;
    padding: 34px 0 40px;
}

.mega-col { display: flex; flex-direction: column; gap: 11px; }

.mega-head {
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--choc);
    margin-bottom: 3px;
}
a.mega-head:hover { text-decoration: underline; text-underline-offset: 3px; }

.mega-col a:not(.mega-head) {
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--choc);
    opacity: .82;
}
.mega-col a:not(.mega-head):hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* The header must not clip a panel that hangs below it. */
.site-head { position: relative; }

@media (max-width: 860px) {
    /* The menu is in the drawer at this width, so a hover panel would be
       unreachable. */
    .site-head .megamenu { display: none; }
}

/* ---------------------------------------------------------------------
   Drawer groups

   Folded shut: a long shop menu unfolded pushes everything else off the
   screen, and what someone came for is usually further down.
   --------------------------------------------------------------------- */
.drawer-group { border-bottom: 1px solid rgba(81, 54, 37, .09); }

.drawer-group-head { display: flex; align-items: center; }
.drawer-group-head a { flex: 1; }

.drawer-toggle {
    flex-shrink: 0;
    width: 44px;               /* a thumb-sized target, not an icon-sized one */
    height: 44px;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    color: var(--choc);
    cursor: pointer;
}
.drawer-toggle svg {
    width: 12px; height: 8px;
    fill: none; stroke: currentColor; stroke-width: 1.6;
    transition: transform .2s ease;
}
.drawer-group.is-open .drawer-toggle svg { transform: rotate(180deg); }

.drawer-group-body { padding-bottom: 8px; }
.drawer-group-body[hidden] { display: none; }

.drawer-colhead {
    display: block;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .5;
    padding: 12px 0 4px 18px;
}
.drawer a.drawer-sub-deep { padding-left: 30px; }

/* A second row of pills for the open category's children. Set apart from
   the row above so it reads as narrowing rather than as more of the same
   choice. */
.pills.pills-sub {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}
.pill-btn.pill-sub {
    font-size: 10.5px;
    padding: 6px 12px;
    opacity: .85;
}
.pill-btn.pill-sub[aria-pressed="true"] { opacity: 1; }

/* ---------------------------------------------------------------------
   A piece that is shown but not sold

   No stepper, no disabled button. A greyed-out "Add to bag" says sold out
   and coming back; this piece is simply not sold here, which is a
   different thing to say.
   --------------------------------------------------------------------- */
.pdp-catalogue {
    margin: 22px 0 0;
    padding: 16px 18px;
    background: var(--cream, #FBF3DA);
}
.pdp-catalogue-note {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.65;
}
.pdp-catalogue .btn { width: 100%; }

@media (min-width: 560px) {
    .pdp-catalogue .btn { width: auto; }
}

/* The first choice — gold or silver — above the designs. Set slightly
   apart so the two questions read as a sequence rather than one long row
   of buttons. */
.sw-picker.sw-groups { margin-bottom: 2px; }

.sw-opt.sw-group {
    padding: 9px 16px;
    font-size: 12px;
    letter-spacing: .04em;
}
.sw-opt.sw-group[aria-pressed="true"] {
    background: var(--choc);
    color: var(--paper);
    border-color: var(--choc);
}
.sw-opt.sw-group[aria-pressed="true"] .dot { box-shadow: 0 0 0 1px var(--paper); }

/* A material with nothing left in any design. Still shown — knowing it
   exists and is gone is worth more than it silently not being there. */
.sw-opt.sw-group.is-out { opacity: .45; }

/* Letter swatch with a single character (initial charms): larger, serif. */
.sw-opt .dot-text.is-one { font-family: var(--serif, Georgia, serif); font-size: 15px; letter-spacing: 0; }

/* ---------------------------------------------------------------------
   Phone header: burger always visible

   store.css hides the menu links below 860px and shows the burger, but
   ".site-head .has-sub > a.link { display: inline-flex }" is more specific,
   so any menu item with a dropdown stayed on screen. The crowding script
   then saw it colliding with the wordmark and turned .nav-left into a
   sideways scroller, which squeezed the burger out of view. Dropdown items
   live in the drawer at this width like every other link.
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
    .site-head .nav-left .has-sub,
    .site-head .nav-right .has-sub,
    .site-head .nav-right a.link.is-moved { display: none; }
    .site-head .nav.is-crowded .nav-left { overflow: visible; }
    .site-head .burger { display: grid; flex-shrink: 0; }
}


/* ---------------------------------------------------------------------
   Information pages (/pages/...) and order tracking (/track)
   --------------------------------------------------------------------- */
.page-doc { max-width: 760px; padding-top: 34px; padding-bottom: 70px; }
.page-doc h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 4vw, 40px); margin: 6px 0 22px; }
.page-crumbs { font-size: 12.5px; opacity: .7; }
.page-crumbs a { text-decoration: none; }
.page-lead { opacity: .8; margin: -8px 0 22px; }
.page-body { font-size: 15px; line-height: 1.75; }
.page-body h2 { font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 30px 0 8px; }
.page-body h3 { font-size: 16px; font-weight: 600; margin: 22px 0 6px; }
.page-body p { margin: 0 0 14px; }
.page-body ul, .page-body ol { margin: 0 0 16px; padding-left: 22px; }
.page-body li { margin: 4px 0; }
.page-body a { text-decoration: underline; text-underline-offset: 3px; }
.page-contact { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }
.page-contact a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 1px solid var(--line); text-decoration: none; font-size: 14px; }
.page-contact a:hover { background: var(--cream); }
.page-contact svg { width: 18px; height: 18px; }

.track-form { display: grid; gap: 8px; max-width: 420px; }
.track-form label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-top: 8px; }
.track-form input { height: 48px; padding: 0 14px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 16px; color: inherit; }
.track-form input:focus { outline: 2px solid var(--choc); outline-offset: 1px; }
.track-form .btn { margin-top: 14px; height: 50px; }
.track-error { color: #B42318; font-size: 14px; margin: 6px 0 0; }
.track-card { border: 1px solid var(--line); padding: 22px; background: #fff; }
.track-head { display: flex; flex-wrap: wrap; gap: 18px 36px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.track-head .kicker { display: block; margin-bottom: 4px; }
.track-steps { list-style: none; padding: 0; margin: 22px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.track-steps li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 13px; opacity: .45; position: relative; }
.track-steps li::before { content: ''; position: absolute; top: 8px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.track-steps li:first-child::before { display: none; }
.track-steps .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); background: #fff; position: relative; z-index: 1; }
.track-steps li.is-done { opacity: 1; }
.track-steps li.is-done::before { background: var(--choc); }
.track-steps li.is-done .dot { background: var(--choc); border-color: var(--choc); }
.track-steps li.is-now span:last-child { font-weight: 600; }
.track-card h2 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin: 18px 0 8px; font-weight: 500; }
.track-items { list-style: none; padding: 0; margin: 0; }
.track-items li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.track-items li.total { font-weight: 600; border-bottom: 0; }
.track-help { margin: 18px 0 0; font-size: 14px; }
@media (max-width: 520px) { .track-steps { grid-template-columns: repeat(2, 1fr); row-gap: 18px; } .track-steps li::before { display: none; } }

/* ---------------------------------------------------------------------
   Page builder blocks (/pages/...)
   --------------------------------------------------------------------- */
.page-body > * + * { margin-top: 0; }
.page-body .pb-text { margin: 0 0 18px; }
.page-body .pb-text > :last-child { margin-bottom: 0; }
.page-body h2[id], .page-body h3[id] { scroll-margin-top: 110px; }
.pb-image { margin: 26px 0; }
.pb-image img { width: 100%; height: auto; }
.pb-image.is-narrow { max-width: 380px; margin-left: auto; margin-right: auto; }
.pb-image.is-full { width: min(100vw - 32px, 1100px); position: relative; left: 50%; transform: translateX(-50%); }
.pb-image figcaption { text-align: center; font-size: 13px; opacity: .75; margin-top: 8px; }
.pb-split { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; margin: 34px 0; }
.pb-split.is-right .pb-split-pic { order: 2; }
.pb-split.no-pic { grid-template-columns: 1fr; }
.pb-split-pic img { width: 100%; height: auto; }
.pb-split-text h2 { margin-top: 0; }
.pb-split-text p:last-child { margin-bottom: 0; }
.pb-gallery { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); margin: 26px 0; }
.pb-gallery.cols-2 { grid-template-columns: repeat(2, 1fr); }
.pb-gallery.cols-4 { grid-template-columns: repeat(4, 1fr); }
.pb-gallery a { display: block; aspect-ratio: 1; overflow: hidden; background: var(--sand); }
.pb-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.pb-gallery a:hover img { transform: scale(1.03); }
.pb-faq { border-top: 1px solid var(--line); margin: 22px 0; }
.pb-faq details { border-bottom: 1px solid var(--line); }
.pb-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 17px 0; font-weight: 500; font-size: 15.5px;
}
.pb-faq summary::-webkit-details-marker { display: none; }
.pb-faq summary:focus-visible { outline: 2px solid var(--choc); outline-offset: 2px; }
.pb-faq-icon { flex: none; width: 14px; height: 14px; position: relative; }
.pb-faq-icon::before, .pb-faq-icon::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: transform .2s; }
.pb-faq-icon::after { transform: rotate(90deg); }
.pb-faq details[open] .pb-faq-icon::after { transform: rotate(0deg); }
.pb-faq-a { padding: 0 0 18px; opacity: .88; }
.pb-faq-a > :last-child { margin-bottom: 0; }
.pb-button { margin: 24px 0; }
.pb-button.is-center { text-align: center; }
.page-body .pb-button a { text-decoration: none; }
.pb-quote { margin: 30px 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--choc); }
.pb-quote p { font-size: 20px; font-style: italic; font-weight: 300; line-height: 1.5; margin: 0; }
.pb-quote cite { display: block; margin-top: 8px; font-style: normal; font-size: 13px; opacity: .75; }
.pb-video { position: relative; aspect-ratio: 16 / 9; margin: 26px 0; background: #1f1a17; }
.pb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pb-divider { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }
.page-body .page-contact { margin: 18px 0 26px; }
.page-preview-bar {
  position: sticky; top: 0; z-index: 90; padding: 10px 16px; text-align: center;
  background: #FFF2C6; color: #5A4300; font-size: 13.5px; border-bottom: 1px solid #E8D48A;
}
@media (max-width: 640px) {
  .pb-split { grid-template-columns: 1fr; gap: 16px; }
  .pb-split.is-right .pb-split-pic { order: 0; }
  .pb-gallery.cols-3, .pb-gallery.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .pb-quote p { font-size: 18px; }
}

/* Shop pages: 1 2 3 under the product grid */
.shop-pager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin: 40px 0 0; }
.shop-pager a, .shop-pager span { min-width: 42px; height: 42px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); font-size: 14px; text-decoration: none; color: inherit; }
.shop-pager a:hover { background: var(--cream); }
.shop-pager [aria-current="page"] { background: var(--choc); border-color: var(--choc); color: var(--paper); }
.shop-pager .gap { border: 0; min-width: 20px; }

/* ---------------------------------------------------------------------
   Input field shape — Admin → Colours & fonts → Input fields.
   Unset, each keeps the design's own corner (2px, or square).
   --------------------------------------------------------------------- */
.fsub input,
select.fsort,
.field input, .field select,
.drawer-search,
.notfound-search { border-radius: var(--input-radius, 2px); }
.promo-input,
.track-form input,
.stepper { border-radius: var(--input-radius, 0); }
/* Several lines of text in a pill looks broken, so it stops at 14px. */
.field textarea { border-radius: min(var(--input-radius, 2px), 14px); }
/* A rounded stepper clips the square hover behind its buttons. */
.stepper { overflow: hidden; }

/* ---------------------------------------------------------------------
   Radio buttons — Admin → Colours & fonts → Radio buttons.
   Drawn here rather than by the browser so the shape can change; the
   default (circle) looks like the browser's own did.
   --------------------------------------------------------------------- */
.payopt { border-radius: min(var(--input-radius, 2px), 14px); }
.payopt input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 18px; height: 18px; margin: 0;
  border: 1.5px solid var(--choc); border-radius: var(--radio-radius, 50%);
  background: var(--paper); display: grid; place-items: center; cursor: pointer;
}
.payopt input[type="radio"]::before {
  content: ''; width: 8px; height: 8px; background: var(--choc);
  border-radius: max(0px, calc(var(--radio-radius, 50%) - 2px)); transform: scale(0); transition: transform .12s ease;
}
.payopt input[type="radio"]:checked::before { transform: scale(1); }
.payopt input[type="radio"]:focus-visible { outline: 2px solid var(--choc); outline-offset: 2px; }

/* ---------------------------------------------------------------------
   Product card grids never grow past their column. A grid item's minimum
   is its content's width, so one card with a long row of option chips
   used to stretch "You might like" to two giant cards.
   --------------------------------------------------------------------- */
.quad > *, .grid-all > * { min-width: 0; }
.quad .pc { width: auto; }
.pc-dots { flex-wrap: wrap; row-gap: 5px; }
.pc-more {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 13px; height: 13px; padding: 0 3px; font-size: 10px; line-height: 1;
  color: var(--choc); opacity: .7; text-decoration: none;
}
.pc-dots--thumbs .pc-more { height: 28px; min-width: 28px; font-size: 11px; border: 1px solid rgba(81, 54, 37, .18); border-radius: 3px; }
.pc-more:hover { opacity: 1; }

/* ---------------------------------------------------------------------
   Accounts, wishlist and gift wrapping (contract appendix 1, modules 1 & 5)
   --------------------------------------------------------------------- */
.ic-account.is-in::after {
    content: ""; position: absolute; right: -2px; bottom: -1px; width: 7px; height: 7px;
    border-radius: 50%; background: var(--matcha); border: 1.5px solid var(--paper);
}
.link-btn {
    background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
    font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; opacity: .8;
}
.link-btn:disabled { opacity: .4; cursor: default; text-decoration: none; }
.btn-sm { padding: 9px 14px; font-size: 11px; }

.account { padding: 48px 16px 80px; max-width: 920px; }
.signin { max-width: 420px; margin: 0 auto; text-align: left; }
.signin h1, .account-head h1 { font-family: var(--serif); font-size: clamp(26px, 4vw, 34px); margin: 8px 0 12px; }
.signin-lede { font-size: 14px; opacity: .75; margin-bottom: 24px; }
.signin-form { margin-bottom: 18px; }
.otp-input { font-size: 22px !important; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }
.otp-resend { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.notice.test-code strong { font-size: 18px; letter-spacing: .2em; margin-left: 6px; }

.account-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.account-phone { font-size: 13px; opacity: .65; font-variant-numeric: tabular-nums; }
.account-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 26px; overflow-x: auto; }
.account-tabs a {
    padding: 12px 14px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; opacity: .7;
}
.account-tabs a[aria-current="page"] { border-bottom-color: var(--choc); opacity: 1; }
.account-sub { font-family: var(--serif); font-size: 18px; margin: 28px 0 12px; }

.order-list { display: flex; flex-direction: column; gap: 10px; }
.order-row {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px;
    padding: 16px 18px; border: 1px solid var(--line); background: var(--paper);
}
.order-row:hover { border-color: var(--choc); }
.order-row-main { display: flex; flex-direction: column; gap: 3px; }
.order-row-main span { font-size: 12.5px; opacity: .65; }
.order-row-total { font-variant-numeric: tabular-nums; }
.order-status, .pay-status {
    display: inline-block; padding: 5px 10px; border-radius: 999px; font-size: 10.5px;
    letter-spacing: .08em; text-transform: uppercase; background: var(--sand); white-space: nowrap;
}
.order-status.s-processing { background: var(--ice); }
.order-status.s-shipped    { background: var(--rose); }
.order-status.s-completed  { background: var(--matcha); color: var(--paper); }
.order-status.s-cancelled  { background: transparent; border: 1px solid var(--line); opacity: .7; }
.pay-status.p-paid   { background: var(--olive); color: var(--paper); }
.pay-status.p-unpaid { background: transparent; border: 1px solid var(--choc); }

.receipt { border: 1px solid var(--line); background: var(--paper); padding: 26px 24px; }
.receipt-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.receipt-head h2 { font-family: var(--serif); font-size: 24px; margin: 4px 0; }
.receipt-head p { font-size: 12.5px; opacity: .65; }
.receipt-badges { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.progress { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; padding: 0; margin: 0 0 24px; }
.progress li { position: relative; padding-top: 22px; font-size: 11px; text-align: center; opacity: .5; }
.progress li::before {
    content: ""; position: absolute; top: 4px; left: 50%; width: 10px; height: 10px; margin-left: -5px;
    border-radius: 50%; border: 1.5px solid var(--choc); background: var(--paper);
}
.progress li::after { content: ""; position: absolute; top: 9px; left: calc(50% + 8px); right: calc(-50% + 8px); height: 1px; background: var(--line); }
.progress li:last-child::after { display: none; }
.progress li.done { opacity: 1; }
.progress li.done::before { background: var(--choc); }
.receipt-items { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 20px; }
.receipt-items th { text-align: left; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; padding: 8px 0; border-bottom: 1px solid var(--line); }
.receipt-items td { padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.receipt-items .num { text-align: right; white-space: nowrap; padding-left: 12px; font-variant-numeric: tabular-nums; }
.receipt-items tfoot td { border-bottom: 0; padding: 7px 0; }
.receipt-items tfoot .total td { border-top: 1px solid var(--choc); padding-top: 13px; font-size: 17px; }
.receipt-meta { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; font-size: 13px; margin-bottom: 22px; }
.receipt-meta dt { opacity: .6; }
.receipt-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.wish-btn {
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line);
    background: rgba(252, 248, 238, .9); display: grid; place-items: center; cursor: pointer; color: var(--choc);
    transition: transform .15s;
}
.wish-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.wish-btn.is-on svg { fill: var(--rose-2); stroke: var(--rose-2); }
.wish-btn.pop { transform: scale(1.18); }
.pc { position: relative; }
.pc-wish { position: absolute; top: 10px; right: 10px; z-index: 2; }
.pdp-buy .pdp-wish, .pdp-catalogue .pdp-wish { width: 50px; height: 50px; flex: none; border-radius: 2px; }
.pdp-catalogue { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.wish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.wish-card { border: 1px solid var(--line); background: var(--paper); display: flex; flex-direction: column; }
.wish-img { aspect-ratio: 1; overflow: hidden; background: var(--sand); }
.wish-img img { width: 100%; height: 100%; object-fit: cover; }
.wish-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.wish-name { font-size: 14px; }
.wish-price { font-size: 13px; opacity: .75; }
.wish-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.wish-out { font-size: 12px; opacity: .6; }

.profile-form { max-width: 620px; }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; margin-bottom: 12px; cursor: pointer; }
.check-row input { accent-color: var(--choc); margin-top: 3px; }
.profile-form .btn { margin-top: 14px; }

.gift { border: 1px solid var(--line); padding: 0; margin: 26px 0 0; }
.gift-toggle { display: flex; gap: 13px; align-items: center; padding: 16px 17px; cursor: pointer; }
.gift-toggle input { accent-color: var(--choc); }
.gift:has(.gift-toggle input:checked) { border-color: var(--choc); }
.gift:has(.gift-toggle input:checked) .gift-toggle { background: var(--cream); }
.gift-toggle .t { display: block; font-size: 14.5px; }
.gift-toggle .s { display: block; font-size: 12px; opacity: .65; }
.gift-body { padding: 6px 17px 17px; }
.gift-label { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .65; margin: 16px 0 9px; }
.gift-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 9px; }
.gift-opt { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); cursor: pointer; font-size: 13px; }
.gift-opt:has(input:checked) { border-color: var(--choc); background: var(--cream); }
.gift-opt input { accent-color: var(--choc); }
.gift-opt img { width: 40px; height: 40px; object-fit: cover; }
.gift-opt .t { display: block; }
.gift-opt .p { opacity: .65; white-space: nowrap; }
.gift-opt .s { display: block; font-size: 11.5px; opacity: .6; }
.ecard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.ecard { position: relative; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.ecard input { position: absolute; opacity: 0; pointer-events: none; }
.ecard-face {
    aspect-ratio: 3 / 4; width: 100%; object-fit: cover; border: 1px solid var(--line);
    display: grid; place-items: center; text-align: center; padding: 10px;
    font-family: var(--serif); font-size: 15px; line-height: 1.25;
}
.ecard-none { font-family: var(--sans); font-size: 12px; opacity: .6; background: var(--paper); }
.ecard-art.a0 { background: linear-gradient(160deg, var(--rose) 0%, var(--cream) 100%); }
.ecard-art.a1 { background: linear-gradient(160deg, var(--ice) 0%, var(--paper) 100%); }
.ecard-art.a2 { background: linear-gradient(160deg, var(--biscotti) 0%, var(--cream) 100%); }
.ecard input:checked + .ecard-face { outline: 2px solid var(--choc); outline-offset: 2px; }
.ecard input:focus-visible + .ecard-face { outline: 2px dashed var(--choc); outline-offset: 2px; }
.ecard-name { font-size: 11.5px; opacity: .75; text-align: center; }

@media (max-width: 640px) {
    .order-row { grid-template-columns: 1fr auto; }
    .order-row-total { grid-column: 2; }
    .receipt { padding: 20px 16px; }
    .receipt-meta { grid-template-columns: 1fr; gap: 2px; }
    .receipt-meta dd { margin-bottom: 10px; }
    .progress li { font-size: 9.5px; }
}

@media print {
    body * { visibility: hidden; }
    #receipt, #receipt * { visibility: visible; }
    #receipt { position: absolute; inset: 0 auto auto 0; width: 100%; border: 0; }
    .receipt-actions { display: none; }
}
.ic .cc[hidden] { display: none; }
.sumline[hidden] { display: none; }
.ecard-grid { margin-bottom: 18px; }

/* Gift step (/gift) and the chosen-gift line at checkout */
.gift-ask-title { font-family: var(--serif); font-size: 28px; margin-bottom: 6px; }
.gift-ask-hint { opacity: .7; margin-bottom: 4px; }
.gift-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.gift-actions .btn { flex: 1 1 200px; }
.gift-chosen { display: flex; justify-content: space-between; align-items: center; gap: 14px;
               border: 1px solid var(--line); padding: 14px 17px; margin: 26px 0 0; }
.gift-chosen .t { display: block; font-size: 14.5px; }
.gift-chosen .s { display: block; font-size: 12px; opacity: .65; }
.gift-chosen a { font-size: 13px; text-decoration: underline; white-space: nowrap; }

/* Account and gift step polish (UX review 2026-10-29) */
.account-tabs { scrollbar-width: none; }
.account-tabs::-webkit-scrollbar { display: none; }
.notice.ok { border-left-color: var(--olive, #4C5A38); }
.otp-resend .link-btn { min-height: 44px; display: inline-flex; align-items: center; }
.check-row { min-height: 44px; align-items: center; margin-bottom: 4px; }
.check-row input { width: 20px; height: 20px; margin-top: 0; flex: none; }
.order-row { grid-template-columns: 48px 1fr auto auto; }
.order-thumb { width: 48px; height: 48px; background: var(--sand); overflow: hidden; }
.order-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.receipt-badges .btn-sm { padding: 6px 12px; }
.receipt-actions { background: none; padding: 0; }
.gift-msg[hidden] { display: none; }
.gift-count { display: flex; justify-content: space-between; gap: 12px; }
.gift-count [data-gift-count] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gift-actions [hidden] { display: none; }
.gift-actions-total { display: none; }
@media (max-width: 640px) {
    .order-row { grid-template-columns: 48px 1fr auto; }
    .order-row .order-status { grid-column: 2; justify-self: start; }
    .order-row-total { grid-column: 3; grid-row: 1; }
    /* The summary sits far below on a phone; keep the total and the way on in reach. */
    .gift-actions {
        position: sticky; bottom: 0; z-index: 20; margin: 22px -16px 0; padding: 12px 16px;
        background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -8px 20px -16px rgba(81, 54, 37, .5);
    }
    .gift-actions-total { display: flex; justify-content: space-between; width: 100%; font-size: 13px; }
}

/* Booking page (/booking) and the bookings tab */
.booking { padding: 48px 16px 80px; max-width: 860px; }
.booking-h1 { font-family: var(--serif); font-size: clamp(28px, 4.5vw, 38px); margin: 8px 0 10px; }
.booking-lede { opacity: .75; margin-bottom: 26px; max-width: 560px; }
.booking-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.booking-step { border: 1px solid var(--line); background: var(--paper); padding: 18px 20px; }
.booking-step.is-open { border-color: var(--choc); }
.booking-step h2 { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
.booking-step.is-done h2 { margin-bottom: 6px; }
.booking-step .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px;
                   background: var(--choc); color: var(--paper); letter-spacing: 0; flex: none; }
.booking-change { margin-left: auto; font-size: 12px; letter-spacing: 0; text-transform: none; text-decoration: underline; opacity: .8; }
.booking-picked { font-size: 14.5px; margin: 0 0 0 34px; }
.booking-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.booking-service { display: flex; flex-direction: column; gap: 4px; padding: 15px 16px; border: 1px solid var(--line); background: var(--cream); }
.booking-service:hover, .booking-service:focus-visible { border-color: var(--choc); }
.booking-service .t { font-size: 15px; }
.booking-service .s { font-size: 12.5px; opacity: .7; }
.booking-service .m { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .65; margin-top: 4px; }
.booking-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.booking-day { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px;
               border: 1px solid var(--line); background: var(--cream); scroll-snap-align: start; }
.booking-day .w { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.booking-day .d { font-family: var(--serif); font-size: 22px; line-height: 1.1; }
.booking-day .mo { font-size: 10px; opacity: .6; white-space: nowrap; }
.booking-day:hover { border-color: var(--choc); }
.booking-day.is-on { background: var(--choc); color: var(--paper); border-color: var(--choc); }
.booking-day.is-on .w, .booking-day.is-on .mo { opacity: .85; }
.booking-day.is-off { opacity: .35; background: transparent; cursor: not-allowed; }
.booking-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-bottom: 22px; }
.booking-time { position: relative; cursor: pointer; }
.booking-time input { position: absolute; opacity: 0; pointer-events: none; }
.booking-time span { display: block; text-align: center; padding: 11px 4px; border: 1px solid var(--line); background: var(--cream);
                     font-variant-numeric: tabular-nums; font-size: 14px; }
.booking-time:hover span { border-color: var(--choc); }
.booking-time input:checked + span { background: var(--choc); color: var(--paper); border-color: var(--choc); }
.booking-time input:focus-visible + span { outline: 2px dashed var(--choc); outline-offset: 2px; }
.booking-time.is-off span { opacity: .3; text-decoration: line-through; cursor: not-allowed; background: transparent; }
.booking-submit { width: 100%; margin-top: 6px; }
.booking-done { max-width: 520px; margin: 0 auto; text-align: center; }
.booking-done h1 { font-family: var(--serif); font-size: clamp(26px, 4vw, 34px); margin: 14px 0 8px; }
.booking-done-mark { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
                     background: var(--matcha); color: var(--paper); font-size: 26px; }
.booking-card { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; text-align: left; border: 1px solid var(--line);
                background: var(--paper); padding: 18px 20px; margin: 22px 0; font-size: 14px; }
.booking-card dt { opacity: .6; }
.booking-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.account-sub-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.booking-row { display: grid; grid-template-columns: 64px 1fr auto auto; align-items: center; gap: 16px;
               padding: 14px 18px; border: 1px solid var(--line); background: var(--paper); }
.booking-row.is-past { opacity: .6; }
.booking-row-when { display: flex; flex-direction: column; align-items: center; }
.booking-row-when strong { font-family: var(--serif); font-size: 19px; font-variant-numeric: tabular-nums; }
.booking-row-when span { font-size: 11px; opacity: .65; white-space: nowrap; }
.order-status.bs-confirmed { background: var(--matcha); color: var(--paper); }
.order-status.bs-completed { background: var(--ice); }
.order-status.bs-cancelled, .order-status.bs-no_show { background: transparent; border: 1px solid var(--line); opacity: .7; }
@media (max-width: 640px) {
    .booking { padding-top: 28px; }
    .booking-step { padding: 16px 14px; }
    .booking-row { grid-template-columns: 56px 1fr; }
    .booking-row .order-status, .booking-row form { grid-column: 2; justify-self: start; }
}

/* E-Barimt: checkout choice and the receipt panel */
.ebarimt-pick { border: 1px solid var(--line); padding: 14px 16px 6px; margin: 26px 0 0; }
.ebarimt-pick.bad { border-color: var(--rose-2, #b55); }
.ebarimt-pick legend { padding: 0 6px; opacity: .7; }
.ebarimt-types { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 12px; }
.ebarimt-reg { display: flex; gap: 8px; }
.ebarimt-reg input { flex: 1; min-width: 0; }
.ebarimt-reg .btn { padding: 0 18px; }
[data-eb-result].is-ok { color: var(--olive, #4C5A38); opacity: 1; }
.ebarimt-pick [hidden] { display: none; }
.ebarimt-block { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 18px; }
.ebarimt-block h3 { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 12px; }
.ebarimt-test { font-size: 9.5px; padding: 2px 6px; border: 1px solid currentColor; margin-left: 6px; letter-spacing: .1em; }
.ebarimt-grid { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start; }
.ebarimt-grid dl { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; font-size: 13px; margin: 0; }
.ebarimt-grid dt { opacity: .6; }
.ebarimt-grid dd { margin: 0; word-break: break-all; }
.ebarimt-lottery { font-size: 16px; letter-spacing: .08em; }
.ebarimt-qr { width: 132px; height: 132px; background: #fff; padding: 4px; }
.ebarimt-qr svg { width: 100%; height: 100%; display: block; }
.ebarimt-note { font-size: 12px; opacity: .65; margin-top: 10px; }
.ebarimt-block.is-returned dl { opacity: .6; }
@media (max-width: 640px) {
    .ebarimt-grid { grid-template-columns: 1fr; }
    .ebarimt-grid dl { grid-template-columns: 1fr; gap: 2px; }
    .ebarimt-grid dd { margin-bottom: 8px; }
    .ebarimt-types { grid-template-columns: 1fr; }
}
@media print { .ebarimt-block, .ebarimt-block * { visibility: visible; } }

/* Unsubscribe page */
.unsub { padding: 70px 16px 90px; max-width: 520px; text-align: center; }
.unsub h1 { font-family: var(--serif); font-size: clamp(26px, 4vw, 34px); margin-bottom: 10px; }
.unsub p { opacity: .75; margin-bottom: 22px; }