/* ============================================================
   Cross Grain — WooCommerce skin
   Reshapes WC default markup into the brand system (tokens from style.css).
   Loaded only on shop / product / cart / checkout / account pages.
   ============================================================ */

/* ---- page shell ---- */
.shop-main{padding:clamp(40px,6vw,88px) 0;min-height:60vh;background:var(--cream)}
.shop-main .wrap{max-width:var(--maxw)}

/* branded archive header */
.shop-head{padding-bottom:clamp(22px,3vw,40px)}
.shop-head .flag{margin-bottom:1rem}
.shop-head__eyebrow{display:block;color:var(--gold);margin-bottom:.5rem}
.shop-head__title{font-family:var(--serif);font-weight:500;font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.02;letter-spacing:-.01em}
.shop-head__desc{margin-top:1rem;max-width:62ch;color:var(--ink-2);font-size:1.02rem}

/* ---- result count + ordering row ---- */
.woocommerce .shop-body.is-archive{position:relative;display:grid;grid-template-columns:236px 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.shop-content{min-width:0}
.shop-sidebar{position:sticky;top:calc(var(--topbar, 96px) + 18px)}
.shop-sidebar__title{font-family:var(--serif);font-weight:500;font-size:1.25rem;margin:0 0 1rem;padding-bottom:.7rem;border-bottom:1px solid var(--cream-2)}
.shop-cats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.12rem}
.shop-cats__link{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.55em .7em;border-radius:6px;font-size:.92rem;font-weight:500;color:var(--ink);transition:background .18s,color .18s}
.shop-cats__link:hover{background:var(--cream-2)}
.shop-cats__link.is-active{background:var(--green);color:var(--cream)}
.shop-cats__count{font-size:.74rem;opacity:.55;font-variant-numeric:tabular-nums}
.shop-cats__link.is-active .shop-cats__count{color:var(--cream);opacity:.8}
@media(max-width:900px){
  .woocommerce .shop-body.is-archive{grid-template-columns:1fr}
  .shop-sidebar{position:static}
  .shop-cats{flex-flow:row wrap;gap:.5rem}
  .shop-cats__link{background:var(--cream-2)}
}
.woocommerce-result-count{color:var(--pine-deep);font-size:.84rem;font-weight:700;letter-spacing:.04em;margin:0 0 1.4rem;float:none!important}
.woocommerce-ordering{float:none!important;margin:0 0 2rem}
.woocommerce-ordering select,select.orderby{font-family:var(--sans);font-size:.85rem;padding:.6em 2.4em .6em 1.1em;border:1.5px solid var(--cream-2);border-radius:100px;background:var(--white);color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%23a9743f' d='M5 7 0 0h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1.1em center}

/* ============ PRODUCT GRID (shop + category archives) ============ */
.woocommerce ul.products,.woocommerce-page ul.products{display:grid!important;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin:0 0 2.4rem!important;padding:0;list-style:none}
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none!important;display:none!important}
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{width:auto!important;margin:0!important;padding:0!important;float:none!important;background:var(--white);border:1px solid var(--cream-2);border-radius:8px;overflow:hidden;transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s;display:flex;flex-direction:column;text-align:left}
.woocommerce ul.products li.product:hover{transform:translateY(-6px);box-shadow:0 30px 50px -28px rgba(21,17,13,.35)}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{display:flex;flex-direction:column;flex:1}
.woocommerce ul.products li.product a img{margin:0 0 0!important;border-radius:0;width:100%;aspect-ratio:1;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.woocommerce ul.products li.product:hover a img{transform:scale(1.05)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--serif);font-weight:500;font-size:1.18rem;line-height:1.15;padding:1.05rem 1.3rem .15rem!important;color:var(--ink)}
.woocommerce ul.products li.product .price{padding:.35rem 1.3rem 0;color:var(--green);font-family:var(--sans);font-weight:700;font-size:1.02rem;margin-top:auto}
.woocommerce ul.products li.product .price del{color:var(--pine-deep);font-weight:400;opacity:.55;margin-right:.4em}
.woocommerce ul.products li.product .price ins{text-decoration:none}
.woocommerce ul.products li.product .price .from,.woocommerce ul.products li.product .price small{font-weight:400;color:var(--pine-deep);font-size:.78rem}
.woocommerce ul.products li.product .button{margin:1rem 1.3rem 1.4rem;align-self:flex-start}
.woocommerce ul.products li.product .star-rating{margin:.4rem 1.3rem 0}
/* image wrapper for products w/o image */
.woocommerce ul.products li.product a img[src*="placeholder"]{background:var(--cream-2)}

