/* =====================================================
   DIRECT D STORE
   FULL REPLACEMENT CSS
===================================================== */

:root{

  --dd-slate:
    #475569;

  --dd-slate-dark:
    #334155;

  --dd-slate-deep:
    #202c3b;

  --dd-page:
    #f4f5f7;

  --dd-paper:
    #ffffff;

  --dd-soft:
    #edf0f3;

  --dd-gold:
    #c8a64b;

  --dd-gold-light:
    #efd98e;

  --dd-gold-deep:
    #7d591b;

  --dd-ink:
    #263445;

  --dd-muted:
    #596777;

  --dd-line:
    rgba(51,65,85,.15);

  --dd-shadow:
    0 1.4rem 3.6rem
    rgba(32,44,59,.09);

  --dd-width:
    1320px;

}


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

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

  box-sizing:
    border-box;

}


html{

  scroll-behavior:
    smooth;

}


html,
body{

  margin:
    0;

  padding:
    0;

  background:
    var(--dd-page);

}


body.directd-store-page{

  min-width:
    320px;

  overflow-x:
    hidden;

  color:
    var(--dd-ink);

  background:
    var(--dd-page);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    17px;

  line-height:
    1.65;

}


/* =====================================================
   GLOBAL OVERLAY KILL SWITCH
===================================================== */

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;

  border:
    0 !important;

  box-shadow:
    none !important;

  filter:
    none !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;

}


button,
input,
select{

  font:
    inherit;

}


button{

  color:
    inherit;

}


img{

  display:
    block;

  max-width:
    100%;

}


a{

  color:
    inherit;

  text-decoration:
    none;

}


[hidden]{

  display:
    none !important;

}


:focus-visible{

  outline:
    3px solid
    var(--dd-gold-deep);

  outline-offset:
    4px;

}


::selection{

  color:
    var(--dd-ink);

  background:
    var(--dd-gold-light);

}


/* =====================================================
   HEADER
===================================================== */

.directd-header{

  position:
    sticky;

  z-index:
    9000;

  top:
    0;

  border-bottom:
    2px solid
    var(--dd-gold);

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

  box-shadow:
    0 .3rem 1.4rem
    rgba(32,44,59,.05);

}


.directd-header__inner{

  width:
    min(
      calc(100% - 2rem),
      var(--dd-width)
    );

  min-height:
    5.2rem;

  margin:
    0 auto;

  display:
    grid;

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

  align-items:
    center;

  gap:
    2rem;

}


.directd-brand{

  display:
    inline-flex;

  align-items:
    baseline;

  gap:
    .65rem;

}


.directd-brand strong{

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    1.42rem;

  font-weight:
    700;

  letter-spacing:
    -.025em;

}


.directd-brand span{

  color:
    var(--dd-muted);

  font-size:
    .9rem;

}


.directd-nav{

  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    center;

  align-items:
    center;

  gap:
    .35rem;

}


.directd-nav a{

  min-height:
    2.9rem;

  padding:
    .65rem .85rem;

  display:
    inline-flex;

  align-items:
    center;

  border-radius:
    .45rem;

  color:
    #45566a;

  font-size:
    .92rem;

  font-weight:
    600;

}


.directd-nav a:hover{

  background:
    var(--dd-soft);

}


/* =====================================================
   CART BUTTON
===================================================== */

.directd-cart-toggle{

  min-height:
    2.8rem;

  padding:
    .5rem
    .65rem
    .5rem
    .9rem;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    .55rem;

  border:
    1px solid
    rgba(200,166,75,.8);

  border-radius:
    999px;

  background:
    var(--dd-slate-dark);

  color:
    white;

  font-weight:
    700;

  cursor:
    pointer;

}


.directd-cart-toggle strong{

  min-width:
    1.55rem;

  height:
    1.55rem;

  padding:
    0 .3rem;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    #e5bd55;

  color:
    #2c230d;

  font-size:
    .78rem;

}


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

