/* ============================================================
   Dino Signal — 製版房 · 產品規格頁 (WordPress build)

   The same world as press-home.css: paper, ink, crop marks,
   mono annotations. Written fresh for this template rather than
   extracted from the concept, because this page's form is the
   LEGACY markup (.item-cart / .option / select.select) reused
   verbatim for parity — the design has to come to it.

   Palette is Dino Signal's (docs/company/brand.md): Signal Yellow
   #FCBA02 on Ink #111827. Same rule as the home sheet — the yellow
   fills, the ink writes.
   ============================================================ */

@font-face{
  font-family:"Space Grotesk";
  src:url("fonts/space-grotesk.woff2") format("woff2");
  font-weight:500 700;font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/inter.woff2") format("woff2");
  font-weight:400 700;font-display:swap;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;overflow-x:hidden;}
img,svg{display:block;max-width:100%;}
h1,h2,h3,p{margin:0;}
a{color:inherit;}

:root{
  /* The --green-* names survive so the sheet below needs no rewrite; they all
     resolve to the ink foundation now. */
  --green:#111827; --green-deep:#0b1220; --green-tint:rgba(252,186,2,.14);
  --orange:#fcba02; --orange-text:#111827;
  --brand-lift:#ffd24d;
  --ink:#111827; --ink-soft:#374151;
  --paper:#f9fafb; --paper2:#f3f4f6;
  --line:rgba(17,24,39,.18); --line-strong:rgba(17,24,39,.42);
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --display:"Space Grotesk","Noto Sans TC","Microsoft JhengHei","PingFang HK",-apple-system,"Segoe UI",sans-serif;
  --sans:"Inter","Noto Sans TC","Microsoft JhengHei","PingFang HK",-apple-system,"Segoe UI",sans-serif;
  --ease-out-exp:cubic-bezier(.19,1,.22,1);
  --container:1240px;
}

body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.7;}
h1,h2,h3,.brand-text strong{font-family:var(--display);letter-spacing:-.015em;}
.container{width:min(100% - 2.5rem,var(--container));margin-inline:auto;}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase;}

/* Brand yellow ring, ink-backed so it clears 3:1 on the near-white sheet. */
:where(a,button,input,select,textarea):focus-visible{outline:3px solid var(--orange);outline-offset:2px;box-shadow:0 0 0 1px var(--ink);}

.skip-link{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.skip-link:focus{width:auto;height:auto;clip-path:none;z-index:99;background:var(--ink);color:#fff;padding:.8rem 1.2rem;}

/* --- chrome ------------------------------------------------- */
.site-head{border-bottom:1.5px solid var(--ink);background:var(--paper);}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px;}
.brand{display:flex;align-items:center;gap:.6rem;min-height:48px;text-decoration:none;}
/* Was a CSS-drawn two-tone square standing in for a logo. It is the real mark now. */
.brand-mark{width:34px;height:34px;flex:none;border-radius:6px;}
.brand-text{line-height:1.25;}
.brand-text strong{font-size:1rem;letter-spacing:.02em;}
.brand-text small{display:block;font-size:.68rem;color:var(--ink-soft);}
.chop{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.1rem;
  font-weight:700;text-decoration:none;border:1.5px solid var(--ink);}
.chop-wa{background:var(--green);color:#fff;}
.chop-wa:hover{background:var(--green-deep);}

.crumbs{display:flex;align-items:center;gap:.55rem;padding:.4rem 0;font-size:.82rem;color:var(--ink-soft);}
.crumbs a{display:inline-flex;align-items:center;min-height:48px;color:var(--ink-soft);text-decoration:none;}
.crumbs a:hover{color:var(--green);text-decoration:underline;}
.crumbs strong{color:var(--ink);}

/* --- the sheet ---------------------------------------------- */
.sheet{position:relative;overflow-x:clip;}
.product-sheet{background:#fff;border:1.5px solid var(--ink);margin-block:1.5rem 2.5rem;padding:clamp(1rem,3vw,2.5rem);}
.crop{position:absolute;width:18px;height:18px;border:0 solid var(--ink);}
.crop-tl{top:8px;left:8px;border-top-width:1.5px;border-left-width:1.5px;}
.crop-br{bottom:8px;right:8px;border-bottom-width:1.5px;border-right-width:1.5px;}

.product-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,3.5vw,3rem);align-items:start;}
@media (max-width:920px){.product-grid{grid-template-columns:1fr;}}

/* --- drawing panel ------------------------------------------ */
.draw-panel{border:1px solid var(--line);padding:1.25rem;background:var(--paper);}
.draw-title{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:.6rem;margin-bottom:.8rem;}
.draw-name{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:.01em;margin-bottom:.75rem;}
.draw-name .mono{margin-left:.5rem;}
.draw-stage svg{width:100%;height:auto;}
.dim-text{font-family:var(--mono);font-size:15px;fill:var(--ink);}
#dim-h-label{writing-mode:vertical-rl;}

.photo-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.6rem;margin-top:1rem;}
.photo-strip img{width:100%;height:96px;object-fit:cover;border:1px solid var(--line);background:#fff;}

/* --- configurator: legacy markup, press skin ------------------ */
.config-panel .item-cart{border:1.5px solid var(--ink);background:#fff;}
.config-panel .item-cart form{display:block;padding:1.25rem;}

.config-panel .price{background:transparent;border-bottom:1.5px solid var(--ink);margin:-1.25rem -1.25rem 1rem;padding:1rem 1.25rem;}
.config-panel .price h3{
  display:inline-block;background:var(--orange);color:var(--ink);
  font-family:var(--mono);font-size:clamp(1.4rem,3vw,1.9rem);font-weight:800;
  padding:.25rem .8rem;border:1.5px solid var(--ink);transform:rotate(-1deg);
}
.stamp-hit{animation:stamp .2s var(--ease-out-exp);}
@keyframes stamp{0%{transform:rotate(-1deg) scale(1.18);}100%{transform:rotate(-1deg) scale(1);}}
@media (prefers-reduced-motion:reduce){.stamp-hit{animation:none;}}

.config-panel .options{display:grid;gap:.9rem;}
.config-panel .option{display:grid;gap:.35rem;}
.config-panel .option label,
.config-panel .option .p-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase;}
.config-panel select,
.config-panel input[type="text"],
.config-panel input[type="number"]{
  width:100%;min-height:48px;padding:.55rem .7rem;
  font:inherit;font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-strong);border-radius:0;
}
.config-panel select:focus,.config-panel input:focus{border-color:var(--green);}
.config-panel select:hover,.config-panel input:hover{border-color:var(--ink);}

