/* Upgrade 3: ready-made products (#products). SVG coins and bars with metallic gradients,
   a 3D stage that tilts (pointer / phone motion) and gets its thickness from stacked layers. */
.pd-wrap { max-width: 1180px; margin: 0 auto; padding-top: 6px; }
.pd-head { text-align: center; margin: 8px auto 18px; max-width: 680px; }
.pd-title { font-size: clamp(30px, 5vw, 46px); margin: 12px 0 6px; }
.pd-sub { margin: 0 auto; color: var(--ink-2); font-size: 14.5px; }

/* tabs: one row, scrolls sideways on phones */
.pd-tabs { display: flex; width: fit-content; max-width: 100%; margin: 0 auto 18px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pd-tabs::-webkit-scrollbar { display: none; }
.pd-tabs button { flex: none; height: 38px; padding: 0 16px; font-size: 13.5px; }
.pd-tabs button[aria-selected="true"] { background: linear-gradient(180deg, #FFF3D6, #F2C46D); color: #1A1204; box-shadow: 0 0 0 1px rgba(255, 228, 170, .5), 0 0 18px rgba(242, 196, 109, .35); font-weight: 500; }

/* hero: the selected piece */
.pd-hero { display: grid; grid-template-columns: minmax(260px, .92fr) minmax(0, 1.08fr); gap: 26px; padding: 24px; align-items: start; }
.pd-stage { position: relative; display: grid; place-items: center; min-height: 360px; padding: 24px; border-radius: 18px; overflow: hidden; perspective: 900px;
  border: 1px solid var(--line); background:
    radial-gradient(55% 50% at 50% 42%, rgba(242, 196, 109, .2), transparent 72%),
    radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .32)); }
.pd-hero.pd-custom .pd-stage, .pd-stage:has(.pd-ill.ag) { background:
    radial-gradient(55% 50% at 50% 42%, rgba(207, 218, 232, .18), transparent 72%),
    radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .32)); }
.pd-hero.pd-custom .pd-stage:has(.pd-ill.au) { background:
    radial-gradient(55% 50% at 50% 42%, rgba(242, 196, 109, .2), transparent 72%),
    radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .32)); }
.pd-tilt { position: relative; width: min(80%, 300px); transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s cubic-bezier(.2, .7, .2, 1); animation: pdFloat 6s ease-in-out infinite; z-index: 1; }
.pd-stage.live .pd-tilt { transition: transform .08s linear; }
@keyframes pdFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.pd-floor { position: absolute; bottom: 9%; left: 50%; width: 46%; height: 20px; translate: -50% 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent); filter: blur(3px); animation: pdShadow 6s ease-in-out infinite; }
@keyframes pdShadow { 0%, 100% { scale: 1; opacity: .9; } 50% { scale: .9; opacity: .65; } }

/* the piece: SVG face over stacked edge layers */
.pd-ill { position: relative; display: block; width: 100%; aspect-ratio: 1; transform: scale(var(--s, 1)); transform-style: preserve-3d; }
.pd-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform: translateZ(.6px); }
.pd-e { position: absolute; transform: translateZ(var(--z)); background: #7A5418; }
.pd-ill.ag .pd-e { background: #59616E; }
.pd-ill.coin .pd-e { inset: 1%; border-radius: 50%; }
.pd-ill.bar .pd-e { left: 23%; right: 23%; top: 3%; bottom: 3%; border-radius: 12% / 7%; }
.pd-ill.tola .pd-e { left: 7%; right: 7%; top: 29%; bottom: 28%; border-radius: 6% / 12%; }
.pd-e:nth-child(odd) { filter: brightness(1.18); }
.pd-shine { position: absolute; pointer-events: none; transform: translateZ(1.2px); mix-blend-mode: soft-light; opacity: .95;
  background: radial-gradient(circle at var(--mx, 35%) var(--my, 28%), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 46%); }
.pd-ill.coin .pd-shine { inset: 1%; border-radius: 50%; }
.pd-ill.bar .pd-shine { left: 23%; right: 23%; top: 3%; bottom: 3%; border-radius: 12% / 7%; }
.pd-ill.tola .pd-shine { left: 7%; right: 7%; top: 29%; bottom: 28%; border-radius: 6% / 12%; }
.pd-ill.bangle .pd-shine { display: none; }
.pd-tilt .pd-svg { filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .25)); }