.directd-hero{

  position:
    relative;

  isolation:
    isolate;

  min-height:
    clamp(
      31rem,
      58vw,
      41rem
    );

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  padding:
    clamp(6rem,10vw,8rem)
    1.25rem
    clamp(6rem,10vw,8rem);

  color:
    white;

  background:
    var(--dd-slate-deep);

}


.directd-hero__background{

  position:
    absolute;

  z-index:
    -3;

  inset:
    0;

  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(200,166,75,.16),
      transparent 23rem
    ),
    linear-gradient(
      135deg,
      #243246,
      #4a5c72
    );

}


.directd-hero__overlay{

  position:
    absolute;

  z-index:
    -2;

  inset:
    0;

  background:
    linear-gradient(
      180deg,
      rgba(20,28,39,.08),
      rgba(20,28,39,.35)
    );

}


.directd-hero::after{

  content:
    "";

  position:
    absolute;

  z-index:
    -1;

  right:
    -8%;

  bottom:
    -5.3rem;

  left:
    -8%;

  height:
    7rem;

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

  background:
    var(--dd-page);

}


.directd-hero__content{

  width:
    min(
      100%,
      55rem
    );

  text-align:
    center;

}


.directd-hero__eyebrow{

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    .9rem;

  margin:
    0;

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

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    .72rem;

  font-weight:
    700;

  letter-spacing:
    .18em;

  text-transform:
    uppercase;

}


.directd-hero__eyebrow span{

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

  height:
    1px;

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

}


.directd-hero__eyebrow span:last-child{

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

}


.directd-hero h1{

  margin:
    .75rem
    0
    0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      4.5rem,
      10vw,
      8rem
    );

  font-weight:
    500;

  letter-spacing:
    -.065em;

  line-height:
    .82;

}


.directd-hero__tagline{

  margin:
    1.35rem
    0
    0;

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

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      1.4rem,
      2.6vw,
      2rem
    );

  font-style:
    italic;

  font-weight:
    600;

}


.directd-hero__lead{

  max-width:
    40rem;

  margin:
    1rem
    auto
    0;

  color:
    rgba(255,255,255,.85);

}


.directd-hero__details{

  margin:
    1.55rem
    auto
    0;

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  justify-content:
    center;

  gap:
    .6rem .9rem;

  color:
    rgba(255,255,255,.78);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    .64rem;

  font-weight:
    700;

  letter-spacing:
    .10em;

  text-transform:
    uppercase;

}


.directd-hero__details i{

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

  font-style:
    normal;

}


.directd-hero__actions{

  margin-top:
    1.7rem;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    1rem;

}


.directd-gold-button{

  min-height:
    3rem;

  padding:
    0 1.35rem;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(235,205,124,.85);

  border-radius:
    999px;

  color:
    #332911;

  background:
    linear-gradient(
      135deg,
      #d7a93d,
      #f1d67b
    );

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    .72rem;

  font-weight:
    800;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;

}


.directd-hero__cart{

  min-height:
    3rem;

  padding:
    0 1.2rem;

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

  border-radius:
    999px;

  color:
    white;

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

  font-weight:
    700;

}


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

.directd-content{

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

  margin:
    0 auto;

  padding:
    clamp(3.5rem,7vw,5.5rem)
    0
    clamp(5rem,8vw,7rem);

}


/* =====================================================
   INTRO
===================================================== */

.directd-intro{

  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(270px,390px);

  align-items:
    end;

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

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

}


.directd-section-eyebrow{

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

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    .7rem;

  font-weight:
    700;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;

}


.directd-intro h2{

  margin:
    .4rem
    0
    0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      3.5rem,
      7vw,
      6rem
    );

  font-weight:
    500;

  letter-spacing:
    -.055em;

  line-height:
    .86;

}


.directd-intro > p{

  color:
    var(--dd-muted);

  font-size:
    .94rem;

}