.config-panel .cart-input{display:flex;gap:.5rem;margin:1rem 0;}
.config-panel .cart-input button{
  width:48px;min-height:48px;flex:0 0 48px;font-size:1.3rem;line-height:1;cursor:pointer;
  background:var(--paper);border:1px solid var(--line-strong);color:var(--ink);
}
.config-panel .cart-input button:hover:not(.disable){background:var(--green-tint);border-color:var(--green);}
.config-panel .cart-input button.disable{opacity:.35;cursor:not-allowed;}
.config-panel .cart-input input.text{max-width:96px;text-align:center;}

.config-panel .item-button{
  width:100%;min-height:56px;cursor:pointer;
  background:var(--green);color:#fff;border:1.5px solid var(--ink);
  font:inherit;font-size:1.05rem;font-weight:800;letter-spacing:.06em;
}
.config-panel .item-button:hover{background:var(--green-deep);}

/* Legacy gallery inside the extracted block should not re-render here. */
.config-panel .thumbnail-container,.config-panel .tab4,.config-panel .navigation{display:none;}

/* --- copy + panels ------------------------------------------- */
.sheet-copy{border-top:1.5px solid var(--ink);margin-top:2rem;padding-top:1.5rem;}
.copy-lead{font-size:clamp(1.05rem,2vw,1.25rem);max-width:68ch;padding-left:.9rem;border-left:3px solid var(--green);margin-bottom:1.25rem;}
.copy-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;}
.copy-cols h2{font-size:1rem;font-weight:800;color:var(--green-deep);margin-bottom:.5rem;}
.copy-cols ul{margin:0;padding:0;list-style:none;display:grid;gap:.4rem;}
.copy-cols li{position:relative;padding-left:1.2rem;color:var(--ink-soft);}
.copy-cols li::before{content:"";position:absolute;left:.15rem;top:.66em;width:6px;height:6px;background:var(--green);}

.sheet-panels{border-top:1px solid var(--line);margin-top:1.75rem;padding-top:1.25rem;display:grid;gap:1.25rem;}
.sheet-panel{font-size:.95rem;max-width:75ch;}
.sheet-panel img{border:1px solid var(--line);}
.p-table-scroll{overflow-x:auto;}
.sheet-panel table{border-collapse:collapse;font-size:.85rem;}
.sheet-panel th,.sheet-panel td{border:1px solid var(--line);padding:.45rem .6rem;text-align:left;}
.sheet-panel th{background:var(--green-tint);}

