/* ============================================================================
   CULTXONE — WooCommerce layer
   WooCommerce stock CSS is dequeued in functions.php, so this file supplies:
   (a) a minimal WC base so forms / notices / quantity behave,
   (b) the mapping of WC markup onto the mockup existing classes,
   (c) the mobile bottom nav.
   Never restyle a component that already exists in style.css — reuse its class.
   ========================================================================= */

/* ---------- WC BASE (replacing what we dequeued) ------------------------- */
.woocommerce form .form-row{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.woocommerce form .form-row label{font-size:12.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;opacity:.75}
.woocommerce form .form-row .required{color:var(--err);text-decoration:none}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  border:var(--bd);border-radius:var(--r-sm);padding:14px 16px;background:#fff;font-weight:500;
  box-shadow:3px 3px 0 var(--ink);font-family:var(--body);font-size:15px;width:100%;
  transition:transform .14s,box-shadow .14s;height:auto;min-height:52px}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{outline:none;transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.woocommerce form .form-row textarea{min-height:110px;resize:vertical}
.woocommerce .select2-container .select2-selection__rendered{line-height:24px;padding:0;color:var(--ink)}
.woocommerce .select2-container .select2-selection__arrow{top:14px;right:10px}
.select2-dropdown{border:var(--bd);border-radius:var(--r-sm);overflow:hidden}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--ink);color:var(--yellow)}
.woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%}
@media(min-width:640px){
  .woocommerce form .form-row-first,.woocommerce form .form-row-last{width:calc(50% - 8px);display:inline-flex}
  .woocommerce form .form-row-first{margin-right:16px}
}
.woocommerce-invalid input.input-text{border-color:var(--err)}
.woocommerce-input-wrapper{width:100%}

/* notices */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-notice{
  border:var(--bd);border-radius:var(--r);padding:16px 20px;margin:0 0 20px;font-weight:500;
  background:var(--lilac-pale);box-shadow:var(--sh);list-style:none;font-size:14.5px}
.woocommerce-error{background:#FFE1E1}
.woocommerce-message{background:#E4FFD9}
.woocommerce-message .button,.woocommerce-info .button{float:right;margin-left:14px}
.woocommerce-NoticeGroup{margin-bottom:8px}

/* quantity — a bare number input defaults to ~150px and blows out layouts */
.quantity{display:inline-flex;align-items:center;border:var(--bd);border-radius:99px;overflow:hidden;
  background:#fff;box-shadow:3px 3px 0 var(--ink);width:fit-content}
.quantity input.qty{width:52px;height:46px;text-align:center;border:none;background:transparent;
  font-family:var(--display);font-size:16px;-moz-appearance:textfield;padding:0}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.quantity .cx-step{width:42px;height:46px;font-size:19px;font-weight:700;display:grid;place-items:center;
  cursor:pointer;transition:background .16s;border:none;background:none}
.quantity .cx-step:hover{background:var(--yellow)}

/* WC buttons inherit the mockup button */
.woocommerce .button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button,.woocommerce #respond input#submit,.wp-element-button{
  font-family:var(--display);font-size:14px;padding:14px 24px;border-radius:99px;border:var(--bd);
  box-shadow:4px 4px 0 var(--ink);background:var(--yellow);color:var(--ink);cursor:pointer;
  display:inline-flex;gap:9px;align-items:center;justify-content:center;line-height:1;
  transition:transform .16s,box-shadow .16s,background .16s;text-decoration:none}
.woocommerce .button:hover,.woocommerce button.button:hover,.woocommerce a.button:hover,
.woocommerce input.button:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--ink);background:var(--yellow)}
.woocommerce .button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.woocommerce .button.alt,.woocommerce button.button.alt,
.woocommerce #place_order,.woocommerce .checkout-button{background:var(--ink);color:var(--yellow)}
.woocommerce .button.alt:hover,.woocommerce #place_order:hover{background:var(--indigo);color:var(--yellow)}
.woocommerce .button[disabled]{opacity:.45;pointer-events:none}

/* ---------- SHOP / ARCHIVE ---------------------------------------------- */
.shop-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:34px;align-items:start}
.shop-layout>div{min-width:0}
ul.products,.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;
  list-style:none;margin:0;padding:0}
