/* ============================================================
   QUEEN CHAOS CUSTOMS — shared stylesheet
   Lifted verbatim from the existing page styles so nothing
   shifts, then extended with the pieces the new pages need
   (forms, account panels, order tables) built from the same
   five variables. Every page still keeps its own <style> block
   after this one, so any page-specific rule still wins.
   ============================================================ */

:root{
  --void:#0A090D;
  --panel:#17121F;
  --royal:#6C3FA6;
  --lilac:#C9A8E8;
  --chrome:#E7E4EC;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--void);
  color:var(--chrome);
  font-family:'Jost', sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
.gothic{font-family:'Pirata One', serif;}
.engraved{font-family:'Cinzel', serif; text-transform:uppercase;}

/* ============ ANNOUNCEMENT BAR ============ */
.announce{
  background:var(--panel);
  border-bottom:1px solid rgba(201,168,232,0.18);
  text-align:center;
  padding:9px 0;
  font-family:'Cinzel', serif;
  font-size:11px;
  letter-spacing:0.18em;
  color:var(--lilac);
}

/* ============ HEADER ============ */
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 48px;
  border-bottom:1px solid rgba(201,168,232,0.14);
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit;}
.brand img{height:52px; width:auto; display:block;}
.brand-name{
  font-family:'Cinzel', serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:0.14em;
  line-height:1.3;
}
.brand-name span{
  display:block;
  font-size:10px;
  color:var(--lilac);
  font-weight:400;
  letter-spacing:0.3em;
}
nav{display:flex; gap:34px; font-family:'Cinzel', serif; font-size:11px; letter-spacing:0.14em;}
nav a{color:var(--chrome); text-decoration:none; opacity:0.85; border-bottom:1px solid transparent; padding-bottom:4px;}
nav a:hover, nav a:focus-visible{opacity:1; border-bottom:1px solid var(--royal); color:var(--lilac);}
nav a.active{opacity:1; color:var(--lilac); border-bottom:1px solid var(--royal);}
.cart, .cart-link{
  font-family:'Cinzel', serif;
  font-size:11px;
  letter-spacing:0.1em;
  border:1px solid var(--royal);
  padding:8px 16px;
  color:var(--lilac);
  text-decoration:none;
  white-space:nowrap;
}
.cart:hover, .cart-link:hover{background:var(--royal); color:var(--chrome);}

/* ---- Account + cart cluster in the header ----
   Keeps the header at three flex children (brand / nav /
   actions) so the original layout is untouched. */
.header-actions{
  display:flex;
  align-items:center;
  gap:14px;
}
.acct{
  position:relative;
  font-family:'Cinzel', serif;
  font-size:11px;
  letter-spacing:0.1em;
}
.acct-trigger{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:'Cinzel', serif;
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--chrome);
  background:transparent;
  border:1px solid rgba(201,168,232,0.32);
  padding:8px 14px;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
}
.acct-trigger:hover, .acct-trigger:focus-visible{border-color:var(--royal); color:var(--lilac);}
.acct-trigger .caret{font-size:8px; opacity:0.7;}
.acct-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:186px;
  background:var(--panel);
  border:1px solid rgba(201,168,232,0.25);
  padding:6px 0;
  z-index:60;
  box-shadow:0 12px 34px rgba(0,0,0,0.6);
}
.acct-menu[hidden]{display:none;}
.acct-menu a, .acct-menu button{
  display:block;
  width:100%;
  text-align:left;
  font-family:'Cinzel', serif;
  font-size:10px;
  letter-spacing:0.12em;
  color:var(--chrome);
  background:none;
  border:none;
  padding:11px 16px;
  text-decoration:none;
  cursor:pointer;
}
.acct-menu a:hover, .acct-menu button:hover{background:rgba(108,63,166,0.28); color:var(--lilac);}
.acct-menu .menu-head{
  padding:10px 16px 12px;
  border-bottom:1px solid rgba(201,168,232,0.15);
  margin-bottom:6px;
  font-family:'Jost', sans-serif;
  font-size:12px;
  letter-spacing:0;
  color:rgba(231,228,236,0.6);
}
.acct-menu .menu-head strong{
  display:block;
  font-family:'Cinzel', serif;
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--chrome);
  font-weight:600;
  margin-bottom:2px;
}

@media (max-width:600px){
  header{padding:16px 20px; flex-wrap:wrap; gap:14px; justify-content:center; text-align:center;}
  nav{gap:18px; flex-wrap:wrap; justify-content:center;}
  .header-actions{gap:10px;}
}

/* ============ BREADCRUMB ============ */
.breadcrumb{
  font-family:'Cinzel', serif;
  font-size:10px;
  letter-spacing:0.1em;
  color:rgba(231,228,236,0.5);
  padding:22px 48px 0;
}
.breadcrumb a{color:rgba(231,228,236,0.5); text-decoration:none;}
.breadcrumb a:hover{color:var(--lilac);}
.breadcrumb .sep{margin:0 8px; opacity:0.4;}
.breadcrumb .current{color:var(--lilac);}
@media (max-width:600px){ .breadcrumb{padding:18px 20px 0;} }

/* ============ PAGE HEAD ============ */
.page-head{text-align:center; padding:44px 24px 10px;}
.page-head h1{
  font-family:'Pirata One', serif;
  font-weight:400;
  font-size:clamp(36px, 6vw, 56px);
  text-transform:uppercase;
  text-shadow:0 0 20px rgba(108,63,166,0.5);
}
.page-head p{
  font-family:'Cinzel', serif;
  font-size:11px;
  letter-spacing:0.14em;
  color:var(--lilac);
  margin-top:10px;
}

.section-label{text-align:center; padding:64px 24px 6px;}
.section-label .crest{font-family:'Pirata One', serif; font-size:22px; color:var(--royal); margin-bottom:6px;}
.section-label h2{font-family:'Cinzel', serif; font-size:20px; letter-spacing:0.16em;}
.section-label p{font-size:13px; color:rgba(231,228,236,0.55); margin-top:8px;}

/* ============ FLASH MESSAGES ============ */
.qcc-alert{
  max-width:760px;
  margin:22px auto 0;
  background:rgba(108,63,166,0.16);
  border:1px solid rgba(201,168,232,0.35);
  border-left:3px solid var(--royal);
  padding:14px 18px;
  font-size:13px;
  color:var(--chrome);
  line-height:1.6;
}
.qcc-alert-error{
  background:rgba(224,103,103,0.1);
  border-color:rgba(224,103,103,0.4);
  border-left-color:#e06767;
}

