/* Kings & Queens - product page (on top of main.css: tokens, type, buttons, header, menu, cursor, footer) */

.pdp section{position:relative}

/* ---------------- stage: identity | the watch | price ---------------- */
.pd-stage{min-height:100vh;padding:126px var(--m) 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:var(--g);overflow:hidden}
.pd-crumbs{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px;font:400 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);position:relative;z-index:2}
.pd-crumbs a{transition:color calc(var(--beat)*2) linear}
.pd-crumbs a:hover{color:var(--bronze)}
.pd-crumbs a:last-child{color:var(--ink)}       /* the watch's model: the closest collection */
.pd-ghost{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);font:400 clamp(220px,33vw,640px)/1 var(--display);letter-spacing:-.045em;color:var(--stone);opacity:.6;white-space:nowrap;pointer-events:none;z-index:0;will-change:transform}
.pd-id{grid-column:1;grid-row:2;align-self:center;position:relative;z-index:2;padding:40px 0}
.pd-title{margin-top:22px;font:400 clamp(56px,6vw,116px)/.94 var(--display);letter-spacing:-.02em}
.pd-title em{display:block;font-size:.62em;margin-top:.18em}
.pd-ref{margin-top:26px;font:400 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.pd-facts{margin-top:36px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px;border-top:1px solid rgba(18,21,18,.14)}
.pd-facts div{padding:16px 16px 16px 0;border-bottom:1px solid rgba(18,21,18,.14)}
.pd-facts dt{font:400 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
.pd-facts dd{margin-top:8px;font:400 21px/1.15 var(--display)}
.pd-hero{grid-column:2;grid-row:2;align-self:center;justify-self:center;position:relative;z-index:1;height:min(68vh,740px);padding:20px 0}
.pd-hero img{height:100%;width:auto;filter:drop-shadow(0 40px 46px rgba(18,21,18,.22)) drop-shadow(0 8px 12px rgba(18,21,18,.12));will-change:transform}
.pd-buy{grid-column:3;grid-row:2;align-self:center;justify-self:end;width:min(100%,390px);position:relative;z-index:2;padding:40px 0}
.pd-price{display:flex;align-items:flex-start;gap:6px;font:400 clamp(52px,4.6vw,86px)/1 var(--display);letter-spacing:-.02em;font-feature-settings:'lnum'}
.pd-cur{font-size:.46em;line-height:1.3;color:var(--bronze)}
.pd-note{margin-top:14px;font:400 15px/1.5 var(--sans);color:var(--graphite)}
.pd-ctas{margin-top:30px;display:grid;gap:10px}
.pd-ctas .btn{width:100%}
.pd-dep{margin-top:16px;font:400 13px/1.55 var(--sans);color:var(--graphite)}
.pd-talk{margin-top:28px;display:flex;flex-wrap:wrap;gap:22px}
.pd-talk .link svg.i{width:16px;height:16px}
.pd-open{display:block;margin-top:24px;font:400 11px/1.7 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
.pd-open .dot{margin-right:12px;vertical-align:1px}
.pd-open span + span{margin-left:.4em}
.pd-trust{grid-column:1 / -1;grid-row:3;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--g);margin-top:30px;border-top:1px solid rgba(18,21,18,.14);position:relative;z-index:2}
.pd-trust li{display:flex;align-items:center;gap:14px;padding:24px 0 30px;font:500 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.pd-trust svg.i{color:var(--bronze);width:22px;height:22px}

/* ---------------- shared section heads ---------------- */
.pd-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:clamp(44px,4.5vw,80px)}
.pd-head .h2{margin-top:20px}
.pd-count{font:400 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);white-space:nowrap}
.pd-count b{font-weight:400;color:var(--ink)}

/* ---------------- photographs ---------------- */
.pd-shots{padding:clamp(110px,10vw,180px) 0}
.pd-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);align-items:stretch}
.pd-shot{display:flex;flex-direction:column}
.pd-shot button{display:block;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--stone);cursor:pointer}
.pd-shot:first-child{grid-column:span 2;grid-row:span 2}
.pd-shot:first-child button{flex:1;aspect-ratio:auto}
.pd-shot img{width:100%;height:100%;object-fit:cover;transition:transform calc(var(--beat)*10) var(--sweep)}
.pd-shot button:hover img{transform:scale(1.035)}
.pd-shot figcaption{display:flex;gap:14px;padding-top:14px;font:400 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.pd-shot figcaption span{color:var(--bronze)}
.pd-ask{grid-column:span 2;display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:clamp(28px,3vw,52px);background:var(--hatton);color:var(--vellum);margin-bottom:28px}
.pd-ask p{font:400 clamp(24px,2.1vw,38px)/1.2 var(--display);max-width:520px}
.pd-ask .link{align-self:flex-start;color:var(--gilt)}

/* ---------------- details ---------------- */
.pd-details{padding:clamp(110px,10vw,180px) 0}
.pd-dgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
.pd-story{grid-column:1 / span 6}
.pd-story .h2{margin-top:20px}
.pd-paras{margin-top:clamp(30px,3vw,48px);max-width:640px}
.pd-paras p{font:400 17px/1.75 var(--sans);color:var(--graphite)}
.pd-paras p + p,.pd-more p{margin-top:20px}
.pd-paras > p:first-child{font:400 clamp(22px,1.7vw,28px)/1.4 var(--display);color:var(--ink)}
.pd-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows calc(var(--beat)*6) var(--sweep)}
.pd-more > div{overflow:hidden}
.pd-more.open{grid-template-rows:1fr}
.pd-more-btn{margin-top:28px;cursor:pointer}
.pd-more-btn svg.i{transition:transform calc(var(--beat)*3) var(--sweep)}
.pd-more-btn.open svg.i{transform:rotate(45deg)}
.pd-specs{grid-column:8 / span 5;align-self:start;border-top:1px solid rgba(18,21,18,.14);margin-top:clamp(40px,5vw,96px)}
.pd-specs div{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:16px;padding:17px 0;border-bottom:1px solid rgba(18,21,18,.14)}
.pd-specs dt{font:400 11px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
.pd-specs dd{font:400 16px/1.5 var(--sans)}

/* ---------------- our mark ---------------- */
.pd-mark{padding-top:clamp(110px,10vw,180px)}
.pd-mgrid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(30px,4vw,80px);align-items:center}
.pd-mgrid .h2{margin-top:20px;max-width:900px}
.pd-seal{width:clamp(110px,10vw,180px)}

