/* =====================================================================
   pdp-detail.css — New "Item Large Layout" (product detail) template.
   Loaded by HEADER.ASP only when Item_L_Layout uses OBJ_ITEM_TABS_OBJ.
   Scoped under .ss-pdp so it cannot leak into other layouts/themes.
   Mobile-first, responsive, and ADA-friendly (visible focus states,
   reduced-motion support). Colors chosen for WCAG AA contrast on white;
   a merchant theme can override the --pdp-* variables.
   ===================================================================== */

.ss-pdp{
  --pdp-accent:#1f5fbf; --pdp-accent-ink:#ffffff;
  --pdp-line:#e3e8ef; --pdp-ink:#1f2733; --pdp-muted:#5b6675;
  --pdp-radius:14px; --pdp-focus:#0a58ca;
  max-width:1120px; margin:22px auto; padding:0 18px; box-sizing:border-box;
  color:var(--pdp-ink);
}
.ss-pdp *{box-sizing:border-box;}

/* visible keyboard focus everywhere in the layout */
.ss-pdp a:focus-visible,
.ss-pdp button:focus-visible,
.ss-pdp select:focus-visible,
.ss-pdp input:focus-visible,
.ss-pdp [tabindex]:focus-visible{
  outline:3px solid var(--pdp-focus); outline-offset:2px; border-radius:6px;
}

/* ---------------- top: media + buy box ---------------- */
.ss-pdp-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:34px; align-items:start;}
/* Safety net: the OBJ_STOCK_OBJ itemprop="offers" <div> is now closed in scart_misc
   (the divEnd bug), so the markup nests correctly and these are normal block children.
   Keeping the full-width span is a harmless no-op that also protects against any other
   stray unclosed tag pushing the tabs/accessory into this grid. */
.ss-pdp-tabs, .ss-pdp-accessory{grid-column:1 / -1;}
.ss-pdp-media{background:transparent; border:0; border-radius:var(--pdp-radius); padding:0; text-align:center;}
.ss-pdp-media img{max-width:100%; height:auto; border-radius:8px;}

