/* =========================================================
   TPT — GLOBAL LIGHT + CART REPAIR V3
   PASTE AT THE VERY BOTTOM OF ADVANCED CSS
   ========================================================= */


/* =========================================================
   1. LIGHTER GLOBAL PALETTE
   ========================================================= */

:root{
  --tpt-bg-deep:#2d3238;
  --tpt-bg:#3a4047;
  --tpt-bg-mid:#464d55;
  --tpt-bg-light:#555d66;

  --tpt-panel:rgba(255,255,255,.075);
  --tpt-panel-hover:rgba(255,255,255,.12);

  --tpt-line:rgba(255,255,255,.25);
  --tpt-line-strong:rgba(255,255,255,.48);

  --tpt-white:#f8f7f2;
  --tpt-muted:rgba(248,247,242,.72);
  --tpt-faint:rgba(248,247,242,.48);
}


/* =========================================================
   2. GLOBAL BACKGROUND
   ========================================================= */

html,
body,
.tpt-site,
.tpt-site-shell,
.wrap{
  background:
    radial-gradient(
      circle at 12% 5%,
      rgba(255,255,255,.11),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #505761 0%,
      #41474f 38%,
      #373c43 68%,
      #30343a 100%
    ) !important;

  color:var(--tpt-white) !important;
}


/* =========================================================
   3. MAIN CONTENT
   ========================================================= */

.main,
.content,
#main,
.tpt-main,
.tpt-content{
  background:transparent !important;
}


/* =========================================================
   4. PRODUCTS
   ========================================================= */

#products,
#products .main,
#products .content,
#products #main{
  background:
    linear-gradient(
      145deg,
      #505761,
      #41474f 45%,
      #353a41
    ) !important;
}


/* =========================================================
   5. PRODUCT PAGE
   ========================================================= */

#product,
#product .main,
#product #main{
  background:transparent !important;
}

#product .content{
  background:
    radial-gradient(
      circle at 90% 5%,
      rgba(255,255,255,.10),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #515861 0%,
      #424850 45%,
      #363b42 100%
    ) !important;
}


/* =========================================================
   6. CART PAGE BACKGROUND
   ========================================================= */

#cart,
#cart .main,
#cart #main{
  background:transparent !important;
}

#cart .content{
  background:
    radial-gradient(
      circle at 90% 4%,
      rgba(255,255,255,.10),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #515861 0%,
      #424850 45%,
      #363b42 100%
    ) !important;
}


/* =========================================================
   7. CART CONTAINER
   ========================================================= */

#cart .cart-container{
  background:rgba(255,255,255,.025) !important;

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

  color:var(--tpt-white) !important;
}


/* =========================================================
   8. CRITICAL:
   HIDE EMPTY-CART CONTENT WHEN REAL CART ITEMS EXIST
   ========================================================= */

#cart .cart-container:not(.empty-cart) .cart-empty-message,
.cart-container:not(.empty-cart) .cart-empty-message{
  display:none !important;
}


/* Hide custom empty state accidentally left below populated cart */

#cart .cart-items:not(:empty) ~ .cart-empty-message,
#cart .cart-form:has(.cart-item) .cart-empty-message,
#cart .cart-container:has(.cart-item) .cart-empty-message{
  display:none !important;
}


/* =========================================================
   9. CART ITEMS
   ========================================================= */

#cart .cart-items{
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
}

#cart .cart-items .cart-item{
  background:rgba(255,255,255,.035) !important;

  border:
    1px solid rgba(255,255,255,.24) !important;

  color:var(--tpt-white) !important;
}


/* =========================================================
   10. CART IMAGE
   ========================================================= */

#cart .cart-item-image-holder{
  margin:0 !important;
}

#cart .cart-item-image{
  background-color:#555c65 !important;

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 12px 30px rgba(0,0,0,.14) !important;
}


/* =========================================================
   11. CART TEXT
   ========================================================= */