/* =====================================================
   SEARCH
===================================================== */

.directd-search{

  padding:
    1.2rem;

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

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

  border-radius:
    .9rem;

  background:
    white;

}


.directd-search label{

  display:
    block;

  margin-bottom:
    .5rem;

  font-weight:
    600;

}


.directd-search__row{

  display:
    flex;

  gap:
    .7rem;

}


.directd-search input{

  flex:
    1;

  min-width:
    0;

  min-height:
    3.05rem;

  padding:
    .7rem .9rem;

  border:
    1px solid
    #8997a7;

  border-radius:
    .45rem;

  background:
    white;

}


.directd-search > p{

  margin-top:
    .7rem;

  color:
    var(--dd-muted);

  font-size:
    .8rem;

}


.directd-outline-button{

  min-height:
    3rem;

  padding:
    .7rem 1rem;

  border:
    1px solid
    #8492a2;

  border-radius:
    .45rem;

  background:
    white;

  color:
    var(--dd-slate-dark);

  font-weight:
    600;

}


.directd-outline-button:hover{

  background:
    var(--dd-soft);

}


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

.directd-catalog__heading{

  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(260px,400px);

  align-items:
    end;

  gap:
    3rem;

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

}


.directd-catalog__heading p{

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

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    .7rem;

  font-weight:
    700;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;

}


.directd-catalog__heading h2{

  margin:
    .45rem
    0
    0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

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

  font-weight:
    500;

  line-height:
    .88;

}


.directd-catalog__heading > span{

  color:
    var(--dd-muted);

  font-size:
    .9rem;

}


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

   IMPORTANT:
   STRETCH EVERY CARD TO THE HEIGHT OF THE TALLEST CARD
   IN ITS ROW.
===================================================== */

.directd-product-grid{

  display:
    grid;

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

  align-items:
    stretch;

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

}


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

   HEIGHT:100% IS WHAT ALLOWS THE PAYPAL CONTENT
   TO ALIGN WITH THE TALLEST PRODUCT IN EACH ROW.
===================================================== */

.directd-product-card{

  min-width:
    0;

  height:
    100%;

  display:
    flex;

  flex-direction:
    column;

}


.directd-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(200,166,75,.72);

  border-radius:
    .75rem;

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

  background:
    linear-gradient(
      135deg,
      #334155,
      #52647a
    );

  box-shadow:
    0 .55rem 1.25rem
    rgba(32,44,59,.12);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    .72rem;

  font-weight:
    800;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;

}


.directd-product-card__bar strong{

  flex:
    0 0 auto;

  padding:
    .35rem .6rem;

  border:
    1px solid
    #f4d277;

  border-radius:
    999px;

  color:
    #334155;

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

  font-size:
    .62rem;

}


/* =====================================================
   PRODUCT TITLE
===================================================== */

.directd-product-card__identity{

  min-height:
    5.5rem;

  margin-top:
    .5rem;

  padding:
    .78rem .8rem 1rem;

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

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

  background:
    linear-gradient(
      90deg,
      rgba(200,166,75,.12),
      rgba(255,255,255,.36) 72%,
      transparent
    );

}


.directd-product-card__identity p{

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

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    .67rem;

  font-weight:
    800;

  letter-spacing:
    .10em;

  text-transform:
    uppercase;

}


.directd-product-card__identity h3{

  margin:
    .35rem 0 0;

  color:
    var(--dd-slate-dark);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      1.7rem,
      2.5vw,
      2.2rem
    );

  font-weight:
    600;

  letter-spacing:
    -.035em;

  line-height:
    1;

}


/* =====================================================
   PAYPAL LISTING
   OUTER CONTAINER STRETCHES TO FILL THE CARD.
===================================================== */

.directd-paypal-slot{

  width:
    100%;

  min-width:
    0;

  flex:
    1 1 auto;

  display:
    flex;

  flex-direction:
    column;

}


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

  width:
    100%;

  min-width:
    0;

  flex:
    1 1 auto;

  display:
    flex !important;

  flex-direction:
    column !important;

}