/* details */
.pd-detail { min-width: 0; }
@media (min-width: 901px) { .pd-hero > .pd-stage { position: sticky; top: 84px; } }
.pd-name { margin: 0; font-size: clamp(22px, 2.6vw, 30px); font-weight: 500; color: var(--ink); line-height: 1.25; }
.pd-csub { margin: 6px 0 14px; color: var(--ink-2); font-size: 13.5px; }
.pd-custom .field > .seg { align-self: flex-start; }
.pd-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.pd-unver { white-space: normal; height: auto; min-height: 22px; padding-block: 3px; line-height: 1.35; }
.pd-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin: 0 0 14px; }
.pd-spec > div { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: rgba(255, 255, 255, .02); min-width: 0; }
.pd-spec dt { font-size: 11.5px; color: var(--ink-3); }
.pd-spec dd { margin: 2px 0 0; font-size: 14.5px; }
.pd-edit { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0 0 14px; padding: 12px; border-radius: 14px; border: 1px dashed rgba(240, 182, 90, .45); background: rgba(240, 182, 90, .05); }
.pd-edit .field { gap: 6px; font-size: 12.5px; }
.pd-edit .field input { height: 40px; width: 150px; }
.pd-melt { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(242, 196, 109, .3);
  background: linear-gradient(160deg, rgba(242, 196, 109, .15), rgba(242, 196, 109, .02)); }
.pd-ml { font-size: 12px; color: var(--ink-3); }
.pd-mv { font-size: clamp(30px, 4vw, 42px); line-height: 1.12; }
.pd-mv .num { background: linear-gradient(180deg, #FFF6E0, #E9BC62); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pd-melt.ag { border-color: rgba(207, 218, 232, .3); background: linear-gradient(160deg, rgba(207, 218, 232, .13), rgba(207, 218, 232, .02)); }
.pd-melt.ag .pd-mv .num { background: linear-gradient(180deg, #FFFFFF, #AEB7C4); -webkit-background-clip: text; background-clip: text; }
.pd-mv small { font-size: 13px; color: var(--ink-3); }
.pd-mt { margin: 0; }
.pd-h3 { margin: 18px 0 8px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.pd-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pd-custom .pd-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.pd-inputs .field { gap: 6px; font-size: 12.5px; min-width: 0; }
.pd-inputs .field input { height: 44px; min-width: 0; width: 100%; }
.pd-cpur .karat-chips { flex-wrap: wrap; }
/* room for the whole hint ("e.g. 14 or 585"): shares the chip row when it fits, else gets its own line */
.pd-cpur .karat-chips input { flex: 1 0 132px; width: auto; max-width: 180px; }
/* how a typed karat / fineness was understood ("Read as 14K · fineness 583.3") */
.pd-pread { font-size: 12px; color: var(--mint); line-height: 1.4; }
.pd-pread:empty { display: none; }
.pd-cpur .karat-chips input.on { border-color: rgba(16, 188, 131, .55); background: var(--deep); color: var(--mint); }
.pd-shint { margin-top: 6px; }
.pd-res { margin-top: 4px; }
.pd-res .results { margin-top: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pd-res .stat { padding: 12px; }
.pd-res .stat .val { font-size: 20px; }
.pd-res .stat .val small { font-size: 11.5px; color: var(--ink-3); }
.pd-res .errors p { margin: 8px 0 0; }
.pd-hint { margin-top: 10px; }
.pd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.pd-actions .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pd-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
.pd-src { font-size: 12px; color: var(--ink-3); }
.pd-src a { color: var(--ink-2); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); }
.pd-note { margin-top: 12px; }
.pd-tabnote { text-align: center; max-width: 760px; margin: 16px auto 0; }

/* product grid */
.pd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 188px)); justify-content: center; gap: 12px; margin-top: 16px; }
.pd-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 10px 12px; border-radius: 18px; font: inherit; color: var(--ink);
  border: 1px solid var(--line-2); background: var(--glass); background-image: var(--glass-grad); box-shadow: var(--shadow-in); cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.pd-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .26); }
