/* ============================================================
   WooCommerce adaptation layer — maps native Woo markup
   (loops, single product, variations, cart, checkout, account)
   onto the Vinyl Decals 4U design system from main.css.
============================================================ */

/* woocommerce-layout.css (which we dequeue) carried this global rule;
   without it images take their HTML height attribute and stretch. */
.woocommerce img,.woocommerce-page img{max-width:100%;height:auto}

/* Header logo — hard cap regardless of image size or markup variations */
header.site .logo img,header.site .logo .custom-logo{
  height:46px!important;width:auto!important;max-width:none;
}

/* ---------- Header menu (wp_nav_menu outputs a ul) ---------- */
nav.main ul.menu-list{display:flex;gap:4px;list-style:none;margin:0;padding:0}
nav.main li{list-style:none;margin:0;padding:0}
nav.main li::before,nav.main li::marker{content:none}
nav.main li a{
  display:inline-block;font-size:14px;font-weight:700;letter-spacing:.02em;
  padding:9px 14px;border-radius:99px;transition:background .2s,color .2s;
}
nav.main li a:hover{background:var(--ink);color:var(--paper)}
nav.main li.current-menu-item a{background:var(--ink);color:var(--paper)}

/* ---------- Product loops (ul.products → our card grid) ---------- */
.woocommerce ul.products,ul.products{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  list-style:none;margin:0;padding:0;
}
/* Woo's clearfix pseudo-elements become invisible grid items and leave
   the first cell empty — remove them entirely. */
.woocommerce ul.products::before,.woocommerce ul.products::after,
ul.products::before,ul.products::after{content:none!important;display:none!important}
.shop-layout .woocommerce ul.products,.shop-layout ul.products{grid-template-columns:repeat(3,1fr)}
/* Kill Woo's float/percentage layout with enough specificity to beat
   woocommerce-layout.css (in case a cache plugin still serves it). */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
ul.products li.product{
  float:none!important;width:auto!important;margin:0!important;clear:none!important;
}
ul.products li.product .prod-media img,
.woocommerce ul.products li.product a img{
  width:100%!important;margin:0;aspect-ratio:1;object-fit:cover;
}
ul.products .prod-media img{aspect-ratio:1;object-fit:cover;width:100%}
ul.products .quick-add{text-decoration:none}
ul.products .quick-add.loading{opacity:.6;pointer-events:none}
ul.products .quick-add.added::after{content:" \2714"}
ul.products li.prod-card a.added_to_cart{ /* "View cart" link Woo appends */
  position:absolute;left:12px;bottom:-16px;font-size:12px;font-weight:800;color:var(--green);
}
.onsale{ /* fallback if a template outputs the default sale span */
  position:absolute;top:12px;left:12px;z-index:2;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:6px 12px;border-radius:99px;color:#fff;background:var(--red);
}
.price del{color:var(--muted);font-weight:600;margin-right:6px}
.price ins{text-decoration:none}

/* ---------- Shop toolbar ---------- */
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.woocommerce-result-count{font-size:14px;color:var(--muted);font-weight:700;margin:0}
.woocommerce-ordering select{
  font-family:inherit;font-size:14px;font-weight:700;padding:11px 16px;border-radius:99px;
  border:1px solid var(--line);background:var(--white);cursor:pointer;outline:none;color:var(--ink);
}

/* ---------- Filters sidebar (native Woo widgets + theme fallback) ---------- */
.filter-group ul,.filters .widget ul{list-style:none;margin:0;padding:0}
.filter-group li{padding:6px 0;font-size:14px;font-weight:600;color:var(--ink-soft);list-style:none}
.filter-group li::marker{content:none}
.filter-group li a{transition:color .2s}
.filter-group li a:hover{color:var(--red)}
.filters .widget li{padding:6px 0;font-size:14px;font-weight:600;color:var(--ink-soft)}
.filters .widget li a{transition:color .2s}
.filters .widget li a:hover{color:var(--red)}
.filters .widget li.chosen a{color:var(--red);font-weight:800}
.filters .widget .count{margin-left:6px;font-size:12px;color:var(--muted);font-weight:700}
.filters .widget_price_filter .ui-slider{margin:18px 8px 8px}
.filters .widget_price_filter .ui-slider .ui-slider-range{background:var(--red)}
.filters .widget_price_filter .ui-slider .ui-slider-handle{background:var(--ink);border:none}
.filters .widget_price_filter .price_slider_amount .button{
  background:var(--ink);color:#fff;border:none;border-radius:99px;padding:9px 18px;font-weight:800;font-size:13px;
}