ul.products li.product{margin:0;width:auto;float:none;min-width:0}
@media(max-width:1000px){ul.products,.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){ul.products,.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
.woocommerce-result-count,.woocommerce-ordering{margin:0}
.woocommerce-ordering select{border:var(--bd);border-radius:99px;padding:10px 16px;font-weight:700;
  font-size:13px;background:#fff;box-shadow:3px 3px 0 var(--ink);cursor:pointer}
.woocommerce-pagination ul{display:flex;gap:8px;list-style:none;justify-content:center;margin:34px 0 0;padding:0;border:none}
.woocommerce-pagination ul li{border:none;margin:0}
.woocommerce-pagination a,.woocommerce-pagination span{display:grid;place-items:center;min-width:44px;height:44px;
  border:var(--bd);border-radius:99px;background:#fff;font-family:var(--display);font-size:14px;
  box-shadow:3px 3px 0 var(--ink);padding:0 12px}
.woocommerce-pagination span.current{background:var(--ink);color:var(--yellow)}
.woocommerce-pagination a:hover{background:var(--yellow)}

/* ---------- SINGLE PRODUCT ---------------------------------------------- */
.woocommerce div.product form.cart{margin:0}
.woocommerce div.product form.cart .button{font-size:16px;padding:16px 28px}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 18px;list-style:none;
  display:flex;gap:8px;flex-wrap:wrap}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{border:var(--bd-2);border-radius:99px;background:#fff;
  margin:0;padding:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:9px 17px;font-weight:700;font-size:13px;display:block}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--ink)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--yellow)}
.woocommerce div.product .woocommerce-tabs .panel{background:#fff;border:var(--bd);border-radius:var(--r);
  padding:26px;box-shadow:var(--sh);font-size:15px;line-height:1.7;margin:0}
.woocommerce div.product p.price,.woocommerce div.product span.price{font-family:var(--display);
  font-size:34px;color:var(--ink)}
.woocommerce div.product p.price del{font-family:var(--body);font-size:17px;opacity:.45;font-weight:500}
.woocommerce div.product p.price ins{text-decoration:none}
.woocommerce div.product .stock{font-weight:700;color:var(--ok)}

/* ---------- CART --------------------------------------------------------- */
.cart-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);gap:34px;align-items:start}
.cart-layout>*{min-width:0}
@media(max-width:1000px){.cart-layout{grid-template-columns:minmax(0,1fr)}}
.cart-item{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:17px;background:#fff;
  border:var(--bd);border-radius:var(--r);padding:15px;box-shadow:var(--sh);align-items:center;min-width:0}
.cart-item>*{min-width:0}
.cart-item img{width:100%;border-radius:var(--r-sm);border:var(--bd-2);display:block}
.cart-item h4{font-family:var(--display);font-size:17px;line-height:1.15;margin-bottom:4px}
.cart-item .meta{font-size:11.5px;font-weight:700;opacity:.6;letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px}
.cart-item .right{text-align:right;display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.cart-item .line{font-family:var(--display);font-size:19px}
@media(max-width:1000px){
  .cart-item{grid-template-columns:82px minmax(0,1fr)}
  .cart-item .right{grid-column:2;flex-direction:row;justify-content:space-between;width:100%;align-items:center}
}
.cx-remove{font-size:12px;font-weight:700;opacity:.6;border-bottom:2px solid transparent;text-decoration:none}
.cx-remove:hover{opacity:1;color:var(--err);border-color:var(--err)}
.woocommerce .cart-collaterals,.woocommerce-cart .cart-collaterals{width:100%;float:none}
.woocommerce .cart_totals{width:100%;float:none}
.woocommerce table.shop_table{border:none;background:none;border-radius:0;margin:0}
.coupon-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.coupon-row input{flex:1;min-width:150px;border:var(--bd);border-radius:99px;padding:13px 18px;
  box-shadow:3px 3px 0 var(--ink);font-weight:500}

/* ---------- CHECKOUT ----------------------------------------------------- */
.checkout-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:34px;align-items:start}
.checkout-layout>*{min-width:0}
@media(max-width:1000px){.checkout-layout{grid-template-columns:minmax(0,1fr)}}
.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2{width:100%;float:none}
.woocommerce-checkout #payment{background:transparent;border-radius:0}
.woocommerce-checkout #payment ul.payment_methods{padding:0;margin:0 0 18px;list-style:none;border:none;
  display:flex;flex-direction:column;gap:12px}
.woocommerce-checkout #payment ul.payment_methods li{border:var(--bd);border-radius:var(--r);padding:17px;
  background:#fff;box-shadow:3px 3px 0 var(--ink);transition:all .16s}
