/* The product page: a clear buying column (title, real price, availability, choices, quantity, one action), the details in plain sections,
   and a compact purchase bar on phones. Loaded on product pages only. Ivory ground, espresso type, brass for the one accent; logical
   properties so the right-to-left page is the same page mirrored. The gallery has its own sheet (vochti-gallery.css). */

.vo .pdp-sec{ width:min(1240px,100%); box-sizing:border-box; padding-top:max(130px, calc(var(--vo-nav-h, 0px) + 16px)); padding-bottom:clamp(40px,6vw,72px); }
.vo .pdp-sec .wiz-back{ display:inline-block; margin-bottom:30px; }
.vo .pdp{ gap:clamp(32px,5vw,72px); }

/* ---------- the head ---------- */
.vo .pdp-side{ display:grid; gap:0; align-content:start; min-width:0; }
.vo .pdp-head{ display:grid; gap:0; }
.vo .pdp-number{ color:var(--oxide); }
.vo .pdp-head h1{ margin:12px 0 10px; line-height:1.12; text-wrap:balance; }
html[dir=rtl] .vo .pdp-head h1{ line-height:1.4; }
.vo .pdp-head .obj-meta{ font-size:13px; letter-spacing:.04em; opacity:.7; }
.vo .pdp-short{ margin-top:16px; max-width:52ch; font-size:15px; line-height:1.7; opacity:.88; }
.vo .pdp-short p{ margin:0 0 .7em; }
.vo .pdp-short p:last-child{ margin-bottom:0; }

/* ---------- price, availability ---------- */
.vo .pdp-buy{ margin-top:26px; padding-top:26px; border-top:1px solid var(--rule); }
.vo .pdp-pricerow{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 22px; }
.vo .pdp-price{ margin:0; font-size:clamp(26px,2.6vw,32px); line-height:1.15; }
.vo .pdp-price del{ font-size:.62em; opacity:.55; margin-inline-end:8px; }
.vo .pdp-price ins{ text-decoration:none; }
.vo .pdp-stock{ display:inline-flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--olive); }
html[dir=rtl] .vo .pdp-stock{ font-size:13.5px; letter-spacing:0; text-transform:none; }
.vo .pdp-dot{ flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:currentColor; }
.vo .pdp-stock.is-out{ color:var(--oxide); }

/* ---------- the form: choices, quantity, action ---------- */
.vo .pdp-side form.cart{ display:block; margin:22px 0 0; }
.vo .pdp-side form.cart:not(.variations_form), .vo .pdp-side .woocommerce-variation-add-to-cart{ display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; }
.vo .pdp-side .woocommerce-variation-add-to-cart{ margin-top:18px; }
.vo .pdp-side .single_add_to_cart_button{ flex:1 1 220px; min-height:52px; }
.vo .pdp-side .single_add_to_cart_button.disabled{ opacity:.55; cursor:pointer; }
/* a combination that cannot be bought (sold, or no price) says so in the availability line; its purchase row is not drawn. Before any choice the button is drawn, greyed. */
.vo .pdp-side .woocommerce-variation-add-to-cart:has(.wc-variation-is-unavailable){ display:none; }
.vo .pdp-side .woocommerce-variation-add-to-cart-disabled .qty-b, .vo .pdp-side .woocommerce-variation-add-to-cart-disabled input.qty{ opacity:.55; }

.vo .pdp-side table.variations{ display:block; width:100%; margin:0; border:0; }
.vo .pdp-side table.variations tbody{ display:grid; gap:20px; }
.vo .pdp-side table.variations tr{ display:grid; gap:10px; }
.vo .pdp-side table.variations th, .vo .pdp-side table.variations td{ display:block; padding:0; border:0; text-align:start; }
.vo .pdp-side table.variations th.label label{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; font-weight:500; opacity:.62; }
html[dir=rtl] .vo .pdp-side table.variations th.label label{ font-size:13px; letter-spacing:0; text-transform:none; }
.vo .pdp-side table.variations select{ width:100%; min-height:48px; padding:0 14px; border:1px solid var(--rule); border-radius:0; background-color:transparent; font:inherit; color:inherit; }
.vo .pdp-side .vo-opts-src{ display:none; }
.vo .pdp-side .reset_variations{ display:inline-block; margin-top:10px; font-size:12px; letter-spacing:.08em; text-decoration:underline; text-underline-offset:3px; opacity:.7; }
html[dir=rtl] .vo .pdp-side .reset_variations{ font-size:14px; letter-spacing:0; }
.vo .pdp-side .reset_variations:hover{ opacity:1; }

