/* ============================================================
   OLIVEWOOD SHOP · WooCommerce glue
   The static mockup had no real product photos and no WooCommerce
   chrome (notices, cart/checkout pages, qty inputs). main.css is kept
   byte-for-byte; everything WC-specific that the design never had lives
   here so the verbatim guarantee holds for the original markup.
   Tokens come from main.css :root.
   ============================================================ */

/* ---- Real product photos fill the designed thumb tiles ---- */
.product-thumb .product-photo,
.gallery-main .product-photo{
  width:100%; height:100%; object-fit:cover; display:block;
}
.product-card:hover .product-thumb .product-photo{ transform:scale(1.04); transition:transform .4s ease; }
.gallery-main{ overflow:hidden; }

/* WooCommerce native gallery, when photos are present, inside .gallery-main.
   Make the image fill the arch tile (no empty band top/bottom). */
.gallery-main .woocommerce-product-gallery,
.gallery-main .woocommerce-product-gallery__wrapper,
.gallery-main .flex-viewport,
.gallery-main .woocommerce-product-gallery__image,
.gallery-main .woocommerce-product-gallery__image a{
  width:100%; height:100%; margin:0;
}
.gallery-main .woocommerce-product-gallery__image img,
.gallery-main .woocommerce-product-gallery__wrapper img{
  width:100%; height:100%; object-fit:cover; border-radius:0; display:block;
}
.gallery-main a, .gallery-main img{ cursor:zoom-in; }

/* ---- Price markup from WC (get_price_html) matches the plain design ---- */
.product-price .woocommerce-Price-amount,
.pd-price .woocommerce-Price-amount{ font:inherit; color:inherit; }
.product-price del,
.pd-price del{ opacity:.55; font-size:.85em; margin-right:.4em; }
.product-price ins,
.pd-price ins{ text-decoration:none; }

/* ---- WC notices, styled on-brand ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments{
  list-style:none;
  background:var(--bone-2);
  border:1px solid var(--bone-3);
  border-left:4px solid var(--wood);
  border-radius:var(--radius);
  padding:14px 18px;
  margin:0 0 22px;
  color:var(--ink);
  font-size:.92rem;
}
.woocommerce-error{ border-left-color:#a23b2c; }
/* WooCommerce core prefixes every notice with an icon-font glyph (the green
   ✔ on "added to your cart"). Off-brand next to the wood/olive palette — the
   coloured left border already carries the status. (::after is left alone:
   WooCommerce uses it to clear the floated "View cart" button.) */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{
  content:none;
  display:none;
}
.woocommerce-message .button,
.woocommerce-info .button{
  display:inline-flex; align-items:center; gap:.5em;
  background:var(--olive); color:var(--bone);
  padding:.5em 1.2em; border-radius:999px; font-weight:700;
  font-size:.85rem; margin-left:14px;
}
/* "View cart" / "View order" inside a notice. The attribute selector catches
   both markups WooCommerce ships (.button and .wp-element-button) — the label
   otherwise stays dark on the wood fill and is hard to read on hover. */
body .woocommerce-message a[class*="button"]:hover,
body .woocommerce-message a[class*="button"]:focus,
body .woocommerce-info a[class*="button"]:hover,
body .woocommerce-info a[class*="button"]:focus{
  background:var(--wood-deep);
  color:#fff;
  text-decoration:none;
}

/* ---- WC quantity input matched to the design .qty pill ---- */
.woocommerce .quantity input.qty{
  width:54px; text-align:center;
  border:1.5px solid var(--bone-3); border-radius:999px;
  background:#fffaf0; padding:.55em .4em; font-weight:700;
}

/* ---- Generic WC button → reuse the wood button look ---- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt{
  display:inline-flex; align-items:center; gap:.6em; justify-content:center;
  background:var(--wood); color:#fff;
  padding:.95em 1.9em; border-radius:999px;
  font-weight:700; font-size:.92rem; letter-spacing:.04em;
  border:none; transition:transform .25s ease, background .25s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button.alt:hover{ background:var(--wood-deep); transform:translateY(-2px); }

/* The single-product add-to-cart in our layout already uses .btn--wood;
   make sure the WC <form> lays out like the designed .pd-buy row. */
.pd-buy form.cart{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:0; }
.pd-buy form.cart .quantity{ margin:0; }
.pd-buy .single_add_to_cart_button{ margin:0; }

/* ---- Variable products ----
   The custom single-product template has no .woocommerce wrapper, so the
   .woocommerce-prefixed rules above never reach WooCommerce's native
   variations form. Style it here, scoped under .pd-buy, to match the design. */

/* Stack the variations form as a column (override the simple-product flex row). */
.pd-buy form.variations_form{ display:block; width:100%; margin:0; }

