/* =====================================================
   THE SAVAGE SAINTS
   SAINTS MARKET
   COLLECTION-FIRST STOREFRONT
===================================================== */


/* =====================================================
   VARIABLES
===================================================== */

:root{

  --store-forest:#173326;
  --store-forest-dark:#0c261b;
  --store-forest-deep:#071b13;

  --store-cream:#f6eedc;
  --store-paper:#fffdf8;

  --store-gold:#c8a64b;
  --store-gold-light:#efd98e;
  --store-gold-bright:#e7bd4b;
  --store-gold-deep:#8b641c;

  --store-ink:#10271d;
  --store-muted:#606c65;

  --store-line:
    rgba(23,51,38,.14);

  --store-shadow:
    0 1.5rem 4rem rgba(23,51,38,.10);

  --store-width:
    1320px;

}


/* =====================================================
   GLOBAL OVERLAY KILL SWITCH
   DO NOT REMOVE
===================================================== */

html::before,
html::after,
body::before,
body::after{

  content:none !important;

  display:none !important;

  position:static !important;

  width:0 !important;
  height:0 !important;

  opacity:0 !important;
  visibility:hidden !important;

  pointer-events:none !important;

  background:none !important;
  background-image:none !important;

  border:0 !important;

  box-shadow:none !important;

  filter:none !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;

  mix-blend-mode:normal !important;

}


/* =====================================================
   RESET
===================================================== */

*,
*::before,
*::after{
  box-sizing:border-box;
}


html{
  scroll-behavior:smooth;
}


html,
body{

  margin:0;
  padding:0;

  background:
    var(--store-cream);

}


body.saints-market-page{

  min-width:320px;

  overflow-x:hidden;

  color:
    var(--store-ink);

  background:
    var(--store-cream);

  font-family:
    "Inter",
    Arial,
    sans-serif;

}


button,
input,
select,
textarea{
  font:inherit;
}


button{
  color:inherit;
}


img{
  display:block;
  max-width:100%;
}


[hidden]{
  display:none !important;
}


.store-page{

  min-height:100vh;

  overflow:hidden;

}


/* =====================================================
   HERO
===================================================== */

.store-hero{

  position:relative;

  isolation:isolate;

  min-height:
    clamp(
      36rem,
      66vw,
      47rem
    );

  display:grid;
  place-items:center;

  overflow:hidden;

  padding:
    clamp(7.5rem,12vw,10rem)
    1.25rem
    clamp(7rem,11vw,9rem);

  background:
    var(--store-forest-deep);

}


.store-hero__background{

  position:absolute;

  z-index:-3;

  inset:-4%;

  background:
    url("/media/market.png")
    center center / cover
    no-repeat;

  transform:
    scale(
      var(--store-hero-scale,1)
    );

}


.store-hero__overlay{

  position:absolute;

  z-index:-2;

  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(4,21,14,.93),
      rgba(5,23,15,.77) 42%,
      rgba(5,20,14,.34)
    ),
    linear-gradient(
      180deg,
      rgba(3,16,11,.08),
      rgba(3,16,11,.48)
    );

}


.store-hero::after{

  content:"";

  position:absolute;

  z-index:-1;

  right:-8%;
  bottom:-6rem;
  left:-8%;

  height:8rem;

  border-radius:
    50% 50% 0 0 /
    45% 45% 0 0;

  background:
    var(--store-cream);

}


.store-hero__content{

  width:min(
    100%,
    55rem
  );

  color:#fffaf0;

  text-align:center;

  opacity:
    var(--store-hero-fade,1);

}


.store-hero__eyebrow{

  margin:0;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:.9rem;

  color:
    var(--store-gold-light);

  font-family:
    "Cinzel",
    serif;

  font-size:.7rem;
  font-weight:700;

  letter-spacing:.18em;

  text-transform:uppercase;

}


.store-hero__eyebrow span{

  width:
    clamp(
      2rem,
      6vw,
      4.5rem
    );

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--store-gold-light)
    );

}


.store-hero__eyebrow span:last-child{

  background:
    linear-gradient(
      90deg,
      var(--store-gold-light),
      transparent
    );

}


.store-hero h1{

  margin:
    .8rem
    0
    0;

  color:#fffaf0;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      4.4rem,
      10vw,
      8.5rem
    );

  font-weight:500;

  letter-spacing:-.065em;

  line-height:.78;

}