/* ============ FORMS / AUTH PANELS ============ */
.form-panel{
  max-width:470px;
  margin:26px auto 90px;
  background:var(--panel);
  border:1px solid rgba(201,168,232,0.2);
  padding:34px 32px 32px;
}
.form-panel.wide{max-width:760px;}
.form-panel h2{
  font-family:'Cinzel', serif;
  font-size:15px;
  letter-spacing:0.12em;
  margin-bottom:6px;
}
.form-panel .panel-note{
  font-size:13px;
  color:rgba(231,228,236,0.55);
  line-height:1.65;
  margin-bottom:24px;
}
.field{margin-bottom:18px;}
.field label{
  display:block;
  font-family:'Cinzel', serif;
  font-size:10px;
  letter-spacing:0.14em;
  color:var(--lilac);
  margin-bottom:7px;
}
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=password],
.field select,
.field textarea{
  width:100%;
  background:var(--void);
  border:1px solid rgba(201,168,232,0.3);
  color:var(--chrome);
  font-family:'Jost', sans-serif;
  font-size:14px;
  font-weight:300;
  padding:12px 13px;
}
.field textarea{min-height:130px; resize:vertical; line-height:1.6;}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--royal);
  box-shadow:0 0 0 1px rgba(108,63,166,0.5);
}
.field .hint{
  display:block;
  margin-top:6px;
  font-size:11px;
  color:rgba(231,228,236,0.42);
  line-height:1.5;
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:560px){ .field-row{grid-template-columns:1fr;} }
.field-check{display:flex; align-items:flex-start; gap:10px; margin-bottom:18px;}
.field-check input{margin-top:3px; accent-color:var(--royal);}
.field-check label{font-size:13px; color:rgba(231,228,236,0.65); line-height:1.55;}
.form-error{
  background:rgba(224,103,103,0.1);
  border:1px solid rgba(224,103,103,0.4);
  color:#f0b4b4;
  padding:12px 14px;
  font-size:13px;
  line-height:1.55;
  margin-bottom:20px;
}

/* Buttons — same shape language as .hero-cta / .add-btn */
.btn-primary{
  display:block;
  width:100%;
  text-align:center;
  font-family:'Cinzel', serif;
  font-size:12px;
  letter-spacing:0.16em;
  color:var(--void);
  background:var(--royal-run);
  padding:15px;
  border:1px solid var(--royal);
  text-decoration:none;
  cursor:pointer;
}
.btn-primary:hover{opacity:0.9;}
.btn-ghost{
  display:inline-block;
  font-family:'Cinzel', serif;
  font-size:11px;
  letter-spacing:0.14em;
  color:var(--lilac);
  background:transparent;
  border:1px solid var(--royal);
  padding:12px 24px;
  text-decoration:none;
  cursor:pointer;
}
.btn-ghost:hover{background:var(--royal); color:var(--chrome);}
.form-alt{
  text-align:center;
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid rgba(201,168,232,0.15);
  font-size:13px;
  color:rgba(231,228,236,0.55);
}
.form-alt a{color:var(--lilac); text-decoration:none; border-bottom:1px solid rgba(201,168,232,0.4);}
.form-alt a:hover{color:var(--chrome);}
.form-minor{
  display:block;
  text-align:right;
  margin-top:-8px;
  margin-bottom:18px;
  font-size:12px;
  color:rgba(231,228,236,0.5);
  text-decoration:none;
}
.form-minor:hover{color:var(--lilac);}

/* ============ ACCOUNT AREA ============ */
.account-wrap{
  max-width:1000px;
  margin:0 auto;
  padding:26px 24px 90px;
  display:grid;
  grid-template-columns:220px 1fr;
  gap:34px;
  align-items:start;
}
@media (max-width:820px){ .account-wrap{grid-template-columns:1fr; padding:22px 20px 70px;} }
.account-nav{
  background:var(--panel);
  border:1px solid rgba(201,168,232,0.18);
  padding:10px 0;
}
.account-nav a{
  display:block;
  font-family:'Cinzel', serif;
  font-size:10px;
  letter-spacing:0.13em;
  color:rgba(231,228,236,0.75);
  text-decoration:none;
  padding:13px 18px;
  border-left:2px solid transparent;
}
.account-nav a:hover{color:var(--lilac); background:rgba(108,63,166,0.14);}
.account-nav a.active{color:var(--lilac); border-left-color:var(--royal); background:rgba(108,63,166,0.2);}
.account-panel{
  background:var(--panel);
  border:1px solid rgba(201,168,232,0.2);
  padding:28px 28px 30px;
}
.account-panel + .account-panel{margin-top:22px;}
.account-panel h2{
  font-family:'Cinzel', serif;
  font-size:14px;
  letter-spacing:0.12em;
  padding-bottom:14px;
  margin-bottom:20px;
  border-bottom:1px solid rgba(201,168,232,0.15);
}
.detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px 26px;}
@media (max-width:600px){ .detail-grid{grid-template-columns:1fr;} }
.detail-grid dt{
  font-family:'Cinzel', serif;
  font-size:9px;
  letter-spacing:0.14em;
  color:var(--lilac);
  opacity:0.85;
  margin-bottom:5px;
}
.detail-grid dd{font-size:14px; color:rgba(231,228,236,0.85); line-height:1.55;}

/* ============ TABLES (orders, admin-ish lists) ============ */
.data-table{width:100%; border-collapse:collapse; font-size:13px;}
.data-table th{
  text-align:left;
  font-family:'Cinzel', serif;
  font-size:9px;
  letter-spacing:0.14em;
  color:var(--lilac);
  font-weight:400;
  padding:0 12px 12px 0;
  border-bottom:1px solid rgba(201,168,232,0.18);
}
.data-table td{
  padding:15px 12px 15px 0;
  border-bottom:1px solid rgba(201,168,232,0.09);
  color:rgba(231,228,236,0.8);
  vertical-align:top;
}
.data-table tr:last-child td{border-bottom:none;}
.data-table a{color:var(--lilac); text-decoration:none; border-bottom:1px solid rgba(201,168,232,0.35);}
.data-table a:hover{color:var(--chrome);}
.order-no{font-family:'Cinzel', serif; letter-spacing:0.06em;}

