/* safest global fix */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ==========================================================================
   GLOBAL RESETS / BASE
   ========================================================================== */

      /* FONTS */
   
  @font-face {
      font-family: 'FraktionMono Bold';
      src: url('https://cdn-files.myshopline.com/file/store/1749500986512/PPFraktionSans-Bold-BF675904a667d89.otf');
      font-weight: 800;
      font-style: normal;
      font-display: swap;
  }

  @font-face {
      font-family: 'FraktionMono Bold Italic';
      src: url('https://cdn-files.myshopline.com/file/store/1749500986512/PPFraktionSans-BoldItalic-BF675904a70061a.otf');
      font-weight: 800;
      font-style: italic;
      font-display: swap;
  }

  @font-face {
      font-family: 'FraktionMono Italic';
      src: url('https://cdn-files.myshopline.com/file/store/1749500986512/PPFraktionSans-LightItalic-BF675904a6ee54f.otf');
      font-weight: 400;
      font-style: italic;
      font-display: swap;
  }

  @font-face {
      font-family: 'Brother Light';
      src: url('https://cdn-files.myshopline.com/file/store/1749500986512/07-brother1816-regular-1.otf');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
  }

  @font-face {
      font-family: 'Brother';
      src: url('https://cdn-files.myshopline.com/file/store/1749500986512/fonnts-com-Brother-1816-Bold.otf');
      font-weight: 800;
      font-style: normal;
      font-display: swap;
  }

  @font-face {
      font-family: 'Brother Bold';
      src: url('https://cdn-files.myshopline.com/file/store/1749500986512/fonnts-com-Brother-1816-Bold.otf');
      font-weight: 800;
      font-style: normal;
      font-display: swap;
  }
/* END FONTS */

/* ==========================================================================
   SITE CONTAINER / GUTTERS (single source of truth)
   ========================================================================== */

:root {
    /* Set your global content width here */
    --site-max-width: 1200px;

    /* Gutters */
    --site-gutter-desktop: 40px;
    --site-gutter-mobile: 16px;

    /* Bridge into theme’s existing tokens so everything stays compatible */
    --page-width: var(--site-max-width);
    --page-padding: var(--site-gutter-desktop);

    /* Optional: helpful aliases for sections already using these names */
    --container-max-width: var(--site-max-width);
    --container-padding: var(--page-padding);
}

.style\:size {
  max-width: 100% !important;
}

@media (max-width: 959px) {
    :root {
        --page-padding: var(--site-gutter-mobile);
        --container-padding: var(--page-padding);
    }
}

.page-width {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: min(100%, calc(var(--page-width) + (var(--page-padding) * 2))) !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}



.page-width.page-width--fluid {
    max-width: 100%;
}

.page-width.page-width--thin {
    max-width: 726px;
}
   

/* ==========================================================================
   TYPOGRAPHY ROLES (forced)
   ========================================================================== */
:root {
    --font-body-family: "FraktionMono Bold", sans-serif;
    --font-heading-family: "Brother Bold", sans-serif;
    --font-nav-family: "Brother Bold", sans-serif;
}

/* (Optional) If you want all headings forced to Brother Bold */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading-family);
    font-weight: 800;
}

h1.body1,
h2.body1,
h3.body1,
h4.body1,
h5.body1,
h6.body1,
h1.body2,
h2.body2,
h3.body2,
h4.body2,
h5.body2,
h6.body2,
h1.body3,
h2.body3,
h3.body3,
h4.body3,
h5.body3,
h6.body3,
h1.body4,
h2.body4,
h3.body4,
h4.body4,
h5.body4,
h6.body4,
h1.body5,
h2.body5,
h3.body5,
h4.body5,
h5.body5,
h6.body5,
h1.body6,
h2.body6,
h3.body6,
h4.body6,
h5.body6,
h6.body6 {
    font-family: var(--font-body-family) !important;
    font-weight: var(--font-body-weight) !important;
    font-style: normal !important;
}