.store-hero__tagline{

  margin:
    1.45rem
    0
    0;

  color:#f0ce78;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      1.35rem,
      2.7vw,
      2.05rem
    );

  font-style:italic;
  font-weight:600;

}


.store-hero__lead{

  max-width:45rem;

  margin:
    1.15rem
    auto
    0;

  color:
    rgba(255,250,240,.88);

  font-size:
    clamp(
      .94rem,
      1.4vw,
      1.05rem
    );

  line-height:1.72;

}


.store-hero__details{

  margin:
    1.7rem
    auto
    0;

  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;

  gap:.75rem 1rem;

  color:
    rgba(255,247,227,.82);

  font-family:
    "Cinzel",
    serif;

  font-size:.61rem;
  font-weight:700;

  letter-spacing:.12em;

  text-transform:uppercase;

}


.store-hero__details i{

  color:
    var(--store-gold-bright);

  font-style:normal;

}


.store-hero__actions{

  margin-top:1.8rem;

  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;

  gap:1rem;

}


.store-hero__shop{

  min-height:2.9rem;

  padding:
    0
    1.3rem;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:
    1px solid rgba(236,204,113,.72);

  border-radius:999px;

  color:#2c2107;

  background:
    linear-gradient(
      135deg,
      #deb044,
      #efd47a
    );

  font-family:
    "Cinzel",
    serif;

  font-size:.58rem;
  font-weight:800;

  letter-spacing:.09em;

  text-decoration:none;
  text-transform:uppercase;

}


.store-hero__cart{

  display:flex;
  align-items:center;

  gap:1rem;

}


.store-hero__cart > span{

  color:
    rgba(255,250,240,.70);

  font-family:
    "Cinzel",
    serif;

  font-size:.58rem;
  font-weight:700;

  letter-spacing:.10em;

  text-transform:uppercase;

}


/* =====================================================
   STORE CONTENT
===================================================== */

.store-content{

  width:min(
    calc(100% - 3rem),
    var(--store-width)
  );

  margin:0 auto;

  padding:
    clamp(3rem,6vw,5rem)
    0
    clamp(6rem,10vw,9rem);

}


/* =====================================================
   COLLECTION LANDING
===================================================== */

.store-browse{

  scroll-margin-top:7rem;

  padding:
    clamp(2rem,4vw,4rem)
    0
    clamp(4.5rem,8vw,7rem);

}


.store-browse__heading{

  margin-bottom:
    clamp(2.7rem,5vw,4.5rem);

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(280px,420px);

  align-items:end;

  gap:
    clamp(2rem,6vw,6rem);

}


.store-browse__heading p{

  margin:
    0
    0
    .65rem;

  color:
    var(--store-gold-deep);

  font-family:
    "Cinzel",
    serif;

  font-size:.63rem;
  font-weight:700;

  letter-spacing:.15em;

  text-transform:uppercase;

}


.store-browse__heading h2{

  margin:0;

  color:
    var(--store-ink);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      3.8rem,
      7vw,
      6.5rem
    );

  font-weight:500;

  letter-spacing:-.058em;

  line-height:.82;

}


.store-browse__heading > span{

  color:
    var(--store-muted);

  font-size:.90rem;

  line-height:1.72;

}


/* =====================================================
   COLLECTION GRID
===================================================== */

.store-browse__grid{

  display:grid;

  grid-template-columns:
    repeat(12,minmax(0,1fr));

  grid-auto-rows:
    clamp(
      260px,
      25vw,
      360px
    );

  gap:1rem;

}


.store-browse__card{

  position:relative;

  isolation:isolate;

  overflow:hidden;

  padding:0;

  border:
    1px solid rgba(23,51,38,.08);

  border-radius:1rem;

  color:#ffffff;

  background:
    var(--store-forest);

  box-shadow:
    0 1rem 2.5rem rgba(23,51,38,.08);

  text-align:left;

  cursor:pointer;

  transition:
    transform .3s ease,
    box-shadow .3s ease;

}


.store-browse__card--drop{
  grid-column:span 5;
}


.store-browse__card--coffee{
  grid-column:span 7;
}


.store-browse__card--soap{
  grid-column:span 7;
}


.store-browse__card--shelf{
  grid-column:span 5;
}


.store-browse__card:hover{

  transform:
    translateY(-5px);

  box-shadow:
    0 1.7rem 3.6rem rgba(23,51,38,.15);

}


