/* Reusable components. The style guide page (/style-guide/) shows each one. */

/* Text pieces */
.eyebrow{display:block;font-family:var(--body);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:10px}
.h2{font-size:var(--fs-h2)}
.h-line{display:block;width:64px;height:1px;background:var(--gold);margin:16px auto 40px}
.lede{font-size:var(--fs-lg);line-height:1.6;color:var(--ink-2);max-width:56ch}

/* Buttons. Primary = gold fill, one per view. Secondary = gold outline. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;padding:0 28px;border-radius:var(--r-pill);border:1px solid transparent;font-weight:600;font-size:var(--fs-base);line-height:1;text-align:center;cursor:pointer;transition:background var(--t-fast) ease,border-color var(--t-fast) ease,color var(--t-fast) ease}
.btn .icon{width:20px;height:20px}
.btn-gold{background:var(--gold);color:var(--gold-ink)}
.btn-gold:hover{background:var(--gold-hover);color:var(--gold-ink)}
.btn-line{background:transparent;border-color:var(--gold);color:var(--ink)}
.btn-line:hover{background:var(--gold-soft);color:var(--ink)}
.btn-quiet{background:var(--panel);color:var(--ink)}
.btn-quiet:hover{background:var(--panel-2);color:var(--ink)}
.btn-sm{height:44px;padding:0 18px;font-size:var(--fs-md)}
.btn-block{display:flex;width:100%}
.btn[disabled],.btn.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn.is-loading{position:relative;color:transparent!important}
.btn.is-loading::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;border:2px solid var(--gold-ink);border-right-color:transparent;animation:spin .8s linear infinite}
.btn-line.is-loading::after{border-color:var(--gold);border-right-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}
.link-btn{border:0;background:none;padding:0;color:var(--ink-3);font-size:var(--fs-sm);text-decoration:underline;text-underline-offset:3px;min-height:40px;cursor:pointer}
.link-btn:hover{color:var(--ink)}

.icon-btn{width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid var(--line-strong);background:transparent;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;flex:none}
.icon-btn:hover{border-color:var(--gold);color:var(--ink)}
.icon-btn .icon{width:20px;height:20px}
.cart-btn{height:var(--tap);padding:0 18px;border-radius:var(--r-pill);border:1px solid var(--gold);background:transparent;color:var(--ink);display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:var(--fs-md)}
.cart-btn:hover{color:var(--ink);background:var(--gold-soft)}
.cart-btn .icon{width:20px;height:20px}
.cart-count{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--gold);color:var(--gold-ink);font-size:var(--fs-xs);font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.cart-btn.bump{animation:bump .5s ease}
@keyframes bump{40%{transform:scale(1.1)}}

/* Pills, filter chips, badges */
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:16px;border:1px solid rgba(236,220,196,.22);font-size:var(--fs-sm);color:var(--ink-2)}
.pill:hover{border-color:var(--gold);color:var(--ink)}
.chip-btn{flex:none;height:var(--tap);padding:0 18px;border-radius:var(--r-pill);border:1px solid rgba(236,220,196,.25);background:transparent;color:var(--ink-2);font-size:15px;display:inline-flex;align-items:center;gap:8px}
.chip-btn:hover{border-color:rgba(236,196,128,.6);color:var(--ink)}
.chip-btn[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);font-weight:600}
.chip-btn small{font-size:var(--fs-xs);opacity:.75;font-variant-numeric:tabular-nums}
.badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:11px;font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.02em;vertical-align:middle;white-space:nowrap}
.badge-gold{background:rgba(8,13,21,.72);color:var(--gold)}
.badge-soldout{background:var(--panel-2);color:var(--ink-3)}
.badge-placeholder{background:transparent;border:1px dashed var(--warn);color:var(--warn)}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s-4)}
.field label,.label{font-size:var(--fs-md);font-weight:500;color:var(--ink-2)}
.input,.select,.textarea,
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=search],input[type=number],input[type=url],select,textarea{width:100%;min-height:48px;padding:12px 16px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--night-2);color:var(--ink);font-size:var(--fs-base);transition:border-color var(--t-fast) ease}
textarea,.textarea{min-height:120px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(236,196,128,.18)}
select,.select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 17px) 50%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
input[type=checkbox],input[type=radio]{width:20px;height:20px;accent-color:var(--gold);cursor:pointer;flex:none}
.field-hint{font-size:var(--fs-sm);color:var(--ink-3)}
.field.has-error .input,.field.has-error input,input[aria-invalid=true]{border-color:var(--error)}
.field-error{font-size:var(--fs-sm);color:var(--error)}
.opt{display:flex;align-items:center;gap:12px;min-height:var(--tap);font-size:15px;color:var(--ink-2);cursor:pointer}
.opt small{margin-left:auto;color:var(--ink-3);font-variant-numeric:tabular-nums}
.search-form{display:flex;gap:8px;max-width:480px;width:100%}
.search-form .btn{height:48px;padding:0 18px;flex:none}
.qty{height:56px;border-radius:28px;border:1px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:space-between;padding:0 6px;min-width:128px}
.qty button{width:var(--tap);height:var(--tap);border:0;background:transparent;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.qty button:hover{background:var(--panel-2)}
.qty .icon{width:18px;height:18px}
.qty output,.qty input{width:40px;text-align:center;border:0;background:none;min-height:0;padding:0;font-variant-numeric:tabular-nums}

/* Messages */
.notice{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-radius:var(--r-md);background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--info);font-size:15px;color:var(--ink)}
.notice-success{border-left-color:var(--ok)}
.notice-error{border-left-color:var(--error)}
.notice-warn{border-left-color:var(--warn)}
.notice a{text-decoration:underline}
.toast{position:fixed;left:50%;bottom:calc(32px + env(safe-area-inset-bottom,0px));z-index:99;transform:translate(-50%,16px);opacity:0;background:var(--panel-2);border:1px solid rgba(236,196,128,.35);padding:12px 18px;border-radius:12px;font-size:var(--fs-md);transition:opacity .3s ease,transform .3s ease;pointer-events:none;max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* Overlays: drawer (cart), sheet (filters on a phone), scrim */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(3,6,11,.6);opacity:0;pointer-events:none;transition:opacity .3s ease}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(440px,100%);background:var(--drawer);border-left:1px solid var(--gold-line);display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--t-med) var(--ease);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);overscroll-behavior:contain}
.drawer.on{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 12px}
.drawer-head h2{font-size:26px}
.drawer-body{flex:1;overflow:auto;padding:20px 24px}
.drawer-foot{padding:20px 24px 24px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
@media (max-width:640px){.drawer.sheet{top:auto;left:0;width:100%;max-height:88vh;border-left:0;border-top:1px solid var(--gold-line);border-radius:20px 20px 0 0;transform:translateY(100%)}.drawer.sheet.on{transform:none}}

/* Accordion */
.acc details{border-top:1px solid var(--line)}
.acc details:last-child{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:12px 0;font-size:18px;cursor:pointer}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--gold);font-size:22px;flex:none}
.acc details[open] summary::after{content:"−"}
.acc .body{padding:0 0 24px;color:var(--ink-2);line-height:1.65;max-width:70ch}