#cart .cart-item-details,
#cart .cart-item-details a,
#cart .cart-item-details-option{
  color:var(--tpt-white) !important;
}


/* =========================================================
   12. CART PRICE
   REMOVE HUGE DARK PRICE BLOCK
   ========================================================= */

#cart .cart-item-details-price{
  background:rgba(255,255,255,.055) !important;

  color:var(--tpt-white) !important;

  border-left:
    1px solid rgba(255,255,255,.20) !important;
}


/* =========================================================
   13. QUANTITY INPUT
   ========================================================= */

#cart .option-quantity{
  background:rgba(255,255,255,.055) !important;

  border:
    1px solid rgba(255,255,255,.25) !important;

  color:var(--tpt-white) !important;
}


/* =========================================================
   14. QUANTITY BUTTONS
   ========================================================= */

#cart button.qty-button{
  background:transparent !important;

  border:
    1px solid rgba(255,255,255,.25) !important;

  color:var(--tpt-white) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#cart button.qty-button svg{
  fill:var(--tpt-white) !important;
}


/* =========================================================
   15. SUBTOTAL
   ========================================================= */

#cart .cart-subtotal{
  background:rgba(255,255,255,.055) !important;

  border:
    1px solid rgba(255,255,255,.25) !important;

  color:var(--tpt-white) !important;
}


/* =========================================================
   16. CONTINUE SHOPPING
   ========================================================= */

#cart .continue-shopping,
#cart .continue-shopping a{
  color:var(--tpt-white) !important;
}


/* =========================================================
   17. CHECKOUT
   ========================================================= */

#cart button.checkout-btn,
#cart .checkout-btn{
  background:
    linear-gradient(
      110deg,
      #292d32 0%,
      #161719 60%,
      #321917 100%
    ) !important;

  border:
    1px solid rgba(255,255,255,.28) !important;

  border-left:
    5px solid #e52d27 !important;

  color:#fff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 15px 35px rgba(0,0,0,.16) !important;
}


/* =========================================================
   18. INPUTS SITEWIDE
   ========================================================= */

input,
textarea,
select,
.select{
  background:rgba(255,255,255,.07) !important;

  border-color:
    rgba(255,255,255,.26) !important;

  color:var(--tpt-white) !important;
}


/* =========================================================
   19. STANDARD BUTTONS
   ========================================================= */

.button:not(.checkout-btn),
button:not(.checkout-btn):not(.tpt-cart-button):not(.qty-button){
  background:rgba(255,255,255,.075) !important;

  border-color:
    rgba(255,255,255,.27) !important;

  color:var(--tpt-white) !important;
}


/* =========================================================
   20. SIDEBAR
   ========================================================= */

.sidebar,
.tpt-sidebar{
  background:
    linear-gradient(
      145deg,
      rgba(79,86,95,.99),
      rgba(55,60,67,.99)
    ) !important;

  color:var(--tpt-white) !important;
}


/* =========================================================
   21. RELATED PRODUCTS
   ========================================================= */

.similar-products,
.tpt-related-products{
  background:
    linear-gradient(
      145deg,
      #4a5159,
      #383e45
    ) !important;

  border-color:
    rgba(255,255,255,.22) !important;

  color:var(--tpt-white) !important;
}


/* =========================================================
   22. LIQUID GLASS MASTHEAD
   ========================================================= */

.tpt-masthead{
  background:
    linear-gradient(
      110deg,
      rgba(255,255,255,.88) 0%,
      rgba(231,237,240,.65) 19%,
      rgba(158,170,177,.45) 42%,
      rgba(102,82,80,.42) 72%,
      rgba(29,30,33,.88) 100%
    ) !important;

  border:
    1px solid rgba(255,255,255,.68) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 16px 40px rgba(0,0,0,.14) !important;

  backdrop-filter:
    blur(24px)
    saturate(145%) !important;

  -webkit-backdrop-filter:
    blur(24px)
    saturate(145%) !important;
}