/* ---------- Pagination (specificity hardened vs woocommerce-general.css) ---------- */
.woocommerce nav.woocommerce-pagination,nav.pagination{text-align:center}
.woocommerce nav.woocommerce-pagination ul.page-numbers,
.woocommerce-pagination ul.page-numbers,nav.pagination{
  display:flex!important;flex-wrap:wrap;justify-content:center;gap:8px;margin:46px 0 0;
  list-style:none;border:none!important;padding:0;white-space:normal;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li,
.woocommerce-pagination ul.page-numbers li{
  border:none!important;margin:0!important;float:none!important;overflow:visible;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li a,
.woocommerce nav.woocommerce-pagination ul.page-numbers li span,
.page-numbers li .page-numbers,nav.pagination .page-numbers{
  width:44px;height:44px;min-width:44px;display:grid!important;place-items:center;
  border-radius:50%!important;font-weight:800;font-size:14px;line-height:1;padding:0!important;
  border:1px solid var(--line);background:var(--white);color:var(--ink);
  transition:background .2s,color .2s;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li a:hover,
.page-numbers li .page-numbers:hover{background:var(--ink);color:var(--paper)}
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.current,
.page-numbers li .page-numbers.current,nav.pagination .page-numbers.current{
  background:var(--red)!important;color:#fff!important;border-color:var(--red)!important;
}

/* ---------- Single product layout ---------- */
.single-product div.product{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:start;padding:44px 0 70px}
/* Beat woocommerce-layout.css floats (float:left/right; width:48%) */
.woocommerce div.product div.images,
.woocommerce div.product div.woocommerce-product-gallery,
.woocommerce-page div.product div.images{
  float:none!important;width:100%!important;margin-bottom:0!important;
}
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary{
  float:none!important;width:100%!important;margin-bottom:0!important;
  /* Neutralise any card/sticky styling leaking onto Woo's product summary —
     in this design the buy panel sits flat on the paper background. */
  position:static!important;background:none!important;border:none!important;
  border-radius:0!important;padding:0!important;box-shadow:none!important;
}
.single-product .woocommerce-product-gallery{position:sticky;top:110px;background:var(--white);border:1px solid var(--line);border-radius:24px;padding:18px}
.single-product .woocommerce-product-gallery img{border-radius:14px}
.single-product .woocommerce-product-gallery .flex-control-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:12px 0 0;list-style:none;padding:0}
.single-product .woocommerce-product-gallery .flex-control-thumbs li{width:auto!important;float:none!important;margin:0!important}
.single-product .woocommerce-product-gallery .flex-control-thumbs img{
  width:100%;aspect-ratio:1;object-fit:cover;
  border:2px solid var(--line);border-radius:14px;padding:4px;cursor:pointer;transition:border-color .2s;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active{border-color:var(--red)}
.single-product .summary .product_title{
  font-family:var(--font-display);font-weight:400;font-size:clamp(36px,3.6vw,52px);
  text-transform:uppercase;line-height:.95;margin:0 0 14px;
}
.single-product .summary .woocommerce-product-rating{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.single-product .summary .star-rating{color:var(--yellow)}
.single-product .summary .price{font-family:var(--font-display);font-size:46px;line-height:1;color:var(--ink);display:block;margin-bottom:8px}
.single-product .summary .price small,.single-product .summary .price .woocommerce-Price-currencySymbol{font-size:.7em}
.single-product .summary .woocommerce-product-details__short-description{
  font-size:15.5px;line-height:1.7;color:var(--ink-soft);margin:16px 0 28px;max-width:560px;
}
.single-product .product_meta{display:none}
.single-product .stock.in-stock{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:var(--green)}
.single-product .stock.in-stock::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(30,158,98,.18)}

/* ---------- Variations (native table + Variation Swatches plugin) ---------- */
/* Stacked rows: label on top, options below — like the mockup. */
.variations{width:100%;border:none;margin-bottom:8px;display:block}
.variations tbody,.variations tr,.variations th,.variations td{display:block;width:100%}
.variations td,.variations th{border:none;padding:0;vertical-align:top;text-align:left}
.variations tr.vd4u-attr-row{margin-bottom:26px}
.variations .label{margin-bottom:12px}
.variations .label label{
  font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
}
.variations .label .opt-value{color:var(--red);margin-left:4px}
.variations .label .opt-value:empty{display:none}
.variations select{
  font-family:inherit;font-size:14.5px;font-weight:700;padding:12px 16px;border-radius:13px;
  border:2px solid var(--line);background:var(--white);color:var(--ink);min-width:220px;
}
.reset_variations{font-size:12.5px;font-weight:700;color:var(--muted)}
.woocommerce-variation-price .price{font-size:34px!important;margin:6px 0 12px}
.woocommerce-variation-availability{margin-bottom:8px}

/* Lay variation options out horizontally regardless of swatches plugin */
.variations td.value{display:block}
.variations td.value>ul,.variations td.value>div{
  display:flex!important;flex-wrap:wrap;gap:9px;list-style:none;margin:6px 0 0;padding:0;width:100%;
}
.variations td.value>ul>li,.variations td.value>div>div{
  width:auto!important;max-width:none!important;flex:0 0 auto;margin:0!important;
}

/* Colour swatches → circles, whichever swatches plugin renders them.
   Colour items carry an inline background; size buttons don't. */
.variations td.value>ul>li[style*="background"],
.variations td.value>div>*[style*="background"]{
  width:38px!important;height:38px!important;min-width:0!important;
  border-radius:50%!important;border:2px solid var(--line)!important;
  overflow:hidden;font-size:0;line-height:0;
}
.variations td.value>ul>li[style*="background"] *,
.variations td.value>div>*[style*="background"] *{border-radius:50%!important}
/* Selected option (covers .selected / .cfvsw-selected-swatch / .swatch-selected …) */
.variations td.value [class*="selected"][style*="background"]{
  border-color:var(--ink)!important;
  box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)!important;
}
.variations td.value [class*="selected"]:not([style*="background"]){
  border-color:var(--red)!important;background:rgba(230,50,38,.06)!important;
}

/* ThemeHigh "Product Variation Swatches for WooCommerce" (thwvsf-*) */
ul.thwvsf-wrapper-ul{
  display:flex!important;flex-wrap:wrap;gap:10px;list-style:none;margin:6px 0 0!important;padding:0!important;
}
ul.thwvsf-wrapper-ul li.thwvsf-wrapper-item-li{
  margin:0!important;float:none!important;box-shadow:none!important;
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
ul.thwvsf-wrapper-ul li.thwvsf-wrapper-item-li:hover{transform:scale(1.08)}
/* colour swatches → 38px circles */
ul.thwvsf-wrapper-ul li.thwvsf-color-li{
  width:38px!important;height:38px!important;min-width:0!important;
  border-radius:50%!important;border:2px solid var(--line)!important;
  overflow:hidden;padding:0!important;
}
ul.thwvsf-wrapper-ul li.thwvsf-color-li *,
ul.thwvsf-wrapper-ul li.thwvsf-color-li::before{
  border-radius:50%!important;width:100%!important;height:100%!important;display:block;
}
ul.thwvsf-wrapper-ul li.thwvsf-color-li{position:relative}
ul.thwvsf-wrapper-ul li.thwvsf-color-li.thwvsf-selected{
  border-color:var(--ink)!important;
  box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)!important;
}
ul.thwvsf-wrapper-ul li.thwvsf-color-li.thwvsf-selected::after{
  content:"\2714";position:absolute;inset:0;display:grid;place-items:center;
  width:100%!important;height:100%!important;border-radius:50%!important;
  color:#fff;font-size:14px;font-weight:900;text-shadow:0 1px 3px rgba(0,0,0,.6);z-index:2;
}
/* size labels → pills */
ul.thwvsf-wrapper-ul li.thwvsf-label-li{
  width:auto!important;height:auto!important;min-width:96px;
  border:2px solid var(--line)!important;border-radius:13px!important;
  background:var(--white)!important;padding:10px 12px 8px!important;
  font-size:14px;font-weight:800;color:var(--ink);line-height:1.2;text-align:center;
}
/* pill internals once JS rebuilds them: 10 cm / 4″ / £3.20 */
ul.thwvsf-wrapper-ul li.vd4u-size-pill{
  display:flex!important;flex-direction:column!important;align-items:center;justify-content:center;
  gap:1px;border-radius:13px!important;
}
ul.thwvsf-wrapper-ul li.vd4u-size-pill b,
ul.thwvsf-wrapper-ul li.vd4u-size-pill small,
ul.thwvsf-wrapper-ul li.vd4u-size-pill .sp{
  display:block!important;width:100%;line-height:1.25;float:none!important;
}
ul.thwvsf-wrapper-ul li.vd4u-size-pill b{font-size:14.5px;font-weight:800;color:var(--ink)}
ul.thwvsf-wrapper-ul li.vd4u-size-pill small{font-size:11px;color:var(--muted);font-weight:700}
ul.thwvsf-wrapper-ul li.vd4u-size-pill .sp{font-size:12px;font-weight:800;color:var(--red);margin-top:2px}
ul.thwvsf-wrapper-ul li.thwvsf-label-li.thwvsf-selected{
  border-color:var(--red)!important;background:rgba(230,50,38,.06)!important;color:var(--ink)!important;
}
ul.thwvsf-wrapper-ul li.thwvsf-label-li:hover{border-color:var(--ink)!important}

/* CartFlows / "cfvsw" swatches plugin */
.cfvsw-swatches-container{display:flex!important;flex-wrap:wrap;gap:9px}
.cfvsw-swatches-option{margin:0!important;border-radius:13px!important;border:2px solid var(--line)!important}
.cfvsw-swatches-option.cfvsw-selected-swatch{border-color:var(--red)!important;background:rgba(230,50,38,.06)!important}
.cfvsw-color-option{border-radius:50%!important;width:38px!important;height:38px!important}

/* Variation Swatches for WooCommerce (Getwooplugins) — colour circles + size pills */
.variable-items-wrapper{display:flex!important;flex-wrap:wrap;gap:10px;list-style:none;margin:6px 0 0;padding:0}
.variable-items-wrapper .variable-item{
  box-shadow:none!important;margin:0!important;transition:transform .15s,border-color .15s!important;
}
.variable-items-wrapper .variable-item:hover{transform:scale(1.08)}
.variable-items-wrapper .variable-item.color-variable-item{
  width:38px!important;height:38px!important;border-radius:50%!important;border:2px solid var(--line)!important;
}
.variable-items-wrapper .variable-item.color-variable-item .variable-item-contents,
.variable-items-wrapper .variable-item.color-variable-item .variable-item-span-color{border-radius:50%!important}
.variable-items-wrapper .variable-item.color-variable-item.selected{
  border-color:var(--ink)!important;box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)!important;
}
.variable-items-wrapper .variable-item.button-variable-item{
  width:auto!important;height:auto!important;min-width:64px;border:2px solid var(--line)!important;
  border-radius:13px!important;background:var(--white)!important;padding:10px 12px 8px!important;
}
.variable-items-wrapper .variable-item.button-variable-item span{font-size:14px;font-weight:800;color:var(--ink)}
.variable-items-wrapper .variable-item.button-variable-item.selected{
  border-color:var(--red)!important;background:rgba(230,50,38,.06)!important;
}

/* ---------- Quantity + add to cart ---------- */
form.cart{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:22px 0 18px}
form.cart .variations,form.cart .single_variation_wrap{flex-basis:100%}
/* qty + button on one line, button stretches like the mockup */
.woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;width:100%}
.woocommerce-variation-add-to-cart .single_add_to_cart_button{
  flex:1 1 240px;min-width:200px;white-space:nowrap;font-size:16px;height:58px;
}
/* Express checkout (Stripe GPay / Apple Pay) gets its own full-width row
   below — otherwise it squashes the add-to-cart button into a blob. */
