/* Industrial Union UI Kit — storefront styles (foundations in colors_and_type.css) */

:root { --sk-max: 1280px; --sk-pad: clamp(20px, 4vw, 56px); --sk-drawer: 440px; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { margin: 0; background: var(--iu-paper); color: var(--iu-ink);
       font-family: var(--iu-font-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
#root { width: 100%; }
.sk-arrow { display: inline-block; margin-right: .55em; font-family: var(--iu-font-mono); font-variant-emoji: text; }

/* ---------- NAV ---------- */
.sk-nav { position: sticky; top: 0; z-index: 40; background: var(--iu-paper);
          border-bottom: 1px solid var(--iu-line); padding-top: env(safe-area-inset-top); }
.sk-nav-inner { max-width: var(--sk-max); margin: 0 auto; padding: 14px var(--sk-pad);
                display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; }
.sk-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.sk-brand-word { font-family: var(--iu-font-sans); font-weight: 700; text-transform: uppercase;
                 letter-spacing: .01em; font-size: 14px; line-height: .98; color: var(--iu-ink); }
.sk-brand-word--light { color: #fff; }
.sk-nav-links { display: flex; gap: 30px; justify-self: start; margin-left: 24px; }
.sk-nav-right { display: flex; gap: 24px; align-items: center; }
.sk-nav-link { text-decoration: none; cursor: pointer; transition: opacity var(--iu-dur-fast) var(--iu-ease);
               padding: 10px 0; touch-action: manipulation; }
.sk-nav-link:hover { opacity: .55; }
.sk-nav-link.is-active { text-decoration: underline; text-underline-offset: 4px; }
.sk-linkbtn { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.sk-search { max-width: var(--sk-max); margin: 0 auto; padding: 14px var(--sk-pad) 18px; }
.sk-search-input { width: 100%; }
.sk-nav-menu-btn { display: none; }
.sk-nav-mobile { display: none; }

/* ---------- LAYOUT SHELL ---------- */
.sk-main { max-width: var(--sk-max); margin: 0 auto; padding: 0 var(--sk-pad); }
.sk-section { padding: clamp(48px, 7vw, 92px) 0 0; }
.sk-section-head { align-items: start; }
.sk-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.sk-stories-head, .sk-shop-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 26px; }

/* ---------- BUTTONS ---------- */
.sk-btn { font-family: var(--iu-font-mono); font-size: var(--iu-text-label); text-transform: uppercase;
          letter-spacing: .04em; color: var(--iu-paper); background-color: var(--iu-ink); border: 1px solid var(--iu-ink);
          padding: 15px 22px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
          transition: transform var(--iu-dur-fast) var(--iu-ease); }
.sk-btn:hover { background-color: #2c2c29; }
.sk-btn:active { transform: translateY(1px); }
.sk-btn--block { width: 100%; }
.sk-btn.is-disabled { background-color: var(--iu-paper-2); color: var(--iu-muted); border-color: var(--iu-line); }
.sk-btn.is-disabled:hover { background-color: #e9e8e3; }

/* ---------- HERO ---------- */
.sk-hero { padding-top: 22px; }
.sk-hero-eyebrow .sk-lead { max-width: 36ch; color: var(--iu-ink); }
.sk-hero-main { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(20px, 4vw, 56px);
                align-items: end; margin-top: clamp(18px, 3vw, 32px); padding-bottom: clamp(20px, 3vw, 40px); }
.sk-hero-left { align-self: end; }
.sk-hero-title { letter-spacing: -0.04em; }
.sk-hero-media { width: 100%; cursor: pointer; }

/* ---------- FIGURES / SLOTS ---------- */
.sk-figure { width: 100%; overflow: hidden; background: var(--iu-paper-2);
             display: flex; align-items: flex-end; }
.sk-figure--blank { border: 1px solid var(--iu-line);
   background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgba(17,17,16,.025) 11px 12px); }
.sk-figure-tag { padding: 10px 12px; color: var(--iu-muted); }

/* ---------- STATEMENT / STORY BAND ---------- */
.sk-statement { padding: clamp(44px, 6vw, 84px) 0; }
.sk-statement-text { max-width: 24ch; font-size: clamp(1.6rem, 3.2vw, 2.6rem); }

/* ---------- FLAGSHIPS ---------- */
.sk-flags { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.sk-flag { cursor: pointer; }
.sk-flag .sk-figure { transition: opacity var(--iu-dur-fast) var(--iu-ease); }
.sk-flag:hover .sk-figure { opacity: .82; }
.sk-flag-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; gap: 16px; }
.sk-flag-name { margin-top: 4px; }
.sk-flag-blurb { max-width: 46ch; margin-top: 12px; }

/* ---------- CATEGORY RAIL ---------- */
.sk-catrail { border-top: 1px solid var(--iu-line); }
.sk-catrail-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px;
                  width: 100%; text-align: left; padding: clamp(16px, 2.4vw, 26px) 0;
                  border-bottom: 1px solid var(--iu-line); cursor: pointer;
                  transition: padding-left var(--iu-dur) var(--iu-ease); }
.sk-catrail-row:hover { padding-left: 14px; }
.sk-catrail-label { letter-spacing: -.01em; }
.sk-catrail-arrow { margin-right: 0; opacity: 0; transition: opacity var(--iu-dur-fast) var(--iu-ease); font-size: 20px; }
.sk-catrail-row:hover .sk-catrail-arrow { opacity: 1; }

/* ---------- SHOP / FILTERS / GRID ---------- */
.sk-filters { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 32px;
              border-bottom: 1px solid var(--iu-line); padding-bottom: 18px; }
.sk-filter { color: var(--iu-muted); transition: opacity var(--iu-dur-fast) var(--iu-ease); }
.sk-filter:hover { color: var(--iu-ink); }
.sk-filter.is-active { color: var(--iu-ink); text-decoration: underline; text-underline-offset: 4px; }
.sk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 34px) clamp(16px, 2vw, 28px); }
.sk-card { cursor: pointer; }
.sk-card .sk-figure { transition: opacity var(--iu-dur-fast) var(--iu-ease); }
.sk-card:hover .sk-figure { opacity: .82; }
.sk-card-meta { margin-top: 12px; }
.sk-card-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.sk-card:hover .sk-card-line .iu-label:first-child { text-decoration: underline; text-underline-offset: 3px; }
.sk-card-price { font-family: var(--iu-font-mono); font-size: 13px; letter-spacing: .03em; }

/* ---------- PDP ---------- */
.sk-pdp { padding-top: 22px; }
.sk-pdp-back { margin-bottom: 18px; }
.sk-pdp-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.sk-gallery { position: sticky; top: 90px; min-width: 0; }
.sk-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.sk-thumb { width: 76px; flex: 0 0 76px; cursor: pointer; padding: 0; border: none; background: none; opacity: .6;
            transition: opacity var(--iu-dur-fast) var(--iu-ease); }
.sk-thumb.is-active, .sk-thumb:hover { opacity: 1; }
.sk-pdp-info { padding-top: 4px; }
.sk-pdp-head { border-bottom: 1px solid var(--iu-line); padding-bottom: 22px; margin-bottom: 22px; }
.sk-pdp-name { margin: 10px 0 14px; }
.sk-pdp-priceline { display: flex; align-items: baseline; gap: 16px; }
.sk-pdp-price { font-family: var(--iu-font-mono); font-size: 19px; letter-spacing: .02em; }
.sk-pdp-blurb { max-width: 48ch; margin-bottom: 28px; }
.sk-pdp-sizes-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.sk-size-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-size { min-width: 52px; height: 48px; padding: 0 12px; border: 1px solid var(--iu-line); background: var(--iu-paper);
           font-family: var(--iu-font-mono); font-size: 13px; letter-spacing: .03em; cursor: pointer;
           transition: border-color var(--iu-dur-fast) var(--iu-ease); }
.sk-size:hover { border-color: var(--iu-ink); }
.sk-size.is-active { background: var(--iu-ink); color: var(--iu-paper); border-color: var(--iu-ink); }
.sk-pdp-add { margin: 26px 0; }
.sk-spec { border-top: 1px solid var(--iu-line); }
.sk-spec-row { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 13px 0;
               border-bottom: 1px solid var(--iu-line); }
.sk-pdp-care { margin-top: 26px; }

/* ---------- DUO media ---------- */
.sk-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 24px); }