.woocommerce-checkout #payment ul.payment_methods li:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.woocommerce-checkout #payment ul.payment_methods li label{font-family:var(--display);font-size:16px;
  display:inline-flex;gap:11px;align-items:center;cursor:pointer;text-transform:none}
.woocommerce-checkout #payment ul.payment_methods li input[type=radio]{width:19px;height:19px;accent-color:var(--indigo)}
.woocommerce-checkout #payment div.payment_box{background:var(--lilac-pale);border:var(--bd-2);
  border-radius:var(--r-sm);padding:14px 16px;margin:12px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink)}
.woocommerce-checkout #payment div.payment_box::before{display:none}
.woocommerce-checkout #payment .form-row.place-order{padding:0;margin:18px 0 0}
.woocommerce-checkout #payment #place_order{width:100%;font-size:18px;padding:18px}
.woocommerce-checkout-review-order-table{width:100%;border-collapse:collapse}
.woocommerce-checkout-review-order-table th,.woocommerce-checkout-review-order-table td{
  padding:11px 0;text-align:left;font-size:14.5px;border:none;border-bottom:1.5px dashed rgba(26,11,61,.18)}
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child{text-align:right}
.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout-review-order-table tfoot tr.order-total td{font-family:var(--display);font-size:21px;
  border-bottom:none;border-top:var(--bd);padding-top:15px}
.woocommerce-checkout-review-order-table .product-name{font-weight:700}
.woocommerce-checkout-review-order-table .product-quantity{opacity:.6;font-weight:700}
#ship-to-different-address label{font-family:var(--display);font-size:15px;display:inline-flex;gap:10px;align-items:center}
.woocommerce-terms-and-conditions-wrapper{margin-top:14px;font-size:13.5px}
.woocommerce-form__label-for-checkbox{display:inline-flex;gap:10px;align-items:flex-start}
.woocommerce-form__input-checkbox{width:19px;height:19px;accent-color:var(--indigo);margin-top:2px}

/* ---------- MY ACCOUNT --------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation{margin-bottom:0}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:8px}
.woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;padding:13px 17px;border:var(--bd);
  border-radius:var(--r-sm);background:#fff;font-family:var(--display);font-size:14px;
  box-shadow:3px 3px 0 var(--ink);transition:all .16s}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{transform:translate(-2px,-2px);
  box-shadow:5px 5px 0 var(--ink);background:var(--yellow)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--ink);color:var(--yellow)}
.woocommerce-account .woocommerce-MyAccount-content{background:#fff;border:var(--bd);border-radius:var(--r-lg);
  padding:30px;box-shadow:var(--sh-lg);min-width:0}
.account-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:26px;align-items:start}
@media(max-width:860px){.account-layout{grid-template-columns:minmax(0,1fr)}
  .woocommerce-account .woocommerce-MyAccount-navigation ul{flex-direction:row;flex-wrap:wrap}
  .woocommerce-account .woocommerce-MyAccount-navigation li a{font-size:12px;padding:10px 13px}}
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register{border:none;padding:0;margin:0}
.woocommerce table.my_account_orders{width:100%;border-collapse:collapse;font-size:14px}
.woocommerce table.my_account_orders th,.woocommerce table.my_account_orders td{
  padding:12px 10px;border-bottom:1.5px dashed rgba(26,11,61,.2);text-align:left}
.woocommerce table.my_account_orders th{font-family:var(--display);font-size:12px;letter-spacing:.05em}

/* order received */
.woocommerce .woocommerce-order{background:#fff;border:var(--bd);border-radius:var(--r-lg);padding:32px;
  box-shadow:var(--sh-lg)}
.woocommerce ul.order_details{list-style:none;padding:0;margin:0 0 24px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.woocommerce ul.order_details li{background:var(--cream);border:var(--bd-2);border-radius:var(--r-sm);
  padding:13px 15px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.woocommerce ul.order_details li strong{display:block;font-family:var(--display);font-size:16px;
  letter-spacing:0;text-transform:none;opacity:1;margin-top:5px;color:var(--ink)}

/* ---------- MOBILE BOTTOM NAV ------------------------------------------- */
.botnav{display:none}
@media(max-width:860px){
  .botnav{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:90;
    grid-template-columns:repeat(5,1fr);background:var(--cream);border-top:var(--bd);
    box-shadow:0 -4px 0 rgba(26,11,61,.08);padding-bottom:env(safe-area-inset-bottom)}
  .botnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:9px 4px 8px;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    position:relative;color:var(--ink);transition:color .16s}
  .botnav a i{font-style:normal;font-size:19px;line-height:1}
  .botnav a.on{color:var(--indigo)}
  .botnav a.on::before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;
    background:var(--indigo);border-radius:0 0 4px 4px}
  .botnav .bcount{position:absolute;top:4px;right:calc(50% - 20px);background:var(--pink);color:#fff;
    border:2px solid var(--ink);border-radius:99px;min-width:18px;height:18px;display:grid;
    place-items:center;font-size:9px;font-family:var(--display)}
  body{padding-bottom:62px}
  .foot__bar{padding-bottom:20px}
}