/* sale flash */
.woocommerce span.onsale{background:var(--red);color:#fff;font-family:var(--sans);font-weight:800;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;min-height:0;min-width:0;line-height:1;padding:.5em .8em;border-radius:100px;top:1rem;left:1rem;margin:0}

/* ============ BUTTONS (brand pills) ============ */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce .button,.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--sans);font-weight:700;font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;padding:.92em 1.7em;border-radius:100px;background:var(--gold);color:var(--ink);border:1.5px solid transparent;transition:.35s cubic-bezier(.2,.7,.3,1);cursor:pointer;line-height:1.1;text-shadow:none;box-shadow:none}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce .button:hover,.woocommerce #respond input#submit:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:var(--green);color:#fff;transform:translateY(-2px)}
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce .single_add_to_cart_button{background:var(--gold);color:var(--ink)}
.woocommerce .single_add_to_cart_button:hover,.woocommerce a.button.alt:hover{background:var(--green);color:#fff}
/* single add-to-cart: force brand gold over WooCommerce's default purple, even in the
   variation-needed / disabled state, so it matches the main-page buttons */
.woocommerce div.product .single_add_to_cart_button{background:var(--gold)!important;color:var(--ink)!important;opacity:1!important}
.woocommerce div.product .single_add_to_cart_button:hover{background:var(--green)!important;color:#fff!important}
.woocommerce .button.disabled,.woocommerce button.button:disabled,.woocommerce button.button:disabled[disabled]{opacity:.45;cursor:not-allowed;padding:.92em 1.7em}

/* ============ SINGLE PRODUCT ============ */
.woocommerce div.product{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
/* prevent grid blowout: without this, an unconstrained gallery image makes the
   1fr track (minmax(auto,1fr)) expand and upscale the image to full width */
.woocommerce div.product>.woocommerce-product-gallery,.woocommerce div.product>.summary{min-width:0}
.woocommerce div.product .woocommerce-product-gallery__image img{width:100%;height:auto}
/* PayFast payment logos in the short description → tidy, evenly-spaced wrapping row */
.woocommerce-product-details__short-description p img{height:22px;width:auto!important;display:inline-block;vertical-align:middle;margin:0}
.woocommerce-product-details__short-description p:has(img){display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem;margin:.55rem 0 0}
.woocommerce div.product .woocommerce-product-gallery{width:100%!important;float:none!important;margin:0!important;grid-column:1}
.woocommerce div.product .woocommerce-product-gallery img{border-radius:10px}
.woocommerce div.product .woocommerce-product-gallery .flex-viewport{border-radius:10px;overflow:hidden}
.woocommerce div.product .woocommerce-product-gallery ol.flex-control-thumbs{display:flex;gap:.6rem;margin-top:.8rem;padding:0}
.woocommerce div.product .woocommerce-product-gallery ol.flex-control-thumbs li{width:72px!important;margin:0;list-style:none}
.woocommerce div.product .woocommerce-product-gallery ol.flex-control-thumbs li img{border-radius:6px;opacity:.6;transition:.3s}
.woocommerce div.product .woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active,.woocommerce div.product .woocommerce-product-gallery ol.flex-control-thumbs li img:hover{opacity:1}
.woocommerce div.product .summary{width:100%!important;float:none!important;margin:0!important;grid-column:2}
.woocommerce div.product .product_title{font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.04;letter-spacing:-.01em;margin:0 0 .8rem}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--green);font-family:var(--sans);font-weight:700;font-size:1.5rem}
.woocommerce div.product p.price del,.woocommerce div.product span.price del{color:var(--pine-deep);opacity:.55;font-weight:400}
.woocommerce div.product p.price ins{text-decoration:none}
.woocommerce div.product .woocommerce-product-details__short-description{margin:1.2rem 0 1.6rem;color:var(--ink-2);font-size:1rem;line-height:1.65}
.woocommerce div.product .woocommerce-product-rating{margin-bottom:1rem}
.woocommerce .star-rating span{color:var(--gold)}

/* variations form */
.woocommerce div.product form.cart{margin-top:.5rem;padding-top:1.4rem;border-top:1px solid var(--cream-2)}
.woocommerce div.product form.cart .variations{margin-bottom:1rem;border:0}
.woocommerce div.product form.cart .variations td,.woocommerce div.product form.cart .variations th{padding:.45rem 0;vertical-align:top;border:0}
.woocommerce div.product form.cart .variations th.label{font-family:var(--sans);font-weight:800;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pine-deep);padding-right:1.2rem;text-align:left}
.woocommerce div.product form.cart .variations select{min-width:220px;font-family:var(--sans);font-size:.95rem;padding:.7em 2.4em .7em 1.1em;border:1.5px solid var(--cream-2);border-radius:8px;background:var(--white);cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%23a9743f' d='M5 7 0 0h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1.1em center}
.woocommerce div.product form.cart .reset_variations{display:inline-block;margin-left:.8rem;font-size:.78rem;color:var(--pine-deep);border-bottom:1px solid currentColor}
.woocommerce div.product .woocommerce-variation-price{margin:.6rem 0 1rem}
.woocommerce div.product .woocommerce-variation-price .price{font-size:1.4rem;color:var(--green)}
.woocommerce div.product form.cart .quantity{margin-right:.8rem}
.woocommerce div.product form.cart .quantity .qty{width:64px;padding:.85em .5em;text-align:center;border:1.5px solid var(--cream-2);border-radius:8px;font-family:var(--sans);font-weight:700}
.woocommerce div.product form.cart div.quantity,.woocommerce div.product form.cart button{vertical-align:middle}
.woocommerce div.product .single_add_to_cart_button{padding:1.05em 2.1em;font-size:.8rem}

