/* ============================================================
   NAGI POSTER — single product page
   Loaded only on product templates.
   ============================================================ */

/* ---------- breadcrumb ---------- */
.crumbs{padding:20px 0 4px}
.crumbs ol,.crumbs nav{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  list-style:none;margin:0;padding:0;
  font-size:.78rem;color:var(--fg-3);
}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li:not(:last-child)::after{
  content:"";width:4px;height:4px;border-radius:50%;background:var(--border-2);
}
.crumbs a{color:var(--fg-3);transition:color 170ms var(--ease)}
.crumbs a:hover{color:var(--fg)}
.crumbs li[aria-current]{color:var(--fg);font-weight:600}

/* ---------- layout ---------- */
.pdp{padding:clamp(14px,2vw,26px) 0 clamp(44px,6vw,76px)}
.pdp-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,440px);
  gap:clamp(28px,4vw,64px);align-items:start;
}

/* ---------- gallery ---------- */
.pdp-media{align-self:start}
.pdp-stage{
  position:relative;background:var(--blue-soft);
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(14px,2vw,24px);
  overflow:hidden;
}
/* the photo is the artwork already framed and hung, so it fills the stage
   rather than floating inside a large tinted margin */
.pdp-art{
  position:relative;border-radius:calc(var(--r-lg) - 8px);
  overflow:hidden;background:var(--bg-2);
}
.pdp-art img{
  width:100%;display:block;height:auto;
  object-fit:contain;
  transition:transform 700ms var(--ease);
}
.pdp-stage:hover .pdp-art img{transform:scale(1.03)}

/* a quiet line telling the buyer what they are looking at */
.pdp-tag{
  position:absolute;left:clamp(20px,3vw,32px);bottom:clamp(20px,3vw,32px);
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-size:.78rem;font-weight:600;color:var(--fg);
  box-shadow:0 6px 20px rgba(17,17,17,.14);
}
.pdp-tag .ico{width:15px;height:15px;color:var(--kesari-deep)}

/* ---------- frame preview ----------
   The stage holds a frame wrapper so the artwork can be shown plain or inside
   a frame. The product photos are already framed pieces on a wall, so the
   plain view is the default and the frames are a lighter overlay than a full
   mount would be. */
