/* Lily O'Riley catalog — palette & type from the main site */
@font-face{font-family:"Bebas Neue";font-weight:400;font-display:swap;src:url("../fonts/bebas-neue-400.woff2") format("woff2");}
@font-face{font-family:"KG Piece By Piece";font-weight:400;font-display:swap;src:url("../fonts/kg-piece-by-piece.ttf") format("truetype");}
@font-face{font-family:"Open Sans";font-weight:300;font-display:swap;src:url("../fonts/open-sans-300.woff2") format("woff2");}
@font-face{font-family:"Open Sans";font-weight:400;font-display:swap;src:url("../fonts/open-sans-400.woff2") format("woff2");}
@font-face{font-family:"Open Sans";font-weight:600;font-display:swap;src:url("../fonts/open-sans-600.woff2") format("woff2");}
@font-face{font-family:"Open Sans";font-weight:700;font-display:swap;src:url("../fonts/open-sans-700.woff2") format("woff2");}

:root{
  --pink:#dba4cb; --pink-alt:#e1a0cb; --page-bg:#fdebeb; --card-bg:#fdf4ed;
  --ink:#443028; --shadow:#c2c2c2; --terracotta:#e48c71; --line:#000;
  --display:"Bebas Neue",Impact,sans-serif;
  --script:"KG Piece By Piece","Comic Sans MS",cursive;
  --body:"Open Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --wrap:1200px;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--page-bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}

/* header / nav — matches catalog mocks (logo left in script font, nav right) */
.site-header{max-width:var(--wrap);margin:0 auto;padding:28px 24px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.brand{font-family:var(--script);font-size:44px;line-height:1;color:var(--ink);}
.nav{display:flex;background:#fff;border:2px solid var(--line);border-radius:4px;overflow:hidden;}
.nav__link{padding:14px 20px;font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--line);}
.nav__link:hover{color:var(--terracotta);}
.nav__cta{background:var(--pink);border-left:2px solid var(--line);}
.nav__cta:hover{background:var(--pink-alt);color:var(--line);}

.wrap{max-width:var(--wrap);margin:0 auto;padding:8px 24px 70px;}

/* display headings with offset shadow */
.display{font-family:var(--display);font-weight:400;font-size:clamp(44px,6vw,72px);line-height:.95;color:var(--pink);text-shadow:3px 3px 0 var(--shadow);text-transform:uppercase;margin:14px 0 18px;}
.display--sm{font-size:clamp(34px,4vw,48px);}

/* breadcrumb */
.crumb{font-size:15px;margin:18px 0 4px;color:var(--ink);}
.crumb a{color:var(--pink);}
.crumb a:hover{text-decoration:underline;}
.crumb__sep{color:#b7a6a0;margin:0 2px;}
.crumb__here{color:var(--ink);}

/* buttons */
.btn{display:inline-block;border:none;cursor:pointer;font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding:11px 20px;border-radius:3px;transition:background .15s,transform .1s;}
.btn--pink{background:var(--pink);color:var(--ink);}
.btn--pink:hover{background:var(--pink-alt);}
.btn--pink:active{transform:translateY(1px);}
.btn--lg{font-size:15px;padding:13px 30px;}
.btn--ghost{background:transparent;border:2px solid var(--ink);color:var(--ink);}
.btn.is-added{background:#bfe0b8;}

/* ---- "How this works" ---- */
.how{background:var(--card-bg);border:2px solid var(--pink);border-radius:8px;padding:22px 26px;margin:8px 0 34px;}
.how__title{font-family:var(--script);font-size:30px;margin:0 0 6px;}
.how__cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:12px;}
.how__col h3{font-family:var(--script);font-weight:400;font-size:23px;margin:0 0 4px;color:#b5638f;}
.how__col p{margin:0;font-size:15px;}

/* ---- category grid (shop index) ---- */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:10px;}
.cat-card{display:flex;flex-direction:column;background:var(--card-bg);padding:16px 16px 22px;position:relative;}
.cat-card__media{display:block;background:#fdeef4;aspect-ratio:1/1;overflow:hidden;}
.cat-card__media img{width:100%;height:100%;object-fit:cover;}
.cat-card__label{font-family:var(--script);font-size:24px;margin-top:12px;}
.cat-card__count{color:var(--pink);}

/* ---- category toolbar ---- */
.cat-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:6px 0 22px;flex-wrap:wrap;}
.result-count{margin:0;color:#7c6a63;font-size:15px;}
.sort{font-size:14px;color:#7c6a63;}
.sort select{font-family:var(--body);font-size:14px;padding:8px 10px;border:1px solid #d9c9c1;border-radius:4px;background:#fff;margin-left:6px;}

/* ---- product grid + cards ---- */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.product-grid--related{margin-top:10px;}
.card{background:var(--card-bg);display:flex;flex-direction:column;padding:14px 14px 20px;position:relative;}
.card__media{display:block;background:#fff;aspect-ratio:16/9;overflow:hidden;margin-bottom:14px;}
.card__media img{width:100%;height:100%;object-fit:cover;}
.card__title{font-family:var(--script);font-weight:400;font-size:23px;line-height:1.1;margin:0 0 6px;text-align:center;}
.card__title a:hover{color:var(--pink);}
.card__meta{display:flex;justify-content:center;align-items:center;gap:14px;margin:0 0 14px;}
.card__len,.card__price{display:inline-flex;align-items:center;gap:.32em;margin:0;}
.card__price{font-size:16px;}
.card__len{font-size:13px;letter-spacing:.03em;color:#9a857e;}
.card__len::before,.card__price::before{content:"";display:inline-block;background-color:var(--pink);-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;}
.card__len::before{width:1em;height:1em;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%207.5V12l3%201.8%27%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%207.5V12l3%201.8%27%2F%3E%3C%2Fsvg%3E");}
.card__price::before{width:.82em;height:.82em;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202.5v19%27%2F%3E%3Cpath%20d%3D%27M16.5%206.6C15.8%205%2014.3%204%2012.4%204H11a3%203%200%20000%206h2a3%203%200%20010%206h-1.4c-1.9%200-3.4-1-4.1-2.6%27%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202.5v19%27%2F%3E%3Cpath%20d%3D%27M16.5%206.6C15.8%205%2014.3%204%2012.4%204H11a3%203%200%20000%206h2a3%203%200%20010%206h-1.4c-1.9%200-3.4-1-4.1-2.6%27%2F%3E%3C%2Fsvg%3E");}
.card__add{align-self:center;}

/* torn-paper bottom edge on cream cards (matches mock) */
.cat-card,.card{
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,
    radial-gradient(9px 9px at 9px 0, #0000 98%, #000) bottom left/18px 9px repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,
    radial-gradient(9px 9px at 9px 0, #0000 98%, #000) bottom left/18px 9px repeat-x;
}

/* ---- pagination ---- */
.pager{display:flex;justify-content:center;gap:10px;margin-top:36px;}
.pager__num{min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e3d3cb;border-radius:4px;font-weight:600;}
.pager__num:hover{border-color:var(--pink);}
.pager__num.is-active{background:#f0e6ef;border-color:var(--pink);}

/* ---- product detail (Layout B: wide stage left, info column right) ---- */
.pd{display:grid;grid-template-columns:1.7fr 1fr;gap:40px;margin-top:8px;align-items:start;}
.pd__media{background:#1c1216;aspect-ratio:16/9;overflow:hidden;border-radius:10px;}
.pd__media img{width:100%;height:100%;object-fit:cover;}
.pd__play{position:relative;display:block;width:100%;height:100%;padding:0;border:none;background:#1c1216;cursor:pointer;}
.pd__play-icon{position:absolute;inset:0;margin:auto;width:66px;height:66px;border-radius:50%;background:rgba(219,164,203,.92);border:3px solid #fff;box-shadow:0 3px 14px rgba(0,0,0,.28);transition:background .15s,transform .1s;}
.pd__play-icon::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff;}
.pd__play:hover .pd__play-icon{background:var(--pink);}
.pd__play:active .pd__play-icon{transform:scale(.94);}
/* missing webm: keep the still, swap the play affordance for a clear label */
.pd__play--out{cursor:default;}
.pd__play--out .pd__play-icon{display:none;}
.pd__play--out::after{content:"Preview unavailable";position:absolute;left:0;right:0;bottom:0;padding:9px;text-align:center;font-size:13px;letter-spacing:.03em;color:#fff;background:rgba(28,18,22,.72);}
.pd__video{width:100%;aspect-ratio:16/9;background:#000;display:block;border-radius:10px;}
.pd__price{font-size:22px;margin:0 0 18px;}
.pd__cat{margin:18px 0 0;color:#7c6a63;}
.pd__cat a{color:var(--pink);}
.pd__meta{color:#7c6a63;margin:6px 0 0;font-size:15px;}
.pd__desc{background:var(--card-bg);padding:22px 26px;margin:34px 0 0;}
.pd__desc-title{font-family:var(--script);font-weight:400;font-size:26px;margin:0 0 8px;text-transform:uppercase;}
.pd__desc p{margin:0;}

/* ---- "Also available on" inset ---- */
.vendors{margin:34px 0 0;border:2px solid var(--pink);border-radius:10px;padding:22px 24px 26px;background:linear-gradient(180deg,#fff6fb, var(--card-bg));position:relative;}
.vendors__title{font-family:var(--display);font-size:30px;letter-spacing:.02em;color:var(--pink);text-shadow:2px 2px 0 var(--shadow);margin:0;text-transform:uppercase;}
.vendors__hint{margin:2px 0 16px;color:#7c6a63;font-size:14px;}
.vendors__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;}
.vendor-tile{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #ecd6e4;border-radius:8px;padding:12px 14px;min-width:0;transition:border-color .15s,transform .1s,box-shadow .15s;}
.vendor-tile:hover{border-color:var(--pink);transform:translateY(-2px);box-shadow:0 4px 12px rgba(219,164,203,.28);}
.vendor-tile__icon{flex:0 0 auto;width:38px;height:38px;border-radius:7px;background:#f4e3ee;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.vendor-tile__icon img{width:100%;height:100%;object-fit:cover;}
.vendor-tile__icon.is-empty{background:repeating-linear-gradient(45deg,#f4e3ee,#f4e3ee 6px,#eed4e6 6px,#eed4e6 12px);}
.vendor-tile__name{font-weight:600;font-size:14px;line-height:1.2;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;}
.vendor-tile__go{flex:0 0 auto;font-size:12px;color:var(--pink);font-weight:700;white-space:nowrap;}

.related{margin-top:44px;}

/* ---- cart badge + drawer + checkout ---- */
.cart-fab{position:fixed;right:20px;bottom:20px;z-index:40;background:var(--pink);color:var(--ink);border:2px solid var(--line);border-radius:40px;padding:12px 20px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.15);}
.cart-fab__count{background:var(--ink);color:#fff;border-radius:20px;padding:1px 8px;margin-left:6px;font-size:13px;}

.cart-overlay{position:fixed;inset:0;z-index:60;background:rgba(65,45,50,.55);opacity:0;visibility:hidden;transition:opacity .2s;}
.cart-overlay.is-open{opacity:1;visibility:visible;}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(420px,100%);background:var(--page-bg);box-shadow:-8px 0 40px rgba(0,0,0,.25);transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;}
.cart-drawer.is-open{transform:translateX(0);}
.cart-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:2px solid #f0d8e4;}
.cart-drawer__head h2{font-family:var(--script);font-weight:400;font-size:30px;margin:0;}
.cart-drawer__close{background:none;border:none;font-size:30px;line-height:1;cursor:pointer;color:var(--ink);padding:0 4px;}
.cart-drawer__body{padding:18px 22px;overflow-y:auto;flex:1;}
.cart-empty{color:#8a756e;font-style:italic;padding:20px 0;}

.cart-lines{list-style:none;margin:0 0 6px;padding:0;}
.cart-line{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f0d8e4;}
.cart-line__name{font-size:15px;}
.cart-line__price{font-weight:600;}
.cart-line__rm{background:none;border:none;color:#b98aa6;font-size:20px;line-height:1;cursor:pointer;padding:0 2px;}
.cart-line__rm:hover{color:#a23b6e;}
.cart-total{display:flex;justify-content:space-between;font-weight:700;font-size:18px;margin:14px 0 0;}
.cart-how{background:var(--card-bg);border:1px solid #eccfe0;border-radius:6px;padding:12px 14px;margin:16px 0;font-size:13px;color:#6f5c55;line-height:1.5;}

.cart-form{display:flex;flex-direction:column;gap:12px;}
.cf-row{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:600;color:#5f4d47;}
.cf-row em{color:var(--pink);font-style:normal;}
.cf-row input,.cf-row select{font-family:var(--body);font-size:15px;padding:10px 12px;border:1px solid #dcc4d3;border-radius:5px;background:#fff;font-weight:400;color:var(--ink);}
.cf-row input:focus,.cf-row select:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px rgba(219,164,203,.25);}
.cf-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;}
.cf-turnstile:empty{display:none;}
.cf-error{background:#fdecec;color:#a2373a;border:1px solid #f2c4c4;border-radius:5px;padding:9px 12px;margin:0;font-size:14px;}
.cf-submit{margin-top:4px;}
.cf-submit:disabled{opacity:.6;cursor:default;}

.cart-thanks{text-align:center;padding:40px 10px;}
.cart-thanks__mark{width:64px;height:64px;border-radius:50%;background:#bfe0b8;color:#2f6d2a;font-size:34px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.cart-thanks p{font-size:16px;color:var(--ink);margin:0 0 22px;}

body.cart-open{overflow:hidden;}

/* ---- age gate ---- */
.age-gate{position:fixed;inset:0;z-index:100;background:rgba(65,45,50,.72);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;}
.age-gate[hidden]{display:none;}
.age-gate__box{background:var(--page-bg);max-width:440px;width:100%;border-radius:12px;padding:30px 28px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35);}
.age-gate__brand{font-family:var(--script);font-size:40px;margin-bottom:8px;}
.age-gate__title{font-family:var(--display);font-size:30px;color:var(--pink);text-shadow:2px 2px 0 var(--shadow);text-transform:uppercase;margin:0 0 8px;}
.age-gate__body{font-size:15px;color:var(--ink);margin:0 0 20px;}
.age-gate__actions{display:flex;flex-direction:column;gap:10px;}

.site-footer{text-align:center;padding:24px;color:#b08fa6;font-size:14px;}
.site-footer a{color:inherit;}

/* ---- responsive ---- */
@media(max-width:1000px){
  .cat-grid,.product-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:760px){
  .cat-grid,.product-grid{grid-template-columns:repeat(2,1fr);}
  .pd{grid-template-columns:1fr;gap:24px;}
  .how__cols{grid-template-columns:1fr;gap:16px;}
  .site-header{padding:18px 16px 0;}
  .nav__link{padding:11px 13px;font-size:12px;}
  .wrap{padding:8px 16px 54px;}
}
@media(max-width:440px){
  .cat-grid,.product-grid{grid-template-columns:1fr 1fr;gap:14px;}
  .brand{font-size:34px;}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;}}