.store-browse__card > img{

  position:absolute;

  z-index:-3;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .55s ease;

}


.store-browse__card:hover > img{

  transform:
    scale(1.045);

}


.store-browse__overlay{

  position:absolute;

  z-index:-1;

  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(4,18,12,.04),
      rgba(4,18,12,.20) 45%,
      rgba(4,18,12,.82)
    );

}


.store-browse__copy{

  position:absolute;

  z-index:5;

  right:
    clamp(1.3rem,3vw,2rem);

  bottom:
    clamp(1.3rem,3vw,2rem);

  left:
    clamp(1.3rem,3vw,2rem);

}


.store-browse__copy small{

  display:block;

  margin-bottom:.45rem;

  color:
    var(--store-gold-light);

  font-family:
    "Cinzel",
    serif;

  font-size:.57rem;
  font-weight:700;

  letter-spacing:.13em;

  text-transform:uppercase;

}


.store-browse__copy strong{

  display:block;

  max-width:82%;

  color:#ffffff;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      2.2rem,
      4vw,
      3.7rem
    );

  font-weight:600;

  letter-spacing:-.035em;

  line-height:.88;

}


.store-browse__copy i{

  position:absolute;

  right:0;
  bottom:.15rem;

  width:2.65rem;
  height:2.65rem;

  display:grid;
  place-items:center;

  border:
    1px solid rgba(255,255,255,.34);

  border-radius:50%;

  background:
    rgba(5,27,19,.35);

  font-style:normal;

}


/* =====================================================
   SOAP TILE
===================================================== */

.store-browse__card--soap{

  background:
    linear-gradient(
      145deg,
      #c29c71,
      #987353
    );

}


.store-browse__soap-art{

  position:absolute;

  z-index:-3;

  inset:0;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  color:#fff8e9;

  background:
    linear-gradient(
      145deg,
      #c39b72,
      #8c664b
    );

}


.store-browse__soap-art::before{

  content:"";

  width:
    clamp(7rem,14vw,11rem);

  height:
    clamp(4.8rem,9vw,7.4rem);

  margin-bottom:1.2rem;

  border-radius:
    2.3rem
    2.3rem
    1.5rem
    1.5rem;

  background:
    linear-gradient(
      145deg,
      #efc775,
      #cf875e
    );

  box-shadow:
    0 1.4rem 2.8rem rgba(71,42,25,.26);

  transform:
    rotate(-5deg);

}


.store-browse__soap-art > span{

  font-family:
    "Cinzel",
    serif;

  font-size:.58rem;
  font-weight:700;

  letter-spacing:.14em;

  text-transform:uppercase;

}


.store-browse__soap-art > strong{

  margin-top:.3rem;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:2.3rem;

  font-style:italic;

}


/* =====================================================
   CATALOG VIEW
===================================================== */

.store-catalog-view{

  scroll-margin-top:7rem;

  margin-top:
    clamp(1rem,3vw,2rem);

  padding:
    clamp(2.2rem,4vw,3.4rem)
    0
    clamp(4rem,8vw,7rem);

  border-top:
    1px solid var(--store-line);

}


.store-catalog-view__navigation{

  margin-bottom:
    clamp(2.5rem,5vw,4rem);

}


.store-catalog-back{

  padding:0;

  display:inline-flex;
  align-items:center;

  gap:.65rem;

  border:0;

  color:
    var(--store-forest);

  background:transparent;

  font-family:
    "Cinzel",
    serif;

  font-size:.62rem;
  font-weight:700;

  letter-spacing:.09em;

  text-transform:uppercase;

  cursor:pointer;

}


.store-catalog-back span{

  width:2rem;
  height:2rem;

  display:grid;
  place-items:center;

  border:
    1px solid rgba(23,51,38,.20);

  border-radius:50%;

}


/* =====================================================
   LIMITED FEATURE
===================================================== */

.store-collection__header{

  position:relative;

  overflow:hidden;

  margin-bottom:
    clamp(3rem,6vw,5rem);

  padding:
    clamp(2.4rem,5vw,4.2rem);

  border:
    1px solid rgba(199,160,82,.50);

  border-radius:1.3rem;

  box-shadow:
    var(--store-shadow);

}


.store-collection__header--limited{

  min-height:
    clamp(20rem,31vw,26rem);

  display:flex;
  align-items:center;

  color:#fff9ed;

  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(237,193,74,.20),
      transparent 31%
    ),
    linear-gradient(
      135deg,
      #123b29,
      #082318
    );

}