/* product meta */
.woocommerce div.product .product_meta{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--cream-2);font-size:.82rem;color:var(--pine-deep)}
.woocommerce div.product .product_meta>span{display:block;margin-bottom:.3rem}
.woocommerce div.product .product_meta a{color:var(--green);font-weight:600}

/* tabs + description (full width below the two columns) */
.woocommerce div.product .woocommerce-tabs{grid-column:1 / -1;margin-top:clamp(32px,5vw,64px)}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0 0 0;margin:0 0 2rem;border-bottom:1px solid var(--cream-2)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:none;border:0;border-radius:0;margin:0 1.8rem 0 0;padding:0 0 .8rem}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pine-deep);padding:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{box-shadow:inset 0 -2px 0 var(--gold)}
.woocommerce div.product .woocommerce-Tabs-panel h2{font-family:var(--serif);font-weight:500;font-size:1.6rem;margin-bottom:1rem}
.woocommerce div.product .woocommerce-Tabs-panel p{color:var(--ink-2);line-height:1.7;margin-bottom:1rem;max-width:74ch}
/* social icons in the description: global img{display:block} was stacking each
   linked icon vertically — lay them out inline in a row with gaps */
.woocommerce-Tabs-panel p:has(a[href*="facebook"]),
.woocommerce-Tabs-panel p:has(a[href*="instagram"]),
.woocommerce-Tabs-panel p:has(a[href*="pinterest"]){display:flex;flex-wrap:wrap;align-items:center;gap:.85rem;margin-top:1.1rem}
.woocommerce-Tabs-panel a[href*="facebook"],.woocommerce-Tabs-panel a[href*="instagram"],
.woocommerce-Tabs-panel a[href*="pinterest"],.woocommerce-Tabs-panel a[href*="twitter"],.woocommerce-Tabs-panel a[href*="linkedin"]{display:inline-flex;line-height:0}
.woocommerce-Tabs-panel a[href*="facebook"] img,.woocommerce-Tabs-panel a[href*="instagram"] img,
.woocommerce-Tabs-panel a[href*="pinterest"] img,.woocommerce-Tabs-panel a[href*="twitter"] img,.woocommerce-Tabs-panel a[href*="linkedin"] img{display:inline-block;height:34px;width:auto;margin:0}
.woocommerce #reviews .comment-text{border:1px solid var(--cream-2);border-radius:8px}

/* related / upsells */
/* span the full single-product grid width, and force block flow so the inner
   ul.products isn't trapped in a shrink-to-content grid track (was rendering
   the cards ~105px wide, one word per line) */