/* =====================================================
   PAYPAL ROOT WRAPPER

   EACH LEVEL MUST BE FLEX SO THE FREE VERTICAL SPACE
   CAN FLOW DOWN TO THE PRICE / BUTTON AREA.
===================================================== */

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

  width:
    100% !important;

  min-width:
    0 !important;

  height:
    100% !important;

  flex:
    1 1 auto !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  margin:
    0 !important;

}


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

  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  height:
    100% !important;

  flex:
    1 1 auto !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  gap:
    .8rem !important;

}


/* =====================================================
   PAYPAL IMAGE CAROUSEL
===================================================== */

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

  width:
    100% !important;

  max-width:
    none !important;

  flex:
    0 0 auto !important;

}


/* =====================================================
   MAIN PRODUCT IMAGE

   SAME RATIO FOR EVERY SHIRT.
===================================================== */

.directd-paypal-slot
.hero-container{

  width:
    100% !important;

  max-width:
    none !important;

  aspect-ratio:
    1 / 1 !important;

  overflow:
    hidden !important;

  border-radius:
    .9rem !important;

  background:
    #e8ebef !important;

}


.directd-paypal-slot
.hero-img{

  width:
    100% !important;

  height:
    100% !important;

  object-fit:
    cover !important;

}


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

   NO FIXED SPACE NEEDED.

   PRODUCTS WITH EXTRA THUMBNAILS BECOME THE TALL PRODUCT.
   OTHER CARDS STRETCH TO MATCH THAT CARD AND THEIR PRICE
   BLOCK IS PUSHED DOWN AUTOMATICALLY.
===================================================== */

.directd-paypal-slot
.thumbnail-container{

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    .45rem !important;

  margin:
    .6rem 0 0 !important;

  overflow-x:
    auto !important;

  flex:
    0 0 auto !important;

}


.directd-paypal-slot
.thumbnail-button{

  width:
    3rem !important;

  height:
    3rem !important;

  flex:
    0 0 auto !important;

  padding:
    0 !important;

  border-radius:
    .4rem !important;

}


.directd-paypal-slot
.thumbnail{

  width:
    100% !important;

  height:
    100% !important;

  object-fit:
    cover !important;

}


/* =====================================================
   PAYPAL TITLE / DESCRIPTION

   DIRECT D CARD ALREADY PROVIDES THESE.
===================================================== */

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

  display:
    none !important;

}


/* =====================================================
   PRICE

   THIS IS THE IMPORTANT ALIGNMENT RULE.

   margin-top:auto PUSHES THE PRICE AND EVERYTHING BELOW
   IT TO THE BOTTOM OF THE STRETCHED PAYPAL LISTING.
===================================================== */

.directd-paypal-slot
.price-container{

  margin:
    auto
    0
    .65rem !important;

  min-height:
    2.5rem !important;

  display:
    flex !important;

  align-items:
    center !important;

  text-align:
    left !important;

  color:
    var(--dd-ink) !important;

  font-size:
    1.3rem !important;

  font-weight:
    700 !important;

}


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

.directd-paypal-slot
.selectContainer{

  flex:
    0 0 auto !important;

}


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

  width:
    100% !important;

  min-height:
    2.9rem !important;

  margin-bottom:
    .65rem !important;

  padding:
    .6rem .75rem !important;

  border:
    1px solid
    rgba(51,65,85,.30)
    !important;

  border-radius:
    .45rem !important;

  background:
    white !important;

  color:
    var(--dd-ink) !important;

  font-size:
    .96rem !important;

}


/* =====================================================
   PAYPAL ADD TO CART
===================================================== */