/* ---------- ABOUT PAGE INLINE COPY + FIGURES ---------- */
.sk-about-copy { max-width: 72ch; }
.sk-about-para { margin-bottom: 20px; text-align: justify; hyphens: none; }
.sk-about-figure { width: 240px; }
.sk-about-figure--left { float: left; margin: -20px 24px 16px 0; }
.sk-about-figure--right { float: right; margin: -20px 0 16px 24px; }
.sk-about-figure--full { margin-bottom: 8px; }
.sk-about-clear { clear: both; }

/* ---------- NEWSLETTER ---------- */
.sk-newsletter { max-width: var(--sk-max); margin: 0 auto; padding: 0 var(--sk-pad) clamp(56px, 8vw, 110px); }
.sk-news-form { display: grid; grid-template-columns: 1fr auto; gap: clamp(16px, 3vw, 40px);
                align-items: end; border-top: 1px solid var(--iu-line); padding-top: 22px; max-width: 560px; }
.sk-news-ok { background: none; border: none; cursor: pointer; padding-bottom: 8px; white-space: nowrap; }
.sk-news-thanks { border-top: 1px solid var(--iu-line); padding-top: 22px; }

/* ---------- FOOTER ---------- */
.sk-footer { background: var(--iu-black); color: #fff; margin-top: clamp(40px, 6vw, 80px);
             padding: 26px var(--sk-pad) 30px; }
