/* ============================================================
   PRODUTO — page specific styles
   ============================================================ */
.crumbs{padding:clamp(120px,15vw,150px) 0 0}
.crumbs .container{display:flex;gap:10px;align-items:center;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-4);flex-wrap:wrap}
.crumbs a{color:var(--ink-soft)}.crumbs a:hover{color:var(--gold-4)}

.product{padding:clamp(26px,4vw,46px) 0 clamp(60px,8vw,100px)}
.product .container{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,76px);align-items:start}

/* gallery */
.gallery{display:grid;grid-template-columns:80px 1fr;gap:16px}
.thumbs{display:flex;flex-direction:column;gap:12px}
.thumb{padding:0;border:1px solid var(--line);background:none;overflow:hidden;cursor:pointer;transition:.3s var(--ease)}
.thumb .ph{aspect-ratio:3/4;width:100%}
.thumb img{aspect-ratio:3/4;width:100%;object-fit:cover;display:block}
.thumb.active{border-color:var(--gold-4)}
.thumb:hover{border-color:var(--gold-2)}
.main-img{position:relative;overflow:hidden}
.main-img .ph{aspect-ratio:3/4;width:100%}
.main-img img{aspect-ratio:3/4;width:100%;object-fit:cover;object-position:50% 18%;display:block}
.main-img .tag{position:absolute;top:18px;left:18px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;background:rgba(249,240,232,.92);color:var(--gold-4);padding:7px 13px;border-radius:50px;z-index:2}

/* info */
.pinfo .season{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-4);display:block;margin-bottom:18px}
.pinfo h1{font-weight:200;text-transform:uppercase;font-size:clamp(34px,5vw,62px);line-height:1;letter-spacing:.01em;margin-bottom:18px}
.pinfo .lead{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2vw,23px);color:var(--ink-soft);margin-bottom:30px;line-height:1.45}
.pinfo .desc{color:var(--ink-soft);font-size:15.5px;margin-bottom:32px;max-width:46ch}

/* price */
.pricebar{display:flex;align-items:baseline;gap:14px;margin-bottom:30px}
.pricebar .now{font-size:clamp(22px,3vw,30px);font-weight:300;color:var(--ink)}
.pricebar .was{font-size:16px;color:var(--ink-soft);text-decoration:line-through;opacity:.7}
.pricebar .off{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--gold-4);padding:5px 10px;border-radius:50px}

.spec{border-top:1px solid var(--line);padding:18px 0;display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:baseline}
.spec:last-of-type{border-bottom:1px solid var(--line)}
.spec dt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-4)}
.spec dd{font-size:14.5px;color:var(--ink)}

.sizes{margin:34px 0 30px}
.sizes .slbl{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.sizes .slbl span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-4)}
.sizes .slbl a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.size-row{display:flex;gap:10px;flex-wrap:wrap}
.size{width:54px;height:54px;border:1px solid var(--line);background:none;font-family:var(--font);font-size:13px;
  letter-spacing:.08em;color:var(--ink);transition:.3s var(--ease)}
.size:hover{border-color:var(--gold-4)}
.size.active{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.size[disabled]{opacity:.35;cursor:not-allowed;text-decoration:line-through}

.buybar{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.buybar .btn{flex:1;justify-content:center;min-width:200px}
.note{font-size:12.5px;color:var(--ink-soft);display:flex;align-items:center;gap:8px;letter-spacing:.02em}
.note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-grad);display:inline-block}

/* related */
.related{background:var(--cream-2)}
.rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.rel{display:block;text-decoration:none}
.rel .ph{aspect-ratio:3/4;width:100%;margin-bottom:14px;transition:transform 1s var(--ease)}
.rel img{aspect-ratio:3/4;width:100%;object-fit:cover;object-position:50% 18%;display:block;margin-bottom:14px;transition:transform 1s var(--ease)}
.rel:hover .ph,.rel:hover img{transform:scale(1.04)}
.rel h4{font-weight:300;font-size:15px;margin-bottom:3px}
.rel span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-4)}

/* lead modal */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-bg{position:absolute;inset:0;background:rgba(8,7,5,.55);backdrop-filter:blur(6px);opacity:0;transition:opacity .4s}
.modal.open .modal-bg{opacity:1}
.modal-card{position:relative;z-index:2;background:var(--cream);width:min(560px,100%);max-height:92vh;overflow:auto;
  padding:clamp(32px,5vw,52px);transform:translateY(20px) scale(.98);opacity:0;transition:.45s var(--ease)}
.modal.open .modal-card{transform:none;opacity:1}
.modal-card .x{position:absolute;top:20px;right:20px;background:none;border:0;font-size:24px;color:var(--ink-soft);line-height:1}
.modal-card .eyebrow{display:block;margin-bottom:14px}
.modal-card h3{font-weight:200;text-transform:uppercase;font-size:clamp(26px,3.4vw,38px);line-height:1.05;margin-bottom:10px}
.modal-card .sub{color:var(--ink-soft);font-size:14.5px;margin-bottom:28px}

.field{margin-bottom:18px}
.field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-4);margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;font-family:var(--font);font-size:15px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0;transition:.3s var(--ease)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold-4)}
.field textarea{resize:vertical;min-height:70px}
.field.err input,.field.err textarea{border-color:#b4452f}
.field .msg{font-size:11px;color:#b4452f;margin-top:6px;display:none}
.field.err .msg{display:block}
/* Snowboard AJAX validation injects [data-validate-for] only when the field is
   invalid, so show it whenever present and flag the input. */
.field .msg[data-validate-for]{display:block}
.field:has([data-validate-for]) input,
.field:has([data-validate-for]) textarea,
.field:has([data-validate-for]) select{border-color:#b4452f}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.modal-card .btn{width:100%;justify-content:center;margin-top:8px}
.success{text-align:center;padding:14px 0}
.success .ring{width:64px;height:64px;border-radius:50%;border:1px solid var(--gold-4);display:flex;align-items:center;justify-content:center;margin:0 auto 24px}
.success .ring svg{width:26px;height:26px}
.success h3{margin-bottom:12px}
.success p{color:var(--ink-soft);font-size:15px;max-width:34ch;margin:0 auto 26px}

@media (max-width:860px){
  .product .container{grid-template-columns:1fr;gap:30px}
  .gallery{grid-template-columns:64px 1fr}
  .rel-grid{grid-template-columns:repeat(2,1fr)}
  .row2{grid-template-columns:1fr}
}