.pd-card[aria-pressed="true"] { border-color: rgba(242, 196, 109, .62); box-shadow: var(--shadow-in), 0 0 0 1px rgba(242, 196, 109, .22), 0 18px 40px -22px rgba(242, 196, 109, .7); }
.pd-cill { display: block; width: 92px; height: 92px; perspective: 500px; margin-bottom: 6px; }
.pd-cill.bar { width: 108px; height: 108px; margin-block: -8px 0; }
.pd-cill.tola { width: 120px; height: 92px; }
.pd-cill .pd-ill { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.pd-cill .pd-svg { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); }
.pd-card:hover .pd-cill .pd-ill, .pd-card:focus-visible .pd-cill .pd-ill { transform: scale(var(--s, 1)) rotateY(-16deg) rotateX(9deg); }
.pd-cill .pd-shine { mix-blend-mode: overlay; opacity: 1; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .7) 50%, transparent 62%) 130% 0 / 260% 100% no-repeat; transition: background-position .8s ease; }
.pd-card:hover .pd-cill .pd-shine { background-position: -30% 0; }
.pd-cname { font-size: 13px; font-weight: 500; line-height: 1.35; min-height: 2.7em; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pd-cspec { font-size: 11.5px; color: var(--ink-3); }
.pd-cmelt { font-size: 15px; margin-top: 2px; }
.pd-cmelt small { font-size: 11px; color: var(--ink-3); }
.pd-warn-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 8px rgba(240, 182, 90, .7); }

@media (max-width: 900px) {
  .pd-hero { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; }
  .pd-stage { min-height: 220px; padding: 14px; }
  .pd-tilt { width: min(56%, 220px); }
}
@media (max-width: 560px) {
  /* full-bleed strip: the base max-width:100% would cap it at the container and shift it one gutter */
  .pd-tabs { width: auto; max-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); border-radius: 0; border-inline: 0; }
  .pd-tabs button { height: 36px; padding: 0 13px; font-size: 13px; }
  .pd-inputs, .pd-custom .pd-inputs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pd-inputs .field:nth-child(2) { grid-column: 1 / -1; order: -1; }
  .pd-custom .pd-inputs .field:nth-child(2) { grid-column: 1 / -1; order: 0; }
  .pd-custom .pd-inputs .field:nth-child(4) { grid-column: 1 / -1; }
  .pd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pd-cill { width: 78px; height: 78px; }
  .pd-cname { font-size: 12.5px; }
  .pd-res .results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-res .results .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pd-grid { justify-content: stretch; }
  .pd-res .stat .val { font-size: 17px; }
  .pd-edit .field input { width: 120px; }
}
/* phones and touch screens: every control is a 40 px target, as on the other upgrade-3 screens */
@media (max-width: 600px), (pointer: coarse) {
  .pd-tabs button { height: 40px; }
  #productsRoot .btn.sm, #productsRoot .karat-chips button { height: 40px; }
  #productsRoot .seg.sm button { height: 40px; min-width: 44px; }
  /* the source links: a 40 px box that does not move the line; "(2)" (a second page) gets the width too */
  .pd-src a { position: relative; display: inline-block; min-width: 40px; text-align: center; padding-block: 11px; margin-block: -11px; }
}