/* Attribute rows: label + control on one line. */
.pd-buy table.variations{ border:0; margin:0 0 18px; width:100%; }
.pd-buy table.variations,
.pd-buy table.variations tbody{ display:block; }
.pd-buy table.variations tr{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.pd-buy table.variations tr + tr{ margin-top:12px; }
.pd-buy table.variations th.label,
.pd-buy table.variations td.value{
  display:block; padding:0; border:0; background:none; min-width:0;
}
.pd-buy table.variations th.label label{
  margin:0; font-weight:700; color:var(--olive-deep);
  text-transform:uppercase; letter-spacing:.1em; font-size:.74rem;
}
.pd-buy table.variations td.value{ display:flex; align-items:center; gap:14px; flex:1 1 auto; }

/* Pill-styled attribute <select> with a custom chevron. */
.pd-buy .variations select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  border:1.5px solid var(--bone-3); border-radius:999px;
  background-color:#fffaf0; color:var(--olive-deep);
  padding:.6em 2.6em .6em 1.2em; margin:0;
  font-weight:700; font-size:.9rem; line-height:1.3; cursor:pointer; min-width:132px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238A5D2E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.1em center; background-size:12px 8px;
}
.pd-buy .variations select:focus{ outline:none; border-color:var(--wood); }

/* "Clear" link — only appears once a variation is chosen. */
.pd-buy .reset_variations{
  font-size:.8rem; color:var(--ink-soft); text-decoration:underline; white-space:nowrap;
}
.pd-buy .reset_variations:hover{ color:var(--wood-deep); }

/* Selected-variation price, matched to .pd-price. */
.pd-buy .single_variation{ margin:0 0 14px; }
.pd-buy .single_variation .price{
  font-family:var(--font-display); font-size:1.6rem; color:var(--olive-deep); line-height:1.2;
}
.pd-buy .single_variation .price del{ opacity:.55; font-size:.7em; margin-right:.4em; }
.pd-buy .single_variation .price ins{ text-decoration:none; }
.pd-buy .single_variation .woocommerce-variation-availability{
  font-size:.85rem; color:var(--ink-soft); margin-top:4px;
}

/* Quantity + Add to cart row for the selected variation. */
.pd-buy .woocommerce-variation-add-to-cart{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}

/* Quantity → the same −/+ pill as simple products (steppers injected by JS). */
.pd-buy .quantity{
  display:flex; align-items:center; margin:0;
  border:1.5px solid var(--bone-3); border-radius:999px; background:#fffaf0;
}
.pd-buy .quantity .qty-btn{
  width:42px; height:46px; display:grid; place-items:center;
  background:none; border:0; cursor:pointer;
  font-size:1.2rem; line-height:1; color:var(--ink-soft);
}
.pd-buy .quantity .qty-btn:hover{ color:var(--wood-deep); }
.pd-buy .quantity input.qty{
  width:40px; height:46px; text-align:center; margin:0;
  border:0; background:none; color:var(--olive-deep); font-weight:700;
  padding:0; -moz-appearance:textfield;
}
.pd-buy .quantity input.qty::-webkit-outer-spin-button,
.pd-buy .quantity input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pd-buy .quantity input.qty:focus{ outline:none; }

/* Add to cart → the wood button. Extra classes raise specificity above
   WooCommerce core's body.woocommerce button.button.alt (which is why it
   showed up purple). */
.pd-buy .single_add_to_cart_button.button.alt,
.pd-buy .single_add_to_cart_button{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  background:var(--wood); color:#fff;
  padding:.95em 1.9em; border-radius:999px; border:0; cursor:pointer;
  font-weight:700; font-size:.92rem; letter-spacing:.04em; text-transform:none;
  transition:transform .25s ease, background .25s ease, opacity .25s ease;
}
.pd-buy .single_add_to_cart_button.button.alt:hover,
.pd-buy .single_add_to_cart_button:hover{ background:var(--wood-deep); transform:translateY(-2px); }
/* Disabled state (no variation chosen yet). The :hover variants and the extra
   .button.alt classes are needed to out-specify WooCommerce core's own
   button.button.alt.disabled:hover rule, which otherwise turns it purple. */
.pd-buy .single_add_to_cart_button.button.alt.disabled,
.pd-buy .single_add_to_cart_button.button.alt.disabled:hover,
.pd-buy .single_add_to_cart_button.button.alt.wc-variation-selection-needed,
.pd-buy .single_add_to_cart_button.button.alt.wc-variation-selection-needed:hover,
.pd-buy .single_add_to_cart_button.disabled,
.pd-buy .single_add_to_cart_button.disabled:hover,
.pd-buy .single_add_to_cart_button.wc-variation-selection-needed,
.pd-buy .single_add_to_cart_button.wc-variation-selection-needed:hover,
.pd-buy .single_add_to_cart_button:disabled,
.pd-buy .single_add_to_cart_button:disabled:hover{
  background:var(--wood); color:#fff;
  opacity:.45; cursor:not-allowed; transform:none;
}