/* --- footer -------------------------------------------------- */
.site-foot{background:var(--ink);color:rgba(255,255,255,.85);margin-top:2rem;padding:2.25rem 0 1.25rem;font-size:.9rem;}
.site-foot a{color:#fff;display:inline-flex;align-items:center;min-height:48px;}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.75rem;}
.site-foot h2{font-size:.95rem;color:#fff;margin-bottom:.4rem;}
.foot-legal{margin-top:1.5rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;color:rgba(255,255,255,.55);}

/* The WhatsApp enquiry button that lives inside the legacy editorial panels. */
.sheet-panel a.ebutton, a.ebutton{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 1.2rem;
  background:var(--green);color:#fff;font-weight:700;text-decoration:none;
  border:1.5px solid var(--ink);
}
.sheet-panel a.ebutton:hover, a.ebutton:hover{background:var(--green-deep);}

/* ============ DEMO RIBBON ============ (see press-home.css for the reasoning) */
.p-demo{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  background:var(--ink);color:rgba(249,250,251,.88);
  padding:.55rem clamp(1.1rem,4vw,3rem);
  font-size:.78rem;line-height:1.5;
}
.p-demo__tag{
  flex:none;background:var(--orange);color:var(--ink);
  font-family:var(--mono);font-weight:800;font-size:.7rem;letter-spacing:.12em;
  padding:.15rem .5rem;
}

/* ============================================================
   ARTWORK PROOF — upload, place, check resolution
   The sheet is a real proportional sheet: its aspect-ratio is set
   from the product's own width/height, so what the customer drags
   the artwork around inside IS the thing being quoted.
   ============================================================ */
.proof{margin-top:1.25rem;border:1px solid var(--line);background:#fff;padding:1rem;}
.proof-head{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:.55rem;margin-bottom:.9rem;}
.proof-head h2{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase;font-weight:700;}

.proof-res{font-size:.72rem;letter-spacing:.06em;font-weight:700;}
.proof-res.is-good{color:#166534;}
.proof-res.is-ok{color:#8a6100;}
.proof-res.is-low{color:#b42318;}

.proof-stage{position:relative;padding:0 2.6rem 1.9rem 0;}
.proof-sheet{
  position:relative;overflow:hidden;touch-action:none;cursor:grab;
  margin-inline:auto;width:150px;height:400px;
  background:
    /* the proof board: a light checker so a transparent PNG reads as transparent */
    repeating-conic-gradient(var(--paper2) 0% 25%, #fff 0% 50%) 0 0/16px 16px;
  border:1.5px solid var(--ink);
}
.proof-sheet.is-dragging{cursor:grabbing;}
.proof-sheet.is-over{outline:3px dashed var(--orange);outline-offset:-6px;}

.proof-art{position:absolute;inset:0;display:grid;place-items:center;transform-origin:50% 50%;}
.proof-art img{max-width:none;max-height:none;user-select:none;-webkit-user-drag:none;}

/* Guides sit ABOVE the artwork — they are the thing you are checking it against. */
.proof-guides{position:absolute;inset:0;pointer-events:none;}
.proof-bleed,.proof-safe{position:absolute;}
.proof-bleed{border:1px dashed rgba(180,35,24,.85);}
.proof-safe{border:1px dashed rgba(17,24,39,.5);}

.proof-empty{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:.4rem;
  padding:1rem;text-align:center;color:var(--ink-soft);font-size:.84rem;pointer-events:none;}
.proof-empty strong{font-size:.95rem;color:var(--ink);}

.proof-dim{position:absolute;color:var(--ink-soft);font-size:.7rem;letter-spacing:.06em;}
.proof-dim--w{left:0;right:2.6rem;bottom:.35rem;text-align:center;}
.proof-dim--h{right:.2rem;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;}

.proof-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:.9rem;}
.proof-file{display:inline-flex;}
.proof-file input{position:absolute;width:1px;height:1px;opacity:0;}
.proof-file span{display:inline-flex;align-items:center;min-height:48px;padding:0 1.1rem;
  background:var(--orange);color:var(--ink);font-weight:800;cursor:pointer;border:1.5px solid var(--ink);}
.proof-file input:focus-visible + span{outline:3px solid var(--orange);outline-offset:2px;box-shadow:0 0 0 1px var(--ink);}
.proof-name{font-size:.74rem;color:var(--ink-soft);min-width:0;overflow-wrap:anywhere;}
.proof-name.is-low{color:#b42318;font-weight:700;}

.proof-tools{margin-top:1rem;display:grid;gap:.8rem;border-top:1px solid var(--line);padding-top:.9rem;}
.proof-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;}
.proof-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase;}
.proof-label b{color:var(--ink);}

.proof-seg{display:inline-flex;border:1.5px solid var(--ink);}
.proof-seg button{min-height:44px;padding:0 .9rem;font:inherit;font-size:.86rem;font-weight:700;
  background:#fff;color:var(--ink);border-right:1px solid var(--line-strong);cursor:pointer;}
.proof-seg button:last-child{border-right:0;}
.proof-seg button.is-on{background:var(--orange);}

.proof-row input[type="range"]{flex:1;min-width:160px;accent-color:#fcba02;height:44px;}

.proof-row--btns{gap:.5rem;}
.proof-row--btns button{min-height:44px;padding:0 .85rem;font:inherit;font-size:.84rem;font-weight:700;
  background:#fff;border:1.5px solid var(--ink);color:var(--ink);cursor:pointer;}
.proof-row--btns button:hover{background:var(--orange);}

.proof-check{display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--ink-soft);min-height:44px;}
.proof-check input{width:18px;height:18px;accent-color:#fcba02;}

.proof-note{font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);line-height:1.6;}

@media (max-width:520px){
  .proof-stage{padding-right:1.8rem;}
  .proof-dim--w{right:1.8rem;}
}

/* The [hidden] attribute is only display:none in the UA sheet, so any display
   declaration in a class rule beats it. Without this the empty proof panel
   renders a broken-image icon and its alt text on top of the drop prompt. */
.proof-art[hidden],
.proof-empty[hidden],
.proof-tools[hidden],
.proof-guides[hidden]{display:none !important;}