/* eThobe product page — from ethobe-product-page-preview.html.
   Scoped to .eth-pdp: .product, .buy, .opt and .size would otherwise collide
   with the theme's own rules. */

.eth-pdp{background:var(--bg)}

.eth-pdp .product{display:grid; grid-template-columns:7fr 5fr; grid-template-rows:auto 1fr; grid-template-areas:"gallery phead" "gallery buy"; gap:0 52px; align-items:start; padding-block:28px 64px}
.eth-pdp .phead{grid-area:phead; min-width:0}
.eth-pdp .buy{grid-area:buy; min-width:0}
.eth-pdp .gallery{grid-area:gallery; display:grid; grid-template-columns:86px 1fr; gap:14px; position:sticky; top:96px}
.eth-pdp .thumbs{display:flex; flex-direction:column; gap:10px; max-height:640px; overflow-y:auto; scrollbar-width:thin}
.eth-pdp .thumb{border:1px solid var(--line); background:var(--card); padding:0; cursor:pointer; flex:0 0 auto; transition:border-color .15s}
.eth-pdp .thumb img{width:84px; aspect-ratio:2/3; object-fit:cover}
.eth-pdp .thumb[aria-selected="true"]{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.eth-pdp .thumb:hover{border-color:var(--accent-deep)}
.eth-pdp .stage{position:relative; border:1px solid var(--line); background:var(--card); overflow:hidden; cursor:zoom-in}
.eth-pdp .stage > img{width:100%; height:auto; aspect-ratio:1200/1800; object-fit:contain; background:var(--card); transition:transform .25s ease; transform-origin:center}
.eth-pdp .stage.zoomed > img{transform:scale(2); transition:none}
.eth-pdp .stage .badge{z-index:2}
.eth-pdp .phead .pcat{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:600; margin:0 0 10px}
.eth-pdp .phead .pcat a:hover{color:var(--accent-deep)}
.eth-pdp .phead h1{font-size:28px; line-height:1.25; margin-bottom:12px}
.eth-pdp .pprice{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px}
.eth-pdp .pprice .now{font-family:var(--display); font-size:27px; color:var(--accent-deep)}
.eth-pdp .pprice .was{color:var(--muted); text-decoration:line-through; font-size:16px}
.eth-pdp .pprice .save{background:var(--sale); color:#fff; font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px}
.eth-pdp .stock{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--accent-deep); font-weight:500; margin-bottom:20px}
.eth-pdp .stock::before{content:""; width:8px; height:8px; border-radius:50%; background:#3e7a44}
.eth-pdp .plead{color:var(--muted); font-size:15px; margin:0 0 26px; max-width:52ch}
.eth-pdp .plead a{color:var(--accent-deep); border-bottom:1px solid var(--accent)}
.eth-pdp .opt{margin-bottom:22px}
.eth-pdp .opt-label{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); margin-bottom:11px}
.eth-pdp .opt-label .sel{color:var(--accent-deep); text-transform:none; letter-spacing:.02em; font-weight:500}
.eth-pdp .opt-label .guide-link{font-size:12px; letter-spacing:.04em; text-transform:none; font-weight:500; color:var(--accent-deep); border-bottom:1px solid var(--accent); cursor:pointer; background:none; padding:0; font-family:var(--body)}
.eth-pdp .opt-label .guide-link:hover{color:var(--ink); border-color:var(--ink)}
.eth-pdp .swatches{display:flex; gap:12px}
.eth-pdp .swatch{position:relative; cursor:pointer}
.eth-pdp .swatch input{position:absolute; opacity:0; inset:0; cursor:pointer}
.eth-pdp .swatch span{display:flex; align-items:center; gap:9px; border:1px solid var(--line); background:var(--card); padding:9px 16px 9px 10px; font-size:14px; font-weight:500; transition:border-color .15s}
.eth-pdp .swatch .dot{width:22px; height:22px; border-radius:50%; border:1px solid rgba(35,29,18,.25); padding:0}
.eth-pdp .swatch input:checked + span{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.eth-pdp .swatch input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.eth-pdp .swatch:hover span{border-color:var(--accent-deep)}
.eth-pdp .sizes{display:flex; gap:10px; flex-wrap:wrap}
.eth-pdp .size{position:relative; cursor:pointer}
.eth-pdp .size input{position:absolute; opacity:0; inset:0; cursor:pointer}
.eth-pdp .size span{display:grid; place-items:center; min-width:54px; padding:11px 10px; border:1px solid var(--line); background:var(--card); font-weight:500; font-size:15px; transition:all .15s}
.eth-pdp .size input:checked + span{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.eth-pdp .size input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.eth-pdp .size:hover span{border-color:var(--ink)}
.eth-pdp .mtm{margin-top:14px; border:1px solid var(--line); background:var(--card)}
.eth-pdp .mtm-toggle{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; cursor:pointer}
.eth-pdp .mtm-toggle input{width:17px; height:17px; accent-color:var(--accent); margin-top:3px; flex:0 0 auto; cursor:pointer}
.eth-pdp .mtm-toggle b{display:block; font-size:14px; font-weight:600; letter-spacing:.02em}
.eth-pdp .mtm-toggle small{display:block; font-size:12.5px; color:var(--muted); line-height:1.45}
.eth-pdp .mtm.active{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.eth-pdp .mtm-fields{display:none; border-top:1px solid var(--line); background:var(--panel); padding:16px}
.eth-pdp .mtm.active .mtm-fields{display:block}
.eth-pdp .mtm-unit{display:flex; align-items:center; gap:10px; margin-bottom:14px; font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep)}
.eth-pdp .mtm-unit select{border:1px solid var(--line); background:var(--card); padding:7px 10px; font:inherit; font-size:13.5px; color:var(--ink)}
.eth-pdp .mtm-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.eth-pdp .mtm-grid label{display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink)}
.eth-pdp .mtm-grid input{border:1px solid var(--line); background:var(--card); padding:10px 12px; font:inherit; width:100%; -moz-appearance:textfield}
.eth-pdp .mtm-grid input::-webkit-outer-spin-button, .eth-pdp .mtm-grid input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.eth-pdp .mtm-note{margin:14px 0 0; font-size:12.5px; color:var(--muted); line-height:1.5}
.eth-pdp .mtm-note a{color:var(--accent-deep); border-bottom:1px solid var(--accent)}
.eth-pdp .buy-row{display:flex; gap:12px; margin:26px 0 14px}
.eth-pdp .qty{display:flex; border:1px solid var(--line); background:var(--card)}
.eth-pdp .qty button{width:44px; border:0; background:none; font-size:19px; color:var(--muted); cursor:pointer; font-family:var(--body)}
.eth-pdp .qty button:hover{color:var(--accent-deep)}
.eth-pdp .qty input{width:48px; border:0; text-align:center; font:inherit; font-weight:600; background:none; -moz-appearance:textfield}
.eth-pdp .qty input::-webkit-outer-spin-button, .eth-pdp .qty input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.eth-pdp .wish-link{display:inline-flex; gap:8px; align-items:center; font-size:13.5px; font-weight:500; color:var(--muted)}
.eth-pdp .wish-link:hover{color:var(--accent-deep)}
.eth-pdp .wish-link svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.6}
.eth-pdp .pacc details{border-top:1px solid var(--line)}
.eth-pdp .pacc details:last-child{border-bottom:1px solid var(--line)}
.eth-pdp .pacc summary{cursor:pointer; list-style:none; padding:17px 34px 17px 0; font-weight:600; font-size:14px; letter-spacing:.08em; text-transform:uppercase; position:relative}
.eth-pdp .pacc summary::-webkit-details-marker{display:none}
.eth-pdp .pacc summary::after{content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); color:var(--accent); font-size:21px; font-weight:300}
.eth-pdp .pacc details[open] summary::after{content:"–"}
.eth-pdp .pacc .body{padding:0 0 20px; color:var(--muted); font-size:14.5px}
.eth-pdp .pacc .body ul{margin:8px 0 0; padding-left:19px; display:flex; flex-direction:column; gap:6px}
.eth-pdp .pacc .body a{color:var(--accent-deep); border-bottom:1px solid var(--accent)}
.eth-pdp .pacc .body p{margin:0 0 10px}
.eth-pdp .pacc .body p:last-child{margin-bottom:0}
.eth-pdp .pay-strip{display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-bottom:26px}
.eth-pdp .pay-strip span{border:1px solid var(--line); background:var(--card); padding:3px 9px; font-size:10.5px; letter-spacing:.06em; color:var(--muted)}
.eth-pdp .pay-strip em{font-style:normal; font-size:12px; color:var(--muted); margin-right:4px}
.eth-pdp .detail-grid{display:grid; grid-template-columns:7fr 5fr; gap:52px; align-items:start}
.eth-pdp .prose h2{font-size:clamp(22px,2.6vw,30px); margin-bottom:16px}
.eth-pdp .prose h3{font-size:20px; margin:26px 0 10px}
.eth-pdp .prose p{color:var(--muted); margin:0 0 14px}
.eth-pdp .prose a{color:var(--accent-deep); border-bottom:1px solid var(--accent)}
.eth-pdp .featlist{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:11px}
.eth-pdp .featlist li{display:flex; gap:11px; align-items:flex-start; color:var(--muted)}
.eth-pdp .featlist li::before{content:""; flex:0 0 auto; width:7px; height:7px; background:var(--accent); margin-top:9px}
.eth-pdp .featlist b{color:var(--ink); font-weight:500}
.eth-pdp .spec-card{border:1px solid var(--line); background:var(--card)}
.eth-pdp .spec-card h3{font-size:18px; padding:18px 22px; border-bottom:1px solid var(--line); background:var(--panel)}
.eth-pdp .spec-card table{width:100%; border-collapse:collapse; font-size:14.5px}
.eth-pdp .spec-card th{text-align:left; font-weight:600; color:var(--ink); padding:12px 22px; width:42%; vertical-align:top; border-top:1px solid var(--line)}
.eth-pdp .spec-card td{padding:12px 22px 12px 0; color:var(--muted); border-top:1px solid var(--line)}
.eth-pdp .spec-card tr:first-child th, .eth-pdp .spec-card tr:first-child td{border-top:0}
.eth-pdp .care-note{margin-top:22px; border-left:3px solid var(--accent); background:var(--panel); padding:16px 18px; font-size:14px; color:var(--muted)}
.eth-pdp .care-note b{color:var(--ink)}
.eth-pdp .look-links{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.eth-pdp .look-links a{border:1px solid var(--line); background:var(--card); padding:9px 16px; font-size:13.5px; font-weight:500}
.eth-pdp .look-links a:hover{border-color:var(--accent); color:var(--accent-deep)}

@media (max-width:420px){
  .eth-pdp .mtm-grid{grid-template-columns:1fr}
}

@media (max-width:1060px){
  .eth-pdp .product{grid-template-columns:1fr; grid-template-rows:auto; grid-template-areas:"phead" "gallery" "buy"; gap:26px}
  .eth-pdp .phead h1{font-size:clamp(20px,4.6vw,25px)}
  .eth-pdp .phead .stock{margin-bottom:0}
  .eth-pdp .gallery{position:static}
  .eth-pdp .detail-grid{grid-template-columns:1fr; gap:36px}
}

@media (max-width:760px){
  .eth-pdp .gallery{grid-template-columns:1fr; gap:10px}
  .eth-pdp .thumbs{flex-direction:row; order:2; max-height:none; overflow-x:auto; overflow-y:hidden; padding-bottom:4px}
  .eth-pdp .thumb img{width:72px}
  .eth-pdp .product{padding-block:18px 48px}
  .eth-pdp .buy-row{flex-wrap:wrap}
}

/* ---- added for the live page -------------------------------------------- */

/* Breadcrumb sits inside the wrapper so it shares the background rather than
   forming a band of its own. */
.eth-pdp .pcrumb{padding-block:14px 0;font-size:13px;color:var(--muted)}
.eth-pdp .pcrumb a{color:var(--muted)}
.eth-pdp .pcrumb a:hover{color:var(--accent-deep)}
.eth-pdp .pcrumb .sep{margin:0 7px;color:var(--line)}
.eth-pdp .pcrumb [aria-current]{color:var(--ink)}
.eth-pdp .product{padding-top:18px}

.eth-pdp .pay-strip img{height:22px;width:auto;display:block}

.eth-pdp .wish-link{display:inline-flex;align-items:center;gap:7px;margin-bottom:22px;font-size:13.5px;color:var(--muted)}
.eth-pdp .wish-link svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}
.eth-pdp .wish-link:hover{color:var(--accent-deep)}