.status-pill{
  display:inline-block;
  font-family:'Cinzel', serif;
  font-size:9px;
  letter-spacing:0.12em;
  padding:5px 10px;
  border:1px solid rgba(201,168,232,0.35);
  color:var(--lilac);
  white-space:nowrap;
}
.status-pill.is-pending{border-color:rgba(231,228,236,0.25); color:rgba(231,228,236,0.55);}
.status-pill.is-new{border-color:var(--royal); color:var(--lilac);}
.status-pill.is-shipped{border-color:#5fa8a0; color:#8fd6ce;}
.status-pill.is-delivered{border-color:#63a663; color:#95d495;}
.status-pill.is-cancelled{border-color:#a45c5c; color:#e0a0a0;}

.empty-state{
  text-align:center;
  padding:56px 24px;
  border:1px dashed rgba(201,168,232,0.25);
}
.empty-state p{color:rgba(231,228,236,0.55); margin:12px 0 24px; font-size:14px;}

/* ============ FOOTER ============ */
footer{
  background:var(--panel);
  border-top:1px solid rgba(201,168,232,0.16);
  padding:54px 40px 28px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:34px;
  max-width:1180px;
  margin:0 auto;
  padding-bottom:30px;
  border-bottom:1px solid rgba(201,168,232,0.14);
}
@media (max-width:700px){ .footer-grid{grid-template-columns:1fr 1fr;} }
footer h4{
  font-family:'Cinzel', serif;
  font-size:11px;
  letter-spacing:0.16em;
  color:var(--lilac);
  margin-bottom:16px;
}
footer p, footer a{
  font-size:13px;
  color:rgba(231,228,236,0.6);
  line-height:2;
  text-decoration:none;
  display:block;
}
footer a:hover{color:var(--lilac);}
.footer-bottom{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-top:20px;
  font-family:'Cinzel', serif;
  font-size:10px;
  letter-spacing:0.1em;
  color:rgba(231,228,236,0.4);
}
/* Three items across, so the credit lands in the middle. Wraps to
   stacked, centred lines on a phone rather than crushing together. */
.footer-credit{text-align:center;}
@media (max-width:640px){
  .footer-bottom{justify-content:center; text-align:center; gap:8px;}
}

/* ============================================================
   SHARED PAGE COMPONENTS
   These were duplicated inline across the storefront pages.
   Lifted here verbatim so the database-driven pages (line.php,
   designs.php) render identically to the hardcoded ones they
   replace. Each page still keeps its own <style> after this,
   so nothing it declared for itself changes.
   ============================================================ */

/* ---- Product grid + cards ---- */
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:30px;
  max-width:1180px;
  margin:0 auto;
  padding:34px 40px 80px;
}
@media (max-width:900px){ .grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .grid{grid-template-columns:1fr; padding:26px 20px 56px; gap:24px;} }

.card{
  position:relative;
  background:var(--panel);
  border:1px solid rgba(201,168,232,0.22);
  padding-top:22px;
  transition:transform 0.2s ease, border-color 0.2s ease;
}
.card:hover{transform:translateY(-5px); border-color:var(--royal);}
.card::before{
  content:'';
  position:absolute;
  top:-1px; left:50%;
  transform:translateX(-50%);
  width:34px; height:22px;
  background:var(--void);
  clip-path:polygon(50% 100%, 0 0, 100% 0);
  border-left:1px solid rgba(201,168,232,0.22);
  border-right:1px solid rgba(201,168,232,0.22);
}
.card-head{
  text-align:center;
  font-family:'Cinzel', serif;
  font-size:10px;
  letter-spacing:0.18em;
  color:var(--lilac);
  padding-bottom:14px;
}
.card-img{
  height:230px;
  background:linear-gradient(160deg, #241a30, #100c15);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(201,168,232,0.35);
  font-family:'Cinzel', serif;
  font-size:11px;
  letter-spacing:0.1em;
  border-top:1px solid rgba(201,168,232,0.15);
  border-bottom:1px solid rgba(201,168,232,0.15);
  overflow:hidden;
}
.card-body{padding:18px 18px 22px;}
.card-body h3{
  font-family:'Cinzel', serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:0.04em;
  margin-bottom:8px;
}
.card-body .desc{
  font-size:13px;
  color:rgba(231,228,236,0.55);
  margin-bottom:18px;
  line-height:1.5;
}
.card-foot{display:flex; justify-content:space-between; align-items:center;}
.card-line{
  font-family:'Cinzel', serif;
  font-size:9px;
  letter-spacing:0.12em;
  color:var(--lilac);
  opacity:0.8;
  margin-bottom:4px;
}
.design-select{
  width:100%;
  margin-bottom:14px;
  font-family:'Jost', sans-serif;
  font-size:13px;
  color:var(--chrome);
  background:var(--void);
  border:1px solid rgba(201,168,232,0.35);
  padding:10px 12px;
  appearance:none;
  -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--lilac) 50%), linear-gradient(135deg, var(--lilac) 50%, transparent 50%);
  background-position:calc(100% - 18px) center, calc(100% - 13px) center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  cursor:pointer;
}
.design-select:focus, .design-select:hover{border-color:var(--royal);}
.price{
  font-family:'Cinzel', serif;
  font-weight:600;
  font-size:15px;
  color:var(--lilac);
}
.add-btn{
  font-family:'Cinzel', serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.12em;
  background:transparent;
  color:var(--chrome);
  border:1px solid var(--royal);
  padding:10px 15px;
  cursor:pointer;
}
.add-btn:hover, .add-btn:focus-visible{background:var(--royal); color:var(--chrome);}

/* ---- Merch line cards (homepage) ---- */
/* Gallery style: cards keep a fixed 260px width and centre
   themselves, so one line sits dead centre, two sit centred as a
   pair, and four fill the row edge to edge. Past four they wrap and
   the last row stays centred under the ones above.

   Flex, not grid, on purpose — a grid's columns exist whether or not
   anything is in them, so two cards in a four-column grid get pushed
   off to the left. Flex only lays out what's actually there, which
   is what makes it centre properly at every count. The max-width is
   exactly four cards plus their gaps. */
.lines-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:26px;
  max-width:1198px;   /* 40px padding + (4 x 260) + (3 x 26) + 40px */
  margin:0 auto;
  padding:34px 40px 20px;
  box-sizing:border-box;
}
.lines-grid > *{
  flex:0 0 260px;
  max-width:260px;
  box-sizing:border-box;
}
@media (max-width:600px){
  .lines-grid{padding:26px 20px 10px;}
  .lines-grid > *{flex:0 0 100%; max-width:320px;}
}
.line-card{
  position:relative;
  text-align:center;
  background:linear-gradient(180deg, var(--panel), var(--void));
  border:1px solid rgba(201,168,232,0.2);
  padding:34px 22px 26px;
  transition:transform 0.2s ease, border-color 0.2s ease;
}
.line-card:hover{transform:translateY(-5px); border-color:var(--royal);}
.line-badge{
  width:56px; height:56px;
  margin:0 auto 16px;
  border:1px solid var(--royal);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Pirata One', serif;
  font-size:22px;
  color:var(--lilac);
  background:radial-gradient(circle, rgba(108,63,166,0.25), transparent 70%);
  overflow:hidden;
}
.line-badge img{width:100%; height:100%; object-fit:cover; display:block;}
.line-badge.is-short{font-size:15px; letter-spacing:0.04em;}
.line-card h3{font-family:'Cinzel', serif; font-size:15px; letter-spacing:0.1em; margin-bottom:8px;}
.line-card .tag{
  font-family:'Cinzel', serif;
  font-size:10px;
  letter-spacing:0.14em;
  color:var(--lilac);
  opacity:0.85;
  margin-bottom:14px;
  display:block;
}
.line-card p{font-size:13px; color:rgba(231,228,236,0.55); line-height:1.6; margin-bottom:18px;}
.line-link{
  font-family:'Cinzel', serif;
  font-size:10px;
  letter-spacing:0.14em;
  color:var(--chrome);
  text-decoration:none;
  border-bottom:1px solid var(--royal);
  padding-bottom:3px;
}
.line-link:hover, .line-link:focus-visible{color:var(--lilac); border-color:var(--lilac);}
.start-line{text-align:center; padding:8px 24px 10px;}
.start-line a{
  display:inline-block;
  font-family:'Cinzel', serif;
  font-size:11px;
  letter-spacing:0.16em;
  color:var(--lilac);
  text-decoration:none;
  border:1px solid var(--royal);
  padding:13px 28px;
}
.start-line a:hover, .start-line a:focus-visible{background:var(--royal); color:var(--chrome);}

/* ---- Page hero (shop, seasonal, designs) ---- */
.page-hero{
  position:relative;
  text-align:center;
  padding:44px 24px 46px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 55% 60% at 50% 20%, rgba(108,63,166,0.3), transparent 70%),
    var(--void);
}
.page-hero .eyebrow{
  font-family:'Cinzel', serif;
  font-size:11px;
  letter-spacing:0.35em;
  color:var(--lilac);
  margin-bottom:14px;
  display:block;
}
.page-hero h1{
  font-family:'Pirata One', serif;
  font-weight:400;
  font-size:clamp(36px, 6vw, 64px);
  line-height:1;
  text-transform:uppercase;
  text-shadow:0 0 26px rgba(108,63,166,0.65), 0 0 4px rgba(201,168,232,0.4);
}
.page-hero p{
  max-width:520px;
  margin:22px auto 0;
  font-size:15px;
  line-height:1.75;
  color:rgba(231,228,236,0.7);
}
@media (max-width:600px){ .page-hero{padding:36px 18px 36px;} }

