/* Note: */

/* Adobe Fonts via TypeKit
   =======================
   Code Injection > Header

   <link rel="stylesheet" href="https://use.typekit.net/qkx0hti.css">
Adobe suggested attributes

font-family: 'stratum-1-web', sans-serif;
font-weight: 400;
font-style: normal;

font-family: 'stratum-1-web', sans-serif;
font-weight: 700;
font-style: normal;

font-family: 'stratum-2-web', sans-serif;
font-weight: 400;
font-style: normal;

font-family: 'stratum-2-web', sans-serif;
font-weight: 700;
font-style: normal;
*/


/* === Font-face declarations for PP Neue Machina === */

/* These .otf fonts are uploaded to Squarespace via Custom CSS > Custom Files */

/* Light */
@font-face {
  font-family: 'PP Neue Machina';
  src: url('https://static1.squarespace.com/static/68c9aab3f5654f72941c0d87/t/68cf7a550cef8b47b72ed59f/1758427734105/PPNeueMachina-PlainLight.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

/* Regular */
@font-face {
  font-family: 'PP Neue Machina';
  src: url('https://static1.squarespace.com/static/68c9aab3f5654f72941c0d87/t/68cf7a5539d40a463d17bf6f/1758427734138/PPNeueMachina-PlainRegular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

/* Ultrabold */
@font-face {
  font-family: 'PP Neue Machina';
  src: url('https://static1.squarespace.com/static/68c9aab3f5654f72941c0d87/t/68cf7a558e4eab2030a8d13e/1758427734137/PPNeueMachina-PlainUltrabold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
}

/* Inktrap Regular */
@font-face {
  font-family: 'PP Neue Machina Inktrap';
  src: url('https://static1.squarespace.com/static/68c9aab3f5654f72941c0d87/t/68cf7a553fad3a48cc6f29d5/1758427734127/PPNeueMachina-InktrapRegular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

/* ZHX Utility Styles
      
*/
/* Little dev tag in top left. I change this to random values to see if thiw dev styleheet is being read, vs cached, etc.
   Saves a ton of headaches.
*/
:root {
  --dev-version: "DEV.14";
  /*  */
  --dev-display: none;
}

body::before {
  content: var(--dev-version);
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  font-size: 11px;
  font-family: monospace;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 9999;
  pointer-events: none;
  /* don’t block clicks */
  opacity: 0.8;
  line-height: 1.5;
  display: var(--dev-display);
}

/* Ensure sections are positioned for absolute children */
section[data-section-theme] {
  position: relative;
}

/* Add a debug label in the top-right of each section using a data-section-theme attribute.
   Displays the current value of the data-section-theme. e.g. white, dark-bold, etc.
   - Incredibly useful - We also use these same selectors to toggle logo in header.
*/
section[data-section-theme]::after {
  content: attr(data-section-theme);
  /* outputs "white", "dark-bold", etc. */
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 11px;
  font-family: monospace;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 9999;
  pointer-events: none;
  /* don’t block clicks */
  opacity: 0.8;
  display: inline-block;
  line-height: 1.5;
  display: var(--dev-display);
}

/*
  This site uses many custom fonts, some from adobe typekit, some uploaded .otf files defined above.
  Squarespace offers no way to use custom fonts, so we have the squarespace styles set to Roboto and 
  then we redefine the font families in variables here,
*/
:root {
  --base-font-size: 16px;
  --heading-font-font-family: "stratum-1-web" !important;
  --body-font-font-family: "PP Neue Machina" !important;
  --meta-font-font-family: "Roboto";
}

:root {
  --header-button-font-font-family: "stratum-1-web" !important;
  --site-navigation-font-font-family: "stratum-1-web" !important;
  --primary-button-font-font-family: "stratum-1-web" !important;
}

:root {

  --product-block-title-font-font-family: var(--heading-font-font-family);
  --product-block-title-font-font-style: var(--heading-font-font-style);
  /* --product-block-title-font-font-weight: var(--heading-font-font-weight); */
  --product-block-title-font-font-weight: 800 !important;
  --product-block-title-font-text-transform: var(--heading-font-text-transform);
  --product-block-title-font-letter-spacing: var(--heading-font-letter-spacing);
  --product-block-title-font-line-height: var(--heading-font-line-height);
  --product-block-title-font-font-size: var(--heading-4-size);
  --product-block-title-font-font-size-value: var(--heading-4-size-value);



}

#block-yui_3_17_2_1_1758572888973_2716 h3 {

  line-height: 1.45;
}

.product-price-value {
  font-size: 2rem;
  margin-top: 1em;
  margin-bottom: 1em;
}

.product-quantity-input-wrapper {
  margin-right: 20px
}

.quantity-label {
  font-size: 14px !important;

}

.variant-option-title {
  font-size: 14px !important;
}


/* Site Navigation
   Try to use the Site Styles GUI for everything but font declarations

:root {
    --base-font-size: 16px;
    --heading-font-font-family: "Roboto";
    --heading-font-font-style: normal;
    --heading-font-font-weight: 400;
    --heading-font-text-transform: none;
    --heading-font-letter-spacing: -.02em;
    --heading-font-line-height: 1.1em;
    --body-font-font-family: "Roboto";
    --body-font-font-style: normal;
    --body-font-font-weight: 400;
    --body-font-text-transform: none;
    --body-font-letter-spacing: -.02em;
    --body-font-line-height: 1.3em;
    --meta-font-font-family: "Roboto";
    --meta-font-font-style: normal;
    --meta-font-font-weight: 400;
    --meta-font-text-transform: none;
    --meta-font-letter-spacing: -.02em;
    --meta-font-line-height: 1.1em;
    --heading-1-size: 4rem;
    --heading-1-size-value: 4;
    --heading-2-size: 2.5rem;
    --heading-2-size-value: 2.5;
    --heading-3-size: 2.1rem;
    --heading-3-size-value: 2.1;
    --heading-4-size: 1.4rem;
    --heading-4-size-value: 1.4;
    --large-text-size: 1.4rem;
    --large-text-size-value: 1.4;
    --normal-text-size: 1.1rem;
    --normal-text-size-value: 1.1;
    --small-text-size: .9rem;
    --small-text-size-value: .9;
    --normal-meta-size: .8rem;
    --normal-meta-size-value: .8;
*/






/* Logos hosted on amazon if needed.
https://srcsrc.s3.amazonaws.com/outsider/images/24-OUT-003-Outsider-Primary-Logo-WHITE-LG.png
https://srcsrc.s3.amazonaws.com/outsider/images/24-OUT-003-Outsider-Primary-Logo-RGB-LG.png
https://srcsrc.s3.amazonaws.com/outsider/images/24-OUT-003-Outsider-Primary-Logo-Reverse-RGB-LG.png
https://srcsrc.s3.amazonaws.com/outsider/images/24-OUT-003-Outsider-Primary-Logo-BW-LG.png 
*/

/*
Uploaded via Custom CSS > File uploads
https: //static1.squarespace.com/static/68c9aab3f5654f72941c0d87/t/68d4a7e5bd76136af3f11825/1758767077044/outsider-ss-logo-primary_2500w.png
https: //static1.squarespace.com/static/68c9aab3f5654f72941c0d87/t/68d60b8d2d6afe203856c87c/1758858125683/outsider-ss-logo-reversed_2500w.png

*/


/* This covers every case except 'bright', which might neeed a different image */
/* Hide the image */
header[data-section-theme="bright-inverse"] .header-title-logo img,
header[data-section-theme="white-bold"] .header-title-logo img,
header[data-section-theme="white"] .header-title-logo img,
header[data-section-theme="light-bold"] .header-title-logo img,
header[data-section-theme="light"] .header-title-logo img {
  opacity: 0;
}

/* Show a background image instead */
header[data-section-theme="bright-inverse"] .header-title-logo,
header[data-section-theme="white-bold"] .header-title-logo,
header[data-section-theme="white"] .header-title-logo,
header[data-section-theme="light-bold"] .header-title-logo,
header[data-section-theme="light"] .header-title-logo {
  background-image: url("https://static1.squarespace.com/static/68c9aab3f5654f72941c0d87/t/68d4a7e5bd76136af3f11825/1758767077044/outsider-ss-logo-primary_2500w.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Hide the image */

header[data-section-theme="black-bold"] .header-title-logo img,
header[data-section-theme="black"] .header-title-logo img,
header[data-section-theme="dark-bold"] .header-title-logo img,
header[data-section-theme="dark"] .header-title-logo img {
  opacity: 0;
}

/* Show a background image instead */
header[data-section-theme="black-bold"] .header-title-logo,
header[data-section-theme="black"] .header-title-logo,
header[data-section-theme="dark-bold"] .header-title-logo,
header[data-section-theme="dark"] .header-title-logo {
  background-image: url("https://static1.squarespace.com/static/68c9aab3f5654f72941c0d87/t/68d60b8d2d6afe203856c87c/1758858125683/outsider-ss-logo-reversed_2500w.png");
  background-size: contain;
  background-repeat: no-repeat;
}


.product-block-content .product-title {
  font-weight: 800;
}

/* i.e. Shopping Cart */

.cart-title {
  font-size: 3rem !important;
  margin-top: 5rem !important;
  margin-bottom: 2.5rem !important;
}

.cart-row-title {
  /* font-family: var(--heading-font-font-family) !important; */
  font-weight: 400 !important;
  color: red;
  font-size: 1.35rem !important;
}

.cart-row-img-wrapper {
  /* No adjustment needed since using square image */
}

.cart-row-img {
  /* No adjustment needed since using square image */
}

.cart-row-desc,
.cart-row-qty,
.cart-row-price,
.cart-row-remove {
  margin-top: 1em !important;
  font-size: 1.35rem !important;
}

.cart-row-remove {
  margin-top: .55em !important;

}

.product-detail .product-meta .product-variants {
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: var(--product-content-form-width, "100%");
  margin-top: 1.5rem;
}

.product-detail .product-meta {
  margin-bottom: 2rem;
}




:root {
  /* Tighten up line spacing on product page title  */
  --product-basic-item-title-half-layout-font-line-height: 1em !important;
}


.header-menu-nav-folder-content {
  position: relative;
  display: flex;
  width: 100%;
  flex-grow: .4;
  flex-shrink: 0;
  justify-content: center;
  flex-direction: column;
}

/* 
@media screen and (min-width: 768px), screen and (max-width: calc(2159px)) and (orientation: landscape) {
    #siteWrapper .sqs-button-element--primary, .sqs-block-form-lightbox .sqs-button-element--primary {
        font-size: calc((var(--primary-button-font-font-size-value) - 1) * 1.2vw + 1rem);
    }
}
 */

/*  */
.sqs-add-to-cart-button-inner {
  font-size: calc((var(--primary-button-font-font-size-value) - 1) * 1.2vw + .7rem) !important;
}

.newsletter-form-button-label {
  font-size: calc((var(--primary-button-font-font-size-value) - 1) * 1.2vw + .7rem) !important;
}



@media screen and (min-width: 768px),
screen and (max-width: calc(2159px)) and (orientation: landscape) {

  #siteWrapper .header-actions-action--cta .sqs-button-element--primary,
  #siteWrapper .header-skip-link {
    font-size: calc((var(--header-button-font-font-size-value) - 1) * 1.2vw + 1rem);
  }
}



.section[data-section-id="68c9af51d313ac3ab37f82a5"] .header-actions-action--cta {

  outline: 3px solid green;

}

/* Home */
#collection-68c9aab4f5654f72941c0da0 #siteWrapper .header-actions-action--cta .sqs-button-element--primary {
  display: block;
}

/* Specific product page */
#item-68ccd1cb8328676059d77900 #siteWrapper .header-actions-action--cta .sqs-button-element--primary {}

/* Hide header CTA  — Any product page */
.view-item #siteWrapper .header-actions-action--cta .sqs-button-element--primary {
  display: none !important;
}

/* Hide header CTA - Cart pages */
#cart #siteWrapper .header-actions-action--cta .sqs-button-element--primary {
  display: none !important;
}

/* Use stratum for price per Taylor's rec 
.product-detail .product-meta .product-price {
  font-family: 'stratum-1-web', sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 80%;
  
}
*/

/*
  --product-basic-item-price-half-layout-font-font-style: inherit;
  --product-basic-item-price-half-layout-font-line-height: inherit;
  --product-basic-item-price-half-layout-font-letter-spacing: default;
  --product-basic-item-price-half-layout-font-text-transform: none;

*/

:root {
  --product-basic-item-price-half-layout-font-font-family: 'stratum-1-web';
  --product-basic-item-price-half-layout-font-font-weight: 600;

  --product-block-price-font-font-family: 'stratum-1-web';
  --product-block-price-font-font-weight: 600;
}

.cart-row-price {
  font-family: 'stratum-1-web', sans-serif !important;
  font-weight: 600 !important;
}

.cart-subtotal-price {
  font-family: 'stratum-1-web', sans-serif !important;
  font-weight: 600 !important;
}