/* ---------------- buying ---------------- */
.pd-buying{padding:clamp(110px,10vw,180px) 0}
.pd-bgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
.pd-bhead{grid-column:1 / span 5}
.pd-bhead .h2{margin-top:20px}
.pd-bintro{margin-top:30px;max-width:420px;font:400 17px/1.7 var(--sans);color:var(--graphite)}
.pd-bintro a{color:var(--ink);font-weight:500;transition:color calc(var(--beat)*2) linear} .pd-bintro a:hover{color:var(--bronze)}   /* in a sentence: weight, not a line */
.pd-accs{grid-column:7 / span 6;align-self:start;border-bottom:1px solid rgba(18,21,18,.16)}
.pd-acc{border-top:1px solid rgba(18,21,18,.16)}
.pd-acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 0;cursor:pointer;font:400 clamp(24px,2vw,36px)/1.15 var(--display)}
.pd-acc summary::-webkit-details-marker{display:none}
.pd-acc summary svg.i{width:22px;height:22px;color:var(--bronze);transition:transform calc(var(--beat)*3) var(--sweep)}
.pd-acc.is-open summary svg.i,.pd-acc[open]:not(.js-acc) summary svg.i{transform:rotate(45deg)}
.pd-acc-b{padding-bottom:30px;max-width:640px;overflow:hidden}
.pd-acc-b p{font:400 16px/1.7 var(--sans);color:var(--graphite)}
.pd-acc-b p + p{margin-top:16px}
.pd-acc-b strong{font-weight:500;color:var(--ink)}
.pd-acc-b a{color:var(--ink);font-weight:500;transition:color calc(var(--beat)*2) linear} .pd-acc-b a:hover{color:var(--bronze)}