/* light theme */
html[data-theme="light"] .pd-tabs button[aria-selected="true"] { background: linear-gradient(180deg, #F7D58E, #E2AE4B); color: #2A1B04; box-shadow: 0 6px 18px -8px rgba(169, 119, 31, .6); }
html[data-theme="light"] .pd-stage { border-color: rgba(16, 48, 36, .1); background:
    radial-gradient(55% 50% at 50% 42%, rgba(240, 190, 100, .3), transparent 72%),
    radial-gradient(rgba(16, 64, 46, .08) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(rgba(255, 255, 255, .7), rgba(230, 237, 232, .9)); }
html[data-theme="light"] .pd-stage:has(.pd-ill.ag), html[data-theme="light"] .pd-hero.pd-custom .pd-stage:has(.pd-ill.ag) { background:
    radial-gradient(55% 50% at 50% 42%, rgba(150, 165, 185, .3), transparent 72%),
    radial-gradient(rgba(16, 64, 46, .08) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(rgba(255, 255, 255, .7), rgba(230, 237, 232, .9)); }
html[data-theme="light"] .pd-hero.pd-custom .pd-stage:has(.pd-ill.au) { background:
    radial-gradient(55% 50% at 50% 42%, rgba(240, 190, 100, .3), transparent 72%),
    radial-gradient(rgba(16, 64, 46, .08) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(rgba(255, 255, 255, .7), rgba(230, 237, 232, .9)); }
html[data-theme="light"] .pd-floor { background: radial-gradient(closest-side, rgba(16, 48, 36, .35), transparent); }
html[data-theme="light"] .pd-spec > div { background: rgba(255, 255, 255, .6); }
html[data-theme="light"] .pd-edit { background: rgba(240, 190, 100, .1); border-color: rgba(169, 119, 31, .4); }
html[data-theme="light"] .pd-melt { background: linear-gradient(160deg, rgba(240, 190, 100, .24), rgba(255, 255, 255, .6)); border-color: rgba(169, 119, 31, .35); }
html[data-theme="light"] .pd-mv .num { background: linear-gradient(180deg, #8A5E12, #5E3E08); -webkit-background-clip: text; background-clip: text; }
html[data-theme="light"] .pd-melt.ag { background: linear-gradient(160deg, rgba(150, 165, 185, .2), rgba(255, 255, 255, .6)); border-color: rgba(90, 104, 124, .35); }
html[data-theme="light"] .pd-melt.ag .pd-mv .num { background: linear-gradient(180deg, #4A5463, #2B323C); -webkit-background-clip: text; background-clip: text; }
html[data-theme="light"] .pd-card { background: rgba(255, 255, 255, .62); }
html[data-theme="light"] .pd-card:hover { border-color: rgba(16, 48, 36, .25); }
html[data-theme="light"] .pd-card[aria-pressed="true"] { border-color: rgba(169, 119, 31, .55); box-shadow: var(--shadow-in), 0 14px 32px -20px rgba(169, 119, 31, .6); }
html[data-theme="light"] .pd-cill .pd-svg { filter: drop-shadow(0 8px 10px rgba(16, 48, 36, .25)); }
html[data-theme="light"] .pd-src a { color: var(--ink-2); text-decoration-color: rgba(16, 48, 36, .25); }
html[data-theme="light"] .pd-cpur .karat-chips input.on { background: rgba(16, 188, 131, .12); color: #0B7552; }
html[data-theme="light"] .pd-pread { color: #0B7552; }

@media (prefers-reduced-motion: reduce) {
  .pd-tilt, .pd-floor { animation: none; transition: none; }
  .pd-card, .pd-cill .pd-ill, .pd-cill .pd-shine { transition: none; }
  .pd-card:hover { transform: none; }
  .pd-card:hover .pd-cill .pd-ill, .pd-card:focus-visible .pd-cill .pd-ill { transform: scale(var(--s, 1)); }
}