.pdp-frame{
  position:relative;width:100%;background:transparent;
  transition:padding 320ms var(--ease), background 320ms var(--ease), box-shadow 320ms var(--ease);
}
.pdp-frame[data-view="plain"]{padding:0;box-shadow:none}
.pdp-frame[data-view="oak"]{
  padding:14px;background:linear-gradient(150deg,#D8B98C,#B98F5E);
  box-shadow:0 18px 44px rgba(17,17,17,.24);
}
.pdp-frame[data-view="black"]{
  padding:14px;background:linear-gradient(150deg,#3A3A3A,#141414);
  box-shadow:0 18px 44px rgba(17,17,17,.28);
}
.pdp-frame[data-view="oak"] .pdp-art,
.pdp-frame[data-view="black"] .pdp-art{background:#fff;padding:10px}
.pdp-frame[data-view="room"]{
  padding:0;box-shadow:0 22px 50px rgba(17,17,17,.26);
}
.pdp-stage[data-view="room"]{
  background:linear-gradient(180deg,var(--blue-soft) 0%,var(--blue-soft) 64%,var(--bg-2) 64%,var(--bg-2) 100%);
}

/* view switcher */
.pdp-views{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.view-btn{
  height:44px;padding:0 17px;border-radius:var(--r-pill);
  border:1.5px solid var(--border);background:var(--surface);
  font-size:.83rem;font-weight:600;color:var(--fg-2);
  transition:border-color 180ms var(--ease), color 180ms var(--ease), background 180ms var(--ease);
}
.view-btn:hover:not(:disabled){border-color:var(--fg);color:var(--fg)}
.view-btn.is-on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.view-btn:disabled{opacity:.4;cursor:not-allowed}

.pdp-badge{
  position:absolute;top:16px;left:16px;
  border-radius:var(--r-pill);padding:6px 13px;
  font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:var(--shadow-sm);
}
.pdp-badge.is-new{background:var(--blue-deep);color:#fff}
.pdp-badge.is-sale{background:var(--kesari);color:#3A2205}


/* thumbnails from the Woo gallery */
.pdp-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pdp-thumb{
  width:60px;padding:4px;background:var(--surface);
  border:1.5px solid var(--border);border-radius:var(--r-sm);cursor:pointer;
  transition:border-color 180ms var(--ease);
}
.pdp-thumb img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block}
.pdp-thumb.is-on{border-color:var(--accent)}

/* ---------- buy panel ---------- */
.pdp-info{display:flex;flex-direction:column}
.pdp-cat{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--fg-3);margin-bottom:12px;
}
.pdp-info h1{
  font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:700;
  letter-spacing:-.028em;line-height:1.14;margin-bottom:14px;
}
.pdp-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-bottom:18px;font-size:.85rem;color:var(--fg-2);
}
.pdp-stock{display:inline-flex;align-items:center;gap:7px;color:var(--ok);font-weight:600}
.pdp-stock i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:block}
.pdp-desc{font-size:1rem;line-height:1.7;color:var(--fg-2);margin-bottom:24px;max-width:56ch}
.pdp-desc p{margin-bottom:12px}
.pdp-desc p:last-child{margin-bottom:0}

.opt{border:0;padding:0;margin:0 0 22px}
.opt legend{
  padding:0;margin-bottom:11px;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--fg-2);
}

/* format cards */
.fmt-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fmt-card{
  position:relative;cursor:pointer;display:flex;flex-direction:column;gap:6px;
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--r-md);padding:16px 16px 15px;
  transition:border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.fmt-card:hover{border-color:var(--border-2)}
.fmt-card.is-on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.fmt-card input{position:absolute;opacity:0;pointer-events:none}
.fmt-card input:focus-visible + .fc-head{outline:2.5px solid var(--ring);outline-offset:4px;border-radius:4px}
.fc-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.fc-name{font-weight:700;font-size:.94rem}
.fc-cost{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.95rem;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.fc-note{font-size:.78rem;color:var(--fg-3);line-height:1.45}

/* size / frame chips */
.chip-opts{display:flex;flex-wrap:wrap;gap:9px}
.chip-opt{
  display:flex;align-items:center;gap:9px;
  min-height:48px;padding:0 16px;border-radius:var(--r-pill);
  border:1.5px solid var(--border);background:var(--surface);color:var(--fg);
  font-size:.86rem;transition:all 190ms var(--ease);
}
.chip-opt:hover{border-color:var(--fg-2)}
.chip-opt.is-on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.chip-opt[disabled]{opacity:.38;cursor:not-allowed}
.co-label{font-weight:600}
.co-sub,.co-add{font-size:.75rem;color:var(--fg-3);font-variant-numeric:tabular-nums}
.co-add{font-weight:600}
.chip-opt.is-on .co-add{color:var(--fg-2)}
.co-swatch{width:16px;height:16px;border-radius:4px;flex-shrink:0;border:1px solid rgba(0,0,0,.12)}

/* digital inclusions */
.incl{background:var(--blue-soft);border-radius:var(--r-md);padding:18px 20px;margin-bottom:22px}
.incl b{display:block;font-size:.86rem;margin-bottom:11px}
.incl ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.incl li{display:flex;gap:10px;align-items:flex-start;font-size:.87rem;color:var(--fg-2);line-height:1.5}
.incl svg{color:var(--ok);flex-shrink:0;margin-top:2px;width:16px;height:16px}

/* price + qty */
.buy-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding:18px 0 16px;
  border-top:1px solid var(--border);
}
.buy-price{display:flex;flex-direction:column;gap:2px}
.buy-price b,.buy-price .amount{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:1.85rem;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--fg);
}
.buy-price small{font-size:.8rem;color:var(--fg-3)}
.qty,.quantity{
  display:flex;align-items:center;gap:4px;
  border:1.5px solid var(--border);border-radius:var(--r-pill);
  padding:4px;background:var(--surface);
}
.qty button{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-size:1.05rem;line-height:1;color:var(--fg-2);
  transition:background 170ms var(--ease), color 170ms var(--ease);
}
.qty button:hover{background:var(--blue-wash);color:var(--fg)}
.qty b{min-width:26px;text-align:center;font-size:.94rem;font-weight:700;font-variant-numeric:tabular-nums}
.quantity input[type="number"]{
  width:56px;text-align:center;border:0;background:transparent;
  font-weight:700;font-variant-numeric:tabular-nums;
}