.woocommerce-variation-add-to-cart > [id*="payment-request"],
.woocommerce-variation-add-to-cart > [class*="payment-request"],
.woocommerce-variation-add-to-cart > [class*="express-checkout"],
form.cart [id*="wc-stripe-payment-request"],
form.cart [id*="wc-stripe-express"]{
  flex:1 1 100%;width:100%;margin-top:10px;order:10;
}
form.cart .quantity{display:flex;align-items:center;border:2px solid var(--ink);border-radius:99px;overflow:hidden;flex-shrink:0}
form.cart .quantity .qty{
  width:46px;height:54px;border:none;text-align:center;font-family:inherit;font-size:16px;font-weight:800;
  background:none;outline:none;-moz-appearance:textfield;appearance:textfield;
}
form.cart .quantity .qty::-webkit-outer-spin-button,
form.cart .quantity .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.vd4u-qty-btn{
  width:44px;height:54px;font-size:20px;font-weight:800;background:none;border:none;cursor:pointer;
  color:var(--ink);transition:background .15s;
}
.vd4u-qty-btn:hover{background:var(--paper-2)}
.single_add_to_cart_button .vd4u-btn-price{font-weight:800}
.single_add_to_cart_button.disabled,.single_add_to_cart_button:disabled{
  background:var(--red)!important;color:#fff!important;opacity:.45;
}
.single_add_to_cart_button,
.woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-body);
  font-weight:800;font-size:15px;letter-spacing:.02em;border-radius:99px;padding:16px 30px;border:none;
  background:var(--red);color:#fff;box-shadow:0 10px 24px -8px rgba(230,50,38,.55);cursor:pointer;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.single_add_to_cart_button:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{
  background:var(--red-dark);color:#fff;transform:translateY(-2px);
}
.woocommerce a.button.alt,.woocommerce button.button.alt{background:var(--red);color:#fff}
.single_add_to_cart_button.disabled{opacity:.5}

/* ---------- Product tabs + related ---------- */
.woocommerce-tabs{grid-column:1/-1;margin-top:30px}
.woocommerce-tabs ul.tabs{display:flex;gap:6px;border-bottom:2px solid var(--line);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.woocommerce-tabs ul.tabs li{background:none;border:none;border-radius:0;margin:0;padding:0}
.woocommerce-tabs ul.tabs li::before,.woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce-tabs ul.tabs li a{
  font-family:var(--font-display);font-size:21px;letter-spacing:.04em;padding:14px 22px;color:var(--muted);
  border-bottom:3px solid transparent;margin-bottom:-2px;text-transform:uppercase;font-weight:400;
}
.woocommerce-tabs ul.tabs li.active a{color:var(--red);border-bottom-color:var(--red)}
.woocommerce-tabs .panel{padding:34px 0 10px;font-size:15.5px;line-height:1.75;color:var(--ink-soft);max-width:820px}
.related.products,.upsells.products{grid-column:1/-1;margin-top:50px}
.related.products>h2,.upsells.products>h2{
  font-family:var(--font-display);font-weight:400;font-size:clamp(32px,3.6vw,48px);text-transform:uppercase;margin-bottom:30px;
}

/* ---------- Notices ---------- */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  background:var(--white);border:1px solid var(--line);border-left:5px solid var(--green);
  border-radius:14px;padding:16px 22px;font-weight:600;color:var(--ink-soft);margin-bottom:24px;list-style:none;
}
/* Woo draws notice icons with its icon font; the font isn't loaded by this
   theme, so the glyph renders as a broken box — hide it. */
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before,
.woocommerce-error li::before{display:none!important;content:none!important}
.woocommerce-message,.woocommerce-info,.woocommerce-error{padding-left:22px!important}
.woocommerce-info{border-left-color:var(--yellow)}
.woocommerce-error{border-left-color:var(--red)}
.woocommerce-message a.button,.woocommerce-info a.button{padding:8px 18px;font-size:13px;margin-right:12px}

/* ---------- Cart page ---------- */
.woocommerce-cart .woocommerce{display:grid;grid-template-columns:1.5fr .9fr;gap:40px;align-items:start}
.woocommerce-cart .woocommerce-notices-wrapper{grid-column:1/-1}
.woocommerce-cart table.cart{
  width:100%;border-collapse:separate;border-spacing:0 14px;border:none;
}
.woocommerce-cart table.cart th{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:none;text-align:left;padding:0 14px}
.woocommerce-cart table.cart td{
  background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:16px 14px;vertical-align:middle;
}
.woocommerce-cart table.cart tr td:first-child{border-left:1px solid var(--line);border-radius:18px 0 0 18px}
.woocommerce-cart table.cart tr td:last-child{border-right:1px solid var(--line);border-radius:0 18px 18px 0}
.woocommerce-cart table.cart .product-thumbnail{width:104px}
.woocommerce-cart table.cart img{
  width:84px;height:auto!important;aspect-ratio:1;object-fit:cover;
  border-radius:12px;border:1px solid var(--line);
}
.woocommerce-cart table.cart .product-name a{font-weight:700}
.woocommerce-cart table.cart .variation{font-size:13px;color:var(--muted)}
.woocommerce-cart table.cart .product-remove a{
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--muted)!important;
  font-size:18px;font-weight:400;transition:color .2s,background .2s;
}
.woocommerce-cart table.cart .product-remove a:hover{color:#fff!important;background:var(--red)}
.woocommerce-cart .coupon .input-text{
  border:1.5px solid var(--line);border-radius:99px;padding:12px 18px;font-family:inherit;font-size:14px;background:var(--paper);
}
.cart_totals{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:32px;position:sticky;top:110px;width:100%!important;float:none!important}
.cart_totals h2{font-family:var(--font-display);font-weight:400;font-size:28px;text-transform:uppercase;margin:0 0 20px}
.cart_totals table{border:none}
.cart_totals th,.cart_totals td{border:none;font-size:14.5px;padding:9px 0}
.cart_totals .order-total th,.cart_totals .order-total td{border-top:2px solid var(--ink);padding-top:16px;font-size:18px}
.wc-proceed-to-checkout .checkout-button{width:100%}

/* ---------- Checkout layout ---------- */
/* Two columns: billing/shipping left, order summary + payment right. */
.woocommerce-checkout form.checkout.woocommerce-checkout{
  display:grid;grid-template-columns:1.1fr .9fr;gap:0 44px;align-items:start;
}
.woocommerce-checkout form.checkout #customer_details{grid-column:1;grid-row:1/9}
.woocommerce-checkout form.checkout #order_review_heading{grid-column:2;grid-row:1;margin-top:0}
.woocommerce-checkout form.checkout #order_review{grid-column:2;grid-row:2}
#customer_details.col2-set .col-1,#customer_details.col2-set .col-2{
  float:none!important;width:100%!important;margin-bottom:26px;
}
.woocommerce-billing-fields h3,.woocommerce-shipping-fields h3,#order_review_heading{
  font-family:var(--font-display);font-weight:400;font-size:26px;text-transform:uppercase;margin-bottom:18px;
}