/* "Please select some product options…" notice before a variation is picked. */
.pd-buy .woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button{ opacity:.45; }
.pd-buy .wc-no-matching-variations{ font-size:.85rem; color:var(--ink-soft); margin:0 0 12px; }

/* ---- WooCommerce cart/checkout/account pages: keep them readable
   inside our .container without restyling every element. ---- */
.woocommerce-page .section .woocommerce{ font-size:1rem; }
.woocommerce table.shop_table{
  border:1px solid var(--bone-3); border-radius:var(--radius); border-collapse:separate; border-spacing:0;
  background:#fffaf0;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{ border-top:1px solid var(--bone-3); padding:14px 16px; }

/* ---- Result count / ordering on archive use the design tokens ---- */
.woocommerce-result-count{ font-size:.85rem; color:var(--ink-soft); }

/* ---- Product specs (weight / dimensions) on the single page ---- */
.pd-specs{ display:grid; gap:8px; margin:0 0 22px; }
.pd-specs li{ display:flex; gap:14px; font-size:.92rem; }
.pd-specs li[hidden]{ display:none; }
.pd-specs span{ color:var(--ink-soft); min-width:110px; text-transform:uppercase; letter-spacing:.1em; font-size:.74rem; font-weight:700; align-self:center; }
.pd-specs b{ color:var(--olive-deep); font-weight:700; }

/* ---- Full product description, shown below the accordion tabs ---- */
.pd-fulldesc{
  margin-top:48px; padding-top:36px;
}
.pd-fulldesc > h2{ margin-bottom:16px; }
.pd-fulldesc-body{ color:var(--ink-soft); }
.pd-fulldesc-body p{ margin-bottom:14px; }
.pd-fulldesc-body img{ border-radius:var(--radius); margin:10px 0; }
.pd-fulldesc-body h2,
.pd-fulldesc-body h3,
.pd-fulldesc-body h4{ margin:22px 0 10px; color:var(--olive-deep); }
.pd-fulldesc-body ul,
.pd-fulldesc-body ol{ margin:0 0 14px; padding-left:1.4em; }
.pd-fulldesc-body ul{ list-style:disc; }
.pd-fulldesc-body ol{ list-style:decimal; }
.pd-fulldesc-body li{ margin-bottom:.5em; }
.pd-fulldesc-body li::marker{ color:var(--wood); }
.pd-fulldesc-body a{ color:var(--wood-deep); text-decoration:underline; }

/* ---- Gallery lightbox (theme-provided, vanilla) ---- */
.olw-lightbox{
  position:fixed; inset:0; z-index:120;
  background:rgba(34,28,18,.92);
  display:none; align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s ease;
}
.olw-lightbox.open{ display:flex; opacity:1; }
.olw-lightbox .olw-lb-img{
  max-width:90vw; max-height:88vh; border-radius:8px;
  box-shadow:0 30px 80px rgba(0,0,0,.5); background:var(--bone-2);
}
.olw-lightbox button{
  position:absolute; background:rgba(244,237,223,.12); color:var(--bone);
  border:1px solid rgba(244,237,223,.3); border-radius:50%;
  width:48px; height:48px; display:grid; place-items:center;
  font-size:1.4rem; line-height:1; transition:background .2s ease;
}
.olw-lightbox button:hover{ background:rgba(244,237,223,.25); }
.olw-lightbox .olw-lb-close{ top:22px; right:22px; }
.olw-lightbox .olw-lb-prev{ left:22px; top:50%; transform:translateY(-50%); }
.olw-lightbox .olw-lb-next{ right:22px; top:50%; transform:translateY(-50%); }
@media (max-width:640px){
  .olw-lightbox .olw-lb-prev{ left:10px; }
  .olw-lightbox .olw-lb-next{ right:10px; }
  .olw-lightbox .olw-lb-close{ top:12px; right:12px; }
}

/* ============================================================
   Block Cart & Checkout (woocommerce/cart · woocommerce/checkout)
   Both live on ordinary pages, so page.php wraps them in
   .entry-content — whose 820px reading measure squeezed the whole
   layout into a narrow centred column and pushed the totals under
   the products. Free the width here, then lay the blocks out as
   "content left · summary right".
   ============================================================ */

/* 1 · Let the cart/checkout page use the full .container width. */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.entry-content:has(> .wp-block-woocommerce-cart),
.entry-content:has(> .wp-block-woocommerce-checkout){
  max-width:none;
  color:var(--ink);
}

/* 2 · Two-column layout: main content flexes, summary pinned right. */
.wp-block-woocommerce-cart .wc-block-cart.wc-block-components-sidebar-layout,
.wp-block-woocommerce-checkout .wc-block-checkout.wc-block-components-sidebar-layout{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:clamp(26px,3.4vw,54px);
}
.wp-block-woocommerce-cart .wc-block-cart > .wc-block-cart__main,
.wp-block-woocommerce-checkout .wc-block-checkout > .wc-block-checkout__main{
  flex:1 1 460px;
  width:auto;
  max-width:none;
  min-width:0;
  padding-right:0;
  padding-left:0;
}
.wp-block-woocommerce-cart .wc-block-cart > .wc-block-cart__sidebar,
.wp-block-woocommerce-checkout .wc-block-checkout > .wc-block-checkout__sidebar{
  flex:0 0 clamp(300px,30%,380px);
  width:clamp(300px,30%,380px);
  max-width:100%;
  margin-left:auto;          /* hug the right edge */
  padding-left:0;
  padding-right:0;
  position:sticky;
  top:calc(var(--header-h) + 22px);
}

/* Stack on small screens — summary below the content. */
@media (max-width:860px){
  .wp-block-woocommerce-cart .wc-block-cart > .wc-block-cart__main,
  .wp-block-woocommerce-checkout .wc-block-checkout > .wc-block-checkout__main,
  .wp-block-woocommerce-cart .wc-block-cart > .wc-block-cart__sidebar,
  .wp-block-woocommerce-checkout .wc-block-checkout > .wc-block-checkout__sidebar{
    flex:1 1 100%;
    width:100%;
    position:static;
  }
}

/* 3 · The summary column reads as a card, on-brand. */
.wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary,
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-wrapper{
  border-color:var(--bone-3);
}
.wp-block-woocommerce-cart .wc-block-cart > .wc-block-cart__sidebar{
  background:#fffaf0;
  border:1px solid var(--bone-3);
  border-radius:var(--radius);
  padding:22px 24px 26px;
}
.wp-block-woocommerce-cart .wc-block-cart__totals-title{
  color:var(--ink-soft);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.74rem;
  font-weight:700;
}
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item,
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item{
  font-family:var(--font-display);
  color:var(--olive-deep);
}

/* 4 · Links inside cart/checkout: .entry-content's underlined-brown link
       style made product names and buttons look broken. */
.wp-block-woocommerce-cart a,
.wp-block-woocommerce-checkout a{
  color:var(--olive-deep);
  text-decoration:none;
}
.wp-block-woocommerce-cart a:hover,
.wp-block-woocommerce-checkout a:hover{ color:var(--wood-deep); text-decoration:underline; }

/* 5 · Primary actions → the wood pill button, white readable label.
       (Was a dark slab with underlined brown text.) */
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-container a,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button{
  display:flex; align-items:center; justify-content:center; gap:.6em;
  width:100%;
  background:var(--wood);
  color:#fff;
  border:none; border-radius:999px;
  padding:1em 1.6em;
  font-weight:700; font-size:.95rem; letter-spacing:.04em;
  text-decoration:none; text-transform:none;
  box-shadow:none;
  transition:transform .25s ease, background .25s ease;
}
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart .wc-block-cart__submit-container a:hover,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover{
  background:var(--wood-deep);
  color:#fff;
  text-decoration:none;
  transform:translateY(-2px);
}
.wp-block-woocommerce-cart .wc-block-cart__submit-button .wc-block-components-button__text,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button__text{
  color:inherit; text-decoration:none;
}
/* The sticky mobile "submit" bar WC renders below the summary. */
.wp-block-woocommerce-cart .wc-block-cart__submit-container{ padding:0; }

/* 6 · Form fields on the checkout, matched to the design's .field inputs. */
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-select__container,
.wp-block-woocommerce-checkout .wc-block-components-combobox-control input{
  border-radius:10px;
  border-color:var(--bone-3);
  background:var(--bone);
}
.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus{
  outline:none;
  border-color:var(--wood);
  box-shadow:none;
}

/* ---- Pagination ---- */
.woocommerce-pagination ul{
  display:flex; gap:8px; justify-content:center; margin:40px 0 0; list-style:none;
}
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span{
  display:grid; place-items:center; min-width:42px; height:42px; padding:0 12px;
  border:1.5px solid var(--bone-3); border-radius:999px; background:#fffaf0;
  font-weight:700; font-size:.86rem; color:var(--ink-soft);
}
.woocommerce-pagination ul li span.current{ background:var(--olive); border-color:var(--olive); color:var(--bone); }

/* ---- Block cart/checkout: total weight line ---- */
.olw-cart-weight{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:12px 24px; margin-top:2px;
  color:var(--ink-soft); font-size:.9rem;
}
.olw-cart-weight .wc-block-components-totals-item__value{ font-weight:600; }