.buy-fine{margin-top:12px;text-align:center;font-size:.8rem;color:var(--fg-3)}

.assure{
  list-style:none;margin:22px 0 0;padding:20px 0 0;
  border-top:1px solid var(--border);display:grid;gap:11px;
}
.assure li{display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--fg-2)}
.assure svg{color:var(--fg-3);flex-shrink:0;width:17px;height:17px}

/* ---------- details ---------- */
.pdp-details{background:var(--bg-2);padding:clamp(40px,6vw,76px) 0}
.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,26px)}
.detail-card{
  background:var(--surface);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,36px);box-shadow:var(--shadow-sm);
}
.detail-card h2{font-size:1.26rem;margin-bottom:18px;letter-spacing:-.015em}
.spec{margin:0;display:grid}
.spec div,.ship-row{
  display:flex;justify-content:space-between;gap:18px;
  padding:11px 0;border-bottom:1px solid var(--border);font-size:.89rem;
}
.spec div:last-child,.ship-row:last-child{border-bottom:none}
.spec dt{color:var(--fg-3)}
.spec dd{margin:0;text-align:right;font-weight:500}
.ship-row b{flex-shrink:0;font-weight:600}
.ship-row span{color:var(--fg-2);text-align:right}
.detail-note{margin-top:16px;font-size:.82rem;color:var(--fg-3);line-height:1.55}

.related-wrap{background:var(--bg-2)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .pdp-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .pdp-media{position:static}
  .pdp-stage{min-height:0}
  .details-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pdp-stage{padding:24px 20px;border-radius:var(--r-md)}
  .fmt-cards{grid-template-columns:1fr}
  .buy-price b,.buy-price .amount{font-size:1.55rem}
    .chip-opt{min-height:46px;padding:0 13px;font-size:.82rem}
  .spec div,.ship-row{flex-direction:column;gap:2px}
  .spec dd,.ship-row span{text-align:left}
}

/* ---------- WOOCOMMERCE FORM CONTROLS ----------
   Woo prints its own add-to-cart form with its own class names. It is styled
   here rather than rebuilt, so pricing, stock and validation stay Woo's job.
   The default button lands at 36px, under the 44px touch minimum. */
.pdp-info form.cart{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0}
.pdp-info form.cart .quantity{flex:0 0 auto}

.pdp-info .single_add_to_cart_button,
.woocommerce .pdp-info button.button.alt{
  flex:1 1 200px;
  min-height:52px;padding:0 28px;
  border-radius:var(--r-pill);
  background:var(--kesari);color:#3A2205;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.96rem;
  border:1.5px solid transparent;cursor:pointer;
  transition:background 200ms var(--ease), color 200ms var(--ease),
             box-shadow 200ms var(--ease), transform 160ms var(--ease);
}
.pdp-info .single_add_to_cart_button:hover,
.woocommerce .pdp-info button.button.alt:hover{
  background:var(--kesari-deep);color:#fff;
  box-shadow:var(--shadow-lg);transform:translateY(-2px);
}
.pdp-info .single_add_to_cart_button:active{transform:translateY(0) scale(.98)}
.pdp-info .single_add_to_cart_button.disabled,
.pdp-info .single_add_to_cart_button[disabled]{opacity:.45;cursor:not-allowed}