.directd-paypal-slot
.addToCartButtonContainer{

  width:
    100% !important;

  min-height:
    3rem !important;

  flex:
    0 0 auto !important;

  border:
    1px solid
    #b48118 !important;

  border-radius:
    .45rem !important;

  color:
    #201806 !important;

  background:
    linear-gradient(
      135deg,
      #dfa82c,
      #f3ca55
    )
    !important;

  font-size:
    .8rem !important;

  font-weight:
    800 !important;

  text-transform:
    uppercase !important;

}


/* PAYPAL MAY RENDER AN INNER BUTTON */

.directd-paypal-slot
button[id^="add-to-cart-btn_"]{

  width:
    100% !important;

  min-height:
    3rem !important;

  flex:
    0 0 auto !important;

}


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

   BECAUSE THE PAYPAL SLOT ABOVE STRETCHES,
   DETAILS NOW BEGIN AT THE SAME HEIGHT ACROSS A ROW.
===================================================== */

.directd-product-details{

  flex:
    0 0 auto;

  margin:
    .85rem .15rem 0;

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

}


.directd-product-details summary{

  position:
    relative;

  min-height:
    3rem;

  padding:
    .9rem 1.8rem .75rem 0;

  color:
    #526176;

  font-size:
    .8rem;

  font-weight:
    700;

  list-style:
    none;

}


.directd-product-details
summary::-webkit-details-marker{

  display:
    none;

}


.directd-product-details
summary::after{

  content:
    "+";

  position:
    absolute;

  right:
    .15rem;

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

}


.directd-product-details[open]
summary::after{

  content:
    "−";

}


.directd-product-details div{

  padding-bottom:
    1rem;

}


.directd-product-details p{

  margin-top:
    .55rem;

  color:
    var(--dd-muted);

  font-size:
    .84rem;

  line-height:
    1.65;

}


/* =====================================================
   EMPTY STATE
===================================================== */

.directd-empty{

  margin-top:
    2rem;

  padding:
    3rem 1.5rem;

  border:
    1px dashed
    rgba(51,65,85,.35);

  border-radius:
    .8rem;

  text-align:
    center;

}


/* =====================================================
   CUSTOM SHIRT
===================================================== */

.directd-custom{

  display:
    grid;

  grid-template-columns:
    minmax(0,1.1fr)
    minmax(0,.9fr);

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

  align-items:
    center;

  margin-top:
    clamp(
      5rem,
      9vw,
      8rem
    );

  padding:
    clamp(
      2rem,
      5vw,
      4rem
    );

  border:
    1px solid
    #7f8da0;

  border-top:
    3px solid
    var(--dd-gold);

  border-radius:
    1.15rem;

  color:
    white;

  background:
    linear-gradient(
      135deg,
      #334155,
      #506176
    );

}


.directd-custom
.directd-section-eyebrow{

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

}


.directd-custom h2{

  margin:
    .45rem 0 .7rem;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      2.7rem,
      5vw,
      4.6rem
    );

  font-weight:
    500;

  line-height:
    .92;

}


.directd-custom__price{

  margin-top:
    1.2rem;

}


.directd-custom__price strong{

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

  font-size:
    1.8rem;

}


.directd-custom__panel{

  padding:
    1.5rem;

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

  border-radius:
    .75rem;

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

}


.directd-custom__panel strong{

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

}


.directd-custom__panel p{

  margin-top:
    .7rem;

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

  font-size:
    .9rem;

}


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

.directd-faq{

  width:
    min(
      1080px,
      100%
    );

  margin:
    clamp(
      5.5rem,
      9vw,
      8rem
    )
    auto
    0;

  padding:
    clamp(
      2.2rem,
      5vw,
      3.8rem
    );

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

  border-radius:
    1.1rem;

  background:
    linear-gradient(
      145deg,
      white,
      #f1f3f6
    );

}


.directd-faq__heading{

  margin-bottom:
    2.1rem;

}


.directd-faq__heading h2{

  margin:
    .4rem 0 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

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

  font-weight:
    500;

  line-height:
    .92;

}


