/* KITLIST — the makeup bag. A square, quilted, designable bag rendered in CSS. */

.bag-scene{display:grid;place-items:center;padding:clamp(8px,2vw,24px) 0}
.bag{
  width:min(100%,560px);border-radius:26px;position:relative;
  box-shadow:0 2px 6px rgba(42,33,28,.08), 0 34px 70px -30px rgba(42,33,28,.45);
  overflow:hidden;
  border:1px solid rgba(42,33,28,.14);
}

/* ---- bag materials ---- */
.bag[data-color=blush]{--m1:#EFCFC7;--m2:#E3B9AE;--stitch:rgba(150,84,63,.35);--ink-on:#5C4038}
.bag[data-color=cream]{--m1:#F4ECE1;--m2:#E7DAC9;--stitch:rgba(120,100,80,.30);--ink-on:#5E5245}
.bag[data-color=noir]{--m1:#332B27;--m2:#241E1B;--stitch:rgba(255,255,255,.14);--ink-on:#EFE8E0}
.bag[data-color=sage]{--m1:#CBD3C2;--m2:#B4BFA9;--stitch:rgba(80,95,70,.32);--ink-on:#45523D}
.bag[data-color=lilac]{--m1:#DCD0E4;--m2:#C9B9D6;--stitch:rgba(110,90,130,.32);--ink-on:#584A66}
.bag[data-color=butter]{--m1:#F2E3B8;--m2:#E7D298;--stitch:rgba(150,120,50,.30);--ink-on:#6B5A2A}
.bag[data-color=cocoa]{--m1:#8A6A57;--m2:#73543F;--stitch:rgba(255,240,225,.22);--ink-on:#F4E9DF}

.bag[data-hardware=gold]{--hw1:#D9B678;--hw2:#B98F45;--hw3:#F2DCAE}
.bag[data-hardware=silver]{--hw1:#CFCFD4;--hw2:#9EA0A8;--hw3:#EFEFF3}

/* ---- patterns ---- */
.bag-skin{position:relative;background:linear-gradient(160deg,var(--m1),var(--m2))}
.bag[data-pattern=quilted] .bag-skin::before{
  content:"";position:absolute;inset:0;opacity:.55;pointer-events:none;
  background:
    repeating-linear-gradient(45deg, transparent 0 34px, var(--stitch) 34px 35px),
    repeating-linear-gradient(-45deg, transparent 0 34px, var(--stitch) 34px 35px);
}
.bag[data-pattern=quilted] .bag-skin::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 3px, transparent 3px 34px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.10) 0 3px, transparent 3px 34px);
}
.bag[data-pattern=gingham] .bag-skin::before{
  content:"";position:absolute;inset:0;opacity:.4;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, var(--stitch) 0 16px, transparent 16px 32px),
    repeating-linear-gradient(90deg, var(--stitch) 0 16px, transparent 16px 32px);
}
.bag[data-pattern=leopard] .bag-skin::before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='rgba(42,33,28,.5)' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M12 18c5-6 14-5 16 1M14 26c6 3 12 1 15-3'/%3E%3Cpath d='M55 8c6-3 13 1 13 7M57 16c5 2 10 0 12-4'/%3E%3Cpath d='M30 55c4-7 14-7 17-1M33 63c6 3 12 0 14-5'/%3E%3Cpath d='M68 48c6-2 12 2 11 8M69 56c5 1 9-1 11-5'/%3E%3Cpath d='M8 72c5-5 13-3 14 2M10 79c5 2 10 1 13-3'/%3E%3Cpath d='M52 80c5-5 13-4 15 1'/%3E%3C/g%3E%3Cg fill='rgba(42,33,28,.28)'%3E%3Cellipse cx='20' cy='21' rx='5' ry='4'/%3E%3Cellipse cx='63' cy='12' rx='5' ry='4'/%3E%3Cellipse cx='39' cy='58' rx='5' ry='4'/%3E%3Cellipse cx='74' cy='52' rx='4' ry='4'/%3E%3Cellipse cx='16' cy='75' rx='4' ry='3'/%3E%3Cellipse cx='60' cy='84' rx='5' ry='4'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- flap / zip ---- */
.bag-top{height:64px;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;position:relative}
.bag-zip{
  position:absolute;left:0;right:0;bottom:0;height:14px;
  background:
    repeating-linear-gradient(90deg, var(--hw2) 0 5px, var(--hw3) 5px 7px, var(--hw2) 7px 10px);
  border-top:2px solid var(--hw1);border-bottom:2px solid var(--hw1);
}
.bag-pull{
  position:absolute;right:26px;bottom:-13px;width:12px;height:26px;border-radius:7px;
  background:linear-gradient(160deg,var(--hw3),var(--hw2));
  border:1px solid var(--hw1);box-shadow:0 2px 5px rgba(42,33,28,.3);z-index:3;
}
.bag-name{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-variation-settings:"opsz" 60,"SOFT" 100,"WONK" 1;
  font-size:clamp(17px,2.4vw,23px);color:var(--ink-on);letter-spacing:.01em;
}
.bag-mono{
  font-family:var(--serif);font-style:italic;font-weight:300;font-size:15px;
  color:var(--ink-on);opacity:.85;letter-spacing:.14em;
  border:1px solid currentColor;border-radius:999px;padding:5px 13px;
}

/* ---- interior ---- */
.bag-inside{
  background:
    linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)),
    linear-gradient(160deg,var(--m1),var(--m2));
  padding:18px 18px 22px;position:relative;
}
.bag-inside::before{ /* inner shadow under the zip, like looking into the bag */
  content:"";position:absolute;left:0;right:0;top:0;height:22px;pointer-events:none;
  background:linear-gradient(rgba(42,33,28,.16), transparent);
}
.compartment{
  background:rgba(255,255,255,.72);border:1px solid rgba(42,33,28,.09);
  border-radius:14px;padding:12px 14px 14px;margin-bottom:12px;
  box-shadow:inset 0 1px 3px rgba(42,33,28,.05);
}
.compartment:last-child{margin-bottom:0}
.compartment > h6{
  margin:0 0 10px;font-size:9.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-45);
  display:flex;justify-content:space-between;align-items:baseline;
}
.compartment > h6 i{font-style:normal;color:var(--ink-25);letter-spacing:.05em}
.pocket{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px}
.slot{position:relative;text-decoration:none;display:block}
.slot .ptile{width:100%;aspect-ratio:1;border-radius:11px}
.slot .hgdot{
  position:absolute;top:5px;right:5px;width:16px;height:16px;border-radius:999px;
  background:var(--clay);color:#fff;font-size:9px;line-height:16px;text-align:center;
  box-shadow:0 1px 3px rgba(42,33,28,.3);
}
.slot .ampm{
  position:absolute;left:5px;top:5px;font-size:8px;font-weight:700;letter-spacing:.08em;
  background:rgba(255,255,255,.9);border-radius:999px;padding:2px 6px;color:var(--ink-70);
  text-transform:uppercase;
}
.slot figcaption{
  margin-top:5px;font-size:10px;line-height:1.25;color:var(--ink-70);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.slot:hover .ptile{outline:2px solid var(--clay);outline-offset:1px}

/* shelf toggle (makeup / skincare) */
.shelf-toggle{display:inline-flex;background:var(--cream-2);border-radius:999px;padding:4px;gap:2px;border:1px solid var(--line)}
.shelf-toggle button{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  border:0;background:transparent;color:var(--ink-70);border-radius:999px;padding:9px 20px;cursor:pointer;transition:.18s;
}
.shelf-toggle button[aria-pressed=true]{background:var(--ink);color:var(--cream);box-shadow:var(--shadow)}

/* ---- bag designer ---- */
.designer .sw{display:flex;gap:9px;flex-wrap:wrap}
.designer .sw button{
  width:38px;height:38px;border-radius:999px;cursor:pointer;padding:0;
  border:2px solid transparent;transition:.15s;box-shadow:inset 0 0 0 1px rgba(42,33,28,.12);
}
.designer .sw button[aria-pressed=true]{border-color:var(--ink);transform:scale(1.08)}
.designer .sw button.hwv{border-radius:10px;width:52px}
.designer label.dz{display:block;font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-45);margin:16px 0 8px}

/* mini bag (explore cards) */
.minibag{
  width:100%;aspect-ratio:2.6/1;border-radius:14px;overflow:hidden;position:relative;
  border:1px solid rgba(42,33,28,.12);
}
.minibag .bag-zip{height:9px;top:auto;bottom:auto;top:26px}
.minibag .mono{
  position:absolute;right:12px;bottom:8px;font-family:var(--serif);font-style:italic;
  font-size:13px;color:var(--ink-on);opacity:.8;letter-spacing:.1em;
}

/* explore grid */
.egrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.ecard{
  background:var(--shell);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);
  padding:16px;box-shadow:var(--shadow);text-decoration:none;display:block;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s;
}
.ecard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.ecard h3{font-family:var(--serif);font-weight:300;font-size:21px;margin:12px 0 2px;
  font-variation-settings:"opsz" 60,"SOFT" 90,"WONK" 1;letter-spacing:-.01em}
.ecard .eh{font-size:12.5px;color:var(--ink-45)}
.ecard .emeta{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.ecard .emeta i{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;background:var(--cream-2);padding:4px 9px;border-radius:999px;color:var(--ink-70)}
.ecard .efoot{margin-top:12px;font-size:11.5px;color:var(--ink-45);
  border-top:1px solid var(--line-soft);padding-top:10px;line-height:1.5}