/* ---- Line hero ---- */
.line-hero{
  position:relative;
  text-align:center;
  padding:44px 24px 60px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 55% 60% at 50% 20%, rgba(108,63,166,0.3), transparent 70%),
    var(--void);
}
.line-hero-badge{
  width:84px; height:84px;
  margin:0 auto 22px;
  border:1px solid var(--royal);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Pirata One', serif;
  font-size:34px;
  color:var(--lilac);
  background:radial-gradient(circle, rgba(108,63,166,0.3), transparent 70%);
}
.line-hero-badge.is-short{font-size:22px; letter-spacing:0.04em;}
.line-hero-art{
  width:min(240px, 52vw);
  aspect-ratio:1/1;
  margin:0 auto 22px;
  border-radius:50%;
  border:1px solid var(--royal);
  overflow:hidden;
  filter:drop-shadow(0 0 30px rgba(108,63,166,0.5));
}
.line-hero-art img{width:100%; height:100%; display:block; object-fit:cover;}
.line-hero .tag{
  font-family:'Cinzel', serif;
  font-size:11px;
  letter-spacing:0.3em;
  color:var(--lilac);
  margin-bottom:14px;
  display:block;
}
.line-hero h1{
  font-family:'Cinzel', serif;
  font-weight:700;
  font-size:clamp(30px, 5vw, 48px);
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.line-hero p{
  max-width:480px;
  margin:20px auto 0;
  font-size:15px;
  line-height:1.75;
  color:rgba(231,228,236,0.7);
}
@media (max-width:600px){ .line-hero{padding:36px 18px 44px;} }

/* ---- CTA strip ---- */
.cta-strip{
  text-align:center;
  padding:50px 24px 70px;
  border-top:1px solid rgba(201,168,232,0.14);
  margin-top:20px;
}
.cta-strip h2{font-family:'Cinzel', serif; font-size:18px; letter-spacing:0.1em; margin-bottom:12px;}
.cta-strip p{font-size:13px; color:rgba(231,228,236,0.55); max-width:420px; margin:0 auto 24px;}
.cta-strip a{
  display:inline-block;
  font-family:'Cinzel', serif;
  font-size:11px;
  letter-spacing:0.16em;
  color:var(--void);
  background:var(--royal-run);
  padding:15px 30px;
  text-decoration:none;
  border:1px solid var(--royal);
}
.cta-strip a:hover, .cta-strip a:focus-visible{background:transparent; color:var(--lilac);}

/* ---- Jump nav ---- */
.jump-nav{display:flex; justify-content:center; gap:16px; flex-wrap:wrap; padding:0 24px 10px;}
.jump-nav a{
  font-family:'Cinzel', serif;
  font-size:11px;
  letter-spacing:0.14em;
  color:var(--chrome);
  text-decoration:none;
  border:1px solid rgba(201,168,232,0.3);
  padding:9px 18px;
}
.jump-nav a:hover, .jump-nav a:focus-visible{border-color:var(--royal); color:var(--lilac);}

/* ---- Seasonal collection cards ---- */
.season-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:26px;
  max-width:1180px;
  margin:0 auto;
  padding:34px 40px 20px;
}
@media (max-width:600px){ .season-grid{grid-template-columns:1fr; padding:26px 20px 10px;} }
.season-card{
  position:relative;
  text-align:center;
  background:linear-gradient(180deg, var(--panel), var(--void));
  border:1px solid rgba(201,168,232,0.2);
  padding:34px 22px 26px;
  transition:transform 0.2s ease, border-color 0.2s ease;
}
.season-card:hover{transform:translateY(-5px); border-color:var(--royal);}
.season-badge{
  width:60px; height:60px;
  margin:0 auto 16px;
  border:1px solid var(--royal);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
  color:var(--lilac);
  background:radial-gradient(circle, rgba(108,63,166,0.25), transparent 70%);
}
.status{
  display:inline-block;
  font-family:'Cinzel', serif;
  font-size:9px;
  letter-spacing:0.14em;
  padding:4px 10px;
  margin-bottom:14px;
  border:1px solid;
}
.status.live{color:#7CE0A8; border-color:#7CE0A8;}
.status.soon{color:var(--lilac); border-color:var(--royal);}
.status.ended{color:rgba(231,228,236,0.4); border-color:rgba(231,228,236,0.25);}
.season-card h3{font-family:'Cinzel', serif; font-size:15px; letter-spacing:0.1em; margin-bottom:10px;}
.season-card p{font-size:13px; color:rgba(231,228,236,0.55); line-height:1.6; margin-bottom:18px;}
.season-link{
  font-family:'Cinzel', serif;
  font-size:10px;
  letter-spacing:0.14em;
  color:var(--chrome);
  text-decoration:none;
  border-bottom:1px solid var(--royal);
  padding-bottom:3px;
}
.season-link:hover, .season-link:focus-visible{color:var(--lilac); border-color:var(--lilac);}

/* ---- Design gallery ---- */
.design-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:18px;
  max-width:1180px;
  margin:0 auto;
  padding:30px 40px 20px;
}
@media (max-width:1000px){ .design-grid{grid-template-columns:repeat(4,1fr);} }
@media (max-width:760px){ .design-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:520px){ .design-grid{grid-template-columns:repeat(2,1fr); gap:12px; padding:22px 16px 10px;} }
.design-card{
  background:var(--panel);
  border:1px solid rgba(201,168,232,0.18);
  transition:transform 0.15s ease, border-color 0.15s ease;
}
.design-card:hover{transform:translateY(-3px); border-color:var(--royal);}
.design-swatch{
  aspect-ratio:1/1;
  background:linear-gradient(160deg, #241a30, #100c15);
  display:flex; align-items:center; justify-content:center;
  color:rgba(201,168,232,0.3);
  font-family:'Cinzel', serif;
  font-size:9px;
  letter-spacing:0.08em;
  border-bottom:1px solid rgba(201,168,232,0.15);
  overflow:hidden;
}
.design-swatch img{width:100%; height:100%; object-fit:cover; display:block;}
.design-label{padding:10px 10px 12px; text-align:center;}
.design-label .num{
  display:block;
  font-family:'Cinzel', serif;
  font-size:8px;
  letter-spacing:0.12em;
  color:var(--lilac);
  opacity:0.8;
  margin-bottom:4px;
}
.design-label .name{font-family:'Jost', sans-serif; font-weight:500; font-size:12px; color:var(--chrome);}

/* Sale pricing on product cards */
.price .was{
  text-decoration:line-through;
  opacity:0.45;
  font-size:0.8em;
  margin-right:5px;
  font-weight:400;
}
.sale-flag{
  position:absolute;
  top:10px; right:10px;
  z-index:2;
  font-family:'Cinzel', serif;
  font-size:9px;
  letter-spacing:0.12em;
  background:var(--royal);
  color:var(--chrome);
  padding:4px 9px;
}

/* Production note + paused state on product cards */
.prod-note{
  font-family:'Cinzel', serif;
  font-size:9px;
  letter-spacing:0.1em;
  color:var(--lilac);
  opacity:0.85;
  border-left:2px solid var(--royal);
  padding-left:8px;
  margin-bottom:14px;
  line-height:1.6;
}
.paused-btn{
  font-family:'Cinzel', serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.12em;
  color:rgba(231,228,236,0.45);
  border:1px solid rgba(231,228,236,0.22);
  padding:10px 15px;
  cursor:not-allowed;
}

/* ████████████████████████████████████████████████████████████
   QUEEN CHAOS CUSTOMS — DESIGN UPLIFT
   ────────────────────────────────────────────────────────────
   Everything above this line is the original sheet and still
   does the structural work: what is a grid, what is a panel,
   what stacks on a phone. This section changes how it LOOKS,
   and only that.

   It is last on purpose. A rule here beats the same rule above
   without anything above being deleted, so if a change lands
   wrong the fix is to cut it from this block — the site goes
   back to exactly where it was, not to a half-reverted state.

   The idea it is built on: the crest is the best thing on this
   site. Purple, chrome lettering, a crown, sparks coming off
   it. The pages were flat black with flat purple text and none
   of that came through. So every surface here picks up one of
   the crest's own tricks — brushed metal on the headings, a
   violet bloom behind the panels, a hairline of light along the
   top edge of a card — and the crest stops looking like it was
   dropped onto somebody else's website.
   ████████████████████████████████████████████████████████████ */

:root{
  /* ---- The original five. Unchanged: every rule above still
     reads these, and re-pointing them would move the whole site
     out from under itself. ---- */
  --void:#0A090D;
  --panel:#17121F;
  --royal:#6C3FA6;
  --lilac:#C9A8E8;
  --chrome:#E7E4EC;

  /* ---- Depth. Three surfaces instead of one, so a card can sit
     ON something rather than float in the same black. ---- */
  --sink:#07060A;            /* below the page - footer, wells   */
  --rise:#1E1729;            /* above the page - cards, menus    */
  --rise-2:#271E36;          /* above that - hover, active rows  */

  /* ---- Edges. Every hairline on the site came from a hand-typed
     rgba(201,168,232, x). Same colour, named by how loud it is. ---- */
  --edge:rgba(201,168,232,0.22);
  --edge-soft:rgba(201,168,232,0.12);
  --edge-loud:rgba(201,168,232,0.45);

  /* ---- Text. Full chrome is for headings; body copy at full
     strength is exhausting to read on black. ---- */
  --text:rgba(231,228,236,0.92);
  --text-dim:rgba(231,228,236,0.62);
  --text-faint:rgba(231,228,236,0.42);

  /* ---- Pink. Purple on black is one note, and one note across a
     whole site reads as unfinished rather than restrained. The crest
     is not one note either - the sparks coming off it are hot pink,
     and that is where this comes from.

     It is used in about six places on purpose: the primary button,
     a sale price, the glow under a card you are hovering, the sparks
     in the dividers. Full-saturation pink spread over everything is
     the difference between a boutique and a party invitation. ---- */
  --hot:#FF2E9A;             /* the spark - loud, and rationed        */
  --hot-deep:#C71B76;        /* its shadow, for gradients to land on  */
  --blush:#FFC4E3;           /* the soft one - hairlines, fine detail */

  /* ---- Brushed metal, straight off the crest lettering: light
     top, a dark band where the bevel turns, light again, then it
     cools into violet and finishes on pink - the same run the
     crest's own lettering makes. ---- */
  --metal:linear-gradient(177deg,
            #FFFFFF 0%, #F3F0F7 20%, #A199B0 45%,
            #FDFBFF 60%, #DCC8F0 80%, #F2A8D2 100%);

  /* The primary run. Purple into pink rather than lilac into purple:
     the old one got DARKER left to right, so the button's right half
     was dark text on dark violet and hard to read. */
  --royal-run:linear-gradient(120deg, var(--royal) 0%, #9B4BC7 45%, var(--hot) 100%);
  --hot-run:linear-gradient(120deg, var(--hot-deep), var(--hot));

  --bloom:0 0 44px rgba(108,63,166,0.42);
  --bloom-hot:0 0 46px rgba(255,46,154,0.34);
  --lift:0 18px 44px rgba(0,0,0,0.55), 0 2px 0 rgba(201,168,232,0.06) inset;

  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ============================================================
   THE PAGE ITSELF
   Flat #0A090D everywhere read as "unfinished" more than as
   "dark". Two fixed blooms, one violet at the top and one
   colder at the bottom, give the black somewhere to go.
   Fixed, not scrolling, so the light stays put and the content
   moves through it.
   ============================================================ */
body{
  color:var(--text);
  background:var(--void);
  position:relative;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(108,63,166,0.22), transparent 65%),
    radial-gradient(ellipse 60% 45% at 88% 108%, rgba(255,46,154,0.13), transparent 70%),
    radial-gradient(ellipse 55% 40% at 6% 62%, rgba(108,63,166,0.10), transparent 72%);
}
body > *{position:relative; z-index:1;}

/* Chrome lettering. -webkit-background-clip is the one that is
   actually supported everywhere; the unprefixed property is there
   for the browsers that have moved on. If a browser supports
   neither, transparent text would be invisible - so the colour is
   only dropped inside @supports, and everything else keeps plain
   --chrome text. */
.hero h1,
.page-head h1,
.page-hero h1,
.line-hero h1,
.story-hero h1{
  background:var(--metal);
  -webkit-background-clip:text;
  background-clip:text;
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .hero h1, .page-head h1, .page-hero h1,
  .line-hero h1, .story-hero h1{
    color:transparent;
    -webkit-text-fill-color:transparent;
    /* the glow can't come from text-shadow once the text is
       transparent - it would show straight through - so it moves
       to a drop-shadow on the rendered pixels */
    text-shadow:none;
    filter:drop-shadow(0 0 26px rgba(108,63,166,0.55));
  }
}

/* ============================================================
   HEADER — sticky, and it stops colliding
   The old header was three flex children with no wrap until
   600px. Between roughly 740 and 1000 the brand and the nav
   overlapped: the nav sat on top of "QUEEN CHAOS CUSTOMS" and
   the log-in button hung off the right edge. That is the width
   of every small laptop.
   ============================================================ */
header{
  position:sticky;
  top:0;
  z-index:50;
  gap:20px;
  padding:14px 40px;
  background:rgba(10,9,13,0.82);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--edge-soft);
}
/* A browser without backdrop-filter would show the page scrolling
   through the header, so it gets an opaque bar instead. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header{background:#0C0A11;}
}
.announce{
  position:relative;
  background:linear-gradient(90deg, transparent, rgba(108,63,166,0.30), transparent), var(--sink);
  border-bottom:1px solid var(--edge-soft);
  font-size:10.5px;
  letter-spacing:0.2em;
}
.brand img{
  height:46px;
  filter:drop-shadow(0 0 12px rgba(108,63,166,0.55));
  transition:filter 0.35s var(--ease), transform 0.35s var(--ease);
}
.brand:hover img{filter:drop-shadow(0 0 20px rgba(108,63,166,0.85)); transform:scale(1.04);}
.brand-name{background:var(--metal); -webkit-background-clip:text; background-clip:text;}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .brand-name{color:transparent; -webkit-text-fill-color:transparent;}
  /* the sub-line stays solid lilac - chrome on 10px text turns to mud */
  .brand-name span{-webkit-text-fill-color:var(--lilac); color:var(--lilac);}
}
nav{gap:26px;}
nav a{
  position:relative;
  padding-bottom:5px;
  border-bottom:none;
  transition:color 0.25s var(--ease), opacity 0.25s var(--ease);
}
/* underline grows from the middle instead of appearing all at once */
nav a::after{
  content:'';
  position:absolute;
  left:50%; bottom:0;
  width:0; height:1px;
  background:var(--royal-run);
  transform:translateX(-50%);
  transition:width 0.28s var(--ease);
}
nav a:hover, nav a:focus-visible, nav a.active{border-bottom:none; color:var(--lilac); opacity:1;}
nav a:hover::after, nav a:focus-visible::after, nav a.active::after{width:100%;}

.cart, .cart-link, .acct-trigger{
  border-radius:2px;
  transition:background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.cart-link{position:relative;}

/* ---- The burger, and the width where the nav gives up ----
   Hidden and inert on desktop. The button lives in the markup on
   every page (site_header.php) so the behaviour is one file, not
   one per page. */
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:40px; height:38px;
  background:transparent;
  border:1px solid var(--edge);
  border-radius:2px;
  cursor:pointer;
  padding:0;
}
.nav-toggle span{
  display:block;
  width:17px; height:1.5px;
  background:var(--chrome);
  position:relative;
  transition:background 0.2s var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after{
  content:''; position:absolute; left:0;
  width:17px; height:1.5px;
  background:var(--chrome);
  transition:transform 0.28s var(--ease);
}
.nav-toggle span::before{top:-6px;}
.nav-toggle span::after{top:6px;}
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}

@media (max-width:1040px){
  /* The nav becomes a full-width panel below the bar, so the header has
     to be allowed to wrap. Without this it stayed a single no-wrap row,
     the 100%-wide nav ate the space, and the brand and the buttons got
     squeezed together on the left with the whole right half empty. */
  header{padding:12px 22px; flex-wrap:wrap; row-gap:0;}
  .brand-name{white-space:nowrap;}
  .nav-toggle{display:flex;}
  nav{
    order:3;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    /* collapsed by default; the class is toggled, not the display,
       so the transition has something to animate */
    max-height:0;
    overflow:hidden;
    transition:max-height 0.32s var(--ease);
  }
  nav.open{max-height:340px;}
  nav a{
    padding:14px 4px;
    border-top:1px solid var(--edge-soft);
    text-align:left;
    font-size:12px;
  }
  nav a::after{display:none;}
  .brand img{height:40px;}
}
@media (max-width:600px){
  header{padding:10px 14px; justify-content:space-between; text-align:left;}
  /* On a phone the wordmark and the buttons cannot both fit on one
     line, and letting them wrap left the buttons stranded on a second
     row against the left edge. The crest carries the brand on its own
     at this size - it is the thing people recognise anyway - so the
     wordmark steps aside and everything stays on one line. */
  .brand-name{display:none;}
  .brand img{height:38px;}
  .header-actions{gap:7px; flex:0 0 auto;}
  .cart, .cart-link, .acct-trigger{padding:7px 10px; font-size:10px;}
  .nav-toggle{width:36px; height:34px;}
}

/* ============================================================
   SECTION LABELS — a crown, and rules that reach for the edges
   ============================================================ */
/* The markup already carries a ✦ here. On its own, small and dead
   centre, it looked like a stray character. Flanked by two rules
   that fade out towards the edges it reads as a divider, which is
   what it was always trying to be. */
.section-label .crest{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-bottom:12px;
  font-size:15px;
  line-height:1;
  color:var(--lilac);
  text-shadow:0 0 14px rgba(108,63,166,0.9);
}
.section-label .crest::before,
.section-label .crest::after{
  content:'';
  height:1px;
  width:min(130px, 20vw);
  background:linear-gradient(90deg, transparent, var(--edge-loud));
}
.section-label .crest::after{background:linear-gradient(270deg, transparent, var(--edge-loud));}
.section-label h2{
  font-size:22px;
  letter-spacing:0.2em;
  background:var(--metal);
  -webkit-background-clip:text;
  background-clip:text;
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .section-label h2{color:transparent; -webkit-text-fill-color:transparent;}
}
.section-label p{color:var(--text-dim); margin-top:10px;}

/* ============================================================
   PRODUCT CARD
   The old card spent its top 60 pixels on a stock code. A
   customer has never once needed to read "AML-T" before deciding
   whether they want the shirt, and the photo - the only thing
   that sells it - started below the fold of the card. So the
   photo goes to the top and the code becomes a small chip in the
   corner, where Amanda can still find it at a glance.
   ============================================================ */
.card{
  background:linear-gradient(168deg, var(--rise), var(--panel) 55%, var(--sink));
  border:1px solid var(--edge);
  border-radius:3px;
  padding-top:0;                     /* the notch is gone, see below */
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform 0.32s var(--ease), border-color 0.32s var(--ease), box-shadow 0.32s var(--ease);
}
/* The old ::before drew a downward triangle notch at the top of
   every card. With the photo now flush to the top edge it would
   cut a wedge out of the picture, so it becomes the sheen line
   instead - the same trick the crest uses along the top of the
   shield. */
.card::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  width:auto; height:1px;
  transform:none;
  clip-path:none;
  border:none;
  background:linear-gradient(90deg, transparent, var(--edge-loud), transparent);
  opacity:0.7;
  z-index:2;
}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--royal);
  box-shadow:var(--lift), var(--bloom);
}
.card:focus-within{border-color:var(--royal);}