.vo .vo-opts{ display:flex; flex-wrap:wrap; gap:8px; }
.vo .pdp-side form.cart button.vo-opt, .vo .vo-opt{ min-height:46px; min-width:46px; padding:0 18px; border:1px solid var(--rule); border-radius:0; background:transparent; color:var(--espresso);
  font:inherit; font-size:14px; line-height:1.2; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease; }
.vo .pdp-side form.cart button.vo-opt{ height:auto; letter-spacing:0; text-transform:none; font-weight:400; background:transparent; color:var(--espresso); }
.vo .pdp-side form.cart button.vo-opt:hover:not([aria-disabled=true]){ background:transparent; color:var(--espresso); border-color:var(--espresso); }
.vo .pdp-side form.cart button.vo-opt[aria-checked=true], .vo .pdp-side form.cart button.vo-opt[aria-checked=true]:hover{ background:var(--espresso); color:var(--ivory); border-color:var(--espresso); }
.vo .pdp-side form.cart button.vo-opt[aria-disabled=true]{ background:transparent; color:var(--espresso); }
.vo .vo-opt[aria-disabled=true]{ opacity:.5; text-decoration:line-through; cursor:not-allowed; }
.vo .vo-opt:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }

/* the quantity step: the house's own quiet buttons, not the dark purchase button */
.vo .pdp-side form.cart button.qty-b{ height:auto; min-width:44px; padding:0; background:transparent; color:var(--espresso); letter-spacing:0; }
.vo .pdp-side form.cart button.qty-b:hover:not(:disabled){ background:var(--bone); color:var(--espresso); }
.vo .pdp-side form.cart button.qty-b:disabled{ opacity:.35; cursor:default; }

/* availability is said once, beside the price; WooCommerce's "N in stock" line repeats it (a backorder or sold notice stays) */
.vo .pdp-side p.stock.in-stock{ display:none; }

/* the price and availability are drawn once, at the top; WooCommerce's own copies stay for anyone without the script */
.vo .pdp-side.is-enhanced .woocommerce-variation-price,
.vo .pdp-side.is-enhanced .woocommerce-variation-availability{ display:none; }
.vo .pdp-side .woocommerce-variation-description{ margin-top:14px; font-size:14px; line-height:1.65; opacity:.85; }
.vo .pdp-side .single_variation .wc-no-matching-variation-text, .vo .pdp-side p.stock.out-of-stock{ margin:16px 0 0; padding:10px 14px; border-inline-start:2px solid var(--oxide); background:var(--bone); font-size:14px; }
.vo .pdp-side .vo-pdp-msg{ flex:1 1 100%; margin:14px 0 0; padding:10px 14px; border-inline-start:2px solid var(--oxide); background:var(--bone); font-size:14px; line-height:1.55; }
.vo .pdp-side .vo-pdp-msg[hidden]{ display:none; }

