/* Sentinel storefront experience layer (release 1.2.31): motion, option chips,
   mobile menu, added sheet, product buy bar, cart cards and order request form. */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-soft:cubic-bezier(.4,0,.2,1)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Motion ---------- */
@keyframes sentinel-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes sentinel-fade{from{opacity:0}to{opacity:1}}
@keyframes sentinel-dialog{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes sentinel-sheet{from{opacity:.4;transform:translateY(100%)}to{opacity:1;transform:none}}
@keyframes sentinel-bump{0%{transform:none}35%{transform:translateY(-3px) scale(1.12)}70%{transform:translateY(1px) scale(.97)}100%{transform:none}}
@keyframes sentinel-shimmer{from{background-position:120% 0}to{background-position:-20% 0}}
@keyframes sentinel-attention{0%,100%{box-shadow:0 0 0 0 rgba(232,119,67,0)}35%{box-shadow:0 0 0 6px rgba(232,119,67,.22)}}
@keyframes sentinel-tick{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}

.motion-ready .reveal{opacity:0;transform:translateY(24px);transition:opacity .75s var(--ease-out) var(--reveal-delay,0ms),transform .9s var(--ease-out) var(--reveal-delay,0ms)}
.motion-ready .reveal.is-visible{opacity:1;transform:none}
/* Revealed items whose blended photos would otherwise lose their backdrop mid-fade. */
.related.products li.reveal{background:var(--paper)}

/* Hero: copy rises line by line, devices settle in. */
.motion-ready .hero-copy>*{animation:sentinel-rise .9s var(--ease-out) backwards}
.motion-ready .hero-copy>*:nth-child(2){animation-delay:.08s}
.motion-ready .hero-copy>*:nth-child(3){animation-delay:.16s}
.motion-ready .hero-copy>*:nth-child(4){animation-delay:.24s}
.motion-ready .hero-copy>*:nth-child(n+5){animation-delay:.32s}
/* Device photos are white-background images made invisible with mix-blend-mode:multiply
   against the hero panel. Animating a wrapper would isolate them in their own layer and the
   white would show, so only the photo and caption elements themselves move. */
.motion-ready .hero-device img,.motion-ready .hero-device figcaption{animation:sentinel-rise 1.1s var(--ease-out) backwards}
.motion-ready .hero-device-pro img,.motion-ready .hero-device-pro figcaption{animation-delay:.12s}
.motion-ready .hero-device-duo img,.motion-ready .hero-device-duo figcaption{animation-delay:.26s}
.motion-ready .location-row,.motion-ready .announcement{animation:sentinel-fade .8s ease backwards}

/* Dialogs open with a lift; on phones they slide up like a sheet. */
.motion-ready dialog[open]{animation:sentinel-dialog .45s var(--ease-out)}
.motion-ready dialog[open]::backdrop{animation:sentinel-fade .35s ease}
@media(max-width:700px){.motion-ready dialog[open]{animation:sentinel-sheet .5s var(--ease-out)}}
.motion-ready #detail-image img{animation:sentinel-fade .45s ease}
.motion-ready .woocommerce-product-gallery__image.is-swapping img{animation:sentinel-fade .5s ease}

/* Tactile feedback: hovers never fire on phones, presses do. */
.button,.woocommerce .button,.option-chip,.qty-step,.icon-button,.category-button,.quick-add,.heart{-webkit-tap-highlight-color:transparent}
.button:active,.woocommerce a.button:active,.woocommerce button.button:active,.option-chip:active,.qty-step:active,.quick-add:active{transform:scale(.97)}
.button,.woocommerce a.button,.woocommerce button.button,.quick-add,.option-chip,.qty-step{transition:background .2s,color .2s,border-color .2s,transform .18s var(--ease-soft),box-shadow .2s}
.bag-button.bump svg{animation:sentinel-bump .6s var(--ease-out)}
.bag-button.bump .bag-count{animation:sentinel-bump .6s var(--ease-out) .08s}

/* Header gains depth once the page scrolls. */
/* Solid, not translucent: page content must not show through. (A backdrop-filter blur
   would also make the header the containing block for the fixed mobile menu.) */
.header{background:var(--paper);transition:box-shadow .3s ease}
.header.is-scrolled{box-shadow:0 8px 28px -18px rgba(8,47,80,.35)}

/* ---------- Loading skeletons ---------- */
.skeleton-card{display:flex;flex-direction:column;gap:12px;min-width:0}
.skeleton-card span{display:block;background:linear-gradient(100deg,#eeede9 30%,#f7f6f2 50%,#eeede9 70%);background-size:220% 100%;animation:sentinel-shimmer 1.4s linear infinite}
.skeleton-card .sk-img{height:270px}
.skeleton-card .sk-line{height:12px;width:70%}
.skeleton-card .sk-short{width:42%}
@media(max-width:800px){.skeleton-card .sk-img{height:230px}}
@media(max-width:520px){.skeleton-card .sk-img{height:170px}}
.catalog-status:not(:empty)+.catalog-grid .skeleton-card{display:none}

/* ---------- Mobile menu: full-height sheet ---------- */
.nav-contact{display:none}
@media(max-width:800px){
  /* Lock html only: overflow on body would make it the scroller and unstick the header. */
  html.nav-open{overflow:hidden;overscroll-behavior:none}
  /* The base nav wraps (flex-wrap:wrap); in a fixed-height column that would spill into a
     second column on short screens, so the sheet scrolls vertically instead. */
  .nav-links.open{overscroll-behavior:contain;flex-wrap:nowrap;overflow-x:hidden;border-top:1px solid var(--line)}
  .nav-links.open>*{flex:none}
  .nav-links.open{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;position:fixed;left:0;right:0;top:var(--header-bottom,69px);height:calc(100dvh - var(--header-bottom,69px));padding:12px 24px calc(28px + env(safe-area-inset-bottom));overflow-y:auto;border-bottom:0;z-index:40;background:var(--paper)}
  .nav-links.open>a,.nav-links.open>button{display:flex;align-items:center;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line);font-family:var(--heading);font-size:18px;font-weight:500;letter-spacing:-.01em;color:var(--ink);text-align:left;width:100%}
  .nav-links.open>a::after{content:"";width:7px;height:7px;border-top:1.5px solid var(--muted);border-right:1.5px solid var(--muted);transform:rotate(45deg);margin-right:4px}
  .nav-links.open .mobile-saved-link{font-size:14px;font-weight:400;font-family:var(--font);color:var(--muted)}
  .nav-links.open .nav-contact{display:grid;gap:10px;margin-top:auto;padding-top:28px;font-size:14px}
  .nav-links.open .nav-contact a{color:var(--navy);font-size:15px}
  .nav-links.open .nav-contact span{font-size:12px;color:var(--muted)}
  .motion-ready .nav-links.open>*{animation:sentinel-rise .55s var(--ease-out) backwards}
  .motion-ready .nav-links.open>*:nth-child(2){animation-delay:.03s}
  .motion-ready .nav-links.open>*:nth-child(3){animation-delay:.06s}
  .motion-ready .nav-links.open>*:nth-child(4){animation-delay:.09s}
  .motion-ready .nav-links.open>*:nth-child(5){animation-delay:.12s}
  .motion-ready .nav-links.open>*:nth-child(6){animation-delay:.15s}
  .motion-ready .nav-links.open>*:nth-child(n+7){animation-delay:.18s}
}

@media(max-width:800px) and (max-height:700px){
  .nav-links.open>a,.nav-links.open>button{padding:12px 0;font-size:17px}
  .nav-links.open .nav-contact{padding-top:20px}
}

/* The two-sided tagline row is too tight on phones; keep the location only. */
@media(max-width:520px){.location-row span:last-child{display:none}}

/* ---------- Option chips ---------- */
.chips-source{position:absolute!important;left:0;top:0;width:1px!important;min-width:0!important;max-width:1px!important;height:1px!important;padding:0!important;border:0!important;opacity:0;pointer-events:none;overflow:hidden;clip-path:inset(50%)}
.detail-option-field.has-chips,table.variations td.value.has-chips{position:relative}
.option-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.option-chips-colour{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.option-chips-long{grid-template-columns:1fr}
.option-chip{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:10px 12px;min-width:0;background:white;border:1px solid var(--line);color:var(--ink);font-size:13px;line-height:1.25;text-align:center;cursor:pointer}
.option-chip:hover{border-color:#b9c3ca}
.option-chip[aria-pressed="true"]{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);color:var(--navy);font-weight:600}
.option-chip:disabled{opacity:.38;cursor:not-allowed;text-decoration:line-through}
.option-chip:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.chip-dot{width:16px;height:16px;flex:none;border-radius:50%;background:var(--dot);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.option-chips-colour .option-chip{justify-content:flex-start}
.variant-options .detail-option-field.has-chips{grid-column:1/-1}
.detail-option-field.has-chips label{margin-bottom:8px}
.woocommerce div.product form.cart table.variations td.value.has-chips{padding-bottom:6px}
.woocommerce div.product form.cart table.variations{margin-bottom:6px}
.woocommerce div.product form.cart table.variations th.label{text-align:left;padding:14px 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.woocommerce div.product form.cart table.variations tr{display:block}
.woocommerce div.product form.cart table.variations th,.woocommerce div.product form.cart table.variations td{display:block;width:100%}
.woocommerce div.product form.cart .reset_variations{display:inline-block;margin-top:10px;font-size:12px;color:var(--muted)}
.single_variation_wrap .woocommerce-variation-price{display:none}
.single-product div.product .summary>p.price span.price{color:inherit;font-size:inherit;margin:0}
/* Products without tabs or related items still need their floats contained. */
.single-product div.product{display:flow-root}
.variations.needs-choice{animation:sentinel-attention 1.1s ease}

/* ---------- Product page buy bar (phones) ---------- */
.buy-bar{display:none}
@media(max-width:800px){
  .buy-bar{display:flex;align-items:center;gap:14px;position:fixed;left:0;right:0;bottom:0;z-index:35;padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:rgba(251,250,247,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .45s var(--ease-out)}
  .buy-bar.is-visible{transform:none}
  .buy-bar-info{min-width:0;flex:1;display:grid;gap:2px}
  .buy-bar-info strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .buy-bar-price,.buy-bar-price .price{font-size:13px;color:var(--muted)}
  .buy-bar-price del{display:none}
  .buy-bar .button{width:auto;margin:0;flex:none;gap:12px;padding:14px 18px;font-size:13px}
  .buy-bar .button.is-pending{background:white;color:var(--navy)}
  html.has-buy-bar body{padding-bottom:82px}
}

/* ---------- Added sheet ---------- */
.added-sheet{width:460px;max-width:calc(100% - 30px);padding:30px;border:0;background:var(--paper);color:var(--ink)}
.added-sheet .dialog-close{position:absolute;top:14px;right:14px;margin:0;float:none}
.added-status{display:flex;align-items:center;gap:10px;margin:0 0 20px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.added-tick{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--navy)}
.added-tick svg,.enquiry-done-mark svg{width:15px;height:15px;fill:none;stroke:white;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24}
.motion-ready .added-sheet[open] .added-tick svg,.motion-ready .enquiry-done:not([hidden]) .enquiry-done-mark svg{animation:sentinel-tick .5s var(--ease-out) .2s both}
.added-item{display:flex;gap:18px;align-items:center;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.added-item img{width:86px;height:86px;object-fit:contain;background:#f0f0ed;padding:8px;mix-blend-mode:multiply;flex:none}
.added-item h2{font-size:19px;margin:0 0 4px;letter-spacing:-.02em}
.added-item p{margin:0 0 8px;font-size:12px;color:var(--muted)}
.added-item strong{font-size:15px}
.added-actions{display:grid;gap:6px;margin-top:20px}
.added-actions .button{width:100%;margin:0;font-size:13px}
.added-actions .text-link{display:inline-flex;justify-self:center;font-size:13px}
@media(max-width:700px){
  .added-sheet{width:100%;max-width:100%;margin:auto 0 0;padding:26px 20px calc(22px + env(safe-area-inset-bottom))}
}

/* ---------- Cart ---------- */
.woocommerce-cart-form .product-thumbnail .image-pending{display:grid;place-items:center;width:84px;height:84px;padding:8px;background:#f0f0ed;color:var(--muted);font-size:10px;line-height:1.3;text-align:center}
.cart-auto-update .woocommerce-cart-form button[name="update_cart"]{display:none}
/* Coupons are off and updates are automatic, so the actions row would be empty. */
.cart-auto-update .woocommerce-cart-form td.actions:not(:has(.coupon)){display:none}
.woocommerce-cart-form .quantity{display:inline-flex;align-items:stretch;border:1px solid var(--line);background:white}
.woocommerce-cart-form .quantity .qty{width:44px!important;border:0!important;text-align:center;font-size:15px;-moz-appearance:textfield;background:transparent}
.woocommerce-cart-form .quantity .qty::-webkit-inner-spin-button,.woocommerce-cart-form .quantity .qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.qty-step{width:42px;min-height:42px;font-size:18px;color:var(--navy);background:transparent;border:0;cursor:pointer}
.qty-step:hover{background:var(--blue)}
.woocommerce-cart-form a.remove{width:auto!important;height:auto!important;font-size:12px!important;font-weight:400!important;line-height:1.4!important;color:var(--muted)!important;text-decoration:underline;text-underline-offset:3px;border-radius:0!important}
.woocommerce-cart-form a.remove:hover{background:none!important;color:#b42318!important}
.woocommerce-cart-form .product-thumbnail img{width:84px!important;height:84px;object-fit:contain;background:#f0f0ed;padding:6px;mix-blend-mode:multiply}
.woocommerce-cart-form .product-name a{font-weight:600;color:var(--ink)}
@media(max-width:768px){
  .woocommerce-cart table.cart tr.cart_item{display:grid;grid-template-columns:92px minmax(0,1fr);grid-template-areas:"photo name" "photo price" "photo qty" "photo remove";column-gap:16px;padding:18px 16px;border-bottom:1px solid var(--line)}
  .woocommerce-cart table.cart tr.cart_item td{display:block;border:0!important;padding:0!important;background:transparent!important;text-align:left!important}
  .woocommerce-cart table.cart tr.cart_item td::before{display:none!important}
  .woocommerce-cart table.cart tr.cart_item td.product-thumbnail{display:block!important;grid-area:photo;align-self:start}
  .woocommerce-cart table.cart tr.cart_item td.product-thumbnail img{width:92px!important;height:92px}
  .woocommerce-cart table.cart tr.cart_item td.product-name{grid-area:name;font-size:15px;line-height:1.35;margin-bottom:4px}
  .woocommerce-cart table.cart tr.cart_item td.product-price{display:none!important}
  .woocommerce-cart table.cart tr.cart_item td.product-subtotal{grid-area:price;font-size:15px;font-weight:600;color:var(--navy);margin-bottom:12px}
  .woocommerce-cart table.cart tr.cart_item td.product-quantity{grid-area:qty}
  .woocommerce-cart table.cart tr.cart_item td.product-remove{grid-area:remove;margin-top:12px}
  .woocommerce-cart table.cart tr.cart_item td.product-remove a.remove{display:inline}
  .woocommerce-cart table.cart{border:1px solid var(--line)!important}
  .woocommerce-cart.cart-auto-update table.cart td.actions{display:none!important}
  .woocommerce-cart .cart_totals h2{font-size:20px}
}
.cart-bar{display:none}
@media(max-width:768px){
  .cart-bar{display:flex;align-items:center;gap:14px;position:fixed;left:0;right:0;bottom:0;z-index:35;padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:rgba(251,250,247,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .45s var(--ease-out)}
  .cart-bar.is-visible{transform:none}
  .cart-bar-total{flex:1;display:grid;gap:2px}
  .cart-bar-total span{font-size:11px;color:var(--muted)}
  .cart-bar-total strong{font-size:17px;color:var(--navy)}
  .cart-bar .button{width:auto;margin:0;padding:14px 18px;font-size:13px}
  html.has-cart-bar body{padding-bottom:82px}
}

/* ---------- Order request form ---------- */
.enquiry-summary{margin:20px 0 4px;border:1px solid var(--line);background:white}
.enquiry-summary ul{list-style:none;margin:0;padding:0}
.enquiry-summary li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.enquiry-summary li img,.summary-photo-pending{width:52px;height:52px;object-fit:contain;background:#f0f0ed;padding:4px;mix-blend-mode:multiply}
.summary-photo-pending{display:block}
.summary-name{font-size:13px;line-height:1.35;display:grid;gap:2px}
.summary-name small{font-size:11px;color:var(--muted)}
.summary-price{font-size:13px;font-weight:600;white-space:nowrap}
.summary-total{display:flex;justify-content:space-between;align-items:baseline;margin:0;padding:12px 14px;font-size:12px;color:var(--muted)}
.summary-total strong{font-size:17px;color:var(--navy)}
.fulfilment{border:0;margin:18px 0 0;padding:0;min-width:0}
.fulfilment legend{font-size:11px;margin:0 0 8px;padding:0}
.fulfilment-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.contact-dialog .fulfilment-option{position:relative;display:block;margin:0;cursor:pointer}
.contact-dialog .fulfilment-option input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.fulfilment-option span{display:grid;gap:4px;height:100%;padding:14px;background:white;border:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
.fulfilment-option strong{font-size:13px;color:var(--ink)}
.fulfilment-option small{font-size:11px;line-height:1.45;color:var(--muted)}
.fulfilment-option input:checked+span{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.fulfilment-option input:focus-visible+span{outline:2px solid var(--orange);outline-offset:2px}
.delivery-address textarea{min-height:64px;resize:vertical}
@media(max-width:420px){.fulfilment-options{grid-template-columns:1fr}}
.contact-dialog.is-done .contact-office,.contact-dialog.is-done #contact-description,.contact-dialog.is-order .contact-office{display:none}
.enquiry-done{padding:12px 0 4px;outline:none}
.enquiry-done-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--navy);margin:8px 0 20px}
.enquiry-done-mark svg{width:24px;height:24px}
.enquiry-done h3{font-family:var(--heading);font-size:26px;letter-spacing:-.02em;margin:0 0 10px}
.enquiry-done p{font-size:14px;line-height:1.6;margin:0 0 10px}
.enquiry-done-next{color:var(--muted);font-size:13px!important}
.enquiry-done-actions{display:grid;gap:6px;margin-top:22px}
.enquiry-done-actions .button{margin:0;width:100%}
.enquiry-done-actions .text-link{display:inline-flex;justify-self:center;font-size:13px;background:none;border-left:0;border-right:0;border-top:0;cursor:pointer}

/* New controls sit outside WooCommerce markup but inside body.woocommerce; keep them on brand. */
body .buy-bar button.button,body .cart-bar button.button,body .added-actions a.button,body .added-actions button.button,body .enquiry-done-actions button.button{background:var(--navy);color:white;border:1px solid var(--navy);border-radius:0;font:500 13px var(--font);display:inline-flex;align-items:center;justify-content:center;gap:12px}
body .buy-bar button.button:hover,body .cart-bar button.button:hover,body .added-actions a.button:hover,body .added-actions button.button:hover,body .enquiry-done-actions button.button:hover{background:#154765;color:white}
body .buy-bar button.button.is-pending{background:white;color:var(--navy)}
body .buy-bar button.button svg,body .added-actions .button svg{width:16px;height:16px}

/* WhatsApp leads; email becomes the secondary route whenever WhatsApp is offered. */
.contact-dialog .button-whatsapp{gap:12px}
.contact-dialog .button-whatsapp svg{width:20px;height:20px;fill:none;stroke:#25d366;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.contact-dialog .button-whatsapp+.button{margin-top:10px;background:white;color:var(--navy)}
.contact-dialog .button-whatsapp+.button:hover{background:var(--blue)}
.contact-dialog .button-whatsapp+.button svg{stroke:var(--navy)}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .skeleton-card span{animation:none}
}