/* Form rows: label above input, first/last name side by side */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper{
  display:grid;grid-template-columns:1fr 1fr;gap:0 16px;
}
.woocommerce form .form-row{
  display:flex;flex-direction:column;gap:7px;align-items:stretch;
  float:none!important;width:100%!important;margin:0 0 16px;padding:0;grid-column:span 2;
}
.woocommerce form .form-row-first,.woocommerce form .form-row-last{grid-column:span 1}
.woocommerce form .form-row label{display:block;width:auto;float:none}
.woocommerce form .form-row .woocommerce-input-wrapper{display:block;width:100%}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-container{width:100%!important}

/* Coupon toggle + form */
.woocommerce-form-coupon-toggle .woocommerce-info{border-left-color:var(--yellow)}
.woocommerce-form-coupon-toggle .showcoupon{color:var(--red);font-weight:800}
form.checkout_coupon{
  background:var(--white);border:1.5px dashed var(--line);border-radius:18px;padding:24px;margin-bottom:26px;
  display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
}
form.checkout_coupon p{margin:0}
form.checkout_coupon .form-row{margin:0;min-width:220px;flex:1}

/* Payment box */
#payment{background:var(--paper-2);border-radius:18px;margin-top:10px}
#payment ul.payment_methods{list-style:none;margin:0;padding:18px;border-bottom:1px solid var(--line)}
#payment ul.payment_methods li{margin-bottom:10px}
#payment div.payment_box{
  background:var(--white);border-radius:12px;padding:14px 18px;margin-top:8px;font-size:14px;color:var(--ink-soft);
}
#payment div.payment_box::before{display:none}
#place_order{width:100%}