/* Twelve related products render, four show; product.js shuffles them. */
.eth-pdp .rel-grid > :nth-child(n+5){display:none}

/* Combinations BigCommerce doesn't stock, from its own variant data. */
.eth-pdp [data-eth-opt].is-off{opacity:.35}
.eth-pdp [data-eth-opt].is-off span{text-decoration:line-through}
.eth-pdp .stock.is-out{color:var(--sale)}
.eth-pdp .atc:disabled{opacity:.5;cursor:not-allowed}

/* The panel is closed until the box is ticked. */
.eth-pdp .mtm-note{margin:12px 0 0;font-size:12.5px;color:var(--sale);line-height:1.45}
.eth-pdp .mtm-note:empty{display:none}
.eth-pdp .mtm-fee{color:var(--accent-deep);white-space:nowrap}

/* ---- trust points: icon, heading, description, stacked ------------------- */
/* Side by side left the headings wrapping over three words in a narrow
   column. Stacking gives each line its full width. */


/* The panels now sit inside the buy column, under the trust points. */
.eth-pdp .buy .pacc{margin-top:26px;border-top:1px solid var(--line)}

/* ---- trust points -------------------------------------------------------- */
/* Child selectors throughout. The previous rules used `.assure div`, which
   also matched the wrapper holding the heading and text — that wrapper is the
   tile's second child, so :nth-child(even) drew a border down its left side
   and the padding applied twice. */