.store-collection__header--limited::before{

  content:"LIMITED DROP";

  position:absolute;

  top:1rem;
  right:-2.4rem;

  padding:
    .45rem
    3rem;

  color:#2c2108;

  background:#e4b83c;

  font-family:
    "Cinzel",
    serif;

  font-size:.55rem;
  font-weight:800;

  letter-spacing:.13em;

  transform:
    rotate(35deg);

}


.store-collection__copy{

  position:relative;

  z-index:3;

  width:100%;
  max-width:46rem;

  margin:0 auto;

  text-align:center;

}


.store-collection__eyebrow{

  margin:
    0
    0
    .8rem;

  color:
    var(--store-gold-light);

  font-family:
    "Cinzel",
    serif;

  font-size:.65rem;
  font-weight:700;

  letter-spacing:.15em;

  text-transform:uppercase;

}


.store-collection__copy h2{

  margin:0;

  color:#fffaf0;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      3rem,
      6vw,
      5.4rem
    );

  font-weight:500;

  letter-spacing:-.055em;

  line-height:.86;

}


.store-collection__copy h2 em{

  display:block;

  color:#e3bb55;

  font-style:italic;

}


.store-collection__copy >
p:not(.store-collection__eyebrow){

  max-width:38rem;

  margin:
    1.3rem
    auto
    0;

  color:
    rgba(255,250,240,.84);

  font-size:.94rem;

  line-height:1.7;

}


.store-collection__points{

  margin-top:1.5rem;

  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;

  gap:.65rem .9rem;

  color:
    var(--store-gold-light);

  font-family:
    "Cinzel",
    serif;

  font-size:.57rem;
  font-weight:700;

  letter-spacing:.11em;

  text-transform:uppercase;

}


.store-collection__points i{
  font-style:normal;
}


.store-collection__character{

  position:absolute;

  z-index:2;

  pointer-events:none;

}


.store-collection__character--coozy{

  top:1.3rem;
  left:2rem;

  width:
    clamp(5.5rem,9vw,9rem);

  transform:
    rotate(-8deg);

}


.store-collection__character--crest{

  right:2rem;
  bottom:.7rem;

  width:
    clamp(7rem,13vw,12rem);

}


/* =====================================================
   REGULAR CATALOG HEADER
===================================================== */

.store-catalog{

  margin-bottom:
    clamp(2rem,4vw,3rem);

}


.store-catalog__top{

  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:2rem;

}


.store-catalog__heading{

  max-width:52rem;

}


.store-catalog__heading p{

  margin:
    0
    0
    .55rem;

  color:
    var(--store-gold-deep);

  font-family:
    "Cinzel",
    serif;

  font-size:.62rem;
  font-weight:700;

  letter-spacing:.14em;

  text-transform:uppercase;

}


.store-catalog__heading h2{

  margin:0;

  color:
    var(--store-ink);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      3.3rem,
      6vw,
      5.4rem
    );

  font-weight:500;

  letter-spacing:-.052em;

  line-height:.86;

}


.store-catalog__heading > span{

  display:block;

  max-width:38rem;

  margin-top:1rem;

  color:
    var(--store-muted);

  font-size:.90rem;

  line-height:1.65;

}


.store-catalog__count{

  display:flex;
  align-items:baseline;

  gap:.45rem;

}


.store-catalog__count strong{

  color:
    var(--store-forest);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:1.8rem;

}


.store-catalog__count span{

  color:#737d76;

  font-size:.56rem;
  font-weight:700;

  letter-spacing:.08em;

  text-transform:uppercase;

}


/* =====================================================
   FILTERS
===================================================== */

.store-catalog__filters{

  margin-top:1.8rem;

  padding:
    1rem
    0;

  display:flex;
  flex-wrap:wrap;

  gap:1.5rem;

  border-top:
    1px solid var(--store-line);

  border-bottom:
    1px solid var(--store-line);

}


.store-catalog__filter{

  padding:.4rem 0;

  border:0;

  color:#707b73;

  background:transparent;

  font-size:.69rem;
  font-weight:600;

  cursor:pointer;

}


.store-catalog__filter.is-active{

  color:
    var(--store-forest);

  text-decoration:underline;

  text-decoration-color:
    var(--store-gold);

  text-decoration-thickness:
    2px;

  text-underline-offset:.5rem;

}