@media(max-width:1100px){
  .woocommerce-checkout form.checkout.woocommerce-checkout{grid-template-columns:1fr}
  .woocommerce-checkout form.checkout #customer_details,
  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout #order_review{grid-column:1;grid-row:auto}
}
@media(max-width:680px){
  .woocommerce form .form-row-first,.woocommerce form .form-row-last{grid-column:span 2}
}

/* ---------- Checkout + account ---------- */
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.select2-container--default .select2-selection--single{
  font-family:inherit;font-size:15px;padding:14px 18px;border:1.5px solid var(--line);border-radius:14px;
  background:var(--paper);outline:none;height:auto;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:1.4}
.woocommerce form .form-row label{font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
#order_review,#order_review_heading{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:26px}
#order_review_heading{border-bottom:none;border-radius:24px 24px 0 0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:26px;margin-bottom:0}
#order_review{border-top:none;border-radius:0 0 24px 24px}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;padding:0}
.woocommerce-account .woocommerce-MyAccount-navigation li{margin-bottom:8px}
.woocommerce-account .woocommerce-MyAccount-navigation a{
  display:block;padding:12px 18px;border-radius:13px;background:var(--white);border:1px solid var(--line);font-weight:700;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--ink);color:var(--paper)}

/* ---------- Reviews ---------- */
#reviews .commentlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
#reviews .comment_container{
  background:var(--white);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;gap:16px;
}
#reviews .comment_container img.avatar{border-radius:50%;width:44px;height:44px}
#reviews .star-rating{color:var(--yellow)}

