/* ============================================================
   SKS Shop All — PORT of sks-shopify/sections/sks-list-collections.liquid
   The Liquid section was block-driven from the Shopify editor. BigCommerce has no
   equivalent editor for this page, so the cards are written into the template and
   only the CSS lives here, unchanged and still scoped under .sks-lc.
   Rendered by templates/pages/custom/category/sks-shop-all.html at /collections/all/.
   ============================================================ */
.sks-lc{
    --ivory:#F5F0E8;--parch:#E8DFD0;--white:#FFFFFF;--slate:#2C3E50;--slate-d:#1E2D3B;
    --amber:#B8520A;--amber-l:#D4681A;--amber-p:#FEF3EC;
    --onyx:#1A1A1A;--body:#4A4440;--muted:#9A9088;--rule:rgba(74,68,64,.14);--rule2:rgba(74,68,64,.22);
    --crimsn:#8B1F1F;--ok:#1A5C2A;--ok-p:#EAF3DE;--cream:#E8C9A8;
    --sks-lc-r:6px;--sks-lc-rl:10px;
    --ff-d:'Playfair Display',Georgia,serif;--ff-b:'Jost',system-ui,sans-serif;
    background:var(--ivory);
    color:var(--body);
    font-family:var(--ff-b);
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  .sks-lc *,.sks-lc *::before,.sks-lc *::after{box-sizing:border-box}
  .sks-lc img{max-width:100%;display:block}
  .sks-lc a{color:inherit;text-decoration:none}
  .sks-lc :focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  @media (prefers-reduced-motion:reduce){.sks-lc *,.sks-lc *::before,.sks-lc *::after{animation:none!important;transition:none!important}}

  .sks-lc-wrap{max-width:1240px;margin:0 auto;padding:0 24px}

  /* ── BREADCRUMB ───────────────────────────── */
  .sks-lc-breadcrumb{padding:16px 0 0}
  .sks-lc-breadcrumb ol{list-style:none;display:flex;gap:8px;font-size:13.5px;color:var(--muted);margin:0;padding:0}
  .sks-lc-breadcrumb li+li::before{content:"/";margin-right:8px;color:var(--rule2)}
  .sks-lc-breadcrumb a:hover{color:var(--amber)}
  .sks-lc-breadcrumb [aria-current]{color:var(--body);font-weight:500}

  /* ── HERO ─────────────────────────────────── */
  .sks-lc-hero{padding:44px 0 20px}
  .sks-lc-eyebrow{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);font-weight:600;margin:0 0 14px}
  .sks-lc-hero h1{font-family:var(--ff-d);font-weight:700;color:var(--onyx);font-size:clamp(34px,5vw,54px);line-height:1.08;max-width:15ch;margin:0}
  .sks-lc-hero-sub{margin:18px 0 0;font-size:17.5px;font-weight:300;max-width:62ch;color:var(--body)}
  .sks-lc-hero-sub b{font-weight:500;color:var(--onyx)}

  /* Department index rail */
  .sks-lc-dept-rail{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 8px}
  .sks-lc-dept-chip{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--rule);border-radius:99px;padding:8px 16px 8px 9px;font-size:14px;font-weight:500;color:var(--slate);transition:border-color .18s,transform .18s}
  .sks-lc-dept-chip:hover{border-color:var(--amber);transform:translateY(-1px)}
  .sks-lc-chip-sw{width:26px;height:26px;border-radius:50%;border:1px solid rgba(0,0,0,.12);flex-shrink:0}

  /* ── TRUST STRIP ──────────────────────────── */
  .sks-lc-trust{display:flex;flex-wrap:wrap;gap:0;background:var(--white);border:1px solid var(--rule);border-radius:var(--sks-lc-rl);margin:26px 0 6px;overflow:hidden}
  .sks-lc-trust-item{flex:1;min-width:200px;display:flex;align-items:center;gap:12px;padding:16px 20px;border-right:1px solid var(--rule)}
  .sks-lc-trust-item:last-child{border-right:0}
  .sks-lc-trust-item svg{width:24px;height:24px;color:var(--amber);flex-shrink:0}
  .sks-lc-trust-item > div{min-width:0}
  .sks-lc-trust-item b{display:block;font-size:14.5px;font-weight:600;color:var(--onyx);line-height:1.3;overflow-wrap:break-word}
  .sks-lc-trust-item span{font-size:12.5px;color:var(--muted);overflow-wrap:break-word}
  .sks-lc-trust-stars{color:#E8A02E;letter-spacing:1px;font-size:13px}
  /* Live store rating: two stacked ★★★★★ layers, the amber one clipped to
     rating/5 by sks-jm-store-numbers.js. Both layers must share font-size
     and letter-spacing or the glyphs drift out of register. The amber
     layer starts at 0% so an unresolved fetch shows an honest empty
     rating rather than a fake five stars. */
  .sks-lc-stars{position:relative;display:inline-block;white-space:nowrap;vertical-align:baseline}
  .sks-lc-stars-bg{color:rgba(74,68,64,.22)}
  .sks-lc-stars-fg{position:absolute;left:0;top:0;width:0;overflow:hidden;color:#E8A02E !important;}
  /* Trust item 1 as a popup trigger. Strip ONLY the UA button chrome —
     background, the three borders the layout does not use, font and
     alignment. Deliberately does NOT touch border-right: that is the grid
     divider from .sks-lc-trust-item, and the mobile border-bottom comes
     from a (0,2,0) media-query rule which still outranks this. */
  .sks-lc-trust-item--btn{
    border-top:0;border-bottom:0;border-left:0;
    background:none;
    font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;
    text-align:left;
    -webkit-appearance:none;appearance:none;
    cursor:pointer;
    transition:background .18s;
  }
  .sks-lc-trust-item--btn:hover{background:var(--amber-p)}
  .sks-lc-trust-item--btn:hover span[data-jm-store-count]{text-decoration:underline}
  /* Tablet + mobile: 2-column grid — right-border kept only on left-column
     items (odd children) and bottom-border added to top-row items (1,2)
     so the 2×2 grid reads as a proper cell divider. Previously we only
     killed the border on nth-child(2), leaving item 4 with a stray border. */
  @media(max-width:860px){
    .sks-lc-trust-item{min-width:46%;flex-basis:50%}
    .sks-lc-trust-item:nth-child(2n){border-right:0}
    .sks-lc-trust-item:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  }
  /* Narrow phones (≤520px): stack the icon above the text, center-align.
     Horizontal cramming was cutting off longer strings like
     "Made to your measurements:" — vertical layout gives each cell the
     full column width for its two-line copy. */
  @media(max-width:520px){
    .sks-lc-trust-item{
      padding:14px 10px;
      flex-direction:column;
      align-items:center;
      text-align:center;
      gap:6px;
    }
    .sks-lc-trust-item svg{width:22px;height:22px;margin-bottom:2px}
    .sks-lc-trust-item b{font-size:12.5px;line-height:1.25}
    .sks-lc-trust-item span{font-size:11px;line-height:1.4}
    .sks-lc-trust-stars{font-size:11px;letter-spacing:.5px}
  }

  /* ── TARTAN SETT BANDS (pure CSS weave) ───── */
  .sks-lc-sett{position:relative;height:10px;overflow:hidden}
  .sks-lc-sett::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 5px);mix-blend-mode:overlay}
  .sett-blackwatch,.sw-blackwatch{background:repeating-linear-gradient(90deg,#1E2D3B 0 22px,#274A32 22px 40px,#1E2D3B 40px 48px,#0F1A24 48px 54px)}
  .sett-royal,.sw-royal{background:repeating-linear-gradient(90deg,#8B1F1F 0 26px,#1E2D3B 26px 34px,#8B1F1F 34px 42px,#C9A227 42px 46px)}
  .sett-dress,.sw-dress{background:repeating-linear-gradient(90deg,#B23A48 0 20px,#EDE5D6 20px 34px,#2C3E50 34px 42px,#EDE5D6 42px 50px)}
  .sett-hunting,.sw-hunting{background:repeating-linear-gradient(90deg,#274A32 0 24px,#1E2D3B 24px 36px,#8B1F1F 36px 40px,#274A32 40px 52px)}
  .sett-leather,.sw-leather{background:repeating-linear-gradient(90deg,#5C3A1E 0 26px,#7A4E28 26px 40px,#3E2814 40px 48px,#B8520A 48px 52px)}
  .sett-slate,.sw-slate{background:repeating-linear-gradient(90deg,#2C3E50 0 24px,#46586A 24px 38px,#2C3E50 38px 46px,#C9A227 46px 50px)}
  .sett-moss,.sw-moss{background:repeating-linear-gradient(90deg,#4A5D3A 0 24px,#6B7C50 24px 36px,#2C3E50 36px 44px,#4A5D3A 44px 54px)}
  .sett-heather,.sw-heather{background:repeating-linear-gradient(90deg,#5B4460 0 24px,#8A6E90 24px 36px,#2C3E50 36px 44px,#C9A227 44px 48px)}
  .sett-piper,.sw-piper{background:repeating-linear-gradient(90deg,#1A1A1A 0 24px,#8B1F1F 24px 34px,#1A1A1A 34px 42px,#EDE5D6 42px 46px)}
  .sett-gift,.sw-gift{background:repeating-linear-gradient(90deg,#B8520A 0 22px,#E8C9A8 22px 34px,#8B1F1F 34px 42px,#E8C9A8 42px 50px)}
  .sett-flannel,.sw-flannel{background:repeating-linear-gradient(90deg,#8B1F1F 0 22px,#1A1A1A 22px 34px,#8B1F1F 34px 46px,#5C1414 46px 52px)}
  .sett-home,.sw-home{background:repeating-linear-gradient(90deg,#7A93A8 0 24px,#EDE5D6 24px 36px,#4A5D3A 36px 44px,#EDE5D6 44px 52px)}

  /* ── DEPARTMENT GRID ──────────────────────── */
  .sks-lc-depts{padding:28px 0 20px}
  .sks-lc-dept-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .sks-lc-dept-card{background:var(--white);border:1px solid var(--rule);border-radius:var(--sks-lc-rl);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .22s,transform .22s;scroll-margin-top:120px}
  .sks-lc-dept-card:hover{box-shadow:0 14px 34px rgba(44,62,80,.13);transform:translateY(-3px)}
  .sks-lc-dept-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--parch)}
  .sks-lc-media-weave{width:100%;height:100%;position:relative}
  .sks-lc-media-weave::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 1px,transparent 1px 6px),repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 1px,transparent 1px 6px)}
  .sks-lc-dept-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
  .sks-lc-dept-card:hover .sks-lc-dept-media img{transform:scale(1.04)}
  .sks-lc-dept-count{position:absolute;top:14px;right:14px;background:rgba(30,45,59,.86);color:var(--cream);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;border-radius:99px;padding:5px 12px;backdrop-filter:blur(3px)}
  .sks-lc-dept-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:11px;flex:1}
  .sks-lc-dept-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .sks-lc-dept-body h2{font-family:var(--ff-d);font-weight:600;font-size:21px;color:var(--onyx);line-height:1.15;margin:0}
  .sks-lc-dept-body p{font-size:14px;color:var(--body);margin:0}
  .sks-lc-dept-from{font-size:13.5px;font-weight:500;color:var(--slate);background:var(--ivory);border:1px solid var(--rule);border-radius:99px;padding:4px 12px;white-space:nowrap}
  .sks-lc-dept-from b{color:var(--amber);font-weight:600}
  .sks-lc-dept-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
  .sks-lc-dept-links a{font-size:13px;font-weight:500;color:var(--slate);background:var(--ivory);border:1px solid var(--rule);border-radius:99px;padding:5px 13px}
  .sks-lc-dept-links a:hover{border-color:var(--amber);color:var(--amber)}
  .sks-lc-dept-cta{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:15px;color:var(--amber)}
  .sks-lc-dept-cta svg{width:16px;height:16px;transition:transform .18s}
  .sks-lc-dept-card:hover .sks-lc-dept-cta svg{transform:translateX(4px)}
  @media(max-width:1024px){.sks-lc-dept-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:640px){.sks-lc-dept-grid{grid-template-columns:1fr}}

  /* ── OCCASION ROW ─────────────────────────── */
  .sks-lc-occasions{padding:34px 0 8px}
  .sks-lc-occ-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
  .sks-lc-occ-head h2{font-family:var(--ff-d);font-weight:600;font-size:clamp(22px,2.8vw,28px);color:var(--onyx);margin:0}
  .sks-lc-occ-head p{font-size:14.5px;color:var(--muted);margin:0}
  .sks-lc-occ-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .sks-lc-occ-card{position:relative;background:var(--white);border:1px solid var(--rule);border-radius:var(--sks-lc-rl);padding:20px;overflow:hidden;transition:box-shadow .2s,transform .2s;display:block}
  .sks-lc-occ-card:hover{box-shadow:0 10px 24px rgba(44,62,80,.12);transform:translateY(-2px)}
  .sks-lc-occ-card .sks-lc-sett{position:absolute;top:0;left:0;right:0;height:6px}
  .sks-lc-occ-card h3{font-family:var(--ff-d);font-size:18px;font-weight:600;color:var(--onyx);margin:8px 0 4px}
  .sks-lc-occ-card p{font-size:13.5px;color:var(--body);margin:0}
  .sks-lc-occ-go{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:13.5px;font-weight:500;color:var(--amber)}
  .sks-lc-occ-go svg{width:14px;height:14px}
  @media(max-width:860px){.sks-lc-occ-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.sks-lc-occ-grid{grid-template-columns:1fr}}

  /* ── TARTAN FINDER BAND ───────────────────── */
  .sks-lc-finder{margin:44px 0;background:var(--slate-d);border-radius:var(--sks-lc-rl);color:var(--ivory);overflow:hidden;position:relative}
  .sks-lc-finder-sett{height:14px}
  .sks-lc-finder-inner{padding:46px 48px;display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:center}
  .sks-lc-finder h2{font-family:var(--ff-d);font-weight:600;font-size:clamp(26px,3.4vw,36px);color:var(--white);line-height:1.15;margin:0}
  .sks-lc-finder p{margin:12px 0 0;font-weight:300;font-size:16px;color:#C9D3DC;max-width:52ch}
  .sks-lc-finder p b{color:var(--cream);font-weight:500}
  .sks-lc-finder-actions{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
  .sks-lc-btn{display:inline-flex;align-items:center;gap:10px;border-radius:99px;padding:14px 26px;font-weight:500;font-size:15.5px;transition:transform .18s,background .18s}
  .sks-lc-btn:hover{transform:translateY(-1px)}
  .sks-lc-btn svg{width:18px;height:18px}
  .sks-lc-btn-amber{background:var(--amber);color:var(--white)}
  .sks-lc-btn-amber:hover{background:var(--amber-l)}
  .sks-lc-btn-ghost{border:1px solid rgba(232,201,168,.45);color:var(--cream)}
  .sks-lc-btn-ghost:hover{border-color:var(--cream)}
  .sks-lc-finder-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:4px;font-size:14px}
  .sks-lc-finder-links a{color:#C9D3DC;text-decoration:underline;text-underline-offset:3px}
  .sks-lc-finder-links a:hover{color:var(--cream)}
  @media(max-width:760px){.sks-lc-finder-inner{grid-template-columns:1fr;padding:34px 26px}}

  /* ── MATERIALS PROMISE ────────────────────── */
  .sks-lc-promise{padding:10px 0 56px}
  .sks-lc-promise-head{text-align:center;max-width:60ch;margin:0 auto 30px}
  .sks-lc-promise-head h2{font-family:var(--ff-d);font-weight:600;font-size:clamp(24px,3vw,32px);color:var(--onyx);margin:0}
  .sks-lc-promise-head p{margin:10px 0 0;font-weight:300;font-size:16px}
  .sks-lc-promise-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .sks-lc-promise-card{background:var(--white);border:1px solid var(--rule);border-radius:var(--sks-lc-rl);padding:24px 22px}
  .sks-lc-promise-card svg{width:26px;height:26px;color:var(--amber)}
  .sks-lc-promise-card h3{font-family:var(--ff-d);font-size:18px;font-weight:600;color:var(--onyx);margin:12px 0 6px}
  .sks-lc-promise-card p{font-size:14px;color:var(--body);margin:0}
  @media(max-width:960px){.sks-lc-promise-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:540px){.sks-lc-promise-grid{grid-template-columns:1fr}}