/* =====================================================
   PRODUCT GRID
===================================================== */

.product-grid{

  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  align-items:start;

  gap:
    clamp(2.8rem,5vw,4rem)
    clamp(1.2rem,2vw,1.6rem);

}


.product-grid--limited +
.product-grid--limited{

  margin-top:
    clamp(4.5rem,7vw,6.5rem);

}


.product-card{

  min-width:0;

  display:flex;
  flex-direction:column;

}


/* =====================================================
   PRODUCT CARD HEADER
===================================================== */

.product-card__bar{

  min-height:2.8rem;

  padding:
    .62rem
    .72rem;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:.7rem;

  border:
    1px solid rgba(199,160,82,.55);

  border-radius:.75rem;

  color:#f8d878;

  background:
    radial-gradient(
      circle at 12% 50%,
      rgba(230,184,75,.18),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #0b3928,
      #174f38
    );

  box-shadow:
    0 .55rem 1.25rem rgba(19,51,36,.12),
    inset 0 1px rgba(255,255,255,.08);

  font-family:
    "Cinzel",
    serif;

  font-size:.61rem;
  font-weight:800;

  letter-spacing:.12em;
  line-height:1.25;

  text-transform:uppercase;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;

}


.product-card:hover .product-card__bar{

  border-color:
    rgba(224,182,78,.9);

  box-shadow:
    0 .75rem 1.5rem rgba(19,51,36,.17),
    inset 0 1px rgba(255,255,255,.1);

  transform:
    translateY(-1px);

}


.product-card__bar strong{

  flex:0 0 auto;

  padding:
    .36rem
    .65rem;

  border:
    1px solid #f4d277;

  border-radius:999px;

  color:#173326;

  background:
    linear-gradient(
      135deg,
      #f8da7f,
      #dca72b
    );

  box-shadow:
    0 .3rem .7rem rgba(0,0,0,.16),
    inset 0 1px rgba(255,255,255,.45);

  font-size:.52rem;
  letter-spacing:.13em;

}


/* =====================================================
   PRODUCT IDENTITY
===================================================== */

.product-card__identity{

  min-height:5.5rem;

  margin-top:.5rem;

  padding:
    .78rem
    .8rem
    1rem;

  border-left:
    3px solid var(--store-gold);

  border-radius:
    0
    .7rem
    .7rem
    0;

  background:
    linear-gradient(
      90deg,
      rgba(222,174,58,.14),
      rgba(255,253,248,.18) 72%,
      transparent
    );

}


.product-card__identity p{

  margin:0;

  color:#865b0d;

  font-family:
    "Cinzel",
    serif;

  font-size:.6rem;
  font-weight:800;

  letter-spacing:.14em;
  line-height:1.35;

  text-transform:uppercase;

}


.product-card__identity h3{

  margin:
    .38rem
    0
    0;

  color:
    var(--store-forest);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(
      1.6rem,
      2.4vw,
      2.15rem
    );

  font-weight:600;

  letter-spacing:-.035em;
  line-height:1;

  text-wrap:balance;

}


/* =====================================================
   PAYPAL
===================================================== */

.paypal-button-slot,
.paypal-button-slot
paypal-add-to-cart-button{

  display:block;

  width:100%;
  min-width:0;

}


.paypal-button-slot
[id^="paypal-form-fields-container-"][id$="-wrapper"]{

  width:100% !important;

  margin:0 !important;

}


.paypal-button-slot
[id^="paypal-form-fields-container-"]:not([id$="-wrapper"]){

  width:100% !important;
  max-width:none !important;

  display:flex !important;

  flex-direction:column !important;

  gap:.8rem !important;

}


.paypal-button-slot
[id^="carousel-container-"]{

  width:100% !important;
  max-width:none !important;

}


.paypal-button-slot
.hero-container{

  width:100% !important;
  max-width:none !important;

  overflow:hidden !important;

  border-radius:.9rem !important;

  background:#ede8e0 !important;

}


.paypal-button-slot
.hero-img{

  width:100% !important;
  height:100% !important;

  object-fit:cover !important;

}


.paypal-button-slot
.thumbnail-container{

  margin-top:.6rem !important;

  display:flex !important;

  gap:.45rem !important;

  overflow-x:auto !important;

}