/* ---------- Blog single ---------- */
.single-post-content{font-size:16.5px;line-height:1.85;color:var(--ink-soft)}
.single-post-content h2,.single-post-content h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;color:var(--ink);margin:34px 0 14px}
.single-post-content .post-hero-img{border-radius:20px;margin-bottom:30px}
.single-post-content p{margin-bottom:18px}

/* ---------- Mobile menu (burger toggle) ---------- */
@media(max-width:1100px){
  nav.main.mobile-open{
    display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:14px 4vw 20px;
    box-shadow:0 20px 40px -20px rgba(21,21,26,.25);gap:2px;margin:0;
  }
  nav.main.mobile-open a{padding:13px 16px;font-size:15px}
}

/* ---------- Responsive ---------- */
/* Selectors must match the base rule (.woocommerce ul.products) or they
   lose the specificity fight and the 4-column grid sticks on mobile. */
@media(max-width:1100px){
  .woocommerce ul.products,ul.products,
  .shop-layout .woocommerce ul.products,.shop-layout ul.products{grid-template-columns:repeat(3,1fr)}
  .single-product div.product{grid-template-columns:1fr;gap:36px}
  .single-product .woocommerce-product-gallery{position:static}
  .woocommerce-cart .woocommerce{grid-template-columns:1fr}
  .cart_totals{position:static}
}
@media(max-width:680px){
  .woocommerce ul.products,ul.products,
  .shop-layout .woocommerce ul.products,.shop-layout ul.products{grid-template-columns:repeat(2,1fr);gap:14px}
}
@media(max-width:400px){
  .woocommerce ul.products,ul.products,
  .shop-layout .woocommerce ul.products,.shop-layout ul.products{grid-template-columns:1fr}
}