.ss-pdp-info{min-width:0;}
.ss-pdp-name{font-size:1.9rem; line-height:1.2; font-weight:800; letter-spacing:-.01em; margin:2px 0 8px;}
.ss-pdp-rating{margin:0 0 14px; color:#8a5a00; font-size:.95rem;}

.ss-pdp-pricebar{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 4px;}
.ss-pdp-price{font-size:2rem; font-weight:800;}
.ss-pdp-price-was{font-size:1.15rem; color:var(--pdp-muted); text-decoration:line-through;}
.ss-pdp-stock{margin:6px 0 18px; font-size:.9rem; color:#0f7b43; font-weight:600;}

/* Merchant extended fields (OBJ_EXT_FIELD*) - extra product info under the price. */
/* font-weight:400 keeps these from rendering bold: the stock block is bold, and if the
   markup ever nests them under it they would otherwise inherit that weight. */
.ss-pdp-ext{margin:0 0 16px; font-size:.92rem; line-height:1.55; color:var(--pdp-ink); font-weight:400;}
.ss-pdp-ext:empty{display:none;}

.ss-pdp-attrs{margin:0 0 18px; font-weight:400;}
.ss-pdp-attrs select, .ss-pdp-attrs input[type=text]{max-width:340px; padding:11px 12px; border:1px solid var(--pdp-line); border-radius:10px; font:inherit; background:#fff;}

/* User-defined / personalization fields. OBJ_UD_OBJ emits its OWN complete <table>, so
   this must be a plain <div> wrapper - wrapping it in a <table> makes a table-inside-table,
   which the browser foster-parents out and shoves the buy row into the outer item table. */
.ss-pdp-udf{margin:14px 0 18px; font-weight:400;}
.ss-pdp-udf:empty{display:none;}
.ss-pdp-udf table{width:100%; border-collapse:collapse;}
.ss-pdp-udf td{padding:6px 0; vertical-align:top; font-size:.92rem; font-weight:400;}
.ss-pdp-udf input[type=text], .ss-pdp-udf textarea, .ss-pdp-udf select{max-width:340px; padding:9px 11px; border:1px solid var(--pdp-line); border-radius:10px; font:inherit; background:#fff;}

.ss-pdp-buy{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:16px; border:1px solid var(--pdp-line); border-radius:var(--pdp-radius); background:#fbfcfe; margin:0 0 16px;}
.ss-pdp-qty{display:inline-flex; align-items:stretch;}
/* Wishlist heart. sWishlistIcon is hardcoded position:absolute, so it needs a
   positioned box of its own; placed AFTER Add to Cart it no longer overlaps qty.
   Pushed to the right end of the buy row with margin-left:auto. */
.ss-pdp-wish{position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-left:auto;}
.ss-pdp-wish a[style*="absolute"]{top:50%; left:50%; transform:translate(-50%,-50%);}
.ss-pdp-wish .wishlist-container{display:flex; align-items:center; justify-content:center;}

.ss-pdp-social{display:flex; gap:14px; align-items:center; color:var(--pdp-muted); font-size:.85rem;}

/* ---------------- tabs (ARIA tablist) ---------------- */
.ss-pdp-tabs{margin:34px 0 0; background:#fff; border:1px solid var(--pdp-line); border-radius:var(--pdp-radius); overflow:hidden;}
/* overflow-x:auto lets many tabs scroll sideways on narrow screens; overflow-y:hidden
   stops the browser from adding a vertical scrollbar for the buttons' 1px margin-bottom. */
.ss-pdp-tabbar{display:flex; gap:2px; overflow-x:auto; overflow-y:hidden; border-bottom:1px solid var(--pdp-line); background:#f7f9fc; -webkit-overflow-scrolling:touch;}
.ss-pdp-tabbar button{flex:0 0 auto; appearance:none; border:0; background:none; cursor:pointer; white-space:nowrap; padding:15px 20px; font:inherit; font-weight:600; color:var(--pdp-muted); border-bottom:3px solid transparent; margin-bottom:-1px;}
.ss-pdp-tabbar button:hover{color:var(--pdp-ink);}
.ss-pdp-tabbar button.on{color:var(--pdp-accent); border-bottom-color:var(--pdp-accent);}

.ss-pdp-panel{padding:26px;}
.ss-pdp-panel[hidden]{display:none;}
.ss-pdp-panel.on{animation:sspdpfade .18s ease;}
@keyframes sspdpfade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
.ss-pdp-panel h3{margin:0 0 12px; font-size:1.25rem;}
.ss-pdp-panel p{margin:0 0 12px; color:#334155;}
.ss-pdp-panel :first-child{margin-top:0;}

.ss-pdp-panel table.ss-pdp-spec, .ss-pdp-panel table.spec{width:100%; border-collapse:collapse; font-size:.95rem;}
.ss-pdp-panel table.ss-pdp-spec th, .ss-pdp-panel table.ss-pdp-spec td,
.ss-pdp-panel table.spec th, .ss-pdp-panel table.spec td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--pdp-line); vertical-align:top;}
.ss-pdp-panel table.ss-pdp-spec th, .ss-pdp-panel table.spec th{width:42%; color:var(--pdp-muted); font-weight:600; background:#f8fafc;}

.ss-pdp-panel .ss-pdp-docs, .ss-pdp-panel .docs{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px;}
.ss-pdp-panel .ss-pdp-doc, .ss-pdp-panel .doc{display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--pdp-line); border-radius:10px; padding:12px 14px;}
.ss-pdp-panel .doc a, .ss-pdp-panel .ss-pdp-doc a{flex:0 0 auto; font-weight:700; color:var(--pdp-accent); text-decoration:none; border:1px solid var(--pdp-accent); border-radius:8px; padding:7px 12px; font-size:.85rem;}

.ss-pdp-accessory{margin:34px 0 10px;}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .ss-pdp-top{grid-template-columns:1fr; gap:22px;}
  .ss-pdp-media{position:static;}
  .ss-pdp-name{font-size:1.55rem;}
  .ss-pdp-price{font-size:1.7rem;}
  .ss-pdp-panel{padding:20px 16px;}
  .ss-pdp-panel table.ss-pdp-spec th, .ss-pdp-panel table.spec th{width:50%;}
}

@media (prefers-reduced-motion: reduce){
  .ss-pdp-panel.on{animation:none;}
}