/* .card-head is no longer rendered — the stock code came off the card
   entirely. The rule stays only to keep the element out of the way if
   any page still emits one, rather than having it drop a stray line of
   text on top of a photo. */
.card-head{display:none;}

.card-img{
  position:relative;
  height:auto;
  aspect-ratio:1 / 1;               /* every card the same shape,
                                       whatever the photo's crop */
  border-top:none;
  border-bottom:1px solid var(--edge-soft);
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, rgba(108,63,166,0.22), transparent 70%),
    linear-gradient(160deg, #241a30, #0E0A14);
  align-items:stretch;              /* was center, which let a tall
                                       photo sit in a letterbox */
  overflow:hidden;
}
.card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.6s var(--ease);
}
.card:hover .card-img img{transform:scale(1.06);}

/* The no-photo case. It used to print the words PRODUCT IMAGE in
   the middle of an empty box, which reads as a page that failed
   to load rather than a product waiting on a photo. */
.card-img .no-photo{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%; height:100%;
  color:rgba(201,168,232,0.5);
}
.card-img .no-photo svg{width:38px; height:38px; opacity:0.55;}
.card-img .no-photo span{
  font-family:'Cinzel', serif;
  font-size:9.5px;
  letter-spacing:0.18em;
}

.card-body{padding:16px 16px 18px; display:flex; flex-direction:column; flex:1;}
.card-body h3{font-size:15px; letter-spacing:0.03em; margin-bottom:6px; color:var(--chrome);}
.card-body .desc{color:var(--text-dim); margin-bottom:14px;}
.card-line{color:var(--lilac); opacity:0.75; margin-bottom:5px;}