/* Spec tiles (product page, cards) */
.specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.spec{padding:14px;border-radius:var(--r-md);background:var(--panel);display:flex;flex-direction:column;gap:2px}
.spec .icon{width:24px;height:24px;color:var(--gold);margin-bottom:6px}
.spec b{font-weight:600;font-variant-numeric:tabular-nums}
.spec span{font-size:var(--fs-sm);color:var(--ink-3)}
@media (max-width:520px){.specs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Cards */
.panel{padding:var(--s-6);border-radius:var(--r-lg);background:var(--panel)}
.kit-card{display:flex;flex-direction:column;gap:14px;min-width:0;color:var(--ink)}
.kit-card .pic,.feature-card .pic{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:var(--stage)}
.kit-card .pic img,.feature-card .pic img{position:absolute;left:50%;top:52%;width:auto;height:76%;max-width:86%;object-fit:contain;transform:translate(-50%,-50%);transition:transform var(--t-slow) var(--ease);filter:var(--shadow-kit)}
.kit-card:hover .pic img,.feature-card:hover .pic img{transform:translate(-50%,-52%) rotate(-2deg) scale(1.04)}
.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6)}
.feature-card{display:flex;flex-direction:column;gap:10px;color:var(--ink)}
.feature-card:hover{color:var(--ink)}
.feature-card .t{font-family:var(--display);font-size:var(--fs-xl);font-weight:500}
.feature-card .s{font-size:var(--fs-md);color:var(--ink-3);line-height:1.5}
.feature-card .go{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:var(--fs-md);color:var(--gold)}
.feature-card .go .icon{width:18px;height:18px;transition:transform var(--t-fast) ease}
.feature-card:hover .go .icon{transform:translateX(4px)}
@media (max-width:1100px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.feature-grid{gap:16px 12px}.feature-card .s{display:none}.feature-card .t{font-size:17px}}

.empty-state{text-align:center;padding:64px 16px;border:1px dashed rgba(236,220,196,.25);border-radius:var(--r-lg);display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--ink-2)}
.empty-state h1,.empty-state h2{font-size:clamp(26px,3vw,36px);color:var(--ink)}
.empty-state p{margin:0}

/* Home stand-in hero (Stage 2 replaces it with the storm) */
.hero{padding-block:clamp(72px,12vw,160px) clamp(56px,8vw,96px);background:radial-gradient(ellipse at 50% 0%,#1b2a44 0%,var(--night) 70%);text-align:center}
.hero-in{display:flex;flex-direction:column;align-items:center}
.hero h1{font-size:var(--fs-hero)}
.hero .lede{margin:20px auto 0}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}

/* Payment marks */
.pays{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pays img{display:block;height:24px;width:auto}
@media (max-width:520px){.pays{gap:4px}.pays img{height:20px}}

/* Breadcrumb */
.crumb{font-size:var(--fs-sm);color:var(--ink-3);padding-block:20px 16px;display:flex;gap:8px;flex-wrap:wrap}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--ink)}

/* Tables */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line)}
.table th,.table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)}
.table thead th{font-family:var(--display);font-weight:500;background:var(--panel)}
.table tr:last-child td{border-bottom:0}

/* Shipping rate table on the Shipping page ([dv_shipping_rates]) */
.ship-policy{margin:1em 0 1.5em}
.ship-table{width:100%;border-collapse:collapse;font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.ship-table th,.ship-table td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ship-table th{font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.ship-table td{color:var(--ink)}
@media (max-width:600px){
  .ship-table thead{display:none}
  .ship-table tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .ship-table td{padding:0;border:0}
  .ship-table td:nth-child(1){grid-column:1/-1;font-size:var(--fs-sm);color:var(--ink-3)}
  .ship-table td:nth-child(4){grid-column:1/-1;font-size:var(--fs-sm);color:var(--ink-2)}
}

/* Shipment panel on the account's order page */
.dv-tracking{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 24px;padding:16px 20px;border:1px solid var(--gold-line);border-radius:var(--r-lg);background:var(--gold-soft)}
.dv-tracking b{color:var(--gold)}
.dv-tracking span{color:var(--ink-2);font-variant-numeric:tabular-nums}
.dv-tracking .btn{margin-left:auto}