/* ---------------- similar ---------------- */
.pd-similar{padding:clamp(110px,10vw,180px) 0 clamp(140px,12vw,220px)}
.pd-sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}

/* ---------------- sticky purchase bar ---------------- */
.pd-bar{position:fixed;left:50%;bottom:20px;z-index:60;width:min(880px,calc(100% - 2 * var(--m)));display:flex;align-items:center;gap:18px;padding:10px 10px 10px 12px;background:var(--hatton);color:var(--vellum);box-shadow:0 20px 50px rgba(5,10,7,.28);transform:translate(-50%,calc(100% + 40px));transition:transform calc(var(--beat)*5) var(--sweep)}
.pd-bar.on{transform:translate(-50%,0)}
.pd-bar img{width:40px;height:52px;object-fit:contain}
.pd-bar-t{flex:1;min-width:0;font:400 22px/1.1 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-bar-t em{color:var(--brass)}
.pd-bar-p{font:500 18px/1 var(--sans);font-feature-settings:'tnum';white-space:nowrap;margin-right:6px}
.pd-bar .btn{height:48px;padding:0 22px;font-size:12px}
.pd-bar .btn.ink{background:var(--garden)}

/* ---------------- viewer ---------------- */
.viewer{position:fixed;inset:0;z-index:94;display:grid;place-items:center;background:var(--hatton);color:var(--vellum);opacity:0;visibility:hidden;transition:opacity calc(var(--beat)*4) linear,visibility 0s linear calc(var(--beat)*4)}
.viewer.on{opacity:1;visibility:visible;transition:opacity calc(var(--beat)*4) linear}
.vw-fig{position:relative;height:calc(100vh - 150px);aspect-ratio:3/4;max-width:calc(100vw - 2 * var(--m) - 160px);overflow:hidden;background:var(--garden)}
.vw-img{width:100%;height:100%;object-fit:cover;transform-origin:50% 50%;transition:transform calc(var(--beat)*6) var(--sweep);will-change:transform}
.viewer.zoom .vw-img{transform:scale(2.2)}
.vw-cap{position:fixed;left:var(--m);bottom:30px;display:flex;align-items:baseline;gap:18px;font:400 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sage)}
.vw-n{color:var(--brass)}
.vw-x,.vw-prev,.vw-next{position:fixed;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(243,238,228,.28);cursor:pointer;transition:background-color calc(var(--beat)*2) linear,color calc(var(--beat)*2) linear}
.vw-x:hover,.vw-prev:hover,.vw-next:hover{background:var(--vellum);color:var(--hatton)}
.vw-x{right:var(--m);top:28px}
.vw-prev{left:var(--m);top:50%;margin-top:-29px}
.vw-next{right:var(--m);top:50%;margin-top:-29px}

/* ---------------- static capture / reduced motion ---------------- */
html.static .pd-bar{display:none}