/* Labelled variant pickers. The old select showed the word "Size"
   as its first option, so the moment a size was chosen the word
   disappeared and the box said "M" with nothing to say what M
   was. Two selects side by side, one reading "M" and one reading
   "Caffeine RX", and you have to guess which is which. */
.variant-row{display:grid; gap:10px; margin-bottom:14px;}
.variant{position:relative;}
.variant > label{
  display:block;
  font-family:'Cinzel', serif;
  font-size:9px;
  letter-spacing:0.16em;
  color:var(--lilac);
  opacity:0.85;
  margin-bottom:5px;
}
.design-select{
  margin-bottom:0;
  background-color:var(--sink);
  border:1px solid var(--edge);
  border-radius:2px;
  padding:11px 34px 11px 12px;
  transition:border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.design-select:hover{background-color:#0B0910;}
.design-select:focus{outline:none; border-color:var(--royal); box-shadow:0 0 0 2px rgba(108,63,166,0.35);}
/* the dropdown list itself is drawn by the OS - without this it is
   a white panel with black text in the middle of a black site */
.design-select option{background:#14101C; color:var(--chrome);}

.card-foot{margin-top:auto; padding-top:4px; gap:12px;}
.price{
  font-size:19px;
  letter-spacing:0.02em;
  background:var(--metal);
  -webkit-background-clip:text;
  background-clip:text;
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .price{color:transparent; -webkit-text-fill-color:transparent;}
  .price .was{-webkit-text-fill-color:var(--text-faint); color:var(--text-faint);}
}

/* ============================================================
   BUTTONS
   One shape language: a violet fill that lights up, and a sheen
   that crosses it once on hover. The ghost version is the same
   button with the fill taken out.
   ============================================================ */
.add-btn, .btn-primary, .hero-cta, .checkout-btn{
  position:relative;
  overflow:hidden;
  border-radius:2px;
  transition:transform 0.2s var(--ease), box-shadow 0.28s var(--ease),
             background 0.28s var(--ease), color 0.28s var(--ease);
}
.add-btn::after, .btn-primary::after, .hero-cta::after, .checkout-btn::after{
  content:'';
  position:absolute;
  top:0; bottom:0;
  left:-120%;
  width:60%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.34), transparent);
  transform:skewX(-18deg);
  pointer-events:none;
}
.add-btn:hover::after, .btn-primary:hover::after,
.hero-cta:hover::after, .checkout-btn:hover::after{
  animation:qcc-sheen 0.75s var(--ease);
}
@keyframes qcc-sheen{to{left:130%;}}

.add-btn{
  background:var(--royal-run);
  color:var(--void);
  border:1px solid transparent;
  font-size:10.5px;
  padding:11px 17px;
}
.add-btn:hover, .add-btn:focus-visible{
  background:var(--royal-run);
  color:var(--void);
  box-shadow:0 8px 22px rgba(108,63,166,0.5);
  transform:translateY(-1px);
}
.add-btn:active{transform:translateY(0);}
.btn-primary:hover, .hero-cta:hover, .checkout-btn:hover{
  box-shadow:0 10px 30px rgba(108,63,166,0.45);
  transform:translateY(-1px);
}
/* the hero button used to empty out to transparent on hover, which
   reads as the button switching off at the moment you reach it */
.hero-cta:hover, .hero-cta:focus-visible{
  background:var(--royal-run);
  color:var(--void);
}

/* One focus ring for everything reachable by keyboard. Several of
   these controls had no visible focus state at all, which makes
   the site unusable without a mouse. */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--lilac);
  outline-offset:2px;
  border-radius:2px;
}

