:root{
  --antique-gold:#b88632;
  --antique-gold-light:#e3c176;
  --antique-gold-dark:#6f4317;
  --velvet:#3a0d16;
  --velvet-deep:#17070b;
  --parchment:#ead9b8;
}

html{background:#120609}
body{
  background-color:#16070a;
  background-image:
    linear-gradient(rgba(20,5,9,.20),rgba(10,4,5,.32)),
    url("assets/grimorio-wallpaper.png");
  background-position:center top,center top;
  background-size:auto,720px 720px;
  background-repeat:repeat,repeat;
  background-attachment:fixed,fixed;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(circle at 50% 18%,rgba(160,91,31,.1),transparent 42%);
}

::selection{background:rgba(184,134,50,.42);color:#fff6df}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#110608}
::-webkit-scrollbar-thumb{border:2px solid #110608;border-radius:8px;background:linear-gradient(#a7742e,#5b3515)}

.header{
  border-bottom:3px double rgba(184,134,50,.56);
  background:
    linear-gradient(90deg,rgba(27,7,11,.84),rgba(45,12,19,.76) 48%,rgba(20,6,9,.84)),
    url("assets/grimorio-wallpaper.png") center/520px auto repeat;
  box-shadow:0 12px 34px rgba(0,0,0,.48),inset 0 -1px rgba(232,194,113,.12);
}

.header:before,.header:after{
  content:"✦";
  position:absolute;
  bottom:-10px;
  z-index:1;
  padding:0 .35rem;
  background:#21090f;
  color:var(--antique-gold);
  font-size:.7rem;
}
.header:before{left:4vw}.header:after{right:4vw}

nav a{position:relative;color:#d8c6a6;text-shadow:0 1px 10px rgba(0,0,0,.7)}
nav a:after{content:"";position:absolute;left:50%;right:50%;bottom:-.45rem;height:1px;background:linear-gradient(90deg,transparent,var(--antique-gold-light),transparent);transition:left .25s,right .25s}
nav a:hover:after{left:0;right:0}

@media(min-width:1001px){
  .header nav{justify-content:flex-end}
}

.fixed-offer-bar{
  border-bottom:3px double rgba(227,193,118,.48);
  background:
    linear-gradient(90deg,rgba(63,13,23,.90),rgba(20,6,9,.86) 48%,rgba(63,13,23,.90)),
    url("assets/grimorio-wallpaper.png") center/440px auto repeat;
  box-shadow:0 9px 32px rgba(0,0,0,.54),inset 0 -1px rgba(255,221,151,.12);
}
.fixed-offer-bar>p{text-shadow:0 0 14px rgba(219,171,83,.26)}
.fixed-countdown-clock strong{color:#fff1d3;text-shadow:0 0 14px rgba(208,151,54,.28)}

.product-shop,.intro,.tarot,.stories,.contact{
  border-block:1px solid rgba(184,134,50,.28);
  background-color:rgba(19,6,9,.22);
  background-image:linear-gradient(145deg,rgba(43,10,16,.28),rgba(14,6,7,.42));
  box-shadow:inset 0 24px 70px rgba(0,0,0,.26),inset 0 -24px 70px rgba(0,0,0,.26);
}

.product-shop{background-image:radial-gradient(circle at 50% 13%,rgba(132,57,29,.18),transparent 32%),linear-gradient(145deg,rgba(43,10,16,.24),rgba(14,6,7,.38))}
.product-shop:before{inset:18px;border:3px double rgba(184,134,50,.28);box-shadow:inset 0 0 42px rgba(0,0,0,.28)}

.shop-heading h1,.section-copy h2,.section-heading h2,.coven h2,.product-modal-panel h2{
  text-shadow:0 3px 18px rgba(0,0,0,.65),0 0 28px rgba(157,88,31,.12);
}
.shop-heading:after,.section-heading:after{
  content:"☙  ✦  ❧";
  display:block;
  margin-top:1.5rem;
  color:var(--antique-gold);
  font-size:1.05rem;
  letter-spacing:.6rem;
}
.eyebrow{color:var(--antique-gold-light);text-shadow:0 1px 9px rgba(0,0,0,.8)}

.product-card{
  position:relative;
  isolation:isolate;
  border:1px solid rgba(210,161,69,.82);
  background:
    linear-gradient(135deg,rgba(226,182,92,.78) 0 2px,transparent 2px) left top/36px 36px no-repeat,
    linear-gradient(225deg,rgba(226,182,92,.78) 0 2px,transparent 2px) right top/36px 36px no-repeat,
    linear-gradient(45deg,rgba(226,182,92,.78) 0 2px,transparent 2px) left bottom/36px 36px no-repeat,
    linear-gradient(315deg,rgba(226,182,92,.78) 0 2px,transparent 2px) right bottom/36px 36px no-repeat,
    linear-gradient(155deg,rgba(65,18,25,.97),rgba(16,7,8,.98) 65%);
  box-shadow:0 30px 70px rgba(0,0,0,.42),0 0 0 5px rgba(25,9,10,.94),0 0 0 6px rgba(119,77,27,.65),inset 0 0 34px rgba(0,0,0,.42);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}

.product-card:before{
  content:"";
  position:absolute;
  inset:7px;
  z-index:-1;
  border:1px solid rgba(184,134,50,.42);
  box-shadow:inset 0 0 0 3px rgba(18,7,8,.7),inset 0 0 0 4px rgba(118,72,23,.26);
  pointer-events:none;
}

.product-card:after{
  content:"✦";
  position:absolute;
  top:-14px;
  left:50%;
  z-index:3;
  width:30px;
  height:27px;
  display:grid;
  place-items:center;
  transform:translateX(-50%);
  border:1px solid rgba(211,164,76,.7);
  background:#260b11;
  color:var(--antique-gold-light);
  font-size:.72rem;
  box-shadow:0 5px 15px rgba(0,0,0,.4);
}

.product-card:hover{transform:translateY(-4px);border-color:var(--antique-gold-light);box-shadow:0 35px 82px rgba(0,0,0,.5),0 0 0 5px rgba(25,9,10,.95),0 0 0 6px rgba(184,134,50,.8),0 0 28px rgba(184,134,50,.12),inset 0 0 34px rgba(0,0,0,.44)}
.product-meta{position:relative;z-index:1}
.product-meta h2{color:#ebcb88;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.product-price{color:#efe0c5}
.product-price--sale strong{color:#f0cb78;text-shadow:0 0 14px rgba(209,146,45,.24)}

.product-visual{
  border:3px double rgba(184,134,50,.72);
  background:radial-gradient(circle,rgba(92,25,31,.32),rgba(10,5,6,.94));
  box-shadow:0 18px 38px rgba(0,0,0,.38),inset 0 0 25px rgba(0,0,0,.35);
}
.product-visual:before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:2;
  border:1px solid rgba(227,193,118,.25);
  pointer-events:none;
}
.product-overlay{z-index:3;background:radial-gradient(circle,rgba(61,15,23,.65),rgba(8,4,5,.86));text-shadow:0 2px 8px #000}
.product-visual:hover,.product-visual:focus-visible{border-color:var(--antique-gold-light);box-shadow:0 20px 44px rgba(0,0,0,.44),0 0 22px rgba(184,134,50,.16),inset 0 0 28px rgba(0,0,0,.4)}

.button-gold{
  position:relative;
  border:1px solid #e1bc6c;
  background:linear-gradient(180deg,#d9ad58 0%,#b77b27 48%,#855018 100%);
  color:#1b0908;
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:.11em;
  box-shadow:inset 0 1px rgba(255,241,193,.65),inset 0 -2px rgba(72,36,7,.42),0 8px 22px rgba(0,0,0,.34);
  text-shadow:0 1px 0 rgba(255,233,174,.42),0 -1px 0 rgba(69,31,7,.46);
}
.button-gold:before,.button-gold:after{content:"✦";margin:0 .65rem;color:#5d330c;font-size:.58rem}
.button-gold:hover{box-shadow:inset 0 1px rgba(255,243,200,.72),inset 0 -2px rgba(72,36,7,.42),0 12px 28px rgba(0,0,0,.42),0 0 20px rgba(205,146,46,.18)}
.button-outline{border:3px double var(--antique-gold);background:rgba(31,8,12,.52);box-shadow:inset 0 0 18px rgba(0,0,0,.26)}
.photo-frame{padding:6px;border:1px solid rgba(184,134,50,.68);background:linear-gradient(145deg,#7c4d1d,#21100c 30%,#a36f2b 50%,#21100c 70%,#7c4d1d);box-shadow:0 24px 55px rgba(0,0,0,.42)}
.photo-frame:before{inset:-11px;border:3px double rgba(184,134,50,.42);box-shadow:inset 0 0 20px rgba(0,0,0,.35)}
.photo-frame img{border:1px solid rgba(27,9,9,.9)}

.features{border-top:3px double rgba(184,134,50,.38)}
.features article{border-bottom:1px solid rgba(184,134,50,.28)}
.features article>span{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(184,134,50,.45);border-radius:50%;background:rgba(41,10,15,.5)}
.features h3{color:#e3c176}

.quote-band{
  position:relative;
  border-block:3px double rgba(184,134,50,.46);
  background:rgba(24,6,10,.76);
  box-shadow:inset 0 12px 28px rgba(0,0,0,.24),inset 0 -12px 28px rgba(0,0,0,.24);
}
.quote-band:before,.quote-band:after{content:"❦";color:var(--antique-gold);font-size:1.1rem}

.coven{margin:2.2rem 3vw;border:3px double rgba(184,134,50,.54);box-shadow:0 32px 75px rgba(0,0,0,.5),0 0 0 7px rgba(18,6,8,.82),0 0 0 8px rgba(126,80,27,.44)}
.coven-content{padding:3rem;border:1px solid rgba(227,193,118,.3);background:rgba(22,6,9,.42);box-shadow:inset 0 0 48px rgba(0,0,0,.34)}

.story-grid figure{
  border:3px double rgba(184,134,50,.42);
  background:linear-gradient(145deg,rgba(58,15,22,.75),rgba(13,6,7,.88));
  box-shadow:0 18px 42px rgba(0,0,0,.32),inset 0 0 28px rgba(0,0,0,.22);
}
.story-grid .featured{background:linear-gradient(145deg,rgba(89,22,34,.72),rgba(17,7,8,.92))}
.story-grid figcaption>span{border:3px double var(--antique-gold)}

.contact-links a{border-bottom:1px solid rgba(184,134,50,.3);transition:padding .25s ease,background .25s ease}
.contact-links a:hover{padding-inline:.75rem;background:linear-gradient(90deg,rgba(184,134,50,.08),transparent)}
.contact-icon{border:3px double var(--antique-gold);background:rgba(45,10,16,.55)}

.product-modal{background:rgba(8,3,4,.9)}
.product-modal-panel{
  border:1px solid rgba(227,193,118,.8);
  background:
    linear-gradient(135deg,rgba(224,182,95,.55) 0 2px,transparent 2px) left top/48px 48px no-repeat,
    linear-gradient(225deg,rgba(224,182,95,.55) 0 2px,transparent 2px) right top/48px 48px no-repeat,
    linear-gradient(45deg,rgba(224,182,95,.55) 0 2px,transparent 2px) left bottom/48px 48px no-repeat,
    linear-gradient(315deg,rgba(224,182,95,.55) 0 2px,transparent 2px) right bottom/48px 48px no-repeat,
    linear-gradient(145deg,#41121d,#17070a 62%);
  box-shadow:0 36px 100px rgba(0,0,0,.72),0 0 0 6px #16070a,0 0 0 7px rgba(184,134,50,.52),inset 0 0 55px rgba(0,0,0,.34);
}
.product-modal-panel:before{content:none}
.product-modal-panel h3{color:#e3c176}
.modal-close{
  display:grid;
  place-items:center;
  padding:0 0 2px;
  border:3px double var(--antique-gold);
  background:#310d15;
  box-shadow:0 5px 18px rgba(0,0,0,.4);
  font-family:Arial,sans-serif;
  font-size:1.25rem;
  font-weight:400;
  line-height:1;
  text-align:center;
}

footer{
  position:relative;
  border-top:3px double rgba(184,134,50,.48);
  background:rgba(17,5,7,.54);
  box-shadow:inset 0 24px 55px rgba(0,0,0,.28);
}
footer:before{content:"☙  ✦  ❧";color:var(--antique-gold);font-size:1rem;letter-spacing:.65rem}

@media(max-width:1000px){nav{border-bottom:3px double rgba(184,134,50,.42);background:rgba(28,7,11,.98)}}
@media(max-width:780px){
  body{background-size:auto,560px 560px}
  .product-shop:before{inset:8px}
  .product-card{box-shadow:0 24px 55px rgba(0,0,0,.4),0 0 0 4px rgba(25,9,10,.94),0 0 0 5px rgba(119,77,27,.58),inset 0 0 30px rgba(0,0,0,.4)}

  .product-grid{
    width:100%;
    max-width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
    gap:.7rem;
  }
  .product-grid .product-card{
    width:100%;
    min-width:0;
    margin:0;
    padding:1.45rem .7rem .7rem;
  }
  .product-card:after{top:-18px}
  .product-card--bundle{padding-top:1.8rem}
  .product-grid .product-meta{
    display:flex;
    min-height:90px;
    margin-bottom:.4rem;
    flex-direction:column;
    justify-content:flex-start;
  }
  .product-catalog-fr .product-grid .product-meta{min-height:110px}
  .product-grid .product-price{margin-bottom:.3rem;font-size:.6rem;letter-spacing:.07em}
  .product-grid .product-meta h2{font-size:clamp(1rem,5vw,1.35rem);line-height:1.04}
  .product-visual{
    display:flex;
    height:auto;
    aspect-ratio:auto;
    flex-direction:column;
  }
  .product-visual:before{content:none}
  .product-visual img{
    width:100%;
    height:auto;
    flex:0 0 auto;
    object-fit:contain;
  }
  .product-grid .product-visual{
    width:min(100%,125px);
  }
  .product-grid .product-buy{
    min-height:40px;
    margin-top:.75rem;
    padding:.5rem .15rem;
    font-size:.56rem;
    font-weight:600;
    letter-spacing:.06em;
    white-space:nowrap;
  }
  .product-grid .button-gold:before,.product-grid .button-gold:after{margin:0 .18rem;font-size:.42rem}
  .product-catalog-fr .product-grid .product-buy{
    flex-wrap:nowrap;
    font-size:.48rem;
    letter-spacing:.035em;
  }
  .product-catalog-fr .product-grid .button-gold:before,.product-catalog-fr .product-grid .button-gold:after{margin:0 .08rem}

  .product-overlay{
    position:static;
    inset:auto;
    width:100%;
    min-height:36px;
    padding:.5rem .35rem;
    opacity:1;
    border-top:1px solid rgba(227,193,118,.35);
    background:linear-gradient(180deg,rgba(19,6,9,.72),rgba(8,3,4,.94));
    font-size:.5rem;
    letter-spacing:.11em;
  }

  .floating-whatsapp{
    right:.7rem;
    bottom:.7rem;
    gap:.45rem;
    padding:.35rem .7rem .35rem .35rem;
    border-radius:26px;
    font-size:.55rem;
    letter-spacing:.04em;
  }
  .floating-whatsapp b{display:block}
  .floating-whatsapp span{width:30px;height:30px}

  .stories{overflow:hidden}
  .story-grid{
    display:flex;
    max-width:none;
    margin-inline:-6vw;
    padding:.25rem 7vw 1.2rem;
    align-items:flex-start;
    justify-content:flex-start;
    gap:1rem;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-padding-inline:7vw;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .story-grid::-webkit-scrollbar{display:none}
  .story-grid figure,.story-grid .featured{
    flex:0 0 86%;
    width:86%;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }

  .coven{margin:1.4rem 4vw}
  .coven-content{padding:2rem 1.2rem}
}

@media(max-width:780px) and (hover:none){
  .product-visual:hover img,.product-visual:focus-visible img{filter:none;transform:none}
  .product-visual:active img{filter:brightness(.72)}
}

@media(prefers-reduced-motion:reduce){.product-card,.contact-links a{transition:none}}