.sk-footer > * { max-width: var(--sk-max); margin-left: auto; margin-right: auto; }
.sk-foot-bracket { border-color: rgba(255,255,255,.32); }
.sk-footer-top { display: grid; grid-template-columns: 1fr 2fr; align-items: start; gap: 40px; padding-bottom: 48px; }
.sk-footer-brandcol { display: flex; flex-direction: column; gap: 18px; }
.sk-footer-tag { color: #fff; letter-spacing: .12em; }
.sk-footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 460px; }
.sk-footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sk-footer-h { margin-bottom: 4px; }
.sk-foot-link { color: #fff; text-decoration: none; cursor: pointer; transition: opacity var(--iu-dur-fast) var(--iu-ease); }
.sk-foot-link:hover { opacity: .55; }
.sk-foot-soft { color: rgba(255,255,255,.6); }
.sk-footer-mid { display: flex; gap: 40px; align-items: baseline; padding-bottom: 48px; flex-wrap: wrap; }
.sk-foot-contact { color: #fff; }
.sk-foot-addr { margin-left: auto; }
.sk-footer-bot { display: flex; justify-content: space-between; align-items: baseline;
                 border-top: 1px solid rgba(255,255,255,.18); padding-top: 18px; gap: 20px; flex-wrap: wrap; }
.sk-foot-legal { display: flex; gap: 30px; flex-wrap: wrap; }

/* ---------- CART DRAWER ---------- */
.sk-drawer-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(17,17,16,.45);
                   opacity: 0; pointer-events: none; }
.sk-drawer-scrim.is-open { opacity: 1; pointer-events: auto; }
.sk-drawer { position: absolute; top: 0; right: 0; height: 100%; width: min(var(--sk-drawer), 100%);
             background: var(--iu-paper); display: flex; flex-direction: column;
             transform: translateX(100%); }
.sk-drawer.is-open { transform: translateX(0); }
@keyframes sk-fade { from { opacity: 0; } to { opacity: 1; } }
.sk-drawer-bar { display: flex; justify-content: space-between; align-items: center;
                 padding: 20px 24px; border-bottom: 1px solid var(--iu-line); }
.sk-drawer-empty { padding: 40px 24px; }
.sk-drawer-items { flex: 1; overflow-y: auto; padding: 8px 24px; }
.sk-line { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--iu-line); }
.sk-line-main { flex: 1; display: flex; flex-direction: column; }
.sk-line-top { display: flex; justify-content: space-between; gap: 12px; }
.sk-line-meta { margin-top: 5px; }
.sk-line-bot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 14px; }
.sk-qty { display: inline-flex; align-items: center; gap: 14px; border: 1px solid var(--iu-line); padding: 5px 12px; }
.sk-qty-btn { background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--iu-ink); padding: 0; width: 14px; }
.sk-line-remove:hover { color: var(--iu-ink); }
.sk-drawer-foot { border-top: 1px solid var(--iu-line); padding: 22px 24px calc(22px + env(safe-area-inset-bottom)); }
.sk-drawer-sub { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }

/* ---------- TOAST ---------- */
.sk-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 70;
            background: var(--iu-ink); color: var(--iu-paper); padding: 11px 18px;
            animation: sk-toast-in var(--iu-dur) var(--iu-ease); }
@keyframes sk-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .sk-grid { grid-template-columns: repeat(2, 1fr); }
  .sk-pdp-grid { grid-template-columns: 1fr; gap: 32px; }
  .sk-gallery { position: static; }
}
@media (max-width: 880px) {
  .iu-bracket-row { grid-template-columns: 1fr !important; }
  .sk-hero-main { grid-template-columns: 1fr; }
  .sk-twocol, .sk-flags, .sk-duo { grid-template-columns: 1fr; }
  .sk-nav-links { display: none; }
  .sk-nav-inquire { display: none; }
  .sk-nav-right { gap: 16px; }
  .sk-nav-menu-btn { display: inline-block; }
  .sk-nav-mobile { display: flex; flex-direction: column; border-top: 1px solid var(--iu-line);
                   padding: 6px var(--sk-pad) calc(10px + env(safe-area-inset-bottom)); }
  .sk-nav-mobile-link { text-align: left; padding: 14px 0; text-decoration: none; cursor: pointer;
                        border-bottom: 1px solid var(--iu-line); }
  .sk-nav-mobile-link:last-child { border-bottom: none; }
  .sk-nav-mobile-link.is-active { text-decoration: underline; text-underline-offset: 4px; }
  .sk-footer-top { grid-template-columns: 1fr; gap: 28px; }
  .sk-footer-cols { grid-template-columns: 1fr 1fr; }
  .sk-foot-addr { margin-left: 0; }
  .sk-about-figure { width: 100%; }
  .sk-about-figure--left, .sk-about-figure--right {
    float: none; margin: 0 0 20px;
  }
  .iu-field, .sk-search-input { font-size: 16px; }
  /* Purely decorative double-hairline dividers — keep them as the intended
     two narrow bars instead of stacking into two identical empty blocks. */
  .sk-bracket-divider { grid-template-columns: minmax(60px,1fr) 3fr !important; gap: 10px; }
}
@media (hover: none) and (pointer: coarse) {
  .sk-catrail-arrow { opacity: 1; }
}
@media (max-width: 560px) {
  .sk-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
}