/* ---------- MOBILE POLISH ------------------------------------------------ */
@media(max-width:860px){
  .nav{position:static}
  html{scroll-padding-top:12px}
}
.cx-wa{position:fixed;right:14px;bottom:74px;z-index:88;width:52px;height:52px;border-radius:99px;
  background:#25D366;border:var(--bd);box-shadow:4px 4px 0 var(--ink);display:grid;place-items:center;
  font-size:25px;transition:transform .18s;text-decoration:none}
.cx-wa:hover{transform:scale(1.08)}
@media(min-width:861px){.cx-wa{bottom:20px}}

/* ---------- MISC --------------------------------------------------------- */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.woocommerce-breadcrumb{display:none}
.woocommerce .woocommerce-message .button{box-shadow:2px 2px 0 var(--ink);padding:9px 15px;font-size:12px}
img.attachment-woocommerce_thumbnail{width:100%;height:auto;display:block}

/* ---------- fixes for WC-rendered markup ------------------------------- */
/* .add is an <a> for ajax_add_to_cart; inline elements ignore width/height */
.add{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  white-space:nowrap;border:none;cursor:pointer}
.add.loading{opacity:.6;pointer-events:none}
.add.added{background:var(--lime);color:var(--ink)}
.card .added_to_cart{display:none}
/* product photos fill the card media box */
.card .media img,.gallery__main .media img,.thumbs .media img{width:100%;height:100%;object-fit:cover;display:block}
.cart-item .media img{width:100%;height:100%;object-fit:cover}
.sheet__fig img{width:100%;height:auto;display:block;border-radius:var(--r-sm)}
.fight a img{object-fit:contain}
.bundle__stack .chip img{border-radius:10px;object-fit:cover}

/* mobile filter panel toggle */
@media(max-width:1100px){ .filters{display:none} .filters.on{display:flex} }

/* ---------- search overlay ---------------------------------------------- */
.cx-searchwrap{position:fixed;inset:0;z-index:95;background:rgba(26,11,61,.62);backdrop-filter:blur(5px);
  display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px 16px}