.eth-pdp .assure{border:1px solid var(--line);background:var(--card);display:grid;grid-template-columns:1fr 1fr;margin-bottom:26px}
.eth-pdp .assure > div{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:20px 18px}

/* Only the dividers between tiles, nothing inside them. */
.eth-pdp .assure > div:nth-child(n+3){border-top:1px solid var(--line)}
.eth-pdp .assure > div:nth-child(even){border-left:1px solid var(--line)}

.eth-pdp .assure > div > div{border:0;padding:0;display:block}
.eth-pdp .assure svg{width:22px;height:22px;stroke:var(--accent-deep);fill:none;stroke-width:1.5;flex:0 0 auto;display:block}
.eth-pdp .assure b{display:block;font-size:14px;font-weight:600;line-height:1.3;margin-bottom:4px;color:var(--ink)}
.eth-pdp .assure span{display:block;font-size:12.5px;color:var(--muted);line-height:1.5}
.eth-pdp .assure a{border-bottom:1px solid var(--accent);color:var(--accent-deep)}

@media (max-width:760px){
  .eth-pdp .assure{grid-template-columns:1fr}
  .eth-pdp .assure > div:nth-child(even){border-left:0}
  .eth-pdp .assure > div:nth-child(n+2){border-top:1px solid var(--line)}
}