/* ---------------- responsive ---------------- */
@media (max-width:1200px){
  .pd-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto}
  .pd-id{grid-column:1;grid-row:2;padding-bottom:10px}
  .pd-buy{grid-column:1;grid-row:3;justify-self:start;padding-top:10px}
  .pd-hero{grid-column:2;grid-row:2 / span 2;height:min(74vh,720px)}
  .pd-trust{grid-row:4}
  .pd-sgrid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:50px}
}
@media (max-width:900px){
  /* the stage, the watch first: the crumbs, the watch (--hero tall, so its name and price still make the first screen with
     Safari's toolbars showing), then its name, price and facts, then the buttons. The ghost reference is sized from the watch
     and centred behind it */
  .pd-stage{display:flex;flex-direction:column;min-height:0;padding-top:70px;--hero:clamp(220px,36vh,360px)}
  @supports (height:1svh){ .pd-stage{--hero:clamp(220px,36svh,360px)} }
  .pd-crumbs{order:-2;flex-wrap:nowrap;gap:8px;line-height:44px;white-space:nowrap;overflow-x:auto;scrollbar-width:none}   /* one line; each crumb a 44px tap */
  .pd-crumbs::-webkit-scrollbar{display:none}
  .pd-hero{order:-1;height:var(--hero);width:100%;margin-top:4px;padding:0}
  .pd-hero img{margin:0 auto;object-fit:contain}
  .pd-ghost{top:calc(118px + var(--hero) / 2);font-size:calc(var(--hero) * .5)}   /* 118px: the stage's 70 + the crumbs' 44 + 4, the watch's top */
  .pd-id{align-self:stretch;padding:20px 0 0}
  .pd-title{margin-top:14px;font-size:clamp(52px,14vw,84px)}
  .pd-ref{margin-top:16px}
  .pd-facts{max-width:none;margin-top:26px}
  .pd-buy{width:100%;padding:10px 0 30px}
  .pd-talk{gap:8px 22px}
  .pd-talk .link{min-height:44px}
  .pd-open{margin-top:10px}
  .pd-trust{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px}
  .pd-trust li{padding:18px 0;font-size:11px}
  .pd-shots,.pd-details,.pd-buying{padding:80px 0}
  .pd-mark{padding-top:80px}
  .pd-similar{padding:80px 0 110px}
  .pd-head{flex-direction:column;align-items:flex-start;gap:18px}
  .pd-head > .link{min-height:44px;margin:-14px 0}
  .pd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-shot:first-child{grid-row:auto}
  .pd-shot:first-child button{aspect-ratio:3/4;flex:none}
  .pd-shot:last-of-type:nth-of-type(even){grid-column:span 2}      /* an even count leaves the last photograph alone on its row: it takes the row */
  .pd-ask{margin-bottom:0}
  .pd-ask .link{min-height:44px;margin:-14px 0}
  .pd-story,.pd-specs,.pd-bhead,.pd-accs{grid-column:1 / -1}
  .pd-more-btn{min-height:44px;margin-top:14px}
  .pd-specs{margin-top:50px}
  .pd-bintro a{white-space:nowrap}
  .pd-accs{margin-top:46px}
  .pd-mgrid{grid-template-columns:1fr}
  /* four watches two to a row, the cards as the collection draws them on a phone (catalogue.css) */
  .pd-sgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 12px}
  .pd-sgrid .cc-meta{grid-template-columns:1fr}
  .pd-sgrid .cc-meta h3{font-size:21px}
  .pd-sgrid .cc-meta .p{font-size:15px}
  .pd-sgrid .cc-bp{display:none}
  .pd-bar{left:0;bottom:0;width:100%;transform:translateY(calc(100% + 30px));padding:10px var(--m) calc(10px + env(safe-area-inset-bottom));gap:12px}   /* +30px: no shadow left at the edge */
  .pd-bar.on{transform:none}
  .pd-bar img,.pd-bar-t,.pd-bar .btn.ink{display:none}
  .pd-bar-p{flex:1}
  .vw-fig{height:auto;width:100%;max-width:none;aspect-ratio:3/4;max-height:calc(100vh - 170px)}
  .vw-prev,.vw-next{top:auto;bottom:calc(22px + env(safe-area-inset-bottom));margin:0;width:50px;height:50px}
  .vw-prev{left:auto;right:calc(var(--m) + 60px)}
  .vw-cap{bottom:auto;top:calc(44px + env(safe-area-inset-top))}
  .vw-x{top:calc(28px + env(safe-area-inset-top));width:50px;height:50px}
}