.directd-faq__list{

  display:
    grid;

  gap:
    .65rem;

}


.directd-faq__item{

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

  border-radius:
    .65rem;

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

}


.directd-faq__item summary{

  position:
    relative;

  padding:
    1.2rem 3.4rem 1.2rem 1.4rem;

  font-weight:
    700;

  list-style:
    none;

}


.directd-faq__item
summary::-webkit-details-marker{

  display:
    none;

}


.directd-faq__item
summary::after{

  content:
    "+";

  position:
    absolute;

  right:
    1.3rem;

  top:
    50%;

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

  transform:
    translateY(-50%);

}


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

  content:
    "−";

}


.directd-faq__answer{

  padding:
    0 3.5rem 1.5rem 1.4rem;

}


.directd-faq__answer p{

  color:
    var(--dd-muted);

}


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

.directd-cart-toggle--floating{

  position:
    fixed;

  z-index:
    9500;

  right:
    1rem;

  bottom:
    1rem;

}


.directd-cart-drawer{

  position:
    fixed;

  z-index:
    9600;

  right:
    1rem;

  bottom:
    1rem;

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

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

  display:
    grid;

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

  overflow:
    hidden;

  border:
    1px solid
    rgba(200,166,75,.7);

  border-radius:
    1rem;

  background:
    white;

  box-shadow:
    0 1.5rem 4rem
    rgba(32,44,59,.24);

  opacity:
    0;

  pointer-events:
    none;

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

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

}


.directd-cart-drawer.is-open{

  opacity:
    1;

  pointer-events:
    auto;

  transform:
    translateX(0);

}


.directd-cart-drawer__header{

  padding:
    1.1rem 1.2rem;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

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

}


.directd-cart-drawer__header p{

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

  font-size:
    .65rem;

  font-weight:
    700;

  text-transform:
    uppercase;

}


.directd-cart-drawer__header h2{

  margin-top:
    .2rem;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    2rem;

}


.directd-cart-drawer__close{

  position:
    relative;

  width:
    2.3rem;

  height:
    2.3rem;

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

  border-radius:
    50%;

  background:
    white;

}


.directd-cart-drawer__close span{

  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    .9rem;

  height:
    1px;

  background:
    #76551a;

}


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

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

}


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

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

}


.directd-cart-drawer__body{

  overflow:
    auto;

  padding:
    .85rem;

}


.directd-cart-drawer__empty{

  min-height:
    10rem;

  display:
    grid;

  place-items:
    center;

  text-align:
    center;

  color:
    var(--dd-muted);

}


.directd-cart-drawer__items{

  display:
    grid;

  gap:
    .65rem;

}


.directd-cart-drawer__item{

  padding:
    .65rem;

  display:
    grid;

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

  gap:
    .8rem;

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

  border-radius:
    .7rem;

  background:
    white;

}


.directd-cart-drawer__item-image{

  width:
    3.8rem;

  height:
    3.8rem;

  overflow:
    hidden;

  border-radius:
    .45rem;

  background:
    #dfe4e9;

}


.directd-cart-drawer__item-image img{

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

}


.directd-cart-drawer__fallback{

  width:
    100%;

  height:
    100%;

  display:
    grid;

  place-items:
    center;

  background:
    #e2e6ea;

  color:
    #556579;

}


.directd-cart-drawer__item-copy h3{

  margin:
    .1rem 0 .35rem;

  font-size:
    .9rem;

}


.directd-cart-drawer__item-meta{

  display:
    flex;

  justify-content:
    space-between;

  gap:
    .5rem;

  color:
    var(--dd-muted);

  font-size:
    .68rem;

}


.directd-cart-drawer__footer{

  padding:
    1rem 1.2rem;

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

  background:
    #f1f3f6;

}


.directd-cart-drawer__subtotal{

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  margin-bottom:
    .4rem;

}


