/*
 * theme.css
 * WordPress and WooCommerce adaptations on top of design.css (the approved stylesheet, verbatim).
 * Everything here either styles markup WordPress/WooCommerce produces, or is a deliberate,
 * documented improvement (see docs/04-final-audit.md → IMPROVED).
 */

/* ---------- base ---------- */
.skip-link:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:200;
  background:var(--ink);color:#fff;padding:10px 16px;border-radius:100px;font-size:12px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.js .dr-nojs{display:none}
a.tool{color:inherit}
.hdr .mark{display:block;line-height:0}

/* ---------- header / menus ---------- */
.mnav{display:flex;flex-direction:column}
/* The admin bar is fixed above everything, and it sat on top of the mobile menu's close button.
   Only signed-in editors ever see this, so the panel keeps its full height and pads its content down. */
.admin-bar .menu{padding-top:calc(clamp(18px,4vw,50px) + 32px)}
@media (max-width:782px){.admin-bar .menu{padding-top:calc(clamp(18px,4vw,50px) + 46px)}}
.mnav__a{font-size:clamp(1.6rem,6.4vw,2.3rem);text-align:left;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.srch__ic{width:24px;height:24px;fill:none;stroke:var(--gold-ink);stroke-width:1.5;flex:none}
.srch__f input[type=search]{border:0;border-radius:0;padding:0;background:none;outline:none}
.srch__f input[type=search]::-webkit-search-cancel-button{display:none}
#sAll{margin:0}
.top a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------- footer ---------- */
.ftr__mark{height:clamp(74px,8vw,94px);width:auto;margin-bottom:22px}
.ftr__about{font-size:13.5px;max-width:32ch;color:rgba(255,255,255,.66)}
.ftr .soc{margin-top:18px}
.ftr .dr-form-note{color:var(--gold)}
@media(max-width:600px){ body.on-pdp .ftr{padding-bottom:88px} }

/* ---------- shop bar / chips: design had no side padding below 1440px (edge-to-edge) ---------- */
.shopbar{padding-inline:var(--pad)}
.chiprow{padding-inline:var(--pad)}
.fchip{text-decoration:none}
@media(min-width:1025px){ .shopbar__f{display:none} }

/* ---------- product card ---------- */
/* Design bug fix: design.css defines .card__add twice; the first rule (absolute, full width, opacity 0)
   was never reset, so "Add to Bag" covered "Quick view" and stayed invisible on touch screens. */
.card__acts .card__add{position:static;left:auto;right:auto;bottom:auto;opacity:1;transform:none}
.card__add{display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap}
.card__qv{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center}
.card__qv svg{display:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5}
/* Add to Bag carries its icon at all times and shows it only where the words are dropped (phones),
   the same trick Quick view uses: the label stays in the DOM, clipped, so the button keeps its name. */
.card__add svg{display:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
/* The buttons follow the card's own width (the same card sits in shop, home, related, wishlist and
   drawer grids): Quick view becomes an eye icon when both labels no longer fit, and steps aside on
   the narrowest cards so Add to Bag keeps the full width. */
.card__i{container-type:inline-size}
@container (max-width:259px){
  .card__qv{padding-inline:12px}
  .card__qv span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .card__qv svg{display:block}
}
@container (max-width:189px){ .card__qv{display:none} }
/* Phones: two buttons do not fit a half-width card; keep the one that sells. */
@media(max-width:640px){ .card__qv{display:none} }
/* Shop grid beside the filter rail: 3 columns until the screen is wide enough for 4 real cards
   (the design's 4 columns gave 163–218px cards on 1100–1366px laptops). */
@media(min-width:1025px) and (max-width:1399px){ .shopgrid__in .grid4:not([data-layout=list]){grid-template-columns:repeat(3,1fr)} }
.card__add--off{background:rgba(255,255,255,.92);color:var(--ink-3);cursor:default}
.card__link img.a{width:100%;height:100%}
.card__i .woocommerce-placeholder{object-fit:contain;padding:18%;opacity:.5}
/* Phones: the action bar is a hover reveal on a pointer, but a touch screen has no hover, so it sits
   on every card permanently. As a full-width labelled bar that was a slab across the bottom of each
   pack shot, and the photo box had to be stretched to carry it. Here it becomes a single filled
   circle in the bottom corner — the mirror of the wishlist heart opposite — so the bottle is clear
   and the card keeps its designed proportions. */
@media(max-width:640px){
  .card__acts{left:auto;right:10px;bottom:10px}
  .card__acts .card__add{flex:none;width:38px;height:38px;padding:0;border-radius:50%;
    box-shadow:0 6px 16px -8px rgba(42,34,38,.55)}
  .card__add svg{display:block}
  /* The words stay for screen readers, so the button's name is still "Add to Bag". */
  .card__add span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* Out of stock is information rather than an action: it keeps its words, in a chip that fits them. */
  .card__acts .card__add--off{width:auto;height:auto;padding:8px 12px;border-radius:var(--rp);
    font-size:10.5px;letter-spacing:.06em;box-shadow:none}
  .card__add--off span{position:static;width:auto;height:auto;clip:auto}
  /* main.js flashes "Added" into the button by replacing its contents for 1.4s (it marks the button
     aria-disabled meanwhile). A circle cannot hold the word, so it widens into a pill and back. */
  .card__acts .card__add[aria-disabled=true]{width:auto;height:auto;padding:9px 13px;border-radius:var(--rp);
    font-size:10.5px;letter-spacing:.06em}
  /* The list layout puts the buttons beside the picture, where the full label fits and reads better. */
  .grid4[data-layout=list] .card__acts .card__add{width:auto;height:auto;padding:11px 14px;
    border-radius:var(--rp);box-shadow:none}
  .grid4[data-layout=list] .card__add svg{display:none}
  .grid4[data-layout=list] .card__add span{position:static;width:auto;height:auto;clip:auto}
}
/* Hover photos. The cut-outs are transparent, so the photo underneath must fade out or the two
   overlap (the design only faded the second one in). Without JS: the design's single swap.
   All of this is pointer-only, and must stay that way. A touch screen latches :hover on the first
   tap and never releases it; main.js, the only thing that ever gives img.b a src, stands down on
   touch. So on a phone every condition lined up at once — the real photo faded out, its replacement
   was empty, and the card went blank white until something else was tapped. */
@media(hover:hover){
  .card:hover .card__link:not(.cyc):has(img.b) img.a{opacity:0}
  .card:hover .card__i img.c{transform:scale(1.05)}
}
/* With JS (main.js adds .cyc): only the current photo (.on) shows, cycling while hovered. .cyc is
   added on mouseenter only, so these need no guard of their own. */
.card__i img.c{position:absolute;inset:0}
.card .card__i .card__link.cyc img{opacity:0}
.card .card__i .card__link.cyc img.on{opacity:1}
.card__dots{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:4px;
  opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
.card__dots i{width:16px;height:2px;border-radius:2px;background:rgba(42,34,38,.22);transition:background .35s}
.card__dots i.on{background:var(--world-ink)}
.card:hover .card__dots{opacity:1}
/* List view. The actions sit inside .card__i so they can overlay the photo in grid view; in list
   view the design made them static there, which stretched the photo box to the buttons' width and
   clipped both the bottle and the buttons. Here .card__i steps out of the layout (display:contents),
   the link carries the photo square, and name / price / actions stack beside it. */
.grid4[data-layout=list] .card{grid-template-rows:auto auto;row-gap:10px;align-items:start}
.grid4[data-layout=list] .card__i{display:contents}
.grid4[data-layout=list] .card__link{grid-column:1;grid-row:1 / span 2;align-self:center;position:relative;aspect-ratio:1;height:auto;
  border-radius:var(--rm);background:var(--tile);overflow:hidden}
.grid4[data-layout=list] .card__b{grid-column:2;grid-row:1;align-self:end}
.grid4[data-layout=list] .card__acts{grid-column:2;grid-row:2;align-self:start;margin-top:0}
.grid4[data-layout=list] .card__dots{display:none}
/* Wishlist page: actions straight under the header, and each saved card's buttons always shown. */
#wishPage{padding-top:0}
#wishGrid .card__acts{opacity:1;transform:none}
@media(hover:none){.card__dots{display:none}}
.card__p .amount{font-weight:inherit}
.card__p s .amount{font-weight:300}

/* White-background photos: blend them into the tinted tiles until cut-outs are imported. */
.dr-img-blend .card__i img,.dr-img-blend .pgal__main img,.dr-img-blend .pth img,.dr-img-blend .line__i img,
.dr-img-blend .qv__i img,.dr-img-blend .fbt__img img,.dr-img-blend .cat__i img,.dr-img-blend .coll__pack,
.dr-img-blend .brandc__i img,.dr-img-blend .ord__thumbs img{mix-blend-mode:multiply;filter:none}

/* ---------- drawers ---------- */
.dr-drawer-cart{display:contents}
.ship__t{font-size:12.5px;margin:0;font-weight:500}
.ship__t .amount{font-weight:600}
.drw .empty{margin:30px auto}
.drw__b .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---------- quantity steppers (input instead of <b>, works without JS) ---------- */
.pqty__in{width:34px;height:32px;border:0;padding:0;background:none;text-align:center;font:inherit;font-size:var(--fs-s);
  font-weight:500;color:inherit;-moz-appearance:textfield;border-radius:0}
.pqty__in::-webkit-outer-spin-button,.pqty__in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pqty__in:focus{outline:none}
.pqty input:focus{outline:none}
.line.is-busy{opacity:.5;pointer-events:none;transition:opacity .2s}
.line .variation{margin:2px 0 0;font-size:var(--fs-xs);color:var(--ink-3);display:grid;grid-template-columns:auto 1fr;gap:2px 6px}
.line .variation dd,.line .variation p{margin:0}
.line__p .amount{font-weight:500}

/* ---------- empty state ---------- */
.empty__a{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ---------- editorial ---------- */
.storygrid--rev .story2{order:2}
@media(max-width:1024px){ .storygrid--rev .story2{order:0} }
.story2__c{display:flex;flex-direction:column;gap:14px}
.story2__c p{color:var(--ink-2);font-size:15.5px;line-height:1.8;margin:0}
.story2 img{width:100%;height:100%;object-fit:cover}
/* Load more while the next page is on its way (also triggered by scrolling). */
.loadmore [data-more][aria-busy=true]{opacity:.55;pointer-events:none}
/* Numbered steps in image-and-text copy (<ol class="steps">), e.g. the creation process. */
.steps{list-style:none;margin:4px 0 0;padding:0;counter-reset:st}
.steps li{counter-increment:st;display:flex;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:var(--fs-m)}
.steps li::before{content:counter(st,decimal-leading-zero);font-family:var(--disp);font-size:1.35rem;line-height:1;color:var(--world-accent);min-width:2ch}
.benefits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(14px,2vw,26px)}
.benefits li{display:grid;grid-template-columns:26px 1fr;gap:4px 12px;background:var(--world-soft);border-radius:var(--rl);padding:20px}
.benefits svg{width:24px;height:24px;fill:none;stroke:var(--world-accent);stroke-width:1.3;grid-row:span 2}
.benefits b{font-weight:600}.benefits span{color:var(--ink-3);font-size:var(--fs-s)}
.prose{max-width:74ch;color:var(--ink-2);line-height:1.85}
.prose h2,.prose h3{font-family:var(--disp);font-weight:400;color:var(--world-ink);line-height:1.15;margin:1.6em 0 .5em}
.prose h2{font-size:1.6rem}.prose h3{font-size:1.25rem}
.prose a{color:var(--world-accent);text-decoration:underline}
.prose img{border-radius:var(--rm);height:auto}
.prose__fig{margin:0 0 28px}
.prose ul,.prose ol{padding-left:1.2em}
.alignleft{float:left;margin:0 20px 12px 0}.alignright{float:right;margin:0 0 12px 20px}.aligncenter{margin-inline:auto}
.wp-caption-text,.wp-element-caption{font-size:var(--fs-xs);color:var(--ink-3)}
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px)}
.pcard{display:flex;flex-direction:column;gap:10px}
.pcard__i{border-radius:var(--rl);overflow:hidden;aspect-ratio:4/3;background:var(--world-soft);display:block}
.pcard__i img{width:100%;height:100%;object-fit:cover}
.pcard__t{font-family:var(--disp);font-weight:400;font-size:1.35rem;margin:0;line-height:1.2}
.pager{margin-top:34px}.pager .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.pager .page-numbers{border:1px solid var(--line);border-radius:100px;padding:8px 14px;font-size:var(--fs-s)}
.pager .current{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:1024px){ .postgrid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .postgrid{grid-template-columns:1fr} }
.comments{margin-top:40px;border-top:1px solid var(--line-soft);padding-top:26px}
.comments__list{padding-left:1.2em}

/* ---------- films ---------- */
/* The buy row is one line — price left, button right — inside a card only ~270px wide. Nothing
   told the button to hold its shape, so a long label ("Shop Immortal") was squeezed until it broke
   across two lines and the pill grew out of the row. The button now keeps its label on one line and
   never shrinks; the price is the part that gives way. */
.fx__buy .btn{position:relative;flex:none;max-width:100%;margin-left:auto}
.fx__price{min-width:0}
/* Last resort for a very long name or a wide currency: the button drops to its own line, still
   right-aligned, instead of crushing itself (margin-left:auto does both, so space-between is moot). */
.fx__buy{flex-wrap:wrap;row-gap:10px}
/* The design styled the struck-through was-price only inside product cards, so here the two ran
   together in one accent colour — "349,00 AED450,00 AED". Same treatment as the card. */
.fx__price s{margin-left:8px;color:var(--ink-3);font-weight:300}

/* ---------- forms (theme) ---------- */
.dr-form-note{margin:0 0 14px;font-size:var(--fs-s);font-weight:500}
.dr-form-note.is-ok{color:var(--ok)}.dr-form-note.is-err{color:var(--sale)}
form.is-busy{opacity:.6;pointer-events:none}
.map--live{border:0;display:block;overflow:hidden;padding:0}
.map--live iframe{width:100%;height:100%;border:0;display:block}
.cinfo__b a[href^="https://www.google.com/maps"]{font-size:var(--fs-b)}
.cinfo__v{margin:0;font-size:var(--fs-m);font-family:var(--disp)}
.legal__b h2{scroll-margin-top:100px}
.legal__b ul,.legal__b ol{color:var(--ink-2);line-height:1.85;padding-left:1.2em;margin:10px 0 0}
.legal__b p+p,.legal__b ul+p{margin-top:10px}
.legal__b .wp-block-heading{margin-top:26px}
.faqgrp .acc__c p{margin:0 0 10px}

/* ---------- product page ---------- */
.pgal--single{grid-template-columns:minmax(0,1fr)}
.pstock.out{color:var(--sale)}.pstock.out::before{background:var(--sale)}
.pnotes--static{display:flex;flex-wrap:wrap;gap:7px}
.pnotes--static span{border:1px solid var(--line);border-radius:100px;padding:6px 13px;font-size:12.5px}
.pprice__now .amount,.pprice__now bdi{font-weight:inherit}
.pdp2 form.cart{margin:0}
.pdp2 .variations_form{display:flex;flex-direction:column;gap:12px}
.pdp2 table.variations{border-collapse:collapse;width:100%}
.pdp2 table.variations th,.pdp2 table.variations td{padding:6px 0;text-align:left}
.pacc .nrow span{color:var(--ink-2)}
.revform .comment-form{display:flex;flex-direction:column;gap:14px;margin:0}
.revform .comment-form-rating label{max-width:200px}
.revform p.stars{margin:4px 0 0;display:flex;gap:4px}
.revform p.stars span{display:flex;gap:4px}
.revform p.stars a{width:26px;height:26px;overflow:hidden;text-indent:-999px;position:relative;display:inline-block}
.revform p.stars a::before{content:"\2605";position:absolute;inset:0;text-indent:0;font-size:24px;line-height:26px;color:rgba(42,34,38,.2);text-align:center}
.revform p.stars:hover a::before,.revform p.stars.selected a::before{color:var(--world-accent)}
.revform p.stars a:hover~a::before,.revform p.stars.selected a.active~a::before{color:rgba(42,34,38,.2)}
.revform .form-submit{margin:0;display:flex;gap:10px}
.revform .comment-notes,.revform .logged-in-as{font-size:var(--fs-xs);color:var(--ink-3);margin:0}
.revs .must-log-in{color:var(--ink-3)}
.rev .stars{margin-top:2px}

/* ---------- WooCommerce notices ---------- */
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-notices-wrapper,.woocommerce-NoticeGroup{max-width:1440px;margin:0 auto;padding:12px var(--pad) 0}
.checkout .woocommerce-NoticeGroup,.acct__b .woocommerce-notices-wrapper{padding:0 0 12px}
/* WooCommerce puts checkout errors inside the two-column form: give them their own full-width row. */
form.checkout>.woocommerce-NoticeGroup{grid-column:1/-1;width:100%;max-width:none}
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews,.wc-block-components-notice-banner{
  list-style:none;margin:0 0 10px;padding:14px 18px;border-radius:var(--rm);background:var(--world-soft);
  font-size:var(--fs-s);color:var(--world-ink);display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
  justify-content:space-between;border-left:3px solid var(--world-accent)}
.woocommerce-error{border-left-color:var(--sale);flex-direction:column;align-items:flex-start}
.woocommerce-error li{margin:0}
.woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{order:2;display:inline-flex;align-items:center;
  padding:9px 18px;border-radius:100px;background:var(--world-ink);color:var(--world-bg);font-size:var(--fs-xs);
  letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.woocommerce-message a:not(.button),.woocommerce-info a:not(.button){text-decoration:underline}
.woocommerce-form-login-toggle .woocommerce-info{margin-bottom:14px}

/* ---------- WooCommerce form rows ---------- */
.woocommerce form .form-row,.woocommerce-page form .form-row{display:flex;flex-direction:column;gap:6px;margin:0;padding:0}
.form-row>label:not(.chk){font-size:var(--fs-s);color:var(--ink-2)}
/* WooCommerce labels sit above their inputs, so keep "Name *" on one line (design.css makes every label a column flexbox). */
.form-row>label:not(.chk):not(.woocommerce-form__label-for-checkbox){display:block}
.form-row .required{color:var(--sale);text-decoration:none;border:0}
.form-row .optional{color:var(--ink-3);font-size:var(--fs-xs)}
.form-row .woocommerce-input-wrapper{display:block}
.form-row.woocommerce-invalid input.input-text,.form-row.woocommerce-invalid select{border-color:var(--sale)}
.form-row .description{font-size:var(--fs-xs);color:var(--ink-3);margin:4px 0 0}
.woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper,.woocommerce-address-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper,.woocommerce-EditAccountForm,.create-account{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.woocommerce-billing-fields__field-wrapper>*,.woocommerce-shipping-fields__field-wrapper>*,.woocommerce-address-fields__field-wrapper>*,
.woocommerce-additional-fields__field-wrapper>*,.woocommerce-EditAccountForm>*,.create-account>*{grid-column:1/-1}
.form-row-first{grid-column:1/2!important}.form-row-last{grid-column:2/3!important}
@media(max-width:600px){ .form-row-first,.form-row-last{grid-column:1/-1!important} }
.woocommerce-EditAccountForm fieldset{grid-column:1/-1;border:1px solid var(--line-soft);border-radius:var(--rl);padding:18px;display:grid;gap:12px;margin:0}
.woocommerce-EditAccountForm legend{font-family:var(--disp);font-size:1.15rem;padding:0 8px}
.woocommerce-EditAccountForm .button,.woocommerce-address-fields .button,.woocommerce-form .button,.woocommerce .button{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;padding:15px 30px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;border-radius:100px;background:var(--world-ink);color:var(--world-bg);border:0;justify-self:start}
.select2-container{width:100%!important}
.select2-container .select2-selection--single{height:auto;min-height:46px;border:1px solid var(--line);border-radius:var(--rm);background:var(--world-bg);display:flex;align-items:center}
.select2-container .select2-selection--single .select2-selection__rendered{padding:12px 14px;line-height:1.4;color:inherit}
.select2-container .select2-selection--single .select2-selection__arrow{height:100%;right:8px}
.select2-dropdown{border:1px solid var(--line);border-radius:var(--rm);overflow:hidden}
.select2-results__option--highlighted[aria-selected],.select2-results__option--highlighted[data-selected]{background:var(--world-accent)!important}
.woocommerce-password-strength{font-size:var(--fs-xs);padding:6px 10px;border-radius:var(--rs);margin-top:6px}
.woocommerce-password-strength.short,.woocommerce-password-strength.bad{background:rgba(178,58,92,.12);color:var(--sale)}
.woocommerce-password-strength.good,.woocommerce-password-strength.strong{background:rgba(78,122,85,.14);color:var(--ok)}
.woocommerce-password-hint{font-size:var(--fs-xs);color:var(--ink-3)}
.show-password-input{display:none}

/* ---------- bag page ---------- */
.cartgrid__act{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.sumry .woocommerce-remove-coupon{font-size:var(--fs-xs);color:var(--ink-3);margin-left:6px;text-decoration:underline}
.sumry__r b .amount,.sumry__t b .amount{font-weight:inherit}
.sumry__t small,.sumry__t .includes_tax{display:block;margin-top:4px;font-size:10.5px;line-height:1.5;color:var(--ink-3);font-weight:300}
.sumry .wc-proceed-to-checkout{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.sumry .shipbar{margin-top:-4px}
.promo input{min-width:0}

/* ---------- checkout ---------- */
.checkout__in{margin:0}
#customer_details{display:flex;flex-direction:column;gap:22px}
.cblock--sub{border-style:dashed;gap:12px}
.cblock--sub .shipping_address{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.cblock .chk span,.cblock--sub .chk span{font-size:var(--fs-s);color:var(--ink-2)}
.dr-optin,.create-account{margin:0}
.woocommerce-account-fields{display:flex;flex-direction:column;gap:12px}
.express__row>*{flex:1;min-width:140px}
.wc_payment_methods{list-style:none;margin:0;padding:0}
.wc_payment_method{display:flex;flex-direction:column}
.wc_payment_method .payment_box{padding:12px 16px 4px;font-size:var(--fs-s);color:var(--ink-2);line-height:1.7}
.wc_payment_method .payment_box p{margin:0 0 8px}
.wc_payment_method .payment_box fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.opt2__icon{margin-left:auto;display:flex;gap:6px;align-items:center}
.opt2__icon img{max-height:22px;width:auto}
.opt2 input.shipping_method[type=hidden]+.opt2__b{padding-left:0}
.dr-ship-methods .mut{margin:0}
/* Buying as: the panel opens on the checked radio, so it works with scripting off. */
.dr-biz{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.dr-biz__q{margin:0;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.dr-biz__f{display:flex;flex-direction:column;gap:12px}
.dr-biz:has(#dr_buyer_individual:checked) .dr-biz__f{display:none}
/* Optional to WooCommerce, since Individual needs neither; required once the panel is open, which
   is what the customer is looking at, so the marker would read as a contradiction. */
.dr-biz__f .optional{display:none}
#payment{display:flex;flex-direction:column;gap:18px}
#payment .place-order{display:flex;flex-direction:column;gap:12px;margin:0}
.woocommerce-terms-and-conditions-wrapper{font-size:var(--fs-xs);color:var(--ink-3);display:flex;flex-direction:column;gap:8px}
.woocommerce-privacy-policy-text p{margin:0}
.woocommerce-terms-and-conditions-wrapper a,.woocommerce-privacy-policy-text a{text-decoration:underline}
.woocommerce-form__label-for-checkbox{display:flex;flex-direction:row;align-items:center;gap:10px}
.woocommerce-form__label-for-checkbox input[type=checkbox]{width:17px;height:17px;padding:0;margin:0;flex:none}
.checkout .blockUI.blockOverlay{border-radius:var(--rl)}
.woocommerce-checkout-review-order-table.processing{opacity:.6}
.checkout__r .sumry{top:96px}

/* ---------- order received / details ---------- */
.ordmeta{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;font-size:var(--fs-s)}
.ordmeta li{display:flex;flex-direction:column;align-items:center;gap:2px}
.ordmeta span{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.confirmed__details{max-width:760px;margin:0 auto}
.orddet{margin-top:18px}
.orddet .lines{margin-top:10px}
.woocommerce-customer-details{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.woocommerce-customer-details .woocommerce-column{border:1px solid var(--line-soft);border-radius:var(--rl);padding:20px}
.woocommerce-customer-details h2{font-family:var(--disp);font-weight:400;font-size:1.15rem;margin:0 0 8px}
.woocommerce-customer-details address{font-style:normal;color:var(--ink-2);line-height:1.7}
.woocommerce-customer-details .col2-set{display:contents}
.order-again .button{margin-top:14px}
.ordnotes{list-style:none;margin:10px 0 16px;padding:0;display:flex;flex-direction:column;gap:10px}
.ordnotes li{border-left:2px solid var(--world-accent);padding:4px 0 4px 14px}
.ordnotes p{margin:4px 0 0;color:var(--ink-2)}

/* ---------- account ---------- */
.acct__b{display:flex;flex-direction:column;gap:6px}
.acct__b>.h2:first-child{margin-bottom:6px}
.woocommerce-MyAccount-content .woocommerce-address-fields{display:flex;flex-direction:column;gap:16px;max-width:620px}
.woocommerce-MyAccount-content form{max-width:620px}
.woocommerce-MyAccount-content p{margin:0}
.woocommerce-orders-table,.woocommerce-table{width:100%;border-collapse:collapse;font-size:var(--fs-s)}
.woocommerce-orders-table th,.woocommerce-orders-table td,.woocommerce-table th,.woocommerce-table td{padding:10px 8px;border-bottom:1px solid var(--line-soft);text-align:left}
.addr p{margin:0}
/* Sign-in / create account / reset password: the section had no side padding (design.css only pads
   .sec), so the photo touched the left edge on desktop and the form ran edge to edge on phones. */
.auth{padding-inline:var(--pad)}
/* Native checkboxes and radios (Remember me, terms, newsletter opt-ins) in the house ink, not browser blue. */
html{accent-color:var(--world-ink)}
.auth__h{font-size:clamp(1.9rem,3.4vw,2.8rem)}
.auth__form .form{margin-top:18px}
.auth__art img{width:100%;height:100%;object-fit:cover}
/* Track an order: .track is the page .wrap, so it keeps the full width (and the left edge of the
   breadcrumb and heading); only its contents are held to a readable width. */
.track{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.track>*{width:100%;max-width:760px}
.track .mut a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.track .mut a:hover{color:var(--world-accent)}
.track>p.order-info{font-size:var(--fs-s);color:var(--ink-2)}

/* ---------- misc WooCommerce ---------- */
.woocommerce-breadcrumb{display:none}
.star-rating{display:none}
.stars--lg{margin-top:2px}

/* Order lines: item data from plugins and purchase notes (order-details.php) */
.line .wc-item-meta{list-style:none;margin:4px 0 0;padding:0;font-size:var(--fs-xs);color:var(--ink-3)}
.line .wc-item-meta li{display:flex;gap:4px;margin:0}
.line .wc-item-meta p{margin:0;display:inline}
.line__note{margin:-6px 0 12px;padding-left:calc(64px + 14px);font-size:var(--fs-xs);color:var(--ink-3)}

/* ---------------------------------------------------------------------------------------------
   Accessibility: text contrast (WCAG 2.1 AA, measured with axe-core, Sep 2026).
   The accent (--world-accent, gold by default and re-coloured by the campaign worlds) is 2.3:1 on
   cream, so text-sized accents use it mixed with the world's ink: same hue, 4.9:1 or more. Display
   italics (large text, 3:1 needed) keep more of the accent. Browsers without color-mix() get the
   design's own text gold (--gold-ink).
   ------------------------------------------------------------------------------------------- */
:root{--ink-3:#6F6367}
.eyebrow,.lnk,.card__p,.meta b,.fx__price,.linkish,.pbrand,.nrow b,.line__p,.opt2__p,.brandc em,.cinfo__b b,
.faqnav__c,.nav a.on,.nav a:hover,.nav button:hover,.mega__col b,.stickybuy b,.prose a,.sumry__t b,.fbt__total b,
.crumbs a:hover,.card__brand:hover,.line__a:hover,.pnotes a:hover,.acc__h i{
  color:var(--gold-ink);color:color-mix(in srgb,var(--world-accent) 50%,var(--world-ink))}
.disp em,.h2 em,.split .w i.ac,.pprice__now,.val b,.steps li::before,.addr--new span{
  color:var(--gold-ink);color:color-mix(in srgb,var(--world-accent) 74%,var(--world-ink))}
.pb--new{background:var(--gold-ink);background:color-mix(in srgb,var(--world-accent) 50%,var(--world-ink))}
.nav__sale{color:#9E2F4E!important}
.ftr__b,.ftr__b a,.ftr__legal a{color:rgba(255,255,255,.62)}
.pay span{color:rgba(255,255,255,.72)}
.shopbar__n,.fopt em{color:var(--ink-2)}
.loadmore em{opacity:.8}
/* Keep the white-on-film and white-on-image exceptions of the design. */
.on-film .eyebrow{color:#fff}
.coll__b .lnk{color:#fff}
.chip__n{color:var(--ink-3)}.chip.on .chip__n,.chip:hover .chip__n{color:inherit;opacity:.75}

/* ---------- Service band above the footer (Theme Settings → Footer → Service band) ---------- */
.svc{background:var(--world-soft);border-top:1px solid var(--line-soft);padding:clamp(34px,4.5vw,60px) var(--pad)}
.svc__g{list-style:none;margin:0 auto;padding:0;max-width:1440px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.svc__i{display:flex;flex-direction:column;gap:8px;padding:6px clamp(16px,2.2vw,34px)}
.svc__i+.svc__i{border-left:1px solid var(--line)}
.svc__i:first-child{padding-left:0}.svc__i:last-child{padding-right:0}
.svc__ic{width:30px;height:30px;fill:none;stroke:var(--gold-ink);stroke:color-mix(in srgb,var(--world-accent) 50%,var(--world-ink));stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.svc__k{margin:0;font-size:10.5px}
.svc__t{margin:0;font-family:var(--disp);font-weight:400;font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.2;letter-spacing:-.005em;color:var(--world-ink)}
.svc__x{margin:2px 0 0;font-size:var(--fs-s);line-height:1.6;color:var(--ink-2);max-width:34ch}
@media (max-width:1024px){
  .svc__g{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}
  .svc__i:nth-child(odd){padding-left:0;border-left:0}
  .svc__i:nth-child(even){padding-right:0}
}
@media (max-width:600px){
  .svc__g{grid-template-columns:minmax(0,1fr);row-gap:0}
  .svc__i,.svc__i:nth-child(even){padding:20px 0;border-left:0}
  .svc__i+.svc__i{border-top:1px solid var(--line)}
  .svc__i:first-child{padding-top:0}.svc__i:last-child{padding-bottom:0}
  .svc__x{max-width:none}
}

/* ---------- Contact Form 7 (Contact page) in the design's form style ---------- */
.wpcf7 .wpcf7-form-control-wrap{display:block}
.wpcf7 .wpcf7-actions{display:flex;align-items:center;gap:12px;margin-top:4px}
.wpcf7 .wpcf7-submit{width:auto;min-width:220px}
@media(max-width:600px){.wpcf7 .wpcf7-submit{width:100%}}
.wpcf7 .wpcf7-not-valid-tip{display:block;margin-top:6px;font-size:var(--fs-xs);color:var(--sale)}
.wpcf7 .wpcf7-not-valid{border-color:var(--sale)}
.wpcf7 form .wpcf7-response-output{margin:4px 0 0;padding:12px 16px;border:1px solid var(--line);border-radius:var(--rm);font-size:var(--fs-s);font-weight:500}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--ok);color:var(--ok);background:rgba(78,122,85,.07)}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.unaccepted .wpcf7-response-output,.wpcf7 form.payment-required .wpcf7-response-output{border-color:var(--warn);color:var(--warn)}
.wpcf7 form.failed .wpcf7-response-output,.wpcf7 form.aborted .wpcf7-response-output,.wpcf7 form.spam .wpcf7-response-output{border-color:var(--sale);color:var(--sale)}
.wpcf7 .wpcf7-spinner{margin:0;flex:none;background-color:var(--ink-3)}
.wpcf7 form.submitting .wpcf7-submit{opacity:.6;pointer-events:none}
.wpcf7 .screen-reader-response{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Scrollbars: thin and hidden until something scrolls ----------
   main.js adds .sb-on to the page or panel being scrolled, and removes it a moment after it stops.
   Strips that hide their scrollbar on purpose (.fxrow, .pgal__thumbs) keep scrollbar-width:none. */
*{scrollbar-width:thin;scrollbar-color:transparent transparent}
.sb-on{scrollbar-color:rgba(42,34,38,.36) transparent}
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:transparent;border-radius:6px}
.sb-on::-webkit-scrollbar-thumb{background:rgba(42,34,38,.36)}
/* Product Description panel: the description's "More like …" block (heading + links to the
   collection and house). The panel opens taller than the design's 420px so it is never cut off. */
.pacc .acc.on .acc__c{max-height:1000px}
.pacc .acc__c p{margin:0 0 10px}
.pacc .acc__c h2,.pacc .acc__c h3{font-family:var(--disp);font-weight:400;font-size:1.05rem;line-height:1.3;color:var(--world-ink);margin:16px 0 6px}
.pacc .acc__c a{color:var(--world-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--world-accent)}
.pacc .acc__c a:hover{color:var(--world-accent)}

/* ---------- Desktop mega menu: anchor to the nav item, not the viewport centre ----------
   The design centred the 880px panel on its trigger (left:50% + translateX(-50%)). "Shop" sits at
   the left edge of the header, so 344px of the panel fell outside the window and the By category /
   By family columns could not be seen. Anchor it to the item's left edge and cap it to the window. */
.mega{left:0;transform:translate(0,10px);max-width:calc(100vw - (2 * var(--pad)))}
.navitem:hover .mega,.navitem:focus-within .mega{transform:translate(0,6px)}