/* =========================================================
   IRON ASCENSION - main stylesheet
   Sections:
   1. Fonts + design tokens (colours, widths)
   2. Base / reset
   3. Promo banner + header + mobile menu
   4. Buttons
   5. Hero + page heroes
   6. Sections, two-column layout, image panels
   7. Cards, category tiles, product cards
   8. Product detail page
   9. Cart page
   10. Forms, contact cards, FAQ
   11. Footer
   12. Popups, toasts, scroll animation
   13. Responsive breakpoints (tablet 850px, phone 560px)
   ========================================================= */

/* ---------- 1. Fonts + design tokens ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700;800&family=Bebas+Neue&family=Roboto+Condensed:wght@400;700&display=swap');

:root{
  --red:#C8102E;      /* brand red - buttons, highlights */
  --red-dark:#a80d26; /* button hover */
  --black:#111;
  --ink:#2d2d2d;      /* main text colour */
  --muted:#666;       /* secondary text */
  --soft:#f5f5f5;     /* light grey section background */
  --line:#e4e4e4;     /* borders */
  --green:#1f7a34;    /* success / in stock */
  --max:1200px;       /* max content width */
}

/* ---------- 2. Base / reset ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:#fff}
a{text-decoration:none;color:inherit}
img{max-width:100%}
button,input,textarea,select{font:inherit}
.container{width:min(var(--max),calc(100% - 40px));margin:auto}

/* ---------- 3. Promo banner + header ---------- */
.promo-banner{background:#111;color:#fff;overflow:hidden}
.promo-banner-track{position:relative;height:38px;display:flex;align-items:center;justify-content:center;padding:0 44px}
.promo-banner-msg{position:absolute;left:44px;right:44px;text-align:center;opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease;font:700 12px Montserrat;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.promo-banner-msg:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--red);margin-right:8px;vertical-align:middle}
.promo-banner-msg.active{opacity:1;transform:translateY(0)}

.header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)}
.nav{min-height:78px;display:flex;align-items:center;gap:28px;position:relative}
.brand-link{display:flex;align-items:center;gap:12px}
.logo{width:52px;height:52px;display:block}
.brand-text{font:800 18px Montserrat;letter-spacing:.5px;color:var(--ink)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:22px}
.navlinks{display:flex;gap:23px;align-items:center}
.navlinks a{font:700 12px Montserrat;text-transform:uppercase;letter-spacing:.4px}
.navlinks a:hover,.navlinks a.active{color:var(--red)}
.header-actions{display:flex;align-items:center;gap:8px}