/* ============================================================
   MERCH LINE CARDS
   Two cards next to each other, one with a description and one
   without, came out different heights and looked broken rather
   than sparse. They stretch to match now, and the crest gets a
   ring so a line with no artwork yet still looks deliberate.
   ============================================================ */
.line-card{
  display:flex;
  flex-direction:column;
  border-radius:3px;
  background:linear-gradient(180deg, var(--rise), var(--sink));
  transition:transform 0.32s var(--ease), border-color 0.32s var(--ease), box-shadow 0.32s var(--ease);
}
.line-card:hover{transform:translateY(-6px); border-color:var(--royal); box-shadow:var(--lift), var(--bloom);}
.line-card p{color:var(--text-dim);}
/* A line with no description yet still renders an empty <p>, which left
   a gap where the text would be and made the card look truncated. */
.line-card p:empty{display:none;}
/* What makes the cards in a row match: the link is pinned to the bottom
   of whichever card is tallest, and the flex container stretches the
   rest to meet it. height:100% was the wrong tool - on a flex item it
   resolves against a container whose height is set by these very cards. */
.line-card .line-link{margin-top:auto; padding-top:18px;}
/* With the description gone the auto-margin has no slack to take up,
   so the link sat right under the name. The padding is the gap. */
.line-card h3{
  background:var(--metal);
  -webkit-background-clip:text;
  background-clip:text;
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .line-card h3{color:transparent; -webkit-text-fill-color:transparent;}
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:linear-gradient(180deg, var(--panel), var(--sink));
  border-top:1px solid var(--edge-soft);
}
footer h4{color:var(--lilac);}
footer p, footer a{color:var(--text-dim);}
footer a{transition:color 0.2s var(--ease);}
footer a:hover{color:var(--lilac);}
.footer-credit{color:var(--text-faint);}

/* ============================================================
   MOTION
   Every animation on this page is decoration. Anyone who has
   asked their system to stop moving things gets the same site,
   still.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .card:hover, .line-card:hover{transform:none;}
  .card:hover .card-img img{transform:none;}
}

/* the focus twin of the hover above - keyboard users got no feedback */
.breadcrumb a:hover, .breadcrumb a:focus-visible{color:var(--lilac);}

/* ============================================================
   COLOUR — where the pink actually lands
   Six places, listed here so the count stays honest: the primary
   button, a sale price, the glow under a hovered card, the sparks
   in the dividers and hero marks, the sale badge, and the focus
   ring. Everything else stays purple and chrome.
   ============================================================ */

/* ---- 1. The announcement bar sweeps pink through the middle ---- */
.announce{
  background:
    linear-gradient(90deg, transparent, rgba(255,46,154,0.16) 35%, rgba(108,63,166,0.34) 50%, rgba(255,46,154,0.16) 65%, transparent),
    var(--sink);
  color:var(--blush);
}

/* ---- 2. Dividers and hero marks spark pink ---- */
.section-label .crest{
  color:var(--hot);
  text-shadow:0 0 16px rgba(255,46,154,0.75), 0 0 34px rgba(108,63,166,0.55);
}
.section-label .crest::before{background:linear-gradient(90deg, transparent, rgba(255,196,227,0.42));}
.section-label .crest::after{background:linear-gradient(270deg, transparent, rgba(255,196,227,0.42));}
.hero-marks span::before{
  background:var(--hot);
  box-shadow:0 0 10px rgba(255,46,154,0.95);
}

/* ---- 3. Hovering a card lights it pink ----
   The lift is the same; only the colour of the light changes, so a
   row of cards reads as one thing until you reach for one. */
.card:hover, .line-card:hover{
  border-color:var(--hot);
  box-shadow:var(--lift), var(--bloom-hot);
}

/* ---- 4. A price that is on sale says so in pink ----
   Chrome for the normal price, pink for a reduced one: the colour
   itself carries the message, so it reads at a glance across a grid
   instead of needing the struck-through number to be noticed first. */