/* The short description justified, like the body copy further down. */
.eth-pdp .plead,
.eth-pdp .plead p,
.eth-pdp .plead li{text-align:justify;text-justify:inter-word;hyphens:auto}

/* Bullets for the short and full descriptions; Kalles base.css sets
   ul{list-style:none} site-wide. */
.eth-pdp .plead ul,
.eth-pdp .pdp-desc ul{list-style:disc;padding-left:20px;margin:0 0 14px}
.eth-pdp .plead ul{margin-bottom:0}
.eth-pdp .plead li::marker,
.eth-pdp .pdp-desc li::marker{color:#9a7733}

/* Descriptions come from the BC editor with inline text-align:center. */
.eth-pdp .pdp-desc,
.eth-pdp .pdp-desc *{text-align:left !important}

/* Kalles base.css gives every table margin-bottom:35px. */
.eth-pdp .spec-card table{margin-bottom:0}
.eth-pdp .spec-card td{padding-left:16px}

/* Colour options white, and black once chosen, the same as the sizes. */
.eth-pdp .swatch span{transition:all .15s}
.eth-pdp .swatch:hover span{border-color:var(--ink)}
.eth-pdp .swatch input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--bg);box-shadow:none}
.eth-pdp .swatch input:checked + span .dot{border-color:rgba(255,255,255,.75)}

/* Thumbnails still scroll, without the bar. */
.eth-pdp .thumbs{scrollbar-width:none}
.eth-pdp .thumbs::-webkit-scrollbar{display:none}

.eth-pdp .stage.zoomed{cursor:zoom-out}

/* Product page wishlist toggle, filled once saved. */
.eth-pdp .wish-link[aria-pressed="true"]{color:var(--accent-deep)}
.eth-pdp .wish-link[aria-pressed="true"] svg{fill:var(--accent);stroke:var(--accent)}

/* An option left unchosen when Add to Cart was pressed (product.js): the
   group gets a red frame and shakes, with a filled alert under it, and the
   same line repeats under the button. */
.eth-pdp .opt.is-missing{outline:2px solid var(--sale); outline-offset:8px; background:rgba(157,58,38,.05)}
.eth-pdp .opt.is-missing .size span,
.eth-pdp .opt.is-missing .swatch span{border-color:var(--sale)}
.eth-pdp .opt.is-missing .opt-label > span{color:var(--sale)}
.eth-pdp .opt.is-shaking{animation:eth-shake .45s ease}
.eth-pdp .opt-error{display:flex; align-items:center; gap:9px; margin:14px 0 0; padding:10px 14px; background:var(--sale); color:#fff; font-size:14px; font-weight:600; letter-spacing:.02em}
.eth-pdp .opt-error::before{content:"!"; flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:#fff; color:var(--sale); display:grid; place-items:center; font-size:13px; font-weight:700; line-height:1}
.eth-pdp .buy-note.is-alert:not(:empty){color:var(--sale); font-weight:600}
@keyframes eth-shake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-7px)}
  40%,80%{transform:translateX(7px)}
}
@media (prefers-reduced-motion:reduce){
  .eth-pdp .opt.is-shaking{animation:none}
}

/* Add to Cart while the item is going in, and BigCommerce's refusal if any. */
.eth-pdp .atc.is-adding{opacity:.7;cursor:progress}
.eth-pdp .buy-note:not(:empty){margin:0 0 14px;font-size:13.5px;font-weight:500;color:var(--sale)}