.paypal-button-slot
.thumbnail-button{

  width:3rem !important;
  height:3rem !important;

  flex:0 0 auto !important;

  padding:0 !important;

  border-radius:.4rem !important;

}


.paypal-button-slot
.thumbnail{

  width:100% !important;
  height:100% !important;

  object-fit:cover !important;

}


.paypal-button-slot
.item-title,
.paypal-button-slot
.item-description{

  display:none !important;

}


.paypal-button-slot
.price-container{

  margin:0 !important;

  text-align:left !important;

}


.paypal-button-slot
.selectContainer select,
.paypal-button-slot
select{

  min-height:2.7rem !important;

  margin-bottom:.6rem !important;

  border:
    1px solid rgba(23,51,38,.18) !important;

  border-radius:.45rem !important;

}


.paypal-button-slot
.addToCartButtonContainer{

  min-height:2.85rem !important;

  border:
    1px solid #b48118 !important;

  border-radius:.45rem !important;

  color:#201806 !important;

  background:
    linear-gradient(
      135deg,
      #e1aa25,
      #f2c647
    ) !important;

  font-size:.68rem !important;
  font-weight:800 !important;

  text-transform:uppercase !important;

}


/* =====================================================
   PRODUCT DETAILS
===================================================== */

.product-card__details{

  margin:
    .85rem
    .15rem
    0;

  border-top:
    1px solid var(--store-line);

}


.product-card__details summary{

  position:relative;

  padding:
    .85rem
    1.6rem
    .7rem
    0;

  color:#5f4b23;

  font-size:.66rem;
  font-weight:700;

  list-style:none;

  cursor:pointer;

}


.product-card__details
summary::-webkit-details-marker{
  display:none;
}


.product-card__details
summary::after{

  content:"+";

  position:absolute;

  right:.15rem;

  color:
    var(--store-gold-deep);

}


.product-card__details[open]
summary::after{
  content:"−";
}


.product-card__details-content{

  padding:
    0
    0
    1rem;

}


.product-card__details p,
.product-card__details ul{

  color:
    var(--store-muted);

  font-size:.80rem;

  line-height:1.65;

}


/* =====================================================
   SOAP PLACEHOLDER
===================================================== */

.product-card__image-pending{

  min-height:18rem;

  margin-bottom:.85rem;

  display:grid;
  place-items:center;
  align-content:center;

  gap:.75rem;

  border-radius:.9rem;

  background:
    linear-gradient(
      145deg,
      #fbf5e7,
      #eadcbf
    );

  text-align:center;

}


.product-card__image-pending > span{

  width:4.6rem;
  height:4.6rem;

  display:grid;
  place-items:center;

  border:
    1px solid var(--store-gold);

  border-radius:50%;

  font-size:2rem;

}


.product-card__image-pending small{

  color:#81662e;

  font-family:
    "Cinzel",
    serif;

  font-size:.52rem;
  font-weight:700;

  text-transform:uppercase;

}


/* =====================================================
   EMPTY CATALOG
===================================================== */

.store-catalog__empty{

  padding:
    3.5rem
    1.5rem;

  border:
    1px dashed rgba(141,100,29,.35);

  border-radius:.8rem;

  text-align:center;

}


/* =====================================================
   CATALOG FOOTER
===================================================== */

.store-catalog-view__footer{

  margin-top:
    clamp(4rem,8vw,7rem);

  padding-top:2rem;

  border-top:
    1px solid var(--store-line);

}


.store-catalog-back--bottom{

  margin:0 auto;

  display:flex;

}


/* =====================================================
   CART TOGGLE
===================================================== */

.store-cart-drawer__toggle{

  position:fixed;

  z-index:9500;

  top:
    calc(
      var(--global-header-height,4rem)
      +
      1rem
    );

  right:1rem;

  min-height:2.65rem;

  padding:
    .55rem
    .7rem
    .55rem
    .9rem;

  display:flex;
  align-items:center;

  gap:.55rem;

  border:
    1px solid rgba(216,177,76,.72);

  border-radius:999px;

  color:#fff8e6;

  background:#174530;

  cursor:pointer;

}


.store-cart-drawer__toggle strong{

  min-width:1.5rem;
  height:1.5rem;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:#2f2308;

  background:#e5b938;

}


/* =====================================================
   CART DRAWER
===================================================== */

