/* The storefront uses a restrained editorial rhythm; the admin stays independent. */
.container { width: min(1200px, calc(100% - 96px)); }
.announcement { background: var(--bg); color: #a8a1af; font-size: 11px; letter-spacing: .08em; padding: 8px 20px; }
.header { height: 82px; border-color: #ffffff0c; background: #09090df5; }
.header-inner { gap: 36px; }
.wordmark { font-size: 35px; letter-spacing: -1.5px; }
.nav { gap: 32px; }
.nav a { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: #aaa5b1; }
.nav a.active:after { height: 1px; bottom: 5px; opacity: .8; }
.nav-submenu { padding: 8px; border-color: #ffffff12; border-radius: 6px; background: #121016; box-shadow: 0 12px 30px #0003; }
.nav-submenu a { padding: 11px 14px; font-size: 13px; }
.header-actions { gap: 17px; }
.header-actions .icon { width: 21px; height: 21px; }
.hero { min-height: 500px; }
.hero-content { padding: 72px 0 100px; max-width: 560px; }
.hero h1 { font-family: Inter, Arial, sans-serif; font-weight: 600; font-size: clamp(44px, 5.3vw, 76px); line-height: 1.04; letter-spacing: -.055em; }
.hero h1 em { font-style: normal; }
.hero .eyebrow { color: #c4b6ce; font-size: 11px; letter-spacing: .13em; margin-bottom: 23px; }
.eyebrow:before { display: none; }
.hero-description { font-size: 14px; line-height: 1.8; max-width: 340px; color: #b7afc0; margin-bottom: 27px; }
.hero:before { height: 190px; }
.hero-foot { display: none; }
.btn { padding: 13px 22px; border-radius: 4px; font-weight: 600; font-size: 13px; transition: background .2s, filter .2s; }
.btn:hover { transform: none; }
.btn.secondary { border-color: #ffffff26; }
.section { padding: 64px 0; }
.section-head { margin-bottom: 32px; }
.section-head .eyebrow { margin-bottom: 12px; font-size: 11px; letter-spacing: .1em; color: #b7a4c2; }
.section-head h2 { font-size: 27px; line-height: 1.3; font-weight: 500; letter-spacing: -.8px; }
.product-grid { gap: 38px 24px; }
.product-card { border: 0; border-radius: 0; padding: 0; background: transparent; transition: transform .25s ease; }
.product-card:hover, .product-card:focus-within { transform: translateY(-3px); border: 0; box-shadow: none; }
.product-image { aspect-ratio: 1; border-radius: 5px; background: #100d15; }
.product-info { padding: 17px 0 0; }
.product-meta { margin-bottom: 7px; font-size: 10px; letter-spacing: .07em; color: #8d8497; }
.product-title { font-size: 14px; font-weight: 500; line-height: 1.5; margin-bottom: 12px; }
.product-bottom { gap: 16px; }
.price { font-size: 14px; font-weight: 500; }
.add-small { background: transparent; color: #e3d5e8; border: 1px solid #ffffff22; border-radius: 4px; padding: 11px 12px; font-size: 12px; font-weight: 500; transition: background .2s, border-color .2s; }
.add-small:hover { background: #ffffff06; border-color: #b782ca; filter: none; }
.favorite { top: 12px; right: 12px; width: 32px; height: 32px; background: #0a09128c; color: #e3dbe8; }
.favorite .icon { width: 18px; height: 18px; }
.filters { margin-bottom: 30px; }
.chip { border-color: #ffffff18; color: #b8aebe; font-size: 12px; padding: 9px 14px; }
.chip.active { background: #302237; color: #e9d6f0; border-color: #5d3f6c; }
.filters select { border-color: #ffffff20; background: #111016; }
.panel { background: #0f0e14; border-color: #ffffff14; border-radius: 7px; padding: 28px; }
.panel h2 { font-weight: 500; }
.benefits { padding: 25px 0; border-color: #ffffff0d; gap: 35px; }
.benefit { gap: 13px; }
.benefit svg { width: 23px; height: 23px; color: #a891b7; }
.benefit strong { font-size: 12px; color: #cdc5d3; }
.benefit span { font-size: 11px; color: #8f859a; }
.newsletter { padding: 38px 0; gap: 50px; }
.newsletter h2 { font-size: 20px; font-weight: 500; letter-spacing: -.5px; }
.newsletter p { font-size: 12px; }
.newsletter input[type=email] { padding: 12px; background: transparent; border-color: #ffffff20; border-radius: 4px; font-size: 12px; }
.newsletter .btn { background: #2a2030; color: #e7d5ee; border-color: #5b4065; font-size: 12px; padding: 12px 17px; }
.consent { font-size: 10px; line-height: 1.7; }
footer { border-color: #ffffff0d; padding-top: 35px; }
.footer-main { gap: 45px; }
.footer-links { gap: 70px; }
.footer-links div { gap: 11px; font-size: 12px; }
.footer-links strong { font-size: 12px; color: #c6becd; }
.footer-main p { color: #8b8195; }
.footer-bottom { margin-top: 30px; font-size: 10px; border-color: #ffffff0d; }
.custom-controls { padding: 30px; background: #100e15; border-color: #ffffff18; }
.custom-controls h2 { font-size: 27px; font-weight: 500; }
.custom-controls input:not([type=file]), .custom-controls select, .custom-controls textarea { background: #15111b; border-color: #ffffff20; }
.custom-preview { border-color: #ffffff12; background: #100d15; }
.art-dropzone { background: #19131f; border-color: #5e486b; padding: 25px 15px; }
.art-dropzone:hover, .art-dropzone.drag-over { background: #201628; border-color: #aa7bc0; }
.support-bubble { border-radius: 50%; width: 52px; height: 52px; padding: 0; justify-content: center; background: #2b2032; border: 1px solid #654473; color: #dfc6ea; box-shadow: 0 5px 20px #0003; }
.support-bubble span { display: none; }
.support-bubble:hover { background: #362640; transform: none; }
.support-window { border-color: #44324f; box-shadow: 0 12px 40px #0005; }
.payment-choice.active { background: #201626; border-color: #aa7bc0; }
@media (min-width: 1500px) { .hero { min-height: 570px; } }
@media (max-width: 1000px) {
  .container { width: calc(100% - 56px); }
  .nav { gap: 19px; }
  .nav a { font-size: 12px; }
  .hero-content { max-width: 480px; }
  .product-grid { gap: 30px 20px; }
  .footer-links { gap: 35px; }
}
@media (max-width: 700px) {
  .container { width: calc(100% - 36px); }
  .announcement { font-size: 10px; padding: 7px 15px; }
  .header { height: 68px; }
  .header-inner { gap: 20px; }
  .wordmark { font-size: 30px; }
  .nav { top: 68px; gap: 0; padding: 15px 18px; }
  .nav a { font-size: 13px; padding: 13px; }
  .nav-submenu { background: transparent; box-shadow: none; border: 0; border-left: 1px solid #44304d; padding: 0 0 0 8px; }
  .header-actions { gap: 9px; }
  .hero { min-height: 490px; }
  .hero-content { padding: 165px 0 58px; max-width: 330px; }
  .hero h1 { font-size: 49px; line-height: 1.05; letter-spacing: -.05em; }
  .hero .eyebrow { font-size: 10px; letter-spacing: .1em; margin-bottom: 20px; }
  .hero-description { max-width: 285px; font-size: 13px; margin-bottom: 23px; }
  .section { padding: 42px 0; }
  .section-head { margin-bottom: 24px; }
  .section-head h2 { font-size: 23px; }
  .product-grid { gap: 26px 14px; }
  .product-info { padding: 13px 0 0; }
  .product-title { font-size: 12px; margin-bottom: 10px; }
  .product-bottom { gap: 12px; }
  .price { font-size: 13px; }
  .add-small { font-size: 11px; padding: 10px 4px; }
  .favorite { right: 8px; top: 8px; width: 29px; height: 29px; }
  .benefits { grid-template-columns: 1fr; gap: 19px; padding: 26px 0; }
  .newsletter { gap: 20px; padding: 30px 0; }
  .newsletter h2 { font-size: 19px; }
  .footer-links { gap: 25px; }
  .panel, .custom-controls { padding: 23px 20px; }
  .support-widget { right: 14px; bottom: 14px; }
  .support-bubble { width: 48px; height: 48px; }
}

/* Subtle product zoom follows the entire card hover. */
.product-image img { transition: transform .45s ease; }
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-image img { transform: scale(1.06); }
}
.product-card:focus-within .product-image img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .product-card:hover .product-image img, .product-card:focus-within .product-image img { transform: none; }
}


/* The hero action has one restrained accent and a light sweep on interaction. */
.hero .btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 14px 25px;
  border: 1px solid #ffffff24;
  border-radius: 6px;
  background: var(--gradient);
  box-shadow: 0 4px 18px #a855f710, inset 0 1px 0 #ffffff20;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.hero .btn:after {
  content: '';
  position: absolute;
  inset: -50% auto -50% -65%;
  width: 40%;
  background: linear-gradient(90deg, transparent, #ffffff30, transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left .65s ease;
}
.hero .btn:hover, .hero .btn:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 7px 25px #bd6aef24, inset 0 1px 0 #ffffff30;
}
.hero .btn:hover:after, .hero .btn:focus-visible:after { left: 125%; }
.hero .btn:active { transform: translateY(0); }

/* Fade the photo itself, rather than the padded area surrounding it. */
.custom-preview > #custom-base {
  padding: 0;
  width: calc(100% - 40px);
  height: auto;
  object-fit: contain;
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 88%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
}
.custom-overlay[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hero .btn:hover, .hero .btn:focus-visible { transform: none; }
  .hero .btn:after { display: none; }
}

/* Consistent inline form feedback and a separated checkout action. */
.field-error{display:block;color:#eba1b7;font-size:12px;line-height:1.6;margin:0;flex-basis:100%}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:#b96685;box-shadow:0 0 0 1px #b9668520}
input[aria-invalid=true]:focus,select[aria-invalid=true]:focus,textarea[aria-invalid=true]:focus{outline-color:#d696b4}
.checkout-details>.btn{margin-top:26px;min-height:48px;padding:14px 26px;border:1px solid #ffffff20;border-radius:6px;box-shadow:inset 0 1px 0 #ffffff20;transition:filter .2s,box-shadow .2s,transform .2s}
.checkout-details>.btn:hover,.checkout-details>.btn:focus-visible{filter:brightness(1.08);box-shadow:0 5px 22px #bd6aef20;transform:translateY(-1px)}
.checkout-details>.form-grid{gap:20px 18px}
.checkout-details .field{gap:9px}
.checkout-details .field label{font-size:13px;color:#cfc2d9}
.checkout-details input,.checkout-details select{min-height:46px;border-radius:5px}
.checkout-details>.subtle{margin-bottom:23px}
.field input:autofill{box-shadow:0 0 0 1000px #15111b inset}
@media(max-width:700px){.checkout-details>.btn{width:100%;margin-top:23px}.checkout-details>.form-grid{gap:18px 14px}}
@media(prefers-reduced-motion:reduce){.checkout-details>.btn:hover,.checkout-details>.btn:focus-visible{transform:none}}

.row:has(>.field-error),.support-window form:has(>.field-error){flex-wrap:wrap}.row>.field-error,.support-window form>.field-error{order:3;flex:0 0 100%}.support-window form>.field-error{font-size:11px}
.social-contact{display:flex;align-items:center;gap:10px}.social-contact img{filter:invert(1);opacity:.8}.social-contact[aria-disabled=true]{opacity:.45;cursor:default}.checkout-details[hidden]{display:none!important}

.order-timeline{list-style:none;padding:0;border-left:2px solid var(--purple);margin:28px 8px}.order-timeline li{padding:0 0 24px 24px;position:relative}.order-timeline li:before{content:"";position:absolute;width:10px;height:10px;background:var(--purple);border-radius:50%;left:-6px;top:5px}.order-timeline small{display:block;color:var(--muted);margin-top:6px}.payment-choices[hidden]{display:none!important}

[hidden]{display:none!important}