/* dealsfortune-child :: product.css — single product page (Phase 4F). Reads tokens.css.
   Two-column buy layout + gallery + buy box. Reuses .pc (shop.css) for related (4F-B). */

.df-pdp-wrap{background:var(--df-bg);color:var(--df-text);padding:30px 0 80px}
.df-pdp{position:relative}

/* breadcrumb */
.pdp-crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--df-text-dim);margin:0 0 22px}
.pdp-crumb a{color:var(--df-text-muted);text-decoration:none}
.pdp-crumb a:hover{color:var(--df-brand)}
.pdp-crumb span[aria-current]{color:var(--df-text);max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* two columns */
.pdp-main{display:grid;grid-template-columns:1.45fr 1fr;gap:46px;align-items:start}

/* ---- gallery (left) ---- */
.pdp-gallery{position:relative}
.pdp-stage{position:relative;border:1px solid var(--df-border);border-radius:16px;overflow:hidden;
  background:var(--df-card);aspect-ratio:4/3}
.pdp-stage__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s var(--df-ease);cursor:zoom-in}
.pdp-stage__fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.pdp-stage__fallback span{font-family:var(--df-font-head);font-weight:800;font-size:60px;color:rgba(255,255,255,.85)}
.pdp-tag{position:absolute;top:14px;left:14px;z-index:3;font-family:var(--df-font-head);font-weight:700;
  font-size:11px;color:#fff;background:var(--c,#00C26F);padding:5px 11px;border-radius:999px;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.pdp-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.pdp-thumb{width:70px;height:70px;border:1px solid var(--df-border);border-radius:10px;overflow:hidden;
  background:var(--df-card);cursor:pointer;padding:0;flex:none;transition:border-color var(--df-dur)}