/* Red cart button with a white item-count badge */
.cart-icon-link{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--red);border-radius:4px;width:42px;height:42px}
.cart-icon-link svg{width:20px;height:20px;stroke:#fff}
.cart-badge{position:absolute;top:-6px;right:-6px;background:#fff;color:var(--red);font:800 10px Montserrat;border-radius:999px;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;border:1.5px solid var(--red)}
.cart-badge[hidden]{display:none}

/* Hamburger button - hidden on desktop, shown under 850px */
.mobile-menu{display:none;border:0;background:none;padding:6px;cursor:pointer;color:var(--ink)}
.mobile-menu svg{width:24px;height:24px;display:block}
.navlinks.mobile-open{display:flex;position:absolute;left:-20px;right:-20px;top:78px;background:#fff;padding:20px;flex-direction:column;border-bottom:1px solid #ddd}

/* ---------- 4. Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 28px;border-radius:3px;font:700 12.5px Montserrat;letter-spacing:.6px;text-transform:uppercase;border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease,color .15s ease;white-space:nowrap}
.btn-red{background:var(--red);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.btn-red:hover{background:var(--red-dark);box-shadow:0 6px 16px rgba(200,16,46,.28);transform:translateY(-1px)}
.btn-black{background:#111;color:#fff}
.btn-black:hover{background:#000;transform:translateY(-1px)}
.btn-outline{border-color:#c9c9c9;color:var(--ink);background:transparent}
.btn-outline:hover{border-color:var(--ink);background:#fafafa}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn:active{transform:translateY(0)}
.btn-outline-light{color:#fff;border-color:#666}
.btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* ---------- 5. Hero (home) + page heroes (inner pages) ---------- */
.hero{min-height:650px;background:#111;color:#fff;display:flex;align-items:center;position:relative;overflow:hidden}
/* Photo sits on the right 52% of the hero, in black & white over a dark-red gradient */
.hero-art{position:absolute;inset:0 0 0 48%;background:linear-gradient(145deg,#252525,#090909 60%,#65091d)}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:top center;opacity:.55;mix-blend-mode:luminosity}
.hero-art:after{content:"BODYBUILDING  •  SCIENCE  •  DISCIPLINE";position:absolute;right:30px;bottom:35px;color:#777;font:800 11px Montserrat;letter-spacing:2px;transform:rotate(-90deg);transform-origin:right bottom}
.hero-content{position:relative;z-index:2;padding:95px 0;max-width:710px}
.eyebrow{color:var(--red);font:800 11px Montserrat;letter-spacing:2px;text-transform:uppercase}
.hero h1{font:800 clamp(48px,7vw,82px)/.98 Montserrat;margin:15px 0;letter-spacing:-2px}
.hero h1 span{color:var(--red)}
.hero p{max-width:600px;color:#bbb;font-size:18px;line-height:1.7}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}

.pagehero{background:#111;color:#fff;padding:70px 0;background-size:cover;background-position:center 8%;position:relative}
.pagehero.has-photo:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#111 25%,rgba(17,17,17,.55) 65%,rgba(17,17,17,.35))}
.pagehero .container{position:relative;z-index:1}
.pagehero h1{font:800 clamp(42px,5vw,65px) Montserrat;margin:10px 0}
.pagehero p{max-width:700px;color:#aaa;line-height:1.7}

/* ---------- 6. Sections + layout ---------- */
.section{padding:82px 0}
.gray{background:var(--soft)}
.black{background:#111;color:#fff}
.two{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}
h2{font:800 clamp(32px,4vw,50px)/1.06 Montserrat;color:#111;margin:10px 0 16px}
.black h2{color:#fff}
.lead{max-width:700px;color:var(--muted);line-height:1.75}
.black .lead{color:#aaa}
.body-copy{color:var(--muted);line-height:1.8;margin-bottom:16px}

/* Dark image panel - the photo fills it, the gradient shows while it loads */
.visual{min-height:410px;background:linear-gradient(145deg,#262626,#080808 55%,#68091d);overflow:hidden;position:relative}
.visual img{width:100%;height:100%;min-height:410px;object-fit:cover;object-position:center 20%;display:block;position:absolute;inset:0}
.visual.tall{min-height:520px}

.category-list{color:var(--muted);line-height:2;font-size:14px;padding-left:20px;margin:0 0 28px}

/* ---------- 7. Cards, category tiles, products ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-top:32px}
.card{background:#fff;border:1px solid var(--line);padding:24px;min-height:180px}
.card h3{font:700 18px Montserrat;margin:8px 0}
.card p{font-size:14px;line-height:1.6;color:var(--muted)}
.num{color:var(--red);font:800 24px Montserrat}

/* Category tiles on the Products page: the banner artwork fills the tile,
   a dark fade at the bottom keeps the "View products" text readable */
.category-index{grid-template-columns:repeat(3,1fr)}
.category{aspect-ratio:3/2;background:#111 center/cover;color:#fff;padding:22px 24px;display:flex;flex-direction:column;justify-content:end;position:relative;overflow:hidden;transition:transform .25s ease}
.category:hover{transform:translateY(-3px)}
.category .cat-banner{position:absolute;inset:0}
.category .cat-banner svg{width:100%;height:100%;display:block}
.category:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(6,6,6,.88) 100%)}
.category>span:not(.cat-banner){position:relative;z-index:1;color:#ccc;font-size:12px;font-weight:600;align-self:flex-end}
.category:hover>span:not(.cat-banner){color:#fff}
.category-photo{background-position:center 20%}
.category-photo>span{align-self:flex-start!important}
.category-photo h3{position:relative;z-index:1;font:800 30px 'Bebas Neue',Montserrat;letter-spacing:2px;margin:0 0 6px}

/* Full-width banner at the top of each category page */
.category-banner{width:100%;line-height:0;background:#050505}
.category-banner svg{width:100%;height:auto;max-height:420px;display:block}

.filter-row{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.filter-row h2{margin:0}
.catalog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:32px}
.product{border:1px solid var(--line);background:#fff;overflow:hidden;display:flex;flex-direction:column}
.product-image-link{display:block;background:#f1f1f1;aspect-ratio:1/1;overflow:hidden;position:relative}
.product-image-link svg{width:100%;height:100%;display:block;transition:transform .3s ease}
.product:hover .product-image-link svg{transform:scale(1.04)}
.product-info{padding:18px;display:flex;flex-direction:column;flex:1}
.product-info h3{font:700 16px Montserrat;margin:0 0 7px}
.product-info p{font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 8px;flex:1}
.product-category{font:800 10px Montserrat;letter-spacing:1.5px;color:var(--red);margin-bottom:7px;text-transform:uppercase}
.price{font-weight:800;color:var(--red);margin-top:8px}
.card-actions{display:flex;gap:10px;margin-top:15px}
.card-actions .btn{flex:1;padding:13px 12px;font-size:11px;letter-spacing:.4px}
.product-badge{position:absolute;top:12px;left:12px;z-index:2;background:var(--red);color:#fff;font:800 10px Montserrat;letter-spacing:1.2px;text-transform:uppercase;padding:6px 10px;border-radius:2px}
.empty-note{grid-column:1/-1;text-align:center;color:#888;padding:40px 0}

/* Search box */
.search-wrap{max-width:420px;margin:0 auto}
.search-input-row{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:4px;padding:0 14px;background:#fff}
.search-input-row:focus-within{border-color:var(--ink)}
.search-input-row svg{width:18px;height:18px;stroke:#888;flex-shrink:0}
.search-input-row input{flex:1;border:none;padding:13px 10px;font-size:14px;outline:none;background:transparent}
.search-wrap{position:relative}
/* Live results drop down under the search box */
.search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:0 12px 32px rgba(0,0,0,.14);max-height:360px;overflow-y:auto;z-index:150}
.search-results[hidden]{display:none}
.search-result-row{display:flex;align-items:center;gap:12px;padding:10px 14px;color:var(--ink);border-bottom:1px solid var(--soft)}
.search-result-row:last-child{border-bottom:none}
.search-result-row:hover,.search-result-row:focus{background:var(--soft);outline:none}
.search-result-img{width:40px;height:40px;border-radius:3px;overflow:hidden;flex-shrink:0;background:var(--soft)}
.search-result-img svg{width:100%;height:100%;display:block}
.search-result-name{font:700 13px Montserrat}
.search-result-meta{font-size:11px;color:#888}
.search-empty{padding:16px 14px;color:#888;font-size:13px;text-align:center}

/* ---------- 8. Product detail ---------- */
.back-link{display:inline-flex;align-items:center;gap:6px;font:700 12px Montserrat;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:18px}
.back-link:hover{color:var(--red)}
.detail-layout{gap:70px;align-items:start}
.detail-image-wrap{background:#f1f1f1;border:1px solid var(--line);aspect-ratio:1/1;overflow:hidden}
.detail-image-wrap svg{width:100%;height:100%;display:block}
.detail-info h2{margin:10px 0 14px}
.detail-price{font:800 25px Montserrat;color:var(--red);margin:0 0 16px}
.stock-text{display:inline-block;font:700 13px Montserrat;color:var(--green);margin-bottom:22px}
.detail-description{color:var(--muted);line-height:1.8;margin-bottom:28px}
.option-group{margin:0 0 24px}
.option-label{font:800 11px Montserrat;text-transform:uppercase;letter-spacing:.5px;color:#888;margin-bottom:12px}
.swatch-row{display:flex;flex-wrap:wrap;gap:10px}
.swatch{font:700 12px Montserrat;padding:10px 16px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;border-radius:3px}
.swatch:hover{border-color:var(--ink)}
.swatch.active{border-color:var(--red);color:var(--red);background:rgba(200,16,46,.05)}
.qty-row{display:flex;align-items:center;gap:12px;margin:0 0 28px}
.qty-row label{font:800 11px Montserrat;text-transform:uppercase}
.qty-stepper{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.qty-btn{background:#fff;border:none;width:38px;font:700 16px Montserrat;color:var(--ink);cursor:pointer}
.qty-btn:hover{background:var(--soft)}
.qty-value{width:46px;text-align:center;border-left:1px solid var(--line);border-right:1px solid var(--line);padding:10px 4px;font-weight:700}
.detail-actions{display:flex;gap:12px;flex-wrap:wrap}
.detail-block{border-top:1px solid var(--line);padding:17px 0;margin-top:28px}
.detail-block h3{font:800 12px Montserrat;text-transform:uppercase;letter-spacing:.5px;margin:0 0 10px}
.detail-block ul{padding-left:20px;color:var(--muted);line-height:1.8;margin:0}
.spec-table{border:1px solid var(--line);background:#fff;margin-top:6px}
.spec-row{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13.5px}
.spec-row:last-child{border-bottom:none}
.spec-label{color:#888;font-weight:600}
.spec-value{font-weight:700;text-align:right}

/* ---------- 9. Cart page ---------- */
.checkout-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:start}
.panel{border:1px solid var(--line);padding:26px;background:#fff}
.panel h3{font:800 18px Montserrat;margin:0 0 6px}
.cart-row{display:grid;grid-template-columns:56px 1fr auto auto auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-row:last-child{border-bottom:none}
.cart-row-img{width:56px;height:56px;background:#f1f1f1;border:1px solid var(--line);overflow:hidden}
.cart-row-img svg{width:100%;height:100%;display:block}
.cart-row-name{font:700 14px Montserrat}
.cart-row-unit{font-size:12px;color:var(--muted);margin-top:3px}
.cart-row-variant{font-size:12px;color:var(--red);margin-top:4px;font-weight:600}
.cart-row-total{font:800 14px Montserrat;color:var(--red);min-width:70px;text-align:right}
.cart-remove{border:none;background:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:4px 8px}
.cart-remove:hover{color:var(--red)}
.qty-stepper-sm .qty-btn{width:28px;font-size:14px}
.qty-stepper-sm .qty-value{width:34px;padding:6px 2px;font-size:13px}
.price-breakdown{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.price-row{display:flex;justify-content:space-between;font-size:14px;color:#555}
.price-row.discount{color:var(--green);font-weight:700}
.price-row.total{font:800 19px Montserrat;color:var(--ink);padding-top:10px;border-top:1px solid var(--line)}
.promo-nudge{background:rgba(31,122,52,.07);border:1px solid rgba(31,122,52,.25);color:var(--green);font-size:12.5px;font-weight:600;padding:10px 14px;border-radius:4px}
.empty-cart{text-align:center;padding:20px 0}
.empty-cart p{color:var(--muted);margin-bottom:20px}
.checkout-msg{margin-top:14px;padding:12px 14px;border-radius:4px;font-size:13px}
.checkout-msg.error{background:rgba(200,16,46,.08);color:var(--red)}
.checkout-msg.success{background:rgba(31,122,52,.1);color:var(--green)}

/* ---------- 10. Forms, contact cards, FAQ ---------- */
.form{max-width:760px}
.form label{display:block;font:800 12px Montserrat;margin-bottom:7px}
.form input,.form textarea,.form select{width:100%;padding:13px;border:1px solid #ccc;border-radius:4px;margin-bottom:18px;background:#fff}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--red);outline-offset:-1px;border-color:transparent}
.form textarea{min-height:140px;resize:vertical}
.form .btn{width:100%}

.contact-info-grid{display:flex;flex-direction:column;gap:14px;margin-bottom:28px}
.contact-info-item{display:flex;align-items:center;gap:16px;background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:16px 18px}
.contact-info-icon{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center}
.contact-info-icon svg{width:20px;height:20px;stroke:#fff}
.contact-info-label{font:800 10.5px Montserrat;text-transform:uppercase;letter-spacing:.5px;color:#888;margin-bottom:3px}
.contact-info-value{font:700 14.5px Montserrat;color:var(--ink);display:block}
a.contact-info-value:hover{color:var(--red)}

.faq-item{border-bottom:1px solid var(--line)}
.faq-question{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;background:none;border:none;text-align:left;cursor:pointer;font:700 15px Montserrat;color:var(--ink)}
.faq-icon{flex-shrink:0;width:20px;height:20px;position:relative}
.faq-icon:before,.faq-icon:after{content:"";position:absolute;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.faq-icon:before{left:0;top:9px;width:20px;height:2px}
.faq-icon:after{left:9px;top:0;width:2px;height:20px}
.faq-item.open .faq-icon:after{transform:rotate(90deg);opacity:0}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-answer p{color:var(--muted);line-height:1.75;padding:0 0 20px;margin:0;font-size:14px}

/* Legal pages */
.legal-content{max-width:760px}
.legal-content h2{font:800 18px Montserrat;margin:0 0 18px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.legal-content section{margin-bottom:44px;scroll-margin-top:100px}
.legal-content p,.legal-content li{color:#555;line-height:1.8;font-size:14px}

/* ---------- 11. Footer ---------- */
.footer{background:#111;color:#fff;padding:58px 0 22px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.footer img{width:64px;height:64px}
.footer-tagline{color:#aaa;line-height:1.6;max-width:340px}
.footer h4{font:700 12px Montserrat;text-transform:uppercase}
.footer-grid a{display:block;color:#aaa;margin:9px 0;font-size:13px}
.footer-grid a:hover{color:#fff}
.footer-social{display:flex;gap:12px;margin-top:16px}
.footer-grid .footer-social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff;margin:0;transition:background .15s ease}
.footer-grid .footer-social a:hover{background:var(--red)}
.footer-social svg{width:16px;height:16px}
.bottom{border-top:1px solid #333;margin-top:32px;padding-top:16px;color:#777;font-size:12px}

/* ---------- 12. Popups, toasts, scroll animation ---------- */
.welcome-popup-overlay{position:fixed;inset:0;z-index:9998;background:rgba(8,8,8,.72);display:flex;align-items:center;justify-content:center;padding:20px}
.welcome-popup-box{max-width:420px;width:100%;background:#fff;position:relative;padding:40px 32px;text-align:center}
.welcome-popup-close{position:absolute;top:14px;right:14px;border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:#999;padding:6px}
.welcome-popup-close:hover{color:var(--ink)}
.welcome-popup-box h2{font:800 22px Montserrat;margin:8px 0 10px}
.welcome-popup-box p{color:var(--muted);line-height:1.6;font-size:14px;margin:0 0 22px}
.welcome-popup-form{display:flex;flex-direction:column;gap:12px}
.welcome-popup-form input{padding:13px 14px;border:1px solid var(--line);font-size:14px}

.toast-container{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:9997;display:flex;flex-direction:column;gap:10px;align-items:center;width:100%;padding:0 16px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;background:#fff;border-radius:6px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:14px 18px;max-width:400px;width:100%;opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease;border-left:4px solid var(--green);font:600 13.5px Inter}
.toast.toast-in{opacity:1;transform:translateY(0)}
.toast.toast-error{border-left-color:var(--red)}

.reveal-on-scroll{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal-on-scroll.revealed{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.reveal-on-scroll{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- Merch photos with the printed crest ---------- */
.merch-photo{position:relative;width:100%;height:100%;overflow:hidden;background:#f1f1f1}
.merch-photo>img:first-child{width:100%;height:100%;object-fit:cover;display:block}
.merch-print{position:absolute;height:auto;pointer-events:none;opacity:.94}
.print-on-dark{mix-blend-mode:normal;opacity:.97}
.print-on-light{mix-blend-mode:multiply}
.print-on-glass{mix-blend-mode:screen}
.product:hover .merch-photo{transform:scale(1.04)}
.merch-photo{transition:transform .3s ease}

.photo-label{position:absolute;pointer-events:none}
.photo-label svg{width:100%;height:100%;display:block}
.mode-print{mix-blend-mode:multiply}
.mode-dark{mix-blend-mode:screen}
.mode-sticker{filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}

.merch-photo-light{background:#fff}
.merch-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(circle at 50% 40%,#262626,#0b0b0b 75%);color:#ddd;text-align:center;font:700 13px Montserrat}
.merch-placeholder>img.placeholder-crest{width:34%;height:auto;opacity:.9}
.merch-placeholder small{font:500 11px Inter;color:#888;letter-spacing:.3px}

/* ---------- 13. Responsive ---------- */
/* Tablet: hide the nav links behind the hamburger, stack two-column sections */
@media(max-width:850px){
  .navlinks{display:none}
  .mobile-menu{display:block}
  .two,.checkout-grid{grid-template-columns:1fr}
  .grid,.catalog-grid,.footer-grid,.category-index{grid-template-columns:1fr 1fr}
  .hero-art{inset:0;opacity:.35}
  .brand-section .visual{order:2}
  .detail-layout{gap:36px}
  .search-wrap{max-width:none}
}
/* Phone: single column everywhere, smaller header */
@media(max-width:560px){
  .container{width:calc(100% - 28px)}
  .section{padding:58px 0}
  .grid,.catalog-grid,.footer-grid,.category-index{grid-template-columns:1fr}
  .hero{min-height:680px}
  .hero h1{font-size:46px}
  .nav{gap:10px}
  .logo{width:38px;height:38px}
  .brand-text{font-size:12.5px;line-height:1.15}
  .nav-right{gap:8px}
  .cart-icon-link{width:36px;height:36px}
  .cart-icon-link svg{width:17px;height:17px}
  .mobile-menu svg{width:20px;height:20px}
  .navlinks.mobile-open{left:-14px;right:-14px}
  .promo-banner-track{padding:0 12px}
  .promo-banner-msg{left:12px;right:12px;font-size:10.5px}
  .visual,.visual img{min-height:340px}
  .cart-row{grid-template-columns:44px 1fr;column-gap:18px;row-gap:6px;grid-template-areas:"img info" "img qty" "img total" "img remove"}
  .cart-row-img{grid-area:img;width:44px;height:44px}
  .cart-row-info{grid-area:info}
  .qty-stepper-sm{grid-area:qty;justify-self:start}
  .cart-row-total{grid-area:total;text-align:left}
  .cart-remove{grid-area:remove;justify-self:start;padding-left:0}
  .panel{padding:20px}
}