/* ---------- the details ---------- */
.vo .pdp-details{ width:min(1240px,100%); box-sizing:border-box; padding-top:0; padding-bottom:clamp(56px,8vw,96px); }
.vo .pdp-cols{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,72px); align-items:start; border-top:1px solid var(--rule); padding-top:clamp(28px,4vw,48px); }
.vo .pdp-cols.is-one{ grid-template-columns:minmax(0,760px); }
.vo .pdp-col{ min-width:0; }
.vo .pdp-details h2{ margin:0 0 16px; font-family:var(--rh-sans,'Archivo',system-ui,sans-serif); font-size:11px; letter-spacing:.24em; text-transform:uppercase; font-weight:500; opacity:.62; }
html[dir=rtl] .vo .pdp-details h2{ font-family:'IBM Plex Sans Arabic','Archivo',system-ui,sans-serif; font-size:14px; letter-spacing:0; text-transform:none; }
.vo .pdp-desc .entry{ max-width:62ch; font-size:16px; line-height:1.8; }
html[dir=rtl] .vo .pdp-desc .entry{ font-size:17px; line-height:2; }
.vo .pdp-desc .entry > :first-child{ margin-top:0; }
.vo .pdp-spec{ display:grid; gap:34px; }
.vo .pdp-block{ margin:0; padding:0; border:0; }
.vo .pdp-dl{ margin:0; display:grid; }
.vo .pdp-dl > div{ display:grid; grid-template-columns:minmax(96px,34%) 1fr; gap:6px 18px; padding:11px 0; border-bottom:1px solid var(--rule); }
.vo .pdp-dl > div:first-child{ padding-top:0; }
.vo .pdp-dl dt{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; opacity:.55; font-weight:500; padding-top:3px; }
html[dir=rtl] .vo .pdp-dl dt{ font-size:13px; letter-spacing:0; text-transform:none; }
.vo .pdp-dl dd{ margin:0; font-family:var(--rh-serif,'Fraunces',serif); font-weight:300; font-size:16px; line-height:1.5; overflow-wrap:anywhere; }
html[dir=rtl] .vo .pdp-dl dd{ font-family:'Amiri','Fraunces',serif; font-weight:400; font-size:18px; }
.vo .pdp-block .dimsvg{ display:block; margin-top:18px; width:100%; max-width:300px; height:auto; color:var(--espresso); }
.vo .pdp-block .dimsvg text{ font-size:11px; fill:currentColor; font-family:'Archivo',sans-serif; }

/* ---------- the purchase bar (phones) ---------- */
.vo-buybar{ display:none; }
@media (max-width:760px){
  .vo-buybar{ position:fixed; z-index:60; inset-inline:0; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:14px; box-sizing:border-box;
    padding:10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background:rgba(244,240,231,.97); border-top:1px solid var(--rule); box-shadow:0 -8px 24px rgba(41,37,31,.08); color:var(--espresso); font-family:'Archivo','IBM Plex Sans Arabic',system-ui,sans-serif; }
  html[dir=rtl] .vo-buybar{ font-family:'IBM Plex Sans Arabic','Archivo',system-ui,sans-serif; }
  .vo-buybar[hidden]{ display:none; }
  .vo-buybar-price{ min-width:0; font-family:'Fraunces',Georgia,serif; font-size:19px; line-height:1.15; direction:ltr; unicode-bidi:isolate; }
  html[dir=rtl] .vo-buybar-price{ text-align:end; }
  .vo-buybar-price del, .vo-buybar-price .screen-reader-text{ display:none; }
  .vo-buybar-price ins{ text-decoration:none; }
  .vo-buybar .vo-buybar-btn{ flex:0 1 auto; min-width:150px; max-width:62%; white-space:nowrap; min-height:48px; padding:0 22px; border:0; border-radius:0; background:var(--espresso); color:var(--ivory); cursor:pointer;
    font:inherit; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:500; }
  html[dir=rtl] .vo-buybar .vo-buybar-btn{ font-size:14px; letter-spacing:0; text-transform:none; }
  .vo-buybar .vo-buybar-btn:hover{ background:var(--brass); color:var(--espresso); }
  .vo-buybar .vo-buybar-btn:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
  .vo-buybar .vo-buybar-btn:disabled{ background:var(--bone); color:var(--espresso); opacity:.75; cursor:default; }

  /* while the bar is up the chat control rides above it, and the last section is not hidden behind it */
  html.vo-has-buybar .vo-chat{ bottom:calc(var(--vo-bar-h, 72px) + 12px); }
  html.vo-has-buybar body{ padding-bottom:var(--vo-bar-h, 72px); }

  .vo .pdp-cols{ grid-template-columns:minmax(0,1fr); }
  .vo .pdp-pricerow{ align-items:center; }
}
@media (max-width:900px){ .vo .pdp-cols{ grid-template-columns:minmax(0,1fr); } }
@media (prefers-reduced-motion:reduce){ .vo .pdp-side form.cart button.vo-opt, .vo .vo-opt{ transition:none; } }