/* =========================================================
   23. MOBILE CART — COMPLETE REBUILD
   ========================================================= */

@media screen and (max-width:768px){

  #cart .content{
    padding:0 !important;
  }

  #cart .cart-container{
    padding:
      24px
      clamp(18px,5vw,28px)
      50px !important;

    width:100% !important;
  }


  /* -----------------------------------------
     CART ITEM
     ----------------------------------------- */

  #cart .content .cart-item{
    display:grid !important;

    grid-template-columns:
      105px
      minmax(0,1fr) !important;

    grid-template-rows:auto auto !important;

    column-gap:20px !important;
    row-gap:18px !important;

    width:100% !important;

    height:auto !important;
    min-height:0 !important;

    margin:0 0 28px !important;
    padding:20px !important;

    align-items:start !important;
  }


  /* -----------------------------------------
     IMAGE
     ----------------------------------------- */

  #cart .content .cart-item-image-holder{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;

    width:105px !important;

    margin:0 !important;
  }

  #cart .content .cart-item-image{
    width:105px !important;
    height:135px !important;

    margin:0 !important;

    background-size:cover !important;
    background-position:center !important;
  }


  /* -----------------------------------------
     PRODUCT DETAILS
     ----------------------------------------- */

  #cart .content .cart-item-details{
    grid-column:2 !important;
    grid-row:1 !important;

    width:100% !important;

    padding:0 !important;
    margin:0 !important;

    align-self:start !important;

    font-size:1rem !important;
    line-height:1.55 !important;
  }

  #cart .content .cart-item-details-option{
    margin-top:8px !important;

    font-size:.78rem !important;

    opacity:.72 !important;
  }


  /* -----------------------------------------
     QUANTITY + PRICE ROW
     ----------------------------------------- */

  #cart .content .cart-item-quantity-holder{
    grid-column:2 !important;
    grid-row:2 !important;

    display:flex !important;

    align-items:center !important;
    justify-content:flex-start !important;

    gap:10px !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;
  }


  #cart .content .cart-item-quantity-holder .option-quantity{
    width:46px !important;
    height:42px !important;

    margin:0 !important;

    text-align:center !important;
  }


  #cart .content button.qty-button{
    width:42px !important;
    height:42px !important;

    flex:0 0 42px !important;

    margin:0 !important;
    padding:0 !important;
  }


  /* -----------------------------------------
     PRICE
     ----------------------------------------- */

  #cart .content .cart-item-details-price{
    position:static !important;

    width:auto !important;
    height:auto !important;

    min-width:0 !important;

    margin-left:auto !important;
    padding:8px 0 8px 14px !important;

    background:transparent !important;

    border:0 !important;

    font-size:1.15rem !important;

    white-space:nowrap !important;

    flex-direction:row !important;
  }


  /* -----------------------------------------
     CART FOOTER
     ----------------------------------------- */

  #cart .cart-footer{
    display:block !important;

    width:100% !important;
  }


  #cart .content .cart-subtotal{
    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    width:100% !important;

    margin:0 0 12px !important;

    padding:14px 16px !important;

    text-align:left !important;
  }


  /* -----------------------------------------
     RESTORE CONTINUE SHOPPING
     ----------------------------------------- */

  #cart .content .continue-shopping{
    display:block !important;

    margin:0 0 24px !important;

    padding:0 !important;

    font-size:.88rem !important;
  }


  /* -----------------------------------------
     CHECKOUT
     ----------------------------------------- */

  #cart .content button.checkout-btn{
    width:100% !important;
    max-width:none !important;

    height:58px !important;

    margin:0 !important;

    line-height:54px !important;
  }


  /* -----------------------------------------
     EMPTY CART
     ----------------------------------------- */

  #cart .cart-container:not(.empty-cart) .cart-empty-message{
    display:none !important;
  }


  #cart .cart-container.empty-cart .cart-empty-message{
    display:block !important;
  }


  /* -----------------------------------------
     LIGHTER MOBILE BACKGROUND
     ----------------------------------------- */

  html,
  body,
  .wrap{
    background:
      linear-gradient(
        160deg,
        #555d66 0%,
        #454c54 43%,
        #373d44 100%
      ) !important;
  }

}