.store-cart-drawer{

  position:fixed;

  z-index:9600;

  top:
    calc(
      var(--global-header-height,4rem)
      +
      1rem
    );

  right:1rem;

  width:min(
    24rem,
    calc(100vw - 2rem)
  );

  max-height:
    calc(100dvh - 6rem);

  display:grid;

  grid-template-rows:
    auto
    minmax(0,1fr)
    auto;

  overflow:hidden;

  border:
    1px solid rgba(199,160,82,.68);

  border-radius:1rem;

  background:#fffdf8;

  box-shadow:
    0 1.5rem 4rem rgba(5,31,20,.24);

  opacity:0;

  pointer-events:none;

  transform:
    translateX(
      calc(100% + 2rem)
    );

  transition:
    opacity .25s ease,
    transform .25s ease;

}


.store-cart-drawer.is-open{

  opacity:1;

  pointer-events:auto;

  transform:
    translateX(0);

}


.store-cart-drawer__header{

  padding:1.15rem 1.25rem;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border-bottom:
    1px solid var(--store-line);

}


.store-cart-drawer__header p{

  margin:0;

  color:
    var(--store-gold-deep);

  font-family:
    "Cinzel",
    serif;

  font-size:.55rem;

  text-transform:uppercase;

}


.store-cart-drawer__header h2{

  margin:.25rem 0 0;

  font-family:
    "Cormorant Garamond",
    serif;

}


.store-cart-drawer__close{

  position:relative;

  width:2.25rem;
  height:2.25rem;

  border:
    1px solid var(--store-line);

  border-radius:50%;

  background:#fffdf8;

}


.store-cart-drawer__close span{

  position:absolute;

  top:50%;
  left:50%;

  width:.85rem;
  height:1px;

  background:#76551a;

}


.store-cart-drawer__close
span:first-child{

  transform:
    translate(-50%,-50%)
    rotate(45deg);

}


.store-cart-drawer__close
span:last-child{

  transform:
    translate(-50%,-50%)
    rotate(-45deg);

}


.store-cart-drawer__body{

  overflow:auto;

  padding:.85rem;

}


.store-cart-drawer__empty{

  min-height:10rem;

  display:grid;
  place-items:center;
  align-content:center;

  text-align:center;

}


.store-cart-drawer__items{

  display:grid;

  gap:.65rem;

}


.store-cart-drawer__item{

  padding:.6rem;

  display:grid;

  grid-template-columns:
    3.65rem
    minmax(0,1fr);

  gap:.75rem;

  border:
    1px solid var(--store-line);

  border-radius:.7rem;

  background:#ffffff;

}


.store-cart-drawer__item-image{

  width:3.65rem;
  height:3.65rem;

  overflow:hidden;

  border-radius:.45rem;

}


.store-cart-drawer__item-image img{

  width:100%;
  height:100%;

  object-fit:cover;

}


.store-cart-drawer__item-fallback{

  width:100%;
  height:100%;

  display:grid;
  place-items:center;

  background:#e3d6b7;

}


.store-cart-drawer__item-copy h3{

  margin:.15rem 0 .4rem;

  font-size:.9rem;

}


.store-cart-drawer__item-meta{

  display:flex;
  justify-content:space-between;

  font-size:.66rem;

}


.store-cart-drawer__footer{

  padding:
    1rem
    1.25rem;

  border-top:
    1px solid var(--store-line);

  background:#f7efd9;

}


.store-cart-drawer__subtotal{

  display:flex;
  justify-content:space-between;

}


.store-cart-drawer__actions{

  display:grid;

  gap:.55rem;

}


.store-cart-drawer__actions button{

  min-height:2.55rem;

  cursor:pointer;

}


.store-cart-drawer__checkout{

  border:
    1px solid #b48118;

  background:
    linear-gradient(
      135deg,
      #dda623,
      #efc344
    );

}


/* =====================================================
   FAQ
===================================================== */

.store-faq{

  width:min(
    1080px,
    100%
  );

  margin:
    clamp(90px,9vw,140px)
    auto
    58px;

  padding:
    clamp(38px,5vw,62px);

  border:
    1px solid rgba(15,61,42,.14);

  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      #fffdf7,
      #f7efdb
    );

}


.store-faq__heading{

  max-width:740px;

  margin-bottom:40px;

}


.store-faq__heading > p{

  width:max-content;

  padding:
    7px
    12px;

  border-radius:999px;

  color:#8d6819;

  font-size:.64rem;
  font-weight:900;

  text-transform:uppercase;

}