.cx-searchwrap[hidden]{display:none}
.cx-searchbox{width:min(620px,100%);background:var(--cream);border:var(--bd);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);overflow:hidden;max-height:80vh;display:flex;flex-direction:column}
.cx-searchtop{display:flex;gap:10px;padding:16px;border-bottom:var(--bd);align-items:center}
.cx-searchtop input{flex:1;min-width:0;border:var(--bd);border-radius:99px;padding:14px 18px;
  font-family:var(--body);font-weight:500;font-size:15px;background:#fff;box-shadow:3px 3px 0 var(--ink)}
.cx-searchtop input:focus{outline:none;transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.cx-results{overflow-y:auto;padding:10px}
.cx-hit{display:flex;gap:13px;align-items:center;padding:11px;border-radius:var(--r-sm);
  transition:background .15s;text-decoration:none}
.cx-hit:hover{background:var(--lilac-pale)}
.cx-hit img,.cx-hit-ph{width:52px;height:52px;border-radius:10px;border:var(--bd-2);object-fit:cover;
  background:var(--cream-dk);flex-shrink:0}
.cx-hit span{display:flex;flex-direction:column;gap:3px;min-width:0}
.cx-hit b{font-family:var(--display);font-size:14px;line-height:1.2}
.cx-hit em{font-style:normal;font-size:13px;font-weight:700;opacity:.7}
.cx-nores{padding:22px;text-align:center;font-weight:700;opacity:.7}

/* ---------- checkout panel ---------------------------------------------- */
.cx-panel{background:#fff;border:var(--bd);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh);margin-bottom:20px}
@media(max-width:560px){.cx-panel{padding:18px}}
.woocommerce-shipping-fields h3,.woocommerce-additional-fields h3{font-family:var(--display);font-size:18px;
  color:var(--indigo);margin:0 0 14px}
.woocommerce-additional-fields{background:#fff;border:var(--bd);border-radius:var(--r-lg);padding:26px;
  box-shadow:var(--sh);margin-bottom:20px}

/* no horizontal scroll anywhere */
html,body{max-width:100%}

/* ---------- MOBILE CARD + TOOLBAR FIXES --------------------------------- */
/* At 375px a 2-up card is ~170px: price + "ADD +" side by side overflows and
   the button gets clipped by the card's overflow:hidden. Stack them and let
   the add button go full width, which is a bigger tap target anyway. */
@media(max-width:560px){
  .card__foot{flex-direction:column;align-items:stretch;gap:9px}
  .card__foot .price{font-size:17px;text-align:center}
  .card__foot .add{width:100%;padding:12px 8px;font-size:12px}
  .card__body{padding:12px 11px 13px;gap:7px}
  .card__fr{font-size:9px;letter-spacing:.07em}
  .diff{font-size:10px}
  .diff i{width:15px;height:5px}
}
/* the sort <select> has no max-width and pushes past the viewport */
.toolbar{width:100%;min-width:0}
.toolbar label{min-width:0;max-width:100%}
.woocommerce-ordering,.woocommerce-ordering form{max-width:100%;min-width:0}
.woocommerce-ordering select,.toolbar select{max-width:100%;width:auto;
  text-overflow:ellipsis;box-sizing:border-box}
@media(max-width:560px){
  .toolbar{flex-direction:column;align-items:stretch;gap:10px}
  .toolbar .count{text-align:center;font-size:13px}
  .toolbar label{display:flex;width:100%}
  .woocommerce-ordering{width:100%}
  .woocommerce-ordering select,.toolbar select{width:100%}
}

/* ---------- SHOP LAYOUT RESPONSIVE (the mockup rule targets .shoplayout,
   this template uses .shop-layout — without this the 250px sidebar survives
   to 375px and squeezes the grid to ~61px) ------------------------------- */
@media(max-width:1100px){
  .shop-layout{grid-template-columns:minmax(0,1fr);gap:18px}
  .shop-layout aside{position:static}
  .filters{position:static;display:none}
  .filters.on{display:flex}
  .filters-toggle{display:inline-block}
}
@media(min-width:1101px){ .filters-toggle{display:none} }

/* ---------- grid columns must be allowed to shrink ----------------------
   A CSS grid `1fr` column has implicit min-width:auto, so it refuses to go
   below its content's intrinsic width and spills past the container. This is
   the usual cause of "cut off on the right". */
.grid>*,.grid--3>*,.steps>*,.fight>*,.bundle__stack>*{min-width:0}
.grid,.grid--3{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
@media(max-width:1000px){
  .grid,.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:minmax(0,1fr)}   /* tier cards are text-heavy: stack them */
  .step{padding:22px 18px}
  .step__n{font-size:44px}
}

/* ---------- PRODUCT CARD MEDIA ------------------------------------------
   Product photos are shot on a grey studio backdrop. `object-fit:cover` made
   each photo fill the tile, hiding the cream checkerboard entirely and cropping
   the figure. Until cut-out (transparent) photos exist, a real photo gets a
   clean white tile and is CONTAINED so nothing is cropped; the checkerboard is
   only used for the SVG placeholder, which is what it was designed for. */
.card .media:has(img),
.gallery__main .media:has(img),
.thumbs .media:has(img),
.cart-item .media:has(img){
  background-image:none;background-color:#fff}
.card .media img,
.gallery__main .media img,
.thumbs .media img,
.cart-item .media img{
  object-fit:contain;width:100%;height:100%;padding:6px}
.gallery__main .media img{padding:14px}
.cart-item .media img{padding:3px}

/* ---------- BANNER PHOTO TREATMENT --------------------------------------
   Real product photos are shot on a grey studio backdrop. Dropped raw onto a
   coloured panel that reads as a stray grey rectangle. Rather than fake a
   cutout, each banner photo sits in a white "sticker" tile — the same thick
   border + hard shadow already used by cards, chips and stickers — so the
   backdrop reads as part of a product shot. Real photos, intentional framing. */
.hero-stage > a{
  background:#fff;border:4px solid var(--ink);border-radius:22px;
  box-shadow:9px 9px 0 var(--indigo);padding:10px;overflow:hidden;
  transform:rotate(-2deg);transition:transform .25s cubic-bezier(.34,1.5,.64,1)}
.hero-stage > a:hover{transform:rotate(1deg) scale(1.03)}
.hero-stage > a img{border-radius:13px;display:block;width:100%;height:auto}

.reveal__b img{
  background:#fff;border:3px solid var(--ink);border-radius:14px;
  box-shadow:4px 4px 0 var(--ink);padding:6px;display:block}

.fight a img{
  background:#fff;border:2.5px solid var(--ink);border-radius:12px;padding:4px;
  box-shadow:3px 3px 0 var(--ink);object-fit:contain}

.bundle__stack .chip img{border-radius:10px;background:#fff;object-fit:contain;
  width:88%;height:auto;display:block}

.sheet__fig img{border-radius:var(--r-sm);background:#fff}

/* ---------- HERO FIGURE (transparent cut-out) ---------------------------- */
.hero-figure{
  position:relative;z-index:3;width:auto;max-width:62%;max-height:78%;height:auto;
  display:block;animation:cxfloat 4.6s ease-in-out infinite;
  filter:drop-shadow(0 16px 18px rgba(26,11,61,.28))}
@media(max-width:1000px){.hero-figure{max-width:52%;max-height:70%}}

/* ---------- FLAT SHEET -> FIGURE, three-step strip ----------------------- */
.journey{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap:16px;align-items:stretch}
.journey>*{min-width:0}
.jstep{position:relative;margin:0;background:#fff;border:var(--bd);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:20px 18px 18px;display:flex;flex-direction:column;gap:14px;
  transition:transform .2s}
.jstep:hover{transform:translateY(-5px)}
.jnum{position:absolute;top:-14px;left:18px;background:var(--ink);color:var(--yellow);
  font-family:var(--display);font-size:13px;padding:6px 12px;border-radius:99px;border:var(--bd-2)}
.jart{border:var(--bd-2);border-radius:var(--r-sm);overflow:hidden;aspect-ratio:1/1.12;
  display:grid;place-items:center;position:relative;padding:10px}
.jart--sheet{background:#fff;
  background-image:linear-gradient(var(--cream-dk) 1px,transparent 1px),
    linear-gradient(90deg,var(--cream-dk) 1px,transparent 1px);background-size:22px 22px}
.jart--sheet svg{width:100%;height:100%;object-fit:contain}
.jart--fold{background:var(--lilac-pale);flex-direction:column;gap:14px;align-content:center}
.jart--done{background:#fff}
.jart--done img{width:100%;height:100%;object-fit:contain;display:block}
.jfold-legend{display:flex;flex-direction:column;gap:11px;padding:0 6px}
.jfold-legend span{display:flex;gap:10px;align-items:center;font-size:11.5px;font-weight:700;white-space:nowrap}
.jfold-legend i{width:34px;height:0;display:block;flex-shrink:0}
.jfold-legend i.l-cut{border-top:3px solid var(--ink)}
.jfold-legend i.l-fold{border-top:3px dashed var(--pink)}
.jfold-legend i.l-tab{width:22px;height:16px;border:2px solid var(--ink);background:var(--cream);
  border-radius:3px}
.jtime{position:absolute;bottom:10px;left:50%;translate:-50% 0;background:var(--yellow);
  border:var(--bd-2);border-radius:99px;padding:6px 14px;font-family:var(--display);font-size:12px;
  box-shadow:2px 2px 0 var(--ink)}
.jstep figcaption{display:flex;flex-direction:column;gap:5px}
.jstep figcaption b{font-family:var(--display);font-size:15px;line-height:1.15}
.jstep figcaption span{font-size:13px;line-height:1.55;opacity:.78}
.jarrow{display:grid;place-items:center;font-size:26px;font-weight:700;color:var(--indigo);opacity:.55}
@media(max-width:900px){
  .journey{grid-template-columns:minmax(0,1fr)}
  .jarrow{transform:rotate(90deg);padding:2px 0}
}

/* ---------- HERO REVOLVING RING TEXT ------------------------------------ */
.hero-ring{
  font-family:var(--display);font-size:23px;
  fill:var(--cream);
  paint-order:stroke fill;
  stroke:var(--indigo);stroke-width:3.5px;stroke-linejoin:round;
  letter-spacing:.04em}
@media(max-width:640px){.hero-ring{font-size:19px;stroke-width:3px}}

/* ============================================================================
   MOBILE — explicit rules for every page, not just grid reflow.
   Bottom nav owns navigation below 860px; the sticky header stands down.
   ========================================================================= */
@media(max-width:860px){

  /* --- chrome ------------------------------------------------------------ */
  .nav{position:static}                     /* bottom nav takes over */
  .nav__in{height:60px;gap:10px}
  .ticker{font-size:11px;padding:7px 0}
  body{padding-bottom:66px}                 /* clear the fixed bottom nav */
  .foot__bar{padding-bottom:24px}
  .cx-wa{bottom:80px;right:12px;width:48px;height:48px;font-size:22px}

  /* --- type + rhythm ----------------------------------------------------- */
  .sec{padding:40px 0}
  .sec--tight{padding:30px 0}
  .sec__head{margin-bottom:22px;gap:14px}
  .sec__title{font-size:clamp(24px,7vw,34px)}
  .sec__sub{font-size:14px}
  .phero{padding:28px 0 32px}
  .phero h1{font-size:clamp(28px,9vw,44px)}
  .phero p{font-size:15px;padding:11px 14px}
  .crumbs{font-size:11.5px;margin-bottom:12px}

  /* --- hero -------------------------------------------------------------- */
  .hero{padding:40px 0 54px!important}
  .hero .eyebrow{font-size:11px;padding:7px 13px}
  .hero-stage{min-height:300px!important}

  /* --- panels ------------------------------------------------------------ */
  .kitbox,.bundle{padding:22px 17px;border-radius:20px}
  .bundle{box-shadow:6px 6px 0 var(--ink)}
  .kitlist li{font-size:14px;gap:11px}
  .kitlist > li > b{width:24px;height:24px;font-size:12px}
  .steps{gap:14px}
  .step{padding:20px 17px}
  .journey{gap:12px}
  .jstep{padding:17px 15px 15px}

  /* --- product cards ------------------------------------------------------ */
  .card__body{padding:11px 10px 13px;gap:6px}
  .card__name{font-size:13.5px;line-height:1.15}
  .card__fr{font-size:9px}
  .badge{font-size:9px;padding:5px 8px}
  .wish{width:28px;height:28px;font-size:12px}

  /* --- PDP ---------------------------------------------------------------- */
  .pdp{gap:22px}
  .pdp h1{font-size:clamp(24px,7.5vw,34px)}
  .pdp__price b{font-size:30px}
  .spec{grid-template-columns:1fr 1fr;gap:9px}
  .spec div{padding:10px 11px}
  .spec dd{font-size:14px}
  .thumbs{grid-template-columns:repeat(4,1fr);gap:8px}
  .buyrow{gap:10px}
  .buyrow .btn,.woocommerce div.product form.cart .button{flex:1;min-width:0}
  .tabpanel{padding:18px 16px;font-size:14.5px}

  /* --- cart / checkout / account ------------------------------------------ */
  .summary{padding:20px 17px;border-radius:20px}
  .summary h3{font-size:19px}
  .srow{font-size:14px;padding:9px 0}
  .srow.total{font-size:19px}
  .stepbar div{font-size:9.5px;padding:10px 4px;letter-spacing:0}
  .cx-panel,.woocommerce-additional-fields{padding:17px 15px;border-radius:18px}
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce form .form-row select{font-size:16px;min-height:50px}  /* 16px stops iOS zoom */
  .woocommerce-account .woocommerce-MyAccount-content{padding:20px 16px;border-radius:20px}
  .woocommerce-checkout #payment ul.payment_methods li{padding:14px}
  .woocommerce-checkout #payment #place_order{font-size:16px;padding:16px}

  /* --- policy/prose pages -------------------------------------------------- */
  .prose{padding:20px 16px;font-size:15px;border-radius:20px}
  .prose h2{font-size:21px;margin:24px 0 10px}
  .prose h3{font-size:16px}
  .toc{padding:17px 15px}
  /* wide tables must scroll inside their own box, never widen the page */
  .prose table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    white-space:nowrap;border-collapse:collapse}
  .prose th,.prose td{padding:9px 11px;font-size:13.5px}

  /* --- footer -------------------------------------------------------------- */
  .foot{padding:40px 0 0}
  .foot__grid{gap:24px;padding-bottom:28px}
  .foot h6{font-size:12px;margin-bottom:10px}
  .foot a{font-size:13.5px}
  .foot__bar{font-size:11.5px;gap:8px}

  /* --- misc ---------------------------------------------------------------- */
  .news{padding:44px 0}
  .news h3{font-size:clamp(24px,7.5vw,36px)}
  .form-inline input{min-width:0;width:100%}
  .faq summary{padding:16px 15px;font-size:15px}
  .faq .ans{padding:4px 15px 17px;font-size:14.5px}
  #toast{left:12px;right:12px;translate:0 0;bottom:76px;justify-content:center;font-size:13px}
}

/* very small phones */
@media(max-width:380px){
  .foot__grid{grid-template-columns:1fr}
  .spec{grid-template-columns:1fr}
  .botnav a{font-size:8.5px}
  .botnav a i{font-size:17px}
  .cart-pill{padding:7px 10px;font-size:11px}
}

/* never let anything widen the document */
html,body{overflow-x:hidden;max-width:100%}
img,svg,video,table{max-width:100%}

/* iOS zooms the page when a focused input is under 16px — cover every field,
   including the search overlay which sits outside the WC form wrappers. */
@media(max-width:860px){
  .cx-searchtop input,
  input[type=text],input[type=search],input[type=email],input[type=tel],
  input[type=number],input[type=password],select,textarea{font-size:16px}
}

/* ---------- HERO COPY (moved off inline styles so it can be reordered) --- */
.hero-title{font-size:clamp(40px,7.4vw,96px);margin:20px 0 0;color:var(--yellow);
  text-shadow:8px 8px 0 var(--indigo)}
.hero-title span{color:var(--cream);display:block}
.hero-lede{font-size:18px;line-height:1.55;margin:24px 0 30px;max-width:46ch;font-weight:500;
  background:var(--cream);display:inline-block;padding:14px 18px;border:var(--bd);
  border-radius:var(--r);box-shadow:var(--sh)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-meta{display:flex;gap:20px;margin-top:26px;flex-wrap:wrap;font-size:13px;font-weight:700}

/* ---------- MOBILE HERO ORDER -------------------------------------------
   The figure should sit directly under the heading, before the body copy.
   display:contents lifts the copy children into the hero grid so they can be
   ordered against .hero-stage. */
@media(max-width:1000px){
  .hero-copy{display:contents}
  .hero-eyebrow{order:1;justify-self:start}
  .hero-title{order:2;margin:14px 0 0}
  .hero-stage{order:3;min-height:auto!important;margin:6px 0 2px}
  .hero-lede{order:4;margin:0 0 22px}
  .hero-cta{order:5}
  .hero-meta{order:6;margin-top:18px}
}
@media(max-width:860px){
  .hero-title{font-size:clamp(34px,10vw,52px);text-shadow:5px 5px 0 var(--indigo)}
  .hero-lede{font-size:15.5px;padding:12px 14px}
  .hero-meta{gap:12px;font-size:12px}
  .hero-cta .btn{flex:1;min-width:0;justify-content:center;font-size:14px;padding:14px 16px}
}

/* ---------- MOBILE HEADER ------------------------------------------------
   Bigger wordmark, and the cart + burger pinned hard right. */
@media(max-width:860px){
  .nav__in{gap:8px}
  .nav .brand{--bw:168px}
  .menu{display:none}
  .nav__cta{margin-left:auto;gap:8px}
  .burger{display:grid}
}
@media(max-width:560px){
  .nav .brand{--bw:150px}
  .nav__cta{gap:7px}
  .icon-btn{width:40px;height:40px}
  .cart-pill{padding:9px 13px;font-size:12px}
}
@media(max-width:380px){
  .nav .brand{--bw:128px}
  .cart-pill{padding:8px 11px;font-size:11px}
  .icon-btn{width:38px;height:38px}
}

/* ---------- footer credit ------------------------------------------------ */
.foot__credit{white-space:nowrap}
.foot__credit b{color:var(--yellow);font-weight:700}
@media(max-width:860px){
  .foot__bar{flex-direction:column;align-items:center;text-align:center;gap:7px}
  .foot__credit{margin-top:2px;opacity:.9}
}

/* ---------- PDP gallery swap -------------------------------------------- */
.gallery__main .media img{transition:opacity .18s ease}
.gallery__main .media img.is-swapping{opacity:.35}
.thumbs button{cursor:pointer}
.thumbs button[aria-selected=true]{border-color:var(--pink);box-shadow:3px 3px 0 var(--pink)}