/* =========================================================
   24. MINI CART
   DO NOT LET ITS RULES CONTAMINATE FULL CART
   ========================================================= */

.cart-container.mini-cart-container{
  background:
    linear-gradient(
      145deg,
      rgba(80,87,96,.99),
      rgba(54,59,66,.99)
    ) !important;

  border:
    1px solid rgba(255,255,255,.24) !important;
}


/* =========================================================
   25. EMPTY CART SAFETY
   ========================================================= */

.cart-container.empty-cart .cart-items,
.cart-container.empty-cart .cart-footer{
  display:none !important;
}

.cart-container.empty-cart .cart-empty-message{
  display:block !important;
}


/* =========================================================
   26. POPULATED CART SAFETY
   ========================================================= */

.cart-container:not(.empty-cart) .cart-empty-message{
  display:none !important;
}


/* =========================================================
   END TPT GLOBAL LIGHT + CART REPAIR V3
   ========================================================= */
/* =========================================================
   TPT — CART HEADER / SITEWIDE CART LEAK FIX
   ========================================================= */

/*
   The Big Cartel cart container must NEVER behave like
   a normal page/header unless we're actually on #cart.
*/

body:not(#cart) > .cart-container:not(.mini-cart-container),
body:not(#cart) .main > .cart-container:not(.mini-cart-container),
body:not(#cart) .content > .cart-container:not(.mini-cart-container){
  display:none !important;
}


/* =========================================================
   MINI CART
   Hidden until Big Cartel explicitly opens it
   ========================================================= */

.cart-container.mini-cart-container{
  display:block !important;

  position:fixed !important;

  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;

  z-index:100001 !important;
}


/* Big Cartel opens mini cart */
.cart-container.mini-cart-container[aria-hidden="false"]{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}


/* Closed mini cart */
.cart-container.mini-cart-container[aria-hidden="true"]{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}


/* =========================================================
   REAL CART PAGE
   ========================================================= */

#cart .cart-container:not(.mini-cart-container){
  display:block !important;

  position:relative !important;

  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;

  width:100% !important;
}


/* =========================================================
   CART TITLE
   ONLY EXISTS VISUALLY ON ACTUAL CART PAGE / OPEN MINI CART
   ========================================================= */

body:not(#cart)
.cart-container:not(.mini-cart-container)
.cart-title{
  display:none !important;
}


.cart-container.mini-cart-container[aria-hidden="true"]
.cart-title{
  display:none !important;
}


.cart-container.mini-cart-container[aria-hidden="false"]
.cart-title{
  display:block !important;
}


/* =========================================================
   PROTECT TPT MASTHEAD
   ========================================================= */

.tpt-masthead{
  position:fixed !important;
  z-index:100000 !important;
}


/* Cart cannot become part of masthead */
.tpt-masthead .cart-container,
.tpt-masthead .cart-title,
.tpt-masthead .cart-form,
.tpt-masthead .cart-items,
.tpt-masthead .cart-footer{
  display:none !important;
}


/* Keep ONLY your TPT cart pill in masthead */
.tpt-masthead .tpt-cart-button{
  display:flex !important;
}


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

@media(max-width:800px){

  body:not(#cart)
  .cart-container:not(.mini-cart-container){
    display:none !important;
  }


  .cart-container.mini-cart-container{
    position:fixed !important;

    top:0 !important;
    left:0 !important;
    right:0 !important;

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

    z-index:100001 !important;
  }


  .cart-container.mini-cart-container[aria-hidden="true"]{
    transform:translateX(105%) !important;
    opacity:0 !important;
    visibility:hidden !important;
  }


  .cart-container.mini-cart-container[aria-hidden="false"]{
    transform:translateX(0) !important;
    opacity:1 !important;
    visibility:visible !important;
  }

}


/* =========================================================
   END CART LEAK FIX
   ========================================================= */
/* ==========================================
   FIX GALLERY 1. 2. 3. 4. LIST MARKERS
   ========================================== */

.product-images ol,
.product-images ul,
.product-images li,
.product-image-container ol,
.product-image-container ul,
.product-image-container li,
.product-gallery ol,
.product-gallery ul,
.product-gallery li {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.product-images li::marker,
.product-image-container li::marker,
.product-gallery li::marker {
  content: "" !important;
  font-size: 0 !important;
}
/* =========================================================
   THE PAINFUL TRUTH
   ADAPTIVE LIQUID GLASS SYSTEM
   WEBSITE-WIDE OVERRIDE

   PASTE AT VERY BOTTOM OF ADVANCED CSS

   GOAL:
   - Glass reacts to artwork, photography and gradients
   - No fixed brown/silver cast
   - Brighter over bright imagery
   - Darker over dark imagery
   - Background color bleeds naturally through glass
   - Consistent TPT material language website-wide
========================================================= */


/* =========================================================
   MASTER GLASS TOKENS
========================================================= */

:root{

  --tpt-glass-blur:24px;
  --tpt-glass-saturation:165%;
  --tpt-glass-contrast:108%;

  --tpt-glass-fill:
    rgba(255,255,255,.075);

  --tpt-glass-fill-strong:
    rgba(255,255,255,.115);

  --tpt-glass-fill-dark:
    rgba(8,9,11,.22);

  --tpt-glass-border:
    rgba(255,255,255,.28);

  --tpt-glass-border-soft:
    rgba(255,255,255,.15);

  --tpt-glass-highlight:
    rgba(255,255,255,.48);

  --tpt-glass-shadow:
    rgba(0,0,0,.20);

  --tpt-glass-text:
    rgba(255,255,255,.94);

  --tpt-glass-muted:
    rgba(255,255,255,.62);

}


/* =========================================================
   CORE ADAPTIVE GLASS MATERIAL
========================================================= */

.tpt-glass,
.tpt-masthead,
.tpt-mini-cart,
.tpt-shop-view,
.tpt-stockton-button,
.tpt-liquid-button,
.tpt-category-nav a,
.tpt-shop-category-link,
.tpt-cart-button,
.tpt-add-to-cart,
.tpt-checkout-btn,
.tpt-continue-shopping,
.product-form-cart-link,
.message-banner,
.tpt-cart-message,
.tpt-shop-world,
input,
textarea,
select,
.select{

  position:relative;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.075) 34%,
      rgba(255,255,255,.025) 58%,
      rgba(0,0,0,.10) 100%
    ) !important;

  border:
    1px solid
    var(--tpt-glass-border) !important;

  box-shadow:

    inset
    0
    1px
    0
    rgba(255,255,255,.35),

    inset
    0
    -1px
    0
    rgba(0,0,0,.12),

    0
    12px
    34px
    var(--tpt-glass-shadow) !important;

  backdrop-filter:
    blur(var(--tpt-glass-blur))
    saturate(var(--tpt-glass-saturation))
    contrast(var(--tpt-glass-contrast)) !important;

  -webkit-backdrop-filter:
    blur(var(--tpt-glass-blur))
    saturate(var(--tpt-glass-saturation))
    contrast(var(--tpt-glass-contrast)) !important;
}


/* =========================================================
   GLASS SURFACE REFLECTION
========================================================= */

.tpt-masthead::before,
.tpt-mini-cart::before,
.tpt-shop-view::before,
.tpt-stockton-button::before,
.tpt-liquid-button::before,
.tpt-shop-category-link::before,
.tpt-cart-button::before,
.tpt-add-to-cart::before,
.tpt-checkout-btn::before{

  content:"";

  position:absolute;

  inset:0;

  z-index:0;

  pointer-events:none;

  border-radius:inherit;

  background:

    linear-gradient(
      115deg,

      rgba(255,255,255,.34)
      0%,

      rgba(255,255,255,.12)
      18%,

      transparent
      38%,

      transparent
      68%,

      rgba(255,255,255,.055)
      88%,

      rgba(255,255,255,.14)
      100%
    );

  opacity:.72;
}


/* Keep content above reflection */

.tpt-masthead > *,
.tpt-mini-cart > *,
.tpt-shop-view > *,
.tpt-stockton-button > *,
.tpt-liquid-button > *,
.tpt-shop-category-link > *,
.tpt-cart-button > *,
.tpt-add-to-cart > *,
.tpt-checkout-btn > *{

  position:relative;
  z-index:1;
}


/* =========================================================
   MASTHEAD
   MOST POLISHED / STRONGEST GLASS
========================================================= */

.tpt-masthead{

  background:

    linear-gradient(
      110deg,

      rgba(255,255,255,.20)
      0%,

      rgba(255,255,255,.10)
      24%,

      rgba(255,255,255,.035)
      50%,

      rgba(0,0,0,.09)
      78%,

      rgba(0,0,0,.16)
      100%
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.36) !important;

  box-shadow:

    inset
    0
    1px
    0
    rgba(255,255,255,.55),

    inset
    0
    -1px
    0
    rgba(0,0,0,.16),

    0
    18px
    50px
    rgba(0,0,0,.18) !important;

  backdrop-filter:
    blur(30px)
    saturate(180%)
    contrast(108%) !important;

  -webkit-backdrop-filter:
    blur(30px)
    saturate(180%)
    contrast(108%) !important;
}


/* =========================================================
   CART PILL
========================================================= */

.tpt-cart-button{

  overflow:hidden;

  background:

    linear-gradient(
      135deg,
      rgba(255,255,255,.13),
      rgba(255,255,255,.05) 38%,
      rgba(0,0,0,.20)
    ) !important;

  color:#fff !important;

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

  backdrop-filter:
    blur(20px)
    saturate(165%) !important;

  -webkit-backdrop-filter:
    blur(20px)
    saturate(165%) !important;
}


/* =========================================================
   MINI CART
========================================================= */

.tpt-mini-cart,
.mini-cart-container{

  background:

    linear-gradient(
      145deg,

      rgba(255,255,255,.13)
      0%,

      rgba(255,255,255,.055)
      42%,

      rgba(5,6,8,.22)
      100%
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.24) !important;

  backdrop-filter:
    blur(36px)
    saturate(175%)
    contrast(108%) !important;

  -webkit-backdrop-filter:
    blur(36px)
    saturate(175%)
    contrast(108%) !important;

  box-shadow:
    0
    30px
    90px
    rgba(0,0,0,.28) !important;
}


/* =========================================================
   PRODUCT IMAGE OVERLAY
========================================================= */

.tpt-shop-view{

  background:
    rgba(10,11,13,.18) !important;

  border:
    1px solid
    rgba(255,255,255,.30) !important;

  color:#fff !important;

  backdrop-filter:
    blur(18px)
    saturate(180%) !important;

  -webkit-backdrop-filter:
    blur(18px)
    saturate(180%) !important;

  box-shadow:
    inset
    0
    1px
    0
    rgba(255,255,255,.22),

    0
    8px
    24px
    rgba(0,0,0,.18) !important;
}


/* =========================================================
   CATEGORY PILLS
========================================================= */

.tpt-category-nav a,
.tpt-shop-category-link{

  background:
    rgba(255,255,255,.045) !important;

  border:
    1px solid
    rgba(255,255,255,.18) !important;

  color:
    rgba(255,255,255,.68) !important;

  backdrop-filter:
    blur(18px)
    saturate(160%) !important;

  -webkit-backdrop-filter:
    blur(18px)
    saturate(160%) !important;
}


.tpt-category-nav a:hover,
.tpt-category-nav a.is-active,
.tpt-shop-category-link:hover,
.tpt-shop-category-link.is-active{

  background:
    rgba(255,255,255,.13) !important;

  border-color:
    rgba(255,255,255,.48) !important;

  color:#fff !important;

  box-shadow:

    inset
    0
    1px
    0
    rgba(255,255,255,.32),

    0
    8px
    22px
    rgba(0,0,0,.12) !important;
}


/* =========================================================
   SHOP WORLD BLOCKS
   WEAR / LIVE / RIDE / COLLECT
========================================================= */

.tpt-shop-world{

  background:
    rgba(255,255,255,.025) !important;

  border-color:
    rgba(255,255,255,.13) !important;

  backdrop-filter:
    blur(15px)
    saturate(150%) !important;

  -webkit-backdrop-filter:
    blur(15px)
    saturate(150%) !important;
}


/* =========================================================
   ADD TO CART / CHECKOUT
========================================================= */

.tpt-add-to-cart,
.tpt-checkout-btn,
.tpt-stockton-button,
.tpt-liquid-button{

  overflow:hidden;

  background:

    linear-gradient(
      125deg,

      rgba(255,255,255,.20)
      0%,

      rgba(255,255,255,.09)
      25%,

      rgba(255,255,255,.025)
      48%,

      rgba(0,0,0,.16)
      74%,

      rgba(var(--tpt-live-accent),.20)
      130%
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.30) !important;

  color:#fff !important;

  backdrop-filter:
    blur(22px)
    saturate(175%) !important;

  -webkit-backdrop-filter:
    blur(22px)
    saturate(175%) !important;

  box-shadow:

    inset
    0
    1px
    0
    rgba(255,255,255,.40),

    0
    14px
    32px
    rgba(0,0,0,.16) !important;
}


/* =========================================================
   SECONDARY BUTTONS
========================================================= */

.tpt-continue-shopping,
.product-form-cart-link,
.button:not(.tpt-checkout-btn):not(.tpt-add-to-cart){

  background:
    rgba(255,255,255,.045) !important;

  border:
    1px solid
    rgba(255,255,255,.20) !important;

  color:#fff !important;

  backdrop-filter:
    blur(16px)
    saturate(155%) !important;

  -webkit-backdrop-filter:
    blur(16px)
    saturate(155%) !important;
}


.tpt-continue-shopping:hover,
.product-form-cart-link:hover,
.button:not(.tpt-checkout-btn):not(.tpt-add-to-cart):hover{

  background:
    rgba(255,255,255,.11) !important;
}


/* =========================================================
   INPUTS / SELECTS / CONTACT
========================================================= */

input,
textarea,
select,
.select{

  background:
    rgba(255,255,255,.045) !important;

  color:#fff !important;

  border:
    1px solid
    rgba(255,255,255,.20) !important;

  backdrop-filter:
    blur(16px)
    saturate(155%) !important;

  -webkit-backdrop-filter:
    blur(16px)
    saturate(155%) !important;
}


input:focus,
textarea:focus,
select:focus,
.select:focus-within{

  background:
    rgba(255,255,255,.09) !important;

  border-color:
    rgba(255,255,255,.42) !important;

  box-shadow:

    inset
    0
    1px
    0
    rgba(255,255,255,.16),

    0
    0
    0
    1px
    rgba(255,255,255,.06) !important;
}


/* =========================================================
   MESSAGE BANNERS
========================================================= */

.message-banner,
.tpt-cart-message{

  background:
    rgba(255,255,255,.055) !important;

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

  border:
    1px solid
    rgba(255,255,255,.18) !important;

  backdrop-filter:
    blur(18px)
    saturate(155%) !important;

  -webkit-backdrop-filter:
    blur(18px)
    saturate(155%) !important;
}


/* =========================================================
   PRODUCT STATUS
   KEEP SOLID FOR CONTRAST
========================================================= */

.tpt-shop-status,
.tpt-product-status{

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

  box-shadow:
    0
    6px
    20px
    rgba(0,0,0,.14) !important;
}


/* =========================================================
   PRODUCT / ART IMAGE SURFACES

   Important:
   Images stay untouched.
   Glass only lives ABOVE or AROUND them.
========================================================= */

.tpt-shop-image,
.tpt-drop-image,
.tpt-stockton-image-frame,
.product-images,
.product-image-container{

  isolation:isolate;
}


/* Slight reflective edge that responds to artwork */

.tpt-shop-image::before,
.tpt-drop-image::before,
.tpt-stockton-image-frame::before{

  content:"";

  position:absolute;

  z-index:3;

  inset:0;

  pointer-events:none;

  background:

    linear-gradient(
      125deg,

      rgba(255,255,255,.09)
      0%,

      transparent
      17%,

      transparent
      78%,

      rgba(255,255,255,.035)
      100%
    );

  mix-blend-mode:screen;

  opacity:.65;
}


/* =========================================================
   GLOBAL IMAGE-AWARE CARD EDGE
========================================================= */

.tpt-shop-image,
.tpt-drop-image,
.tpt-stockton-image-frame{

  border:
    1px solid
    rgba(255,255,255,.12) !important;

  box-shadow:

    inset
    0
    1px
    0
    rgba(255,255,255,.08),

    0
    16px
    45px
    rgba(0,0,0,.12) !important;
}


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

.tpt-footer{

  background:
    rgba(18,20,23,.32) !important;

  border-top:
    1px solid
    rgba(255,255,255,.14) !important;

  backdrop-filter:
    blur(24px)
    saturate(150%) !important;

  -webkit-backdrop-filter:
    blur(24px)
    saturate(150%) !important;
}


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

@media(max-width:800px){

  :root{
    --tpt-glass-blur:20px;
    --tpt-glass-saturation:155%;
  }


  .tpt-masthead{

    backdrop-filter:
      blur(24px)
      saturate(170%) !important;

    -webkit-backdrop-filter:
      blur(24px)
      saturate(170%) !important;
  }


  .tpt-mini-cart{

    backdrop-filter:
      blur(28px)
      saturate(165%) !important;

    -webkit-backdrop-filter:
      blur(28px)
      saturate(165%) !important;
  }


  .tpt-shop-view{

    background:
      rgba(10,11,13,.16) !important;

    backdrop-filter:
      blur(14px)
      saturate(170%) !important;

    -webkit-backdrop-filter:
      blur(14px)
      saturate(170%) !important;
  }

}


/* =========================================================
   PERFORMANCE / ACCESSIBILITY
========================================================= */

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

  .tpt-masthead,
  .tpt-mini-cart,
  .tpt-shop-view,
  .tpt-stockton-button,
  .tpt-liquid-button,
  .tpt-shop-category-link,
  .tpt-cart-button,
  .tpt-add-to-cart,
  .tpt-checkout-btn,
  input,
  textarea,
  select{

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

    background:
      rgba(35,38,43,.94) !important;
  }

}


/* =========================================================
   FALLBACK FOR BROWSERS WITHOUT BACKDROP FILTER
========================================================= */

@supports not ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){

  .tpt-masthead,
  .tpt-mini-cart,
  .tpt-shop-view,
  .tpt-stockton-button,
  .tpt-liquid-button,
  .tpt-shop-category-link,
  .tpt-cart-button,
  .tpt-add-to-cart,
  .tpt-checkout-btn,
  input,
  textarea,
  select{

    background:
      rgba(42,46,52,.94) !important;
  }

}