.price.is-sale{
  background:var(--hot-run);
  -webkit-background-clip:text;
  background-clip:text;
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .price.is-sale{color:transparent; -webkit-text-fill-color:transparent;}
  .price.is-sale .was{-webkit-text-fill-color:var(--text-faint); color:var(--text-faint);}
}
.sale-badge{
  position:absolute;
  top:10px; right:10px;
  z-index:3;
  padding:4px 9px;
  font-family:'Cinzel', serif;
  font-size:9px;
  font-weight:600;
  letter-spacing:0.16em;
  color:#fff;
  background:var(--hot-run);
  border-radius:2px;
  box-shadow:0 4px 14px rgba(255,46,154,0.45);
}

/* ---- 5. Links and small accents warm up ---- */
.line-link:hover, .line-link:focus-visible{color:var(--blush); border-color:var(--hot);}
nav a::after{background:var(--royal-run);}
.cart:hover, .cart-link:hover{background:var(--royal-run); border-color:transparent; color:#fff;}
.acct-trigger:hover, .acct-trigger:focus-visible{border-color:var(--hot); color:var(--blush);}
footer a:hover{color:var(--blush);}
.breadcrumb a:hover, .breadcrumb a:focus-visible{color:var(--blush);}

/* ---- 6. The focus ring ---- */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--hot);
  outline-offset:2px;
}

/* ---- The button, now legible ----
   White on the purple-to-pink run, not near-black. The old gradient
   ran light-to-dark under dark text; this one is dark enough the
   whole way across that white sits on it cleanly. */
.add-btn, .add-btn:hover, .add-btn:focus-visible,
.hero-cta, .hero-cta:hover, .hero-cta:focus-visible,
.btn-primary, .checkout-btn{
  color:#FFFFFF;
  text-shadow:0 1px 2px rgba(0,0,0,0.35);
}
.add-btn:hover, .add-btn:focus-visible{box-shadow:0 8px 24px rgba(255,46,154,0.45);}
.btn-primary:hover, .hero-cta:hover, .checkout-btn:hover{box-shadow:0 10px 30px rgba(255,46,154,0.4);}

/* ---- Sparkle. No image needed for this one: two small points of
   light that drift across a card's picture while you hover it, which
   is the crest's own trick and costs nothing to load. ---- */
.card-img::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle 2px at 22% 28%, rgba(255,255,255,0.95), transparent 60%),
    radial-gradient(circle 3px at 74% 62%, rgba(255,196,227,0.9), transparent 60%),
    radial-gradient(circle 2px at 58% 18%, rgba(255,46,154,0.85), transparent 60%);
  transition:opacity 0.45s var(--ease);
}
.card:hover .card-img::after{opacity:1; animation:qcc-twinkle 2.6s ease-in-out infinite;}
@keyframes qcc-twinkle{
  0%, 100%{opacity:0.35; transform:scale(1);}
  50%{opacity:1; transform:scale(1.04);}
}
@media (prefers-reduced-motion: reduce){
  .card:hover .card-img::after{animation:none; opacity:0.7;}
}

/* ============================================================
   BUTTONS AND SELECTS — the stragglers
   Six buttons had the old gradient typed out in full rather than
   reading the token, so re-pointing --royal-run left them behind:
   still lilac, and now with the white label this section added.
   White on lilac is the one combination on this site you cannot
   read. They all read the token now.
   ============================================================ */
.btn-primary, .checkout-btn, .hero-cta, .story-cta a:not(.secondary){
  background:var(--royal-run);
  color:#FFFFFF;
  border-color:transparent;
}

/* The plain <select> in a form kept the operating system's own arrow,
   which is a grey triangle on a light chip — the one light rectangle
   on the page. Same treatment the product card's picker already had. */
.field select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--lilac) 50%),
    linear-gradient(135deg, var(--lilac) 50%, transparent 50%);
  background-position:calc(100% - 18px) center, calc(100% - 13px) center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  cursor:pointer;
}
.field select:hover{border-color:var(--edge-loud);}
/* the dropdown list is drawn by the OS: without this it is a white
   panel with black text in the middle of a black site */
.field select option{background:#14101C; color:var(--chrome);}

/* ============================================================
   MERCH LINES — the band that was underselling the whole idea
   Our Story says the merch lines are "the part that makes this
   different". On the homepage they were two 260px tiles adrift in
   a 1440px row, smaller than the product cards underneath them
   and reading like an afterthought.

   Cards grow, and the crest grows with them. The 260px cap stays
   as a FLOOR, not a ceiling: four lines still fit a row, and two
   lines no longer look like a row that failed to fill.
   ============================================================ */
.lines-grid{gap:30px; padding:38px 40px 24px;}
.lines-grid > *{flex:1 1 300px; max-width:360px;}

.line-card{padding:38px 26px 30px;}
.line-badge{
  width:88px;
  height:88px;
  margin-bottom:20px;
  border:1px solid var(--edge-loud);
  /* two rings of light rather than a flat border - the crest sits in
     a glow the way it does on the hero */
  box-shadow:0 0 0 5px rgba(108,63,166,0.16), 0 0 26px rgba(255,46,154,0.28);
  background:radial-gradient(circle, rgba(108,63,166,0.34), transparent 72%);
  font-size:34px;
  transition:box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.line-card:hover .line-badge{
  border-color:var(--hot);
  box-shadow:0 0 0 5px rgba(255,46,154,0.18), 0 0 34px rgba(255,46,154,0.5);
}
.line-badge.is-short{font-size:22px;}
.line-card .tag{font-size:9.5px; letter-spacing:0.22em; color:var(--blush); opacity:0.8;}
.line-card h3{font-size:19px; letter-spacing:0.08em; margin-bottom:10px;}
.line-card p{font-size:13.5px; line-height:1.7;}

@media (max-width:600px){
  .lines-grid > *{flex:1 1 100%; max-width:340px;}
  .line-badge{width:74px; height:74px; font-size:28px;}
}

/* ============================================================
   FOOTER — the pink sheet, rising
   Same glitter, her pink one, flipped so it comes up off the
   bottom of the page instead of falling onto it. The footer was
   the flattest part of the site; this gives the page an ending
   rather than a stop.

   It is the fine-grain sheet, tinted, not the pink one. The pink
   sheet is soft bokeh circles — lovely at full size, but shrunk into
   a footer they land as blotches across the text rather than as
   glitter. Same reason the hero uses the fine one.
   ============================================================ */
footer{position:relative; overflow:hidden; padding-bottom:52px;}
footer::before{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  /* Shorter than it was. At 70% the densest part of the sheet sat
     directly behind the copyright line and made it hard to read —
     decoration is not allowed to cost legibility. The extra footer
     padding above gives the glitter somewhere of its own to be. */
  height:26%;
  pointer-events:none;
  /* The sheet is flipped in the file, not with scaleY(-1) — a CSS flip
     turns the mask upside down too, which puts the fade on the wrong
     edge and has to be reasoned about backwards forever after. */
  background:url('/assets/images/sparkle-pink-up.webp') bottom center / 720px auto repeat-x;
  mix-blend-mode:screen;
  opacity:0.55;
  -webkit-mask-image:linear-gradient(0deg, #000 0%, transparent 100%);
          mask-image:linear-gradient(0deg, #000 0%, transparent 100%);
}
/* the columns have to sit above it */
.footer-grid, .footer-bottom{position:relative; z-index:1;}