.directd-cart-drawer__footer > p{

  color:
    var(--dd-muted);

  font-size:
    .7rem;

  line-height:
    1.5;

}


.directd-cart-drawer__actions{

  display:
    grid;

  gap:
    .55rem;

  margin-top:
    .8rem;

}


.directd-cart-drawer__actions button{

  min-height:
    2.7rem;

  cursor:
    pointer;

}


.directd-cart-drawer__checkout{

  border:
    1px solid
    #b48118;

  border-radius:
    .45rem;

  color:
    #261c08;

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

  font-weight:
    700;

}


.directd-cart-drawer__continue{

  border:
    1px solid
    #8795a5;

  border-radius:
    .45rem;

  background:
    white;

}


.directd-paypal-provider{

  position:
    absolute;

  width:
    1px;

  height:
    1px;

  overflow:
    hidden;

  clip-path:
    inset(50%);

}


/* =====================================================
   STATUS
===================================================== */

.directd-paypal-status{

  margin-top:
    3rem;

  color:
    #76591d;

  text-align:
    center;

}


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

.directd-footer{

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

  background:
    white;

}


.directd-footer__inner{

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

  min-height:
    6.5rem;

  margin:
    0 auto;

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    1rem 1.75rem;

  color:
    var(--dd-muted);

  font-size:
    .87rem;

}


.directd-footer__inner strong{

  margin-right:
    auto;

  color:
    var(--dd-ink);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    1.7rem;

}


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

@media
(max-width:1000px){

  .directd-product-grid{

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

  }


  .directd-intro,
  .directd-catalog__heading{

    grid-template-columns:
      1fr;

    gap:
      1.2rem;

  }

}


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

   ON MOBILE EACH PRODUCT IS ITS OWN ROW,
   SO THERE IS NO NEED TO STRETCH THE PAYPAL AREA.
===================================================== */

@media
(max-width:720px){

  .directd-header__inner{

    grid-template-columns:
      1fr
      auto;

    gap:
      .4rem .8rem;

    padding:
      .65rem 0;

  }


  .directd-nav{

    grid-column:
      1 / -1;

    justify-content:
      space-between;

  }


  .directd-nav a{

    padding-inline:
      .35rem;

  }


  .directd-hero{

    min-height:
      30rem;

    padding:
      5.5rem 1rem 6rem;

  }


  .directd-hero h1{

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

  }


  .directd-content{

    width:
      calc(
        100% - 1.25rem
      );

  }


  .directd-intro h2{

    font-size:
      clamp(
        3.1rem,
        16vw,
        4.4rem
      );

  }


  .directd-search__row{

    flex-direction:
      column;

  }


  .directd-outline-button{

    width:
      100%;

  }


  .directd-product-grid{

    grid-template-columns:
      1fr;

    align-items:
      start;

  }


  .directd-product-card{

    height:
      auto;

  }


  .directd-paypal-slot{

    flex:
      0 0 auto;

  }


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

    flex:
      0 0 auto !important;

  }


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

    height:
      auto !important;

    flex:
      0 0 auto !important;

  }


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

    height:
      auto !important;

    flex:
      0 0 auto !important;

  }


  .directd-paypal-slot
  .price-container{

    margin:
      .65rem 0 !important;

  }


  .directd-product-card__identity{

    min-height:
      0;

  }


  .directd-custom{

    grid-template-columns:
      1fr;

  }


  .directd-faq{

    padding:
      2rem 1.1rem;

  }


  .directd-footer__inner strong{

    width:
      100%;

    margin-right:
      0;

  }


  .directd-cart-drawer{

    right:
      .5rem;

    bottom:
      .5rem;

    width:
      calc(
        100vw - 1rem
      );

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

  }


  .directd-cart-drawer.is-open{

    transform:
      translateY(0);

  }

}


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

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

  html{

    scroll-behavior:
      auto;

  }


  *{

    transition:
      none !important;

  }

}