/* ---------- About page: editable content inside the story column ---------- */
.about-grid .body p{margin:0 0 16px}
.about-grid .body b,.about-grid .body strong{color:var(--ink)}
.about-grid .body h2,.about-grid .body h3,.about-grid .body h4{
  font-family:var(--font-display);font-weight:400;font-size:22px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink);margin:26px 0 10px;
}
.about-grid .body ul,.about-grid .body ol{margin:0 0 16px 20px}
.about-grid .body li{margin-bottom:8px}
.about-grid .body li::marker{color:var(--red);font-weight:800}

/* ---------- Contact page: plugin forms inside the form card ---------- */
.form-card label{
  display:block;font-size:13px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink);margin-bottom:7px;
}
.form-card input[type="text"],.form-card input[type="email"],
.form-card input[type="tel"],.form-card input[type="url"],
.form-card input[type="number"],.form-card select,.form-card textarea{
  width:100%;font-family:inherit;font-size:15px;padding:14px 18px;
  border:1.5px solid var(--line);border-radius:14px;background:var(--paper);
  color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s;
  margin-bottom:16px;resize:vertical;box-sizing:border-box;
}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{
  border-color:var(--red);box-shadow:0 0 0 3px rgba(230,50,38,.12);
}
.form-card input[type="file"]{margin-bottom:16px;font-size:14px}
.form-card input[type="submit"],.form-card button[type="submit"]{
  display:inline-flex;align-items:center;justify-content:center;width:100%;
  background:var(--red);color:#fff;border:none;border-radius:99px;
  padding:16px 30px;font-family:inherit;font-weight:800;font-size:15px;
  letter-spacing:.02em;cursor:pointer;box-shadow:0 10px 24px -8px rgba(230,50,38,.55);
  transition:transform .2s,background .2s,box-shadow .2s;
}
.form-card input[type="submit"]:hover,.form-card button[type="submit"]:hover{
  background:var(--red-dark);transform:translateY(-2px);
}
/* Contact Form 7 */
.form-card .wpcf7 p{margin:0}
.form-card .wpcf7-not-valid{border-color:var(--red)!important}
.form-card .wpcf7-not-valid-tip{font-size:12.5px;color:var(--red);font-weight:700;margin:-10px 0 14px}
.form-card .wpcf7 .wpcf7-response-output{
  border:1.5px dashed var(--line);border-radius:14px;padding:14px 18px;
  margin:14px 0 0;font-weight:700;font-size:14px;
}
.form-card .wpcf7 .wpcf7-spinner{display:block;margin:8px auto 0}
/* WPForms / Forminator generic resets */
.form-card .wpforms-container input,.form-card .wpforms-container textarea,
.form-card .forminator-input,.form-card .forminator-textarea{max-width:100%}