/* ---------- Buy now (beside Add to cart, WooCommerce's own form) ---------- */
.vo .pdp-side form.cart button.vo-buy-now{ background:var(--oxide); border-color:var(--oxide); color:var(--ivory); }
.vo .pdp-side form.cart button.vo-buy-now:hover:not(.disabled){ background:var(--walnut); border-color:var(--walnut); color:var(--ivory); }
.vo .pdp-side form.cart button.vo-buy-now.is-busy{ opacity:.7; cursor:progress; }
.vo .pdp-side form.cart .quantity + .single_add_to_cart_button + .vo-buy-now,
.vo .pdp-side form.cart .single_add_to_cart_button + .vo-buy-now{ flex:1 1 220px; }

/* ---------- quantity offers ---------- */
.vo .vo-tiers{ margin:22px 0 0; padding:0; border:0; display:grid; gap:8px; }
.vo .vo-tiers-title{ padding:0; margin:0 0 4px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:500; opacity:.7; }
html[dir=rtl] .vo .vo-tiers-title{ font-size:14px; letter-spacing:0; text-transform:none; }
.vo .vo-tier{ display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"dot name total" "dot off was"; gap:2px 12px; align-items:center;
  padding:12px 14px; border:1px solid var(--rule); background:rgba(255,255,255,.35); cursor:pointer; }
.vo .vo-tier:has(input:checked){ border-color:var(--espresso); background:rgba(154,131,90,.1); }
.vo .vo-tier:has(input:focus-visible){ outline:2px solid var(--espresso); outline-offset:2px; }
.vo .vo-tier.is-off{ opacity:.45; cursor:not-allowed; }
.vo .vo-tier input{ grid-area:dot; width:18px; height:18px; margin:0; accent-color:#29251F; }
.vo .vo-tier-name{ grid-area:name; font-weight:500; }
.vo .vo-tier-off{ grid-area:off; font-size:12.5px; color:var(--olive); }
.vo .vo-tier-total{ grid-area:total; text-align:end; font-weight:500; }
.vo .vo-tier-was{ grid-area:was; text-align:end; font-size:12px; opacity:.7; }
.vo .vo-tiers-note{ margin:2px 0 0; font-size:12px; opacity:.72; }

/* ---------- the details as expandable sections ---------- */
.vo .pdp-accs{ max-width:900px; border-top:1px solid var(--rule); }
.vo .pdp-acc{ border-bottom:1px solid var(--rule); }
.vo .pdp-acc > summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; padding:6px 0; cursor:pointer; list-style:none; }
.vo .pdp-acc > summary::-webkit-details-marker{ display:none; }
.vo .pdp-acc > summary::after{ content:''; flex:0 0 10px; width:10px; height:10px; border-inline-end:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-3px) rotate(45deg); transition:transform .2s ease; opacity:.7; }
.vo .pdp-acc[open] > summary::after{ transform:translateY(2px) rotate(-135deg); }
.vo .pdp-acc > summary:focus-visible{ outline:2px solid var(--espresso); outline-offset:2px; }
.vo .pdp-details .pdp-acc > summary h2{ margin:0; opacity:.85; }
.vo .pdp-acc-body{ padding:4px 0 26px; }
.vo .pdp-acc .entry{ margin:0; padding:0; max-width:none; }
.vo .pdp-details:has(.pdp-accs){ padding-bottom:clamp(32px,5vw,64px); }
.vo .pdp-acc .pdp-dl > div:nth-child(odd){ background:rgba(41,37,31,.035); }
.vo .pdp-acc .pdp-dl > div, .vo .pdp-acc .pdp-dl > div:first-child{ padding:11px 10px; }
.vo .pdp-dims{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px); gap:24px; align-items:start; }
.vo .pdp-dims .dimsvg{ display:block; width:100%; max-width:300px; height:auto; color:var(--espresso); }
.vo .pdp-dims .dimsvg text{ font-size:11px; fill:currentColor; font-family:'Archivo',sans-serif; }
.vo .pdp-links{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
@media (max-width:640px){ .vo .pdp-dims{ grid-template-columns:minmax(0,1fr); } }
@media (prefers-reduced-motion:reduce){ .vo .pdp-acc > summary::after{ transition:none; } }

/* ---------- linked-product rows at the end of the page ---------- */
.vo .pdp-rows{ padding-bottom:clamp(40px,6vw,80px); }