.pdp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pdp-thumb:hover{border-color:#33493f}
.pdp-thumb.is-active{border-color:var(--df-brand)}

/* ---- buy box (right, sticky on desktop) ---- */
.pdp-buy{position:sticky;top:96px}
.pdp-title{font-family:var(--df-font-head);font-weight:800;font-size:27px;line-height:1.22;letter-spacing:-.5px;margin:0 0 12px}
.pdp-rating{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.pdp-stars{display:inline-block;font-size:15px;line-height:1;letter-spacing:2px;
  background:linear-gradient(90deg,var(--df-gold) var(--r,0%),#33403a var(--r,0%));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pdp-stars::before{content:"\2605\2605\2605\2605\2605"}
.pdp-rc{font-size:13px;color:var(--df-text-dim)}

.pdp-price{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin:0 0 16px;font-family:var(--df-font-head)}
.pdp-price ins{order:1;text-decoration:none}
.pdp-price del{order:2;opacity:1}
.pdp-price ins>.amount,.pdp-price>.amount{font-weight:800;font-size:32px;color:var(--df-text);letter-spacing:-1px}
.pdp-price del .amount{font-weight:500;font-size:17px;color:var(--df-text-dim);text-decoration:line-through}
.pdp-price .woocommerce-Price-currencySymbol{font-weight:inherit}

.pdp-excerpt{font-size:14.5px;color:var(--df-text-muted);line-height:1.6;margin:0 0 22px}

/* actions */
.pdp-actions{display:flex;gap:12px;margin-bottom:12px}
.pdp-qty{display:inline-flex;align-items:center;border:1px solid var(--df-border);border-radius:var(--df-r-btn);overflow:hidden;background:var(--df-card);flex:none}
.pdp-qty__btn{width:42px;height:50px;background:none;border:0;color:var(--df-text);font-size:20px;cursor:pointer;line-height:1}
.pdp-qty__btn:hover{background:var(--df-card-hover);color:var(--df-brand)}
.pdp-qty__input{width:46px;height:50px;text-align:center;background:none;border:0;color:var(--df-text);font:inherit;font-weight:700;-moz-appearance:textfield}
.pdp-qty__input::-webkit-outer-spin-button,.pdp-qty__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pdp-qty__input:focus{outline:none}
.pdp-add{flex:1;padding:0 22px;height:50px;font-size:16px}
.pdp-buynow{display:flex;width:100%;height:50px;font-size:15px;margin-bottom:4px}

.pdp-oos{color:var(--df-danger);font-weight:600}

/* trust */
.pdp-trust{list-style:none;padding:18px 0 0;margin:18px 0 0;border-top:1px solid var(--df-border);
  display:flex;flex-direction:column;gap:11px;font-size:14px;color:var(--df-text-muted)}
.pdp-trust li{display:flex;align-items:center;gap:10px}

.pdp-wa{display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:11px 16px;border-radius:var(--df-r-btn);
  border:1px solid rgba(63,209,122,.4);color:#3FD17A;font-weight:700;font-size:14px;text-decoration:none;font-family:var(--df-font-head)}
.pdp-wa:hover{background:rgba(63,209,122,.08)}

.pdp-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;font-size:13px;color:var(--df-text-dim)}
.pdp-meta a{color:var(--df-text-muted);text-decoration:none}
.pdp-meta a:hover{color:var(--df-brand)}

.pdp-share{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:13px;color:var(--df-text-dim)}
.pdp-share a,.pdp-copy{width:32px;height:32px;border-radius:8px;border:1px solid var(--df-border);display:inline-flex;
  align-items:center;justify-content:center;color:var(--df-text-muted);background:none;cursor:pointer;text-decoration:none}
.pdp-share a:hover,.pdp-copy:hover{color:var(--df-text);border-color:var(--df-brand)}
.pdp-copy.copied{color:var(--df-brand);border-color:var(--df-brand)}

/* ---- responsive ---- */
@media (max-width:860px){
  .pdp-main{grid-template-columns:1fr;gap:26px}
  .pdp-buy{position:static}
  .pdp-title{font-size:23px}
  .pdp-stage__img{cursor:default}
}
@media (max-width:520px){
  .df-pdp-wrap{padding:20px 0 70px}
  .pdp-price ins>.amount,.pdp-price>.amount{font-size:28px}
  .pdp-actions{flex-wrap:wrap}
  .pdp-add{width:100%;flex:1 0 100%;order:2}
  .pdp-qty{order:1}
}

/* ============================================================ 4F-B: tabs */
.pdp-tabs{margin-top:58px}
.pdp-tabin{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.pdp-tabnav{display:flex;gap:2px;border-bottom:1px solid var(--df-border);margin:0 0 26px;overflow-x:auto;scrollbar-width:none}
.pdp-tabnav::-webkit-scrollbar{display:none}
.pdp-tabnav label{white-space:nowrap;padding:13px 16px;font-family:var(--df-font-head);font-weight:700;
  font-size:14.5px;color:var(--df-text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.pdp-tabnav label:hover{color:var(--df-text)}
.pdp-panel{display:none}
#pt-desc:checked~.pdp-panels #pp-desc,#pt-incl:checked~.pdp-panels #pp-incl,
#pt-lic:checked~.pdp-panels #pp-lic,#pt-how:checked~.pdp-panels #pp-how,
#pt-rev:checked~.pdp-panels #pp-rev{display:block}
#pt-desc:checked~.pdp-tabnav label[for=pt-desc],#pt-incl:checked~.pdp-tabnav label[for=pt-incl],
#pt-lic:checked~.pdp-tabnav label[for=pt-lic],#pt-how:checked~.pdp-tabnav label[for=pt-how],
#pt-rev:checked~.pdp-tabnav label[for=pt-rev]{color:var(--df-brand);border-bottom-color:var(--df-brand)}

.pdp-rte{color:var(--df-text-muted);line-height:1.7;font-size:15px;max-width:80ch}
.pdp-rte p{margin:0 0 14px}
.pdp-rte h2,.pdp-rte h3,.pdp-rte h4{font-family:var(--df-font-head);color:var(--df-text);margin:22px 0 10px;font-weight:700}
.pdp-rte a{color:var(--df-brand);text-decoration:none}
.pdp-rte img{max-width:100%;height:auto;border-radius:10px}
.pdp-rte strong{color:var(--df-text)}
.pdp-incl,.pdp-steps{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:12px;max-width:70ch}
.pdp-incl li,.pdp-steps li{color:var(--df-text-muted);line-height:1.55;padding-left:30px;position:relative}
.pdp-incl li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:8px;border-left:2px solid var(--df-brand);border-bottom:2px solid var(--df-brand);transform:rotate(-45deg)}
.pdp-steps{counter-reset:s}
.pdp-steps li{counter-increment:s}
.pdp-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:rgba(0,194,111,.14);color:var(--df-brand);font-family:var(--df-font-head);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.pdp-steps li strong{color:var(--df-text)}

.pdp-rev-empty{text-align:center;padding:36px 20px;border:1px dashed var(--df-border);border-radius:14px;color:var(--df-text-muted)}
.pdp-rev-empty svg{color:var(--df-brand)}
.pdp-rev-empty h3{font-family:var(--df-font-head);color:var(--df-text);margin:12px 0 6px;font-size:18px}
.pdp-rev-empty p{margin:0}
.pdp-revform{margin-top:24px;max-width:620px;display:flex;flex-direction:column;gap:12px}
.pdp-revform__t{font-family:var(--df-font-head);font-weight:700;color:var(--df-text);margin:0}
.pdp-revstars{color:#33403a;font-size:24px;letter-spacing:4px;cursor:pointer}
.pdp-revrow{display:flex;gap:12px}
.pdp-revform input,.pdp-revform textarea{flex:1;background:var(--df-card);border:1px solid var(--df-border);
  border-radius:8px;color:var(--df-text);font:inherit;font-size:14px;padding:11px 13px}
.pdp-revform textarea{resize:vertical}
.pdp-revform input:focus,.pdp-revform textarea:focus{outline:none;border-color:var(--df-brand)}
.pdp-revform button{align-self:flex-start}

/* ============================================================ 4F-B: related */
.pdp-related{margin-top:64px;border-top:1px solid var(--df-border);padding-top:42px}
.pdp-related__head h2{font-family:var(--df-font-head);font-weight:800;font-size:26px;letter-spacing:-.5px;margin:0 0 24px}
.pdp-related__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

/* ============================================================ 4F-B: upsell */
.pdp-upsell{margin-top:48px}
.pdp-upsell__in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:linear-gradient(100deg,rgba(0,194,111,.13),rgba(0,194,111,.03));
  border:1px solid rgba(0,194,111,.28);border-radius:16px;padding:20px 26px}
.pdp-upsell__txt{font-size:15px;color:var(--df-text);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pdp-upsell__txt strong{color:var(--df-text)}
.pdp-upsell__save{font-family:var(--df-font-head);font-weight:800;font-size:12px;letter-spacing:.04em;
  color:var(--df-brand);background:rgba(0,194,111,.16);padding:5px 11px;border-radius:999px;white-space:nowrap}

@media (max-width:1024px){ .pdp-related__grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:860px){ .pdp-related__grid{grid-template-columns:repeat(2,1fr);gap:14px} }
@media (max-width:520px){ .pdp-upsell__in{flex-direction:column;align-items:flex-start} }

/* ============================================================ 4F-C: mobile sticky buy bar */
.pdp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;align-items:center;gap:12px;
  justify-content:space-between;padding:10px 16px;background:rgba(10,14,12,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--df-border);
  transform:translateY(110%);transition:transform .28s var(--df-ease);box-shadow:0 -8px 30px rgba(0,0,0,.4)}
.pdp-sticky.is-visible{transform:none}
.pdp-sticky__info{display:flex;align-items:center;gap:11px;min-width:0;flex:1}
.pdp-sticky__img{width:44px;height:44px;border-radius:9px;object-fit:cover;flex:none;display:flex;align-items:center;justify-content:center}
.pdp-sticky__fallback{font-family:var(--df-font-head);font-weight:800;color:rgba(255,255,255,.85);font-size:15px}
.pdp-sticky__txt{display:flex;flex-direction:column;min-width:0}
.pdp-sticky__title{font-family:var(--df-font-head);font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.pdp-sticky__price{font-size:13px}
.pdp-sticky__price .amount{font-weight:800;color:var(--df-brand)}
.pdp-sticky__price del{display:none}
.pdp-sticky__buy{flex:none;padding:0 18px;height:44px}
@media (max-width:860px){ .pdp-sticky{display:flex} .df-pdp-wrap{padding-bottom:84px} }

/* ============================================================ Batch 2 */
/* #9 — PDP title inherited a dark colour from XStore; force on-brand light text */
.pdp-title,.df-pdp .product_title,.df-pdp h1.pdp-title{color:var(--df-text)!important}
/* #10 — quantity input showed a browser-default white box; match the dark stepper */
.pdp-qty__input,.df-pdp input.qty,.df-pdp .quantity input[type=number]{background:transparent!important;color:var(--df-text)!important;border:0}