.store-faq__heading h2{

  margin:0;

  color:#0e3b2a;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    clamp(3rem,5.4vw,5rem);

  line-height:.91;

}


.store-faq__heading > span{

  display:block;

  margin-top:20px;

  color:#59655e;

  line-height:1.75;

}


.store-faq__list{

  display:grid;

  gap:10px;

}


.store-faq__item{

  border:
    1px solid rgba(15,61,42,.12);

  border-radius:10px;

  background:
    rgba(255,255,255,.46);

}


.store-faq__item summary{

  position:relative;

  padding:
    22px
    62px
    22px
    26px;

  cursor:pointer;

  font-weight:800;

  list-style:none;

}


.store-faq__item summary::after{

  content:"+";

  position:absolute;

  top:50%;
  right:22px;

  transform:
    translateY(-50%);

}


.store-faq__item[open]
summary::after{

  content:"−";

}


.store-faq__answer{

  padding:
    0
    66px
    28px
    26px;

}


.store-faq__answer p{

  color:#566159;

  line-height:1.8;

}


.store-faq__contact{

  display:inline-flex;

  margin-top:15px;

  color:
    var(--store-forest);

  font-weight:800;

  text-decoration:none;

}


/* =====================================================
   SUPPORT
===================================================== */

.store-support{

  margin-top:4rem;

  padding:1.5rem;

  border:
    1px solid rgba(199,160,82,.58);

  border-radius:1rem;

  background:#efe1c1;

  text-align:center;

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1180px){

  .product-grid--limited{

    grid-template-columns:
      repeat(2,minmax(0,1fr));

  }


  .product-grid--limited +
  .product-grid--limited{

    margin-top:4rem;

  }

}


@media(max-width:980px){

  .store-browse__heading{

    grid-template-columns:1fr;

  }


  .store-browse__grid{

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    grid-auto-rows:280px;

  }


  .store-browse__card--drop,
  .store-browse__card--coffee,
  .store-browse__card--soap,
  .store-browse__card--shelf{

    grid-column:auto;

  }


  .product-grid-grid{

    grid-template-columns:
      repeat(2,minmax(0,1fr));

  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:680px){

  .store-hero{

    min-height:36rem;

    padding:
      7.5rem
      1rem
      7rem;

  }


  .store-hero h1{

    font-size:
      clamp(
        3.8rem,
        18vw,
        5.3rem
      );

  }


  .store-hero__actions{

    flex-direction:column;

  }


  .store-hero__shop{

    width:100%;

  }


  .store-content{

    width:
      calc(100% - 1.25rem);

  }


  .store-browse__heading h2{

    font-size:
      clamp(
        3.2rem,
        15vw,
        4.6rem
      );

  }


  .store-browse__grid{

    display:flex;

    flex-direction:column;

  }


  .store-browse__card{

    min-height:245px;

  }


  .store-catalog__top{

    align-items:flex-start;

    flex-direction:column;

  }


  .store-catalog__heading h2{

    font-size:
      clamp(
        3rem,
        14vw,
        4rem
      );

  }


  .store-catalog__filters{

    width:
      calc(100% + 1.25rem);

    margin-left:-.625rem;

    padding:
      1rem
      .625rem;

    flex-wrap:nowrap;

    overflow-x:auto;

  }


  .store-catalog__filter{

    flex:0 0 auto;

  }


  .product-grid,
  .product-grid--limited{

    grid-template-columns:1fr;

  }


  .product-grid--limited +
  .product-grid--limited{

    margin-top:3.25rem;

  }


  .store-collection__header--limited{

    min-height:27rem;

  }


  .store-collection__character--coozy{

    top:.5rem;
    left:.3rem;

    width:5.5rem;

  }


  .store-collection__character--crest{

    right:-.4rem;

    width:7rem;

    opacity:.28;

  }


  .store-cart-drawer__toggle{

    top:auto;

    right:.75rem;
    bottom:.75rem;

  }


  .store-cart-drawer{

    top:auto;

    right:.5rem;
    bottom:.5rem;

    width:
      calc(100vw - 1rem);

    transform:
      translateY(
        calc(100% + 1rem)
      );

  }


  .store-cart-drawer.is-open{

    transform:
      translateY(0);

  }


  .store-faq{

    padding:
      34px
      18px
      24px;

  }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }


  *,
  *::before,
  *::after{

    transition:none !important;

    animation:none !important;

  }

}