.woocommerce .related,.woocommerce .upsells{grid-column:1 / -1!important;display:block!important;margin-top:clamp(32px,5vw,64px)}
.woocommerce .related>ul.products,.woocommerce .upsells>ul.products{width:100%!important}
.woocommerce .related>h2,.woocommerce .upsells>h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:1.8rem}

/* ============ PAGINATION ============ */
.woocommerce nav.woocommerce-pagination{text-align:center}
.woocommerce nav.woocommerce-pagination ul{border:0;display:inline-flex;gap:.4rem}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{min-width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--cream-2);font-weight:700;font-size:.85rem;padding:0;color:var(--ink);transition:.25s}
.woocommerce nav.woocommerce-pagination ul li a:hover,.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* ============ NOTICES ============ */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{border-top:3px solid var(--green);background:var(--white);border-radius:6px;font-family:var(--sans)}
.woocommerce-message{border-top-color:var(--green)}
.woocommerce-info{border-top-color:var(--gold)}
.woocommerce-error{border-top-color:var(--red)}
.woocommerce-message .button,.woocommerce-info .button{font-size:.7rem;padding:.7em 1.3em}

/* ============ CART / CHECKOUT / ACCOUNT (rendered via index.php .wrap) ============ */
.woocommerce table.shop_table{border:1px solid var(--cream-2);border-radius:10px;border-collapse:separate}
.woocommerce table.shop_table th{font-family:var(--sans);font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pine-deep)}
.woocommerce table.shop_table td{border-top:1px solid var(--cream-2)}
.woocommerce .cart_totals h2,.woocommerce-checkout h3,.woocommerce-account h2{font-family:var(--serif);font-weight:500}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{background:var(--gold);color:var(--ink);width:100%}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{background:var(--green);color:#fff}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,.select2-container .select2-selection{border:1.5px solid var(--cream-2);border-radius:8px;padding:.7em .9em;font-family:var(--sans)}
.woocommerce #payment,.woocommerce-checkout #payment{background:var(--cream-2);border-radius:10px}
.woocommerce .quantity .qty{border:1.5px solid var(--cream-2);border-radius:8px}

/* ============ BREADCRUMB (kept minimal if present) ============ */
.woocommerce .woocommerce-breadcrumb{font-size:.78rem;color:var(--pine-deep);margin-bottom:1.4rem;letter-spacing:.03em}
.woocommerce .woocommerce-breadcrumb a{color:var(--green)}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
  .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(2,1fr);gap:1rem}
  .woocommerce div.product{grid-template-columns:1fr;gap:1.8rem}
  .woocommerce div.product .woocommerce-product-gallery,.woocommerce div.product .summary{grid-column:1}
  .woocommerce div.product form.cart .variations select{min-width:0;width:100%}
}
@media(max-width:560px){
  .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:1fr}
}

/* ============ VARIATION SWATCH SIZING ============ */
/* wcboost sets per-item inline --wcboost-swatches-item-{width,height}: 50px.
   Shrink them: image/colour swatches (wood, stain, face/base/door colour) -> 35x35;
   text "box" swatches (size, dimensions, bed size) -> 70w x 35h for the label. */
.wcboost-variation-swatches__item{
  --wcboost-swatches-item-width:40px!important;
  --wcboost-swatches-item-height:40px!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
}
.wcboost-variation-swatches__wrapper[data-attribute_name*="size" i] .wcboost-variation-swatches__item,
.wcboost-variation-swatches__wrapper[data-attribute_name*="diment" i] .wcboost-variation-swatches__item,
.wcboost-variation-swatches__wrapper[data-attribute_name*="dimension" i] .wcboost-variation-swatches__item{
  --wcboost-swatches-item-width:140px!important;
  --wcboost-swatches-item-height:40px!important;
  width:140px!important;
  height:auto!important;
  min-height:40px!important;
  min-width:140px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
/* keep the size/dimension label legible inside the box */
.wcboost-variation-swatches__wrapper[data-attribute_name*="size" i] .wcboost-variation-swatches__name,
.wcboost-variation-swatches__wrapper[data-attribute_name*="diment" i] .wcboost-variation-swatches__name,
.wcboost-variation-swatches__wrapper[data-attribute_name*="dimension" i] .wcboost-variation-swatches__name{
  font-size:10px;line-height:1.15;text-align:center;padding:2px;word-break:break-word;
}
/* labels: no vertical-align:middle */
.wcboost-variation-swatches__name{vertical-align:baseline!important;}