/* ---------- About page: long-form story, magazine style ---------- */
.about-story-head{max-width:760px;margin-bottom:38px}
.about-story-content{
  columns:2;column-gap:64px;column-rule:1px dashed var(--line);
  font-size:16px;line-height:1.85;color:var(--ink-soft);
}
@media(max-width:900px){.about-story-content{columns:1}}
.about-story-content p{margin:0 0 16px;break-inside:avoid}
.about-story-content b,.about-story-content strong{color:var(--ink)}
/* Paragraphs that contain ONLY a bold phrase ("Our Journey" etc.)
   become section subheadings. */
.about-story-content p>strong:only-child,.about-story-content p>b:only-child{
  display:block;font-family:var(--font-display);font-weight:400;font-size:24px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink);
  margin:10px 0 2px;break-after:avoid;
}
.about-story-content p>strong:only-child::before,.about-story-content p>b:only-child::before{
  content:"\2736  ";color:var(--red);font-size:15px;vertical-align:3px;
}
.about-story-content h2,.about-story-content h3,.about-story-content h4{
  font-family:var(--font-display);font-weight:400;font-size:24px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink);margin:14px 0 8px;break-after:avoid;
}
.about-story-content ul,.about-story-content ol{margin:0 0 16px 20px}
.about-story-content li{margin-bottom:10px;break-inside:avoid}
.about-story-content li::marker{color:var(--red);font-weight:800}