/* ---------------- conversion additions (06-10): price on phones, rating, assurances, viewing, reviews, part-exchange ---------------- */
.pd-mprice{display:none}
.pd-rating{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.pd-rating b{font-weight:400;color:var(--ink)}
.pd-rating:hover{color:var(--ink)}
.pd-stars{color:var(--brass);letter-spacing:.12em;font-size:13px}
.pd-assure{list-style:none;margin-top:22px;display:grid;gap:10px;padding-top:20px;border-top:1px solid rgba(18,21,18,.12)}
.pd-assure li{display:flex;align-items:flex-start;gap:12px;font:400 13.5px/1.45 var(--sans);color:var(--graphite)}
.pd-assure svg.i{width:18px;height:18px;color:var(--bronze);margin-top:1px}
.pd-assure .pd-ship b{font-weight:500;color:var(--ink)}
.pd-talk{margin-top:22px;align-items:center}
.pd-viewing,.pd-px{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;box-shadow:inset 0 0 0 1px rgba(18,21,18,.18);transition:background-color calc(var(--beat)*2) linear,box-shadow calc(var(--beat)*2) linear}
.pd-viewing:hover,.pd-px:hover{background:var(--vellum);box-shadow:inset 0 0 0 1px var(--bronze)}
.pd-viewing svg.i,.pd-px svg.i{width:20px;height:20px;color:var(--bronze)}
.pd-viewing span,.pd-px span{flex:1;display:flex;flex-direction:column;gap:4px}
.pd-viewing b,.pd-px b{font:500 13px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.pd-viewing i,.pd-px i{font:400 12.5px/1.3 var(--sans);font-style:normal;color:var(--graphite)}
.pd-viewing svg.i:last-child,.pd-px svg.i:last-child{width:16px;height:16px;transition:transform calc(var(--beat)*3) var(--sweep)}
.pd-viewing:hover svg.i:last-child,.pd-px:hover svg.i:last-child{transform:translateX(4px)}
.pd-px{margin-top:34px;max-width:420px}
.pd-reviews{padding:clamp(110px,10vw,180px) 0}
.pd-rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.pd-rev{display:flex;flex-direction:column;justify-content:space-between;gap:34px;padding:clamp(26px,2.6vw,44px);background:var(--paper);box-shadow:inset 0 0 0 1px rgba(18,21,18,.08)}
.pd-rev blockquote{font:400 clamp(22px,1.75vw,30px)/1.3 var(--display)}
.pd-rev .pd-stars{font-size:15px}
.pd-rev figcaption{display:flex;flex-direction:column;gap:6px}
.pd-rev figcaption b{font:500 13px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.pd-rev figcaption span{font:400 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
@media (max-width:900px){
  .pd-mprice{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-top:14px}
  .pd-mprice span{font:400 40px/1 var(--display);letter-spacing:-.01em}
  .pdp[data-sold] .pd-mprice span{color:var(--graphite)}
  .pd-mprice a{font:400 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);padding:15px 0;margin:-15px 0}   /* a 44px tap, drawn as before */
  .pd-mprice i{font-style:normal;color:var(--brass)}
  .pd-buy > .pd-price,.pd-buy > .pd-rating{display:none}             /* the stage's buttons follow the name now: its price and rating (.pd-mprice) serve both */
  .pd-viewing b,.pd-px b{text-wrap:balance}
  .pd-reviews{padding:80px 0}
  .pd-rgrid{grid-template-columns:1fr}
}

/* ---------------- a watch that has sold (main.pdp[data-sold]): the live site's words and WhatsApp where the buttons were ---------------- */
.pdp[data-sold] .pd-num{color:var(--graphite)}
.pd-sold{margin-top:30px;padding:24px 22px 22px;box-shadow:inset 0 0 0 1px rgba(18,21,18,.18)}
.pd-sold-t{font:500 13px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.pd-sold-t + p{margin-top:10px;font:400 15px/1.5 var(--sans);color:var(--graphite)}
.pd-sold .btn{width:100%;margin-top:22px}

/* WooCommerce's notices in the buy panel (a reservation refused, a watch already in the basket): as the checkout draws them */
.pd-buy .woocommerce-notices-wrapper:empty{display:none}
.pd-buy .woocommerce-error,.pd-buy .woocommerce-message,.pd-buy .woocommerce-info{list-style:none;margin:16px 0 0;padding:14px 18px;border-radius:14px;font-size:14.5px;line-height:1.5}
.pd-buy .woocommerce-error{background:#FBF0EA;box-shadow:inset 0 0 0 1px rgba(154,63,47,.26);color:#6d3a2c}
.pd-buy .woocommerce-message,.pd-buy .woocommerce-info{background:rgba(38,66,45,.07);color:var(--heritage)}
.pd-buy .woocommerce-notices-wrapper a{color:var(--bronze)}