/* variation dropdowns */
.pdp-info table.variations{width:100%;border-collapse:collapse;margin-bottom:6px}
.pdp-info table.variations th,
.pdp-info table.variations td{display:block;width:100%;text-align:left;padding:0}
.pdp-info table.variations th label{
  display:block;margin-bottom:9px;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--fg-2);
}
.pdp-info table.variations td{margin-bottom:18px}
.pdp-info table.variations select{
  appearance:none;-webkit-appearance:none;
  width:100%;min-height:50px;padding:0 42px 0 16px;
  border:1.5px solid var(--border);border-radius:var(--r-md);
  background:var(--surface);color:var(--fg);
  font-size:.92rem;font-weight:500;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:17px;
  transition:border-color 190ms var(--ease), box-shadow 190ms var(--ease);
}
.pdp-info table.variations select:hover{border-color:var(--border-2)}
.pdp-info table.variations select:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(17,17,17,.12);
}
.pdp-info .reset_variations{
  display:inline-block;margin-top:4px;
  font-size:.8rem;color:var(--fg-3);
  text-decoration:underline;text-underline-offset:2px;
}

/* live price block Woo swaps on variation change */
.pdp-info .woocommerce-variation-price{margin-bottom:14px}
.pdp-info .price,
.pdp-info .woocommerce-variation-price .price{
  display:block;margin-bottom:16px;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:1.85rem;font-weight:700;
  line-height:1;letter-spacing:-.02em;color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.pdp-info .price del{opacity:.5;font-size:1.1rem;font-weight:400;margin-right:8px}
.pdp-info .price ins{text-decoration:none}
.pdp-info .stock{font-size:.85rem;color:var(--ok);font-weight:600}
.pdp-info .stock.out-of-stock{color:var(--danger)}

@media (max-width:640px){
  .pdp-info form.cart{gap:10px}
  .pdp-info .single_add_to_cart_button{flex:1 1 100%}
}

/* Woo prints related products and the data tabs straight into the page with
   no container of their own, so both need the site gutter applied here. */
.related,.upsells,
.woocommerce-tabs{
  width:100%;max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:0;
}
/* the gutter belongs to the outer band, not to each block */
.related-wrap,
.woocommerce-tabs-wrap{padding-inline:clamp(20px,5vw,48px)}

/* data tabs: Woo's default is a bulleted list */
.woocommerce-tabs ul.tabs{
  list-style:none;margin:0 0 22px;padding:0 0 2px;
  display:flex;flex-wrap:wrap;gap:8px;
  border-bottom:1px solid var(--border);
}
.woocommerce-tabs ul.tabs li{margin:0}
.woocommerce-tabs ul.tabs li a{
  display:inline-flex;align-items:center;
  min-height:44px;padding:0 18px;
  border-radius:var(--r-pill) var(--r-pill) 0 0;
  font-size:.85rem;font-weight:600;color:var(--fg-3);
  transition:color 180ms var(--ease), background 180ms var(--ease);
}
.woocommerce-tabs ul.tabs li a:hover{color:var(--fg);background:var(--blue-soft)}
.woocommerce-tabs ul.tabs li.active a{color:var(--fg);background:var(--blue-soft)}
.woocommerce-tabs .panel{
  font-size:.95rem;line-height:1.75;color:var(--fg-2);max-width:74ch;
}
.woocommerce-tabs .panel h2{
  font-size:1.24rem;margin-bottom:14px;letter-spacing:-.015em;
}
.woocommerce-tabs .panel p{margin-bottom:12px}

/* Woo's variations table carries its own width and pushed the product page
   15px past the viewport on a phone. Force it to lay out inside the column. */
.pdp-info form.cart,
.pdp-info table.variations,
.pdp-info table.variations tbody,
.pdp-info table.variations tr,
.pdp-info table.variations td,
.pdp-info table.variations th{
  max-width:100%;
  box-sizing:border-box;
}
.pdp-info table.variations{table-layout:fixed}
.pdp-info table.variations td.value{padding-right:0}
.pdp-info{min-width:0}
.pdp-grid{min-width:0}

/* ---------- buy panel polish ---------- */

/* Woo disables add-to-cart until a variation is chosen. At .45 opacity it just
   looked broken, so the disabled state now reads as deliberate and the select
   is what draws the eye instead. */
.woocommerce div.product .pdp-info .single_add_to_cart_button.disabled,
.woocommerce div.product .pdp-info .single_add_to_cart_button[disabled],
.woocommerce div.product .pdp-info .single_add_to_cart_button.wc-variation-selection-needed{
  opacity:1;background:var(--surface-2);color:var(--fg-3);
  border:1.5px dashed var(--border-2);box-shadow:none;
}
.woocommerce div.product .pdp-info .single_add_to_cart_button.disabled:hover,
.woocommerce div.product .pdp-info .single_add_to_cart_button[disabled]:hover,
.woocommerce div.product .pdp-info .single_add_to_cart_button.wc-variation-selection-needed:hover{
  transform:none;background:var(--surface-2);
}

/* the size dropdown is the next action, so give it presence */
.pdp-info table.variations select{
  border-width:1.5px;
}
.pdp-info table.variations select:not([data-chosen]){
  border-color:var(--kesari);
  box-shadow:0 0 0 4px rgba(232,135,30,.10);
}

/* price sits closer to the control it belongs to */
.pdp-info .price,
.pdp-info .woocommerce-variation-price .price{margin-bottom:4px}

/* the reassurance list was floating; tie it to the panel */
.assure{
  margin-top:22px;padding-top:20px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:11px;list-style:none;
}
.assure li{
  display:flex;align-items:center;gap:11px;
  font-size:.87rem;color:var(--fg-2);
}
.assure .ico{width:18px;height:18px;color:var(--kesari-deep);flex:0 0 auto}

/* ---------- override Woo's float layout ----------
   woocommerce-layout.css sets `div.product div.summary{width:48%;float:right}`
   and the matching rule for div.images. The buy panel carries the `summary`
   class so Woo's own hooks keep working, which meant it was rendering at 48%
   of its grid column (211px of 440px) with the rest of the row left empty.
   The grid owns the layout here, so the float rules are cancelled. */
.woocommerce div.product.pdp-grid > .pdp-info,
.woocommerce div.product.pdp-grid > .pdp-media,
.woocommerce #content div.product.pdp-grid > .pdp-info,
.woocommerce #content div.product.pdp-grid > .pdp-media,
body .woocommerce div.product.pdp-grid > div.summary{
  width:auto;float:none;margin:0;
}

/* Woo's variation form carries its own bottom margin and the single-variation
   wrapper adds another, which left a visible hole above the reassurance list. */
.woocommerce div.product .pdp-info form.cart{margin-bottom:0}
.woocommerce div.product .pdp-info .woocommerce-variation-add-to-cart{margin-top:4px}
.woocommerce div.product .pdp-info .woocommerce-variation{margin-bottom:6px}
.pdp-info .assure{margin-top:20px}

/* Woo reserves space for the variation price/stock block even when it is
   empty, which left a gap between the size select and the quantity row. */
.woocommerce div.product .pdp-info .woocommerce-variation{margin:0}
.woocommerce div.product .pdp-info .woocommerce-variation:empty{display:none}
.woocommerce div.product .pdp-info .woocommerce-variation-description:empty,
.woocommerce div.product .pdp-info .woocommerce-variation-availability:empty{display:none}
.woocommerce div.product .pdp-info table.variations td{margin-bottom:10px}
.woocommerce div.product .pdp-info .woocommerce-variation-add-to-cart{margin-top:0}