.subtitle {
    font-family: 'FraktionMono Italic' ; 
}
   body, html { color: rgba(var(--color-text)); background-color: rgb(var(--color-page-background)); }
   
   ol, ul { padding: 0; margin: 0; list-style: none; }
   dl { margin-block: 0; }
   dd { margin-inline-start: 0; }
   
   h1:empty, h2:empty, h3:empty, h4:empty, h5:empty, h6:empty,
   section:empty, article:empty, p:empty, a:empty, ol:empty, ul:empty,
   dl:empty, summary:empty { display: none; }
   
   a:not([href]) { cursor: not-allowed; }
   a:not(.button), a:not(.button):hover {
  color: rgba(var(--color-button-text-link, --color-text), 1);
  text-decoration: none;
}
   svg.icon circle, svg.icon path { vector-effect: non-scaling-stroke; }
   p:first-child { margin-block-start: 0; }
   p:last-child { margin-block-end: 0; }
   button { color: inherit; }
   button:disabled { opacity: 0.3; }
   summary { position: relative; display: inline-block; list-style: none; cursor: pointer; user-select: none; }
   summary::-webkit-details-marker { display: none; }
   
   /* z-index scale */
   :root{
     --z-index-hover: 1; --z-index-active: 2; --z-index-focus: 3;
     --z-index-dropdown: 1000; --z-index-sticky: 1010; --z-index-fixed: 1020;
     --z-index-modal: 1030; --z-index-popover: 1040; --z-index-tooltip: 1050; --z-index-toast: 1060;
   }
   
   
   
   /* grid */
   .grid{
  --column-gap: var(--grid-horizontal-spacing);
  --row-gap: var(--grid-vertical-spacing);
     display: grid; grid-auto-columns: var(--column-width); grid-auto-flow: column;
     gap: var(--row-gap) var(--column-gap); width: 100%; overflow-x: auto;
   }
   @media (max-width: 959px){
     .grid{
    --column-gap: calc(var(--grid-horizontal-spacing) / 2);
    --row-gap: calc(var(--grid-vertical-spacing) / 2);
       --column-width: calc((100% - var(--column-gap, 0px) * (var(--mobile-gap-columns, var(--mobile-columns)) - 1)) / var(--mobile-columns));
    grid-template-columns: repeat(var(--mobile-columns), var(--column-width));
    grid-auto-flow: var(--mobile-auto-flow);
  }
}
   @media (min-width: 960px){
     .grid{
       --column-width: calc((100% - var(--column-gap, 0px) * (var(--desktop-gap-columns, var(--desktop-columns)) - 1)) / var(--desktop-columns));
    grid-template-columns: repeat(var(--desktop-columns), var(--column-width));
    grid-auto-flow: var(--desktop-auto-flow);
  }
}
.advc-title {
    font-family: 'Brother Bold', sans-serif !important;
}

/* ==========================================================================
   BUTTONS – SIMPLE (site-wide)
   ========================================================================== */

.button,
.shopline-element-buy-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-family: 'Brother Bold', sans-serif;
    font-size: var(--button-font-size, var(--body2-font-size));
    letter-spacing: var(--button-letter-spacing, normal);
    color: var(--button-text, rgb(var(--color-button-text)));
    background: var(--button-bg, rgb(var(--color-button-background)));
    border-radius: var(--button-radius, 12px);
    box-shadow: var(--button-shadow, none);
    text-transform: none;
    border: 0;
    text-decoration: none !important;
    cursor: pointer;
    user-select: none;
    transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease, filter 150ms ease;
}

.button:hover:not(:disabled),
.shopline-element-buy-now:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(0.98);
}

.button:active:not(:disabled),
.shopline-element-buy-now:active:not(:disabled) {
    transform: translateY(0);
    filter: brightness(0.96);
}

.button:disabled,
.button.disabled,
.shopline-element-buy-now:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Variants (keep compatibility) */
.button--primary {}

/* Secondary can just be a different default via CSS vars (optional) */
.button--secondary {
    background: var(--button-secondary-bg, var(--button-bg, rgb(var(--color-button-background))));
    color: var(--button-secondary-text, var(--button-text, rgb(var(--color-button-text))));
}

/* Link style */
.button--link {
    padding: 0;
    background: transparent;
    color: inherit;
    border-radius: 0;
    box-shadow: none;
    transform: none !important;
    filter: none !important;
    text-decoration: underline !important;
    text-underline-offset: 6px;
}

/* Optional drop shadow (matches “Get started” style direction) */
.button--shadow {
    box-shadow: var(--button-shadow, 0 10px 24px rgba(0, 0, 0, 0.15));
}

.button--shadow:hover:not(:disabled) {
    box-shadow: var(--button-shadow-hover, 0 12px 28px rgba(0, 0, 0, 0.18));
}

/* Typography bridge (used by any section wrapper) */
.block-button-typography--enabled {
    --button-font-size: var(--font-size-mobile);
    --button-letter-spacing: var(--letter-spacing);
}

@media (min-width: 960px) {
    .block-button-typography--enabled {
        --button-font-size: var(--font-size-desktop);
    }
}

/
   
   /* ==========================================================================
      FORMS / FIELDS (unchanged)
      ========================================================================== */
   .field{
     position: relative; box-sizing: border-box; display: flex; flex-flow: row nowrap;
     align-items: center; justify-content: space-between; width: 100%;
     margin-block-end: 20px; font-size: var(--body4-font-size);
     line-height: var(--sort-body-line-height); color: rgb(var(--color-text));
     background-color: rgb(var(--color-background)); transition: all 300ms;
   }
   @media (max-width: 959px) { .field{ margin-block-end: 16px; } }
   .field::after{
     position: absolute; inset: 0; z-index: 1; pointer-events: none; content: "";
  border-color: rgba(var(--color-entry-line), var(--input-border-opacity));
     border-style: solid; border-width: var(--input-border-thickness);
  border-radius: var(--input-border-radius);
     box-shadow: var(--input-shadow-offset-x) var(--input-shadow-offset-y) var(--input-shadow-blur)
    rgba(var(--color-text), var(--input-shadow-opacity));
  transition: border-color 300ms;
}
   .field__inner{ position: relative; flex: 1; }
   .field__group{ display: flex; gap: 16px; }
   .field__label{
     position: absolute; inset-block-start: 50%; inset-inline: 16px 0; display: -webkit-box; overflow: hidden;
     font-size: var(--body4-font-size); color: rgb(var(--color-light-text)); text-overflow: ellipsis;
     -webkit-line-clamp: 1; word-break: break-word; pointer-events: none; transition: transform 300ms ease;
     transform: translateY(-50%); transform-origin: left top; -webkit-box-orient: vertical;
   }
   .field__input{
     width: 100%; padding: 20px 16px 6px; font-size: var(--body4-font-size);
     line-height: var(--sort-body-line-height); color: rgb(var(--color-text));
     appearance: none; background: none; border: none; outline: none; box-shadow: none !important;
   }
   .field__input::placeholder{ opacity: 0; }
   .field__input::-webkit-search-cancel-button{ display: none; }
.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
   .field__input:-webkit-autofill ~ .field__label{
     display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; word-break: normal;
     white-space: nowrap; transform: scale(.7) translate(0, -120%); -webkit-box-orient: vertical;
}
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus,
   .field__input:-webkit-autofill:active{
  box-shadow: 0 0 0 1000px rgb(var(--color-background)) inset !important;
  -webkit-text-fill-color: rgb(var(--color-text));
}
   .field__input.textarea{ min-height: 100px; padding-block: 0; padding-inline: 16px; margin-block: 20px 6px; resize: none; }
   .field__input.textarea + .field__label{ inset-block-start: 20px; }
   .field__suffix{ display: flex; justify-content: center; padding-block: 6px; padding-inline-end: 10px; }
   .field__info{ display: flex; font-size: 12px; line-height: 1.4; }
   .field__info > svg{ margin-inline-end: 4px; }
   .field__info--error{ margin-block: -10px 20px; font-size: var(--body6-font-size); color: rgb(var(--color-error-message)); }
   .field__info--error:empty{ display: none; }
   @media (min-width: 960px) { .field__info > svg{ margin-inline-end: 8px; } }
   .field:hover::after{ border-color: rgba(var(--color-text), var(--input-border-opacity)); border-width: calc(var(--input-border-thickness) + 1px); }
   .field:focus::after, .field:focus-within::after{ border-color: rgba(var(--color-text), var(--input-border-opacity)); border-width: calc(var(--input-border-thickness) + 1px); }
   .field--disabled{ pointer-events: none; }
   .field--disabled::after{ background-color: rgb(0 0 0 / 10%); border-color: rgb(0 0 0 / 10%); }
   .field--error::after{ border-color: rgba(var(--color-error-message), var(--input-border-opacity)); border-width: calc(var(--input-border-thickness) + 1px); }
   .field--normal .field__input{ padding: 13px 16px; }
   .field--normal .field__input::placeholder{ opacity: 1; }
.field--normal .field__input ~ .field__label,
.field--normal .field__input:focus ~ .field__label,
.field--normal .field__input:not(:placeholder-shown) ~ .field__label,
   .field--normal .field__input:-webkit-autofill ~ .field__label{ display: none; }
   
   /* Remaining card/drawer/article helpers unchanged from your previous file… */
   .product-card-border-shadow{ box-sizing:border-box; overflow:hidden;
  border-color: rgba(var(--color-text), var(--product-card-border-opacity));
     border-style: solid; border-width: var(--product-card-border-thickness) !important;
  border-radius: var(--product-card-border-radius);
     box-shadow: var(--product-card-shadow-offset-x) var(--product-card-shadow-offset-y) var(--product-card-shadow-blur)
                 rgba(var(--color-shadow), var(--product-card-shadow-opacity)); }
   .collection-card-border-shadow{ box-sizing:border-box; overflow:hidden;
  border-color: rgba(var(--color-text), var(--collection-card-border-opacity));
     border-style: solid; border-width: var(--collection-card-border-thickness) !important;
  border-radius: var(--collection-card-border-radius);
     box-shadow: var(--collection-card-shadow-offset-x) var(--collection-card-shadow-offset-y) var(--collection-card-shadow-blur)
                 rgba(var(--color-shadow), var(--collection-card-shadow-opacity)); }
   .article-card-border-shadow{ box-sizing:border-box; overflow:hidden;
  border-color: rgba(var(--color-text), var(--article-card-border-opacity));
     border-style: solid; border-width: var(--article-card-border-thickness) !important;
  border-radius: var(--article-card-border-radius);
     box-shadow: var(--article-card-shadow-offset-x) var(--article-card-shadow-offset-y) var(--article-card-shadow-blur)
                 rgba(var(--color-shadow), var(--article-card-shadow-opacity)); }

.advc-gallery__desc {
    font-family: "FraktionMono Bold", sans-serif !important;
    color: #B92454 !important;
}

[data-settings-id="shopline-section-recommended-product"] {
    background-color: #FFFFFF;
}

[data-settings-id="shopline-section-recommended-product"] .block-heading {
    text-transform: uppercase;
    color: #D31C5E;
}

[data-settings-id="shopline-section-recommended-product"] .block-heading.text-left {
    text-align: left;
}

[data-settings-id="shopline-section-recommended-product"] .block-heading.text-center {
    text-align: center;
}

[data-settings-id="shopline-section-recommended-product"] .block-heading.text-right {
    text-align: right;
}


/* =============================
   Featured Product Flavors
   Uses <theme-carousel>
   ============================= */

/* Section */
.featured-product-flavors {
    position: relative;
    width: 100%;
    background: rgb(var(--color-background));
}

/* Background layer */
.featured-product-flavors__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* never steal swipes/clicks */
}

.featured-product-flavors__bg img,
.featured-product-flavors__bg picture,
.featured-product-flavors__bg video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
}

/* Foreground content */
.featured-product-flavors__content {
    position: relative;
    z-index: 2;
}

.featured-product-flavors__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 16px 72px;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    /* don't clip the carousel/shadows */
    overflow: visible;
}

/* Header */
.featured-product-flavors__header {
    display: flex;
    justify-content: center;
    margin: 0 0 26px 0;
}

.featured-product-flavors__heading-image img {
    width: clamp(220px, 32vw, 520px);
    height: auto;
    display: block;
}

.featured-product-flavors__heading-text {
    margin: 0;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: clamp(22px, 4vw, 54px);
    line-height: 1.05;
}

/* =============================
   Carousel (theme-carousel)
   ============================= */

theme-carousel.featured-product-flavors__carousel {
    display: block;
    width: 100%;
    position: relative;
    z-index: 2;

    /* allow horizontal gestures */
    touch-action: pan-x;
}

/* Track = scroll container the JS uses */
theme-carousel.featured-product-flavors__carousel .carousel__track {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;

    width: 100%;
    max-width: 100%;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    /* avoid vertical scroll stealing swipes */

    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;

    scroll-snap-type: x mandatory;

    /* 1-card-at-a-time behavior */
    gap: 0;

    /* gutters + shadow safety */
    padding: 0 0 18px;
    margin: 0;

    scrollbar-width: none;
}

theme-carousel.featured-product-flavors__carousel .carousel__track::-webkit-scrollbar {
    display: none;
}

/* Slides */
.featured-product-flavors__slide {
    box-sizing: border-box;
}

/* Link wrapper */
.featured-product-flavors__item {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

/* Card */
.featured-product-flavors__card {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 28px;
    overflow: hidden;

    background: transparent;
    border: 0;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

/* Shopline image wrappers fill the card */
.featured-product-flavors__card picture,
.featured-product-flavors__card .image,
.featured-product-flavors__card>* {
    width: 100%;
    height: 100%;
}

.featured-product-flavors__card picture {
    display: block;
}

.featured-product-flavors__card img {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* =============================
   Mobile (1 slide per view)
   ============================= */
@media (max-width: 959px) {

    /* don’t let the section clip the carousel */
    .featured-product-flavors {
        overflow: visible;
    }

    theme-carousel.featured-product-flavors__carousel .carousel__track {
        scroll-snap-type: x mandatory;
        scroll-snap-stop: always;
    }

    theme-carousel.featured-product-flavors__carousel .carousel__track>.featured-product-flavors__slide {
        flex: 0 0 100%;
        min-width: 100%;
        scroll-snap-align: start;
        padding: 0 16px;
        /* gutters */
    }
}

/* =============================
   Desktop (centered row, no scroll)
   ============================= */
@media (min-width: 960px) {

    /* keep hero tidy on desktop */
    .featured-product-flavors {
        overflow: hidden;
    }

    .featured-product-flavors__inner {
        min-height: clamp(620px, 60vw, 860px);
        padding: clamp(90px, 6vw, 130px) 24px clamp(110px, 7vw, 160px);
    }

    .featured-product-flavors__header {
        margin-bottom: 36px;
    }

    .featured-product-flavors__content {
        width: 100%;
    }

    theme-carousel.featured-product-flavors__carousel .carousel__track {
        overflow: visible !important;
        scroll-snap-type: none;
        justify-content: center;
        gap: clamp(18px, 3vw, 44px);
        padding: 0;
    }

    theme-carousel.featured-product-flavors__carousel .carousel__track>.featured-product-flavors__slide {
        flex: 0 0 auto;
        min-width: 0;
        width: clamp(240px, 20vw, 320px);
        padding: 0;
    }
}

/* =============================
   Optional arrows (desktop only)
   (works with your plugin: name="previous"/"next")
   ============================= */
.featured-product-flavors__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 0;
    background: rgba(255, 255, 255, 0.75);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.featured-product-flavors__arrow--prev {
    left: 10px;
}

.featured-product-flavors__arrow--next {
    right: 10px;
}

@media (max-width: 959px) {
    .featured-product-flavors__arrow {
        display: none;
    }
}

.advc-gallery__wall-item--title.advc-sub-title {
  font-family: "Brother", sans-serif !important;
}

.advc-gallery__wall-item--desc {
  font-family: "FraktionMono Bold", monospace !important;
}