/* ==========================================================================
   ARRØ base typography + colours — aligns Flatsome defaults with the
   Shopify theme (Aeonik body/UI, Tusker Grotesk display, brand blue).
   Fonts/vars come from custom.css (:root --font-*).  Only styles elements
   that are NOT already styled by a section/plugin class (low specificity).
   ========================================================================== */
:root {
  --arro-blue: #00a1e9;
  --arro-ink: #000;
  --arro-text: rgba(18, 18, 18, .75);
}

/* ---------------------------------- body --------------------------------- */
html body {
  font-family: var(--font-text-regular, "text_regular", sans-serif);
  color: var(--arro-text);
  letter-spacing: .6px;
  -webkit-font-smoothing: antialiased;
}

html body p,
html body li,
html body td,
html body th,
html body label,
html body input,
html body select,
html body textarea,
html body button,
html body a,
html body span,
html body div,
html body small,
html body strong,
html body em,
html body dt,
html body dd {
  font-family: inherit;
}

html body strong,
html body b {
  font-family: var(--font-text-bold, "text_bold", sans-serif);
  font-weight: 400;
}

html body .alt-font {
  font-family: var(--font-text-medium, "text_medium", sans-serif);
}

/* Icon fonts (fl-icons / star) live on ::before or i.icon-* and are left untouched. */
html body .woocommerce-result-count,
html body .woocommerce-ordering select,
html body .price_label,
html body .quick-view,
html body .out-of-stock-label {
  font-family: var(--font-text-medium, "text_medium", sans-serif);
  font-weight: 400;
}

body input,
body select,
body textarea {
  letter-spacing: .3px;
}

/* --------------------------------- headings ------------------------------ */
html body h1,
html body h2,
html body .h1,
html body .h2 {
  font-family: var(--font-title-bold, "title_bold", sans-serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .6px;
  line-height: 1.12;
  color: var(--arro-ink);
}

html body h3,
html body h4,
html body h5,
html body h6,
html body .h3,
html body .h4,
html body .h5,
html body .h6,
html body .heading-font {
  font-family: var(--font-text-medium, "text_medium", sans-serif);
  font-weight: 400;
  letter-spacing: .6px;
  line-height: 1.35;
  color: var(--arro-ink);
}

h1,
.h1 {
  font-size: clamp(30px, 3.4vw, 48px);
}

h2,
.h2 {
  font-size: clamp(26px, 2.6vw, 38px);
}

h3,
.h3 {
  font-size: clamp(20px, 1.6vw, 24px);
}

h4,
.h4 {
  font-size: 18px;
}

/* Woo/Flatsome page + product titles */
.page-title,
.entry-title,
.product-title,
.product_title,
.woocommerce-loop-product__title,
.product-small .name a {
  font-family: var(--font-title-bold, "title_bold", sans-serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--arro-ink);
}

.product-small .name a {
  font-family: var(--font-text-medium, "text_medium", sans-serif);
  text-transform: none;
  font-size: 18px;
}

/* ---------------------------------- links -------------------------------- */
a {
  color: var(--arro-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover,
a:focus-visible {
  color: var(--arro-blue);
}

.entry-content a:not(.button):not([class*="btn"]) {
  color: var(--arro-blue);
  text-decoration: underline;
}

.entry-content a:not(.button):not([class*="btn"]):hover {
  color: #0084bd;
}

/* -------------------------------- buttons -------------------------------- */
.button,
button.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.checkout-button {
  font-family: var(--font-text-medium, "text_medium", sans-serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .6px;
  text-transform: none;
  border-radius: 41px;
  padding-left: 30px;
  padding-right: 30px;
  min-height: 46px;
  line-height: 46px;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}

.button.primary,
.button.alt,
.button.checkout,
.checkout-button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,
input[type="submit"].primary {
  background-color: var(--arro-blue);
  border-color: var(--arro-blue);
  color: #fff;
}

.button.primary:hover,
.button.alt:hover,
.checkout-button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: #0084bd;
  border-color: #0084bd;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 161, 233, .3);
}

.button.is-outline,
.button.secondary.is-outline {
  border-color: var(--arro-blue);
  color: var(--arro-blue);
  background: transparent;
}

.button.is-outline:hover {
  background: var(--arro-blue);
  color: #fff;
}

/* -------------------------------- form fields ---------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
  border-color: rgba(18, 18, 18, .2);
  border-radius: 12px;
  box-shadow: none;
  color: var(--arro-ink);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--arro-blue);
  box-shadow: 0 0 0 3px rgba(0, 161, 233, .15);
}

::placeholder {
  color: rgba(18, 18, 18, .5);
}

/* --------------------------------- prices -------------------------------- */
.price,
.woocommerce-Price-amount {
  font-family: var(--font-text-medium, "text_medium", sans-serif);
  color: var(--arro-ink);
}

.price ins {
  text-decoration: none;
}

/* ---------------------------------- footer -------------------------------
   Layout copied from the Shopify footer: newsletter (50%) + three link columns
   (16.5% each), big ARRØ wordmark below, copyright + social at the very bottom. */
#footer.arro-footer {
  background-color: var(--arro-blue);
  color: #fff;
}

#footer.arro-footer,
#footer.arro-footer p,
#footer.arro-footer li,
#footer.arro-footer a,
#footer.arro-footer input,
#footer.arro-footer button {
  font-family: var(--font-text-regular, "text_regular", sans-serif);
  letter-spacing: .6px;
}

#footer.arro-footer .arro-footer__top {
  display: flex;
  align-items: flex-start;
  gap: 0;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: 36px 50px;
  box-sizing: border-box;
}

#footer.arro-footer .arro-footer__col {
  min-width: 0;
}

#footer.arro-footer .arro-footer__col--newsletter {
  width: calc(50% + 7px);
  padding-right: 20px;
  box-sizing: border-box;
}

#footer.arro-footer .arro-footer__col--menu {
  width: 16.5%;
  padding-right: 28px;
  box-sizing: border-box;
}

#footer.arro-footer .arro-footer__newsletter-title,
#footer.arro-footer .arro-footer__col-heading {
  font-family: var(--font-text-regular, "text_regular", sans-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: .6px;
  text-transform: none;
  color: #fff;
  margin: 0;
  padding-bottom: 15px;
}

#footer.arro-footer .arro-footer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

#footer.arro-footer .arro-footer__menu li {
  margin: 0 0 5px;
  padding: 0;
}

#footer.arro-footer .arro-footer__menu a {
  display: block;
  font-size: 14px;
  line-height: 24px;
  color: #fff;
  padding: 0;
  text-decoration: none;
}

#footer.arro-footer .arro-footer__menu a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* newsletter form */
#footer.arro-footer .arro-footer__newsletter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  max-width: 520px;
  margin: 0;
}

#footer.arro-footer .arro-footer__newsletter input[type="email"] {
  flex: 1 1 260px;
  min-width: 0;
  height: 46px;
  padding: 10px 20px;
  border: 1px solid #fff;
  border-radius: 40px;
  background: transparent;
  box-shadow: none;
  outline: none;
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  margin: 0;
}

#footer.arro-footer .arro-footer__newsletter input[type="email"]::placeholder {
  color: #fff;
  opacity: 1;
}

#footer.arro-footer .arro-footer__newsletter input[type="email"]:focus {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .3);
}

#footer.arro-footer .arro-footer__newsletter button[type="submit"] {
  height: 50px;
  padding: 15px 30px;
  border: 0;
  border-radius: 40px;
  background: #fff;
  color: var(--arro-blue);
  font-size: 16px;
  line-height: 20px;
  text-transform: none;
  letter-spacing: .6px;
  min-height: 0;
  margin: 0;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}

#footer.arro-footer .arro-footer__newsletter button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .15);
}

#footer.arro-footer .arro-footer__newsletter button[disabled] {
  opacity: .7;
  cursor: default;
  transform: none;
}

#footer.arro-footer .arro-footer__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

#footer.arro-footer .arro-footer__newsletter-msg {
  flex-basis: 100%;
  margin: -6px 0 0;
  padding-left: 20px;
  min-height: 22px;
  font-size: 14px;
  line-height: 22px;
  color: #fff;
}

/* wordmark + bottom bar */
#footer.arro-footer .arro-footer__logo-wrap {
  padding: 0 100px;
  overflow: hidden;
  line-height: 0;
}

#footer.arro-footer .arro-footer__big-logo {
  width: 100%;
  height: auto;
  max-height: none;
  display: block;
}

#footer.arro-footer .arro-footer__bottom {
  padding: 36px 50px;
}

#footer.arro-footer .arro-footer__bottom-inner {
  max-width: 1600px;
  padding: 0;
}

#footer.arro-footer .arro-footer__copyright {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #fff;
}

#footer.arro-footer .arro-footer__social a {
  color: #fff;
  opacity: 1;
}

#footer.arro-footer .arro-footer__social a svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 1200px) {
  #footer.arro-footer .arro-footer__col--newsletter {
    width: 40%;
  }

  #footer.arro-footer .arro-footer__col--menu {
    width: 20%;
  }
}

@media (max-width: 1024px) {
  #footer.arro-footer .arro-footer__top {
    flex-wrap: wrap;
    padding: 30px 30px 10px;
  }

  #footer.arro-footer .arro-footer__col--newsletter {
    width: 100%;
    padding-right: 0;
    margin-bottom: 30px;
  }

  #footer.arro-footer .arro-footer__col--menu {
    width: 50%;
    margin-bottom: 30px;
  }

  #footer.arro-footer .arro-footer__logo-wrap {
    padding: 0 30px;
  }

  #footer.arro-footer .arro-footer__bottom {
    padding: 24px 30px;
  }
}

@media (max-width: 767px) {

  #footer.arro-footer .arro-footer__newsletter-title,
  #footer.arro-footer .arro-footer__col-heading {
    font-size: 18px;
    line-height: 28px;
    padding-bottom: 5px;
  }

  #footer.arro-footer .arro-footer__menu a {
    padding-bottom: 5px;
  }

  #footer.arro-footer .arro-footer__col--menu {
    width: 100%;
    margin-bottom: 20px;
  }

  #footer.arro-footer .arro-footer__newsletter {
    gap: 12px;
  }

  #footer.arro-footer .arro-footer__logo-wrap {
    padding: 0 16px;
  }
}

@media (max-width: 500px) {
  #footer.arro-footer .arro-footer__newsletter-title br {
    display: none;
  }
}

/* ---------------------------------- misc --------------------------------- */
::selection {
  background: var(--arro-blue);
  color: #fff;
}

.woocommerce-breadcrumb,
.breadcrumbs {
  font-family: var(--font-text-medium, "text_medium", sans-serif);
  font-size: 13px;
  letter-spacing: .6px;
  text-transform: none;
}

.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--arro-blue);
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--arro-blue);
}

.star-rating span::before,
.star-rating::before {
  color: #ffb400;
}

/* Homepage section titles copied from Shopify were left on the fallback face */
html body .osr-products-tabs-title,
html body .osr-product-slider-main-title {
  font-family: var(--font-title-bold, "title_bold", sans-serif);
}

/* Flatsome nav / sidebar / dropdown text follows the brand UI face too */
html body .nav>li>a,
html body .nav-dropdown li a,
html body .off-canvas-center .nav-sidebar.nav-vertical>li>a,
html body .widget-title,
html body .widget a,
html body .badge-inner,
html body .label-new,
html body .tooltip {
  font-family: var(--font-text-medium, "text_medium", sans-serif);
}

/* ------------------------- homepage product tabs -------------------------
   default: white pill, dark outline   hover: brand-blue tint + blue text/outline
   active:  solid brand blue, white text (icon turns white)                    */
html body .osr-products-tabs-nav {
  gap: 12px;
}

html body .osr-products-tabs-nav .osr-products-tab-btn {
  font-family: var(--font-text-medium, "text_medium", sans-serif);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .6px;
  line-height: 20px;
  padding: 11px 24px;
  border: 1px solid #000;
  border-radius: 50px;
  background: #fff;
  color: #000;
  cursor: pointer;
  user-select: none;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}

html body .osr-products-tabs-nav .osr-products-tab-btn:hover {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}

html body .osr-products-tabs-nav .osr-products-tab-btn.active {
  background: var(--arro-blue);
  border-color: var(--arro-blue);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 161, 233, .28);
}

html body .osr-products-tabs-nav .osr-products-tab-btn.active:hover {
  background: #0090d1;
  border-color: #0090d1;
  color: #fff;
}

/* icons: dark by default, blue on hover (via filter), white when active */
html body .osr-products-tab-btn .osr-products-tab-icon {
  filter: none;
  transition: filter .2s;
}

html body .osr-products-tab-btn.active .osr-products-tab-icon,
html body .osr-products-tab-btn.active:hover .osr-products-tab-icon {
  filter: brightness(0) invert(1);
}

/* "View all" button follows the same scheme */
html body .osr-products-tabs-view-all {
  font-family: var(--font-text-medium, "text_medium", sans-serif);
  font-weight: 400;
  letter-spacing: .6px;
  border: 1px solid #000;
  color: #000;
}

html body .osr-products-tabs-view-all:hover {
  background: var(--arro-blue);
  border-color: var(--arro-blue);
  color: #fff;
}

/* ------------------- homepage product-category slider -------------------
   Same design as the Shopify "osr-product-slider": image card + coloured text
   panel, active slide full size, neighbours scaled to 80% and faded.           */
html body .osr-product-slider-section {
  padding: 60px 0;
  overflow: hidden;
}

html body .osr-product-slider-main-title {
  font-family: var(--font-title-bold, "title_bold", sans-serif);
  font-size: 48px;
  font-weight: 400;
  line-height: 58px;
  letter-spacing: .6px;
  text-transform: uppercase;
  text-align: center;
  color: #000;
  margin: 0;
  padding-bottom: 30px;
}

html body .osr-product-slider {
  overflow: hidden !important;
  position: relative;
}

html body .osr-product-slide-inner {
  display: block;
  position: static;
  height: auto;
  overflow: hidden;
  border-radius: 40px;
  text-decoration: none;
  cursor: default;
}

html body .osr-product-slide-image-content {
  font-size: 0;
  line-height: 0;
}

html body .osr-product-slide-image {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 40px 40px 0 0;
  transform: none !important;
}

html body .osr-product-slide-text-content {
  padding: 20px;
}

html body .osr-product-slide-title {
  display: block;
  text-decoration: none;
  font-family: var(--font-text-medium, "text_medium", sans-serif);
  font-size: 36px;
  font-weight: 400;
  line-height: 46px;
  letter-spacing: .6px;
  color: #fff;
  text-shadow: none;
  margin: 0;
}

html body .osr-product-slide-btn {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding-top: 15px;
  margin-top: 15px;
  border-top: 1px solid #fff;
  text-decoration: none;
  font-family: var(--font-text-medium, "text_medium", sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: .6px;
  color: #fff;
  transition: all .2s linear;
}

html body .swiper-slide.osr-product-slide.swiper-slide-active .osr-product-slide-btn {
  display: flex;
}

html body .osr-product-slide-btn-icon {
  display: block;
  width: 22px;
  height: 22px;
  color: #fff;
  flex-shrink: 0;
}

html body .osr-product-slide-btn-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

html body .osr-product-slide-btn-icon svg path {
  stroke: #fff;
}

html body .swiper-slide.osr-product-slide {
  transition: all .2s linear;
  transform: scale(.8) !important;
  opacity: .3;
}

html body .swiper-slide.osr-product-slide.swiper-slide-active {
  transform: scale(1) !important;
  opacity: 1;
}

html body .osr-product-slider-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  transform: none;
  z-index: 10;
  pointer-events: none;
}

html body .osr-product-slider-navigation-left,
html body .osr-product-slider-navigation-right {
  width: 48px;
  height: 48px;
  border-radius: 100%;
  border: 1px solid #000;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color .2s, box-shadow .2s;
}

html body .osr-product-slider-navigation-left:hover,
html body .osr-product-slider-navigation-right:hover {
  background: #fff;
  border-color: var(--arro-blue);
  box-shadow: 0 4px 14px rgba(0, 161, 233, .3);
}

html body .osr-product-slider-navigation-left svg,
html body .osr-product-slider-navigation-right svg {
  width: 20px;
  height: auto;
  fill: #000;
}

html body .osr-product-slider-navigation-left:hover svg,
html body .osr-product-slider-navigation-right:hover svg {
  fill: #000;
}

@media (max-width: 767px) {
  html body .osr-product-slider-main-title {
    font-size: 28px;
    line-height: 38px;
  }

  html body .osr-product-slide-title {
    font-size: 18px;
    line-height: 28px;
  }

  html body .osr-product-slide-btn {
    padding-top: 10px;
    margin-top: 10px;
  }

  html body .osr-product-slide-text-content {
    padding: 15px;
  }

  html body .osr-product-slider-navigation-left,
  html body .osr-product-slider-navigation-right {
    width: 36px;
    height: 36px;
  }

  html body .osr-product-slider-navigation-left svg,
  html body .osr-product-slider-navigation-right svg {
    width: 16px;
  }
}

/* PDP image section (Shopify "osr-image"): full-width responsive image, desktop/mobile swap at 767px */
html body .osr-image-section-image {
  display: block;
  width: 100%;
  height: auto;
}

html body .osr-image-section-link {
  display: block;
}

/* ---------------- PDP flavor swatches (Shopify design: tinted circle + device cut-out per flavor colour) ---------------- */
:is(.arro-var-flavor, #arro-flavor-nav) .arro-swatches {
  gap: 10px 12px;
}

html body :is(.arro-var-flavor, #arro-flavor-nav) .arro-sw {
  --sw: #9ca3af;
  box-sizing: border-box;
  width: 100px;
  min-height: 101px;
  padding: 10px 6px;
  gap: 6px;
  margin: 0;
  border: 1px solid #e1e0db;
  border-radius: 20px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  opacity: 1;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}

html body :is(.arro-var-flavor, #arro-flavor-nav) .arro-sw .arro-sw-img {
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  overflow: visible;
  background: color-mix(in srgb, var(--sw) 15%, transparent);
}

html body :is(.arro-var-flavor, #arro-flavor-nav) .arro-sw .arro-sw-img img {
  width: 50px;
  height: 50px;
  padding: 0;
  border-radius: 50%;
  object-fit: contain;
}

html body :is(.arro-var-flavor, #arro-flavor-nav) .arro-sw .arro-sw-lbl {
  font-size: 11px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: .3px;
  text-transform: uppercase;
  text-align: center;
  color: rgba(18, 18, 18, .75);
}

html body :is(.arro-var-flavor, #arro-flavor-nav) .arro-sw:hover:not(.arro-sw-na) {
  border-color: var(--sw);
}

html body :is(.arro-var-flavor, #arro-flavor-nav) .arro-sw.arro-sw-sel {
  border-color: var(--sw);
  background: color-mix(in srgb, var(--sw) 15%, transparent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}

html body :is(.arro-var-flavor, #arro-flavor-nav) .arro-sw.arro-sw-sel .arro-sw-img {
  border: 0;
  box-shadow: none;
}

html body :is(.arro-var-flavor, #arro-flavor-nav) .arro-sw.arro-sw-sel .arro-sw-lbl {
  color: #000;
  font-weight: 700;
}

/* sold out / unavailable: faded circle with a slash */
html body :is(.arro-var-flavor, #arro-flavor-nav) .arro-sw.arro-sw-na {
  opacity: 1;
  cursor: not-allowed;
}

html body :is(.arro-var-flavor, #arro-flavor-nav) .arro-sw.arro-sw-na .arro-sw-img {
  opacity: .5;
}

html body :is(.arro-var-flavor, #arro-flavor-nav) .arro-sw.arro-sw-na .arro-sw-img::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 1px;
  background: #000;
  border-radius: 0;
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 549px) {
  html body :is(.arro-var-flavor, #arro-flavor-nav) .arro-sw {
    width: calc((100% - 24px) / 3);
    min-height: 96px;
  }
}

/* ---------------- PDP purchase widget + Add to cart (Shopify csp-* design, accent = flavour colour) ---------------- */
html body .summary form.cart .single_add_to_cart_button,
html body .summary .single_add_to_cart_button {
  border-radius: 20px !important;
  padding: 20px 15px !important;
  min-height: 57px;
  height: auto !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  background: var(--apw-accent, #111) !important;
  border: 0 !important;
  color: #fff !important;
}

html body .apw-wrap .apw-tab {
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 15px;
  gap: 2px;
  background: #fff;
  box-shadow: none;
}

html body .apw-wrap .apw-tab--active {
  border-color: var(--apw-accent);
  background: var(--apw-accent-tint);
  box-shadow: 0 0 0 1px var(--apw-accent);
}

html body .apw-wrap .apw-tab__title,
html body .apw-wrap .apw-tab--active .apw-tab__title {
  color: #111827;
  font-size: 15px;
}

html body .apw-wrap .apw-tab__sub {
  color: #6b7280;
  font-size: 13px;
}

html body .apw-wrap .apw-pack {
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 15px;
  background: #fff;
  box-shadow: none;
}

html body .apw-wrap .apw-pack--selected {
  border-color: var(--apw-accent);
  background: var(--apw-accent-tint);
  box-shadow: 0 0 0 1px var(--apw-accent);
}

html body .apw-wrap .apw-pack__radio {
  border: 1px solid #d1d5db;
  background: #fff;
}

html body .apw-wrap .apw-pack--selected .apw-pack__radio {
  background: var(--apw-accent);
  border-color: var(--apw-accent);
}

html body .apw-wrap .apw-pack--oos::after {
  border-radius: 20px;
}

/* ---------------- homepage product tabs: Swiper slider + sideways-scrolling tab bar ---------------- */
html body .osr-products-tabs-nav {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 4px 14px;
  margin: 0 0 26px;
  gap: 12px;
}

html body .osr-products-tabs-nav::-webkit-scrollbar {
  display: none;
}

html body .osr-products-tabs-nav .osr-products-tab-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

html body .osr-products-tabs-nav .osr-products-tab-btn:first-child {
  margin-left: auto;
}

html body .osr-products-tabs-nav .osr-products-tab-btn:last-child {
  margin-right: auto;
}

html body .osr-products-tab-grid.osr-pt-swiper {
  display: block;
  overflow: hidden;
  padding: 2px;
}

.osr-pt-swiper .swiper-wrapper {
  display: flex;
}

.osr-pt-swiper .swiper-slide {
  height: auto;
  box-sizing: border-box;
}

.osr-pt-swiper .osr-pt-product {
  height: 100%;
}

/* before Swiper starts: no layout jump */
.osr-pt-swiper:not(.swiper-initialized) .swiper-slide {
  flex: 0 0 calc((100% - 60px) / 4);
  margin-right: 20px;
}

@media (max-width: 991px) {
  .osr-pt-swiper:not(.swiper-initialized) .swiper-slide {
    flex-basis: calc((100% - 40px) / 3);
  }
}

@media (max-width: 639px) {
  .osr-pt-swiper:not(.swiper-initialized) .swiper-slide {
    flex-basis: calc((100% - 20px) / 2);
  }
}

/* ---------------- common space between a centred section header and its content ----------------
   One token drives every section title (home, about, product, collection, landing pages, related). */
:root {
  --arro-title-gap: 64px;
}

@media (max-width: 849px) {
  :root {
    --arro-title-gap: 44px;
  }
}

@media (max-width: 549px) {
  :root {
    --arro-title-gap: 32px;
  }
}

html body .osr-products-tabs-title,
html body .osr-product-slider-main-title,
html body .osr-vision-card-heading,
html body .osr-horizontal-timeline-main-title,
html body .osr-video-slider-heading,
html body .osr-image-box-main-title,
html body .osr-faq-main-title,
html body .osr-testimonial-slider-main-title,
html body .how-to-use-section-heading,
html body .arro-lp-h.arro-lp-center,
html body .arro-rel .arro-rel__heading {
  margin-top: 0;
  margin-bottom: var(--arro-title-gap) !important;
  padding-bottom: 0 !important;
}

html body .osr-video-slider-heading-wrap {
  margin-bottom: 0 !important;
}

html body .arro-rel .arro-rel__grid {
  margin-top: 0;
}

html body .page-width>h2.title.inline-richtext {
  margin-bottom: var(--arro-title-gap) !important;
  padding-bottom: 0 !important;
}

/* ---------------- PDP subtitle (Shopify metafield custom.product_subtitle, e.g. "15,000 Puffs") ---------------- */
html body .summary .arro-pdp-subtitle {
  margin: 4px 0 6px;
  padding: 0;
  color: var(--arro-blue);
  text-transform: uppercase;
  font-family: var(--font-title-semibold, "title_semibold", sans-serif);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: .6px;
}
/* ---------------- PDP breadcrumb, title, rating, live price — same as Shopify ---------------- */
html body .arro-breadcrumb {
  text-transform: none; font-size: 13px; line-height: 1.6; letter-spacing: .3px;
  color: rgba(18, 18, 18, .75); font-family: var(--font-title-medium, "title_medium", sans-serif); margin: 8px 0 12px;
}
html body .arro-breadcrumb a { color: var(--arro-blue); text-transform: none; font-weight: 400; }
html body .arro-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 2px; }
html body .arro-breadcrumb .divider { color: rgba(18, 18, 18, .4); margin: 0 2px; }
html body .arro-breadcrumb .arro-bc-current { color: #333; font-weight: 600; text-transform: none; }

/* Title: Shopify shows this in normal case/weight, not the heavy uppercase display face. */
html body.single-product .product_title,
html body.single-product h1.product-title,
html body.single-product .product-title.product_title.entry-title {
  font-family: var(--font-text-regular, "text_regular", sans-serif) !important;
  font-weight: 400 !important; text-transform: none !important; letter-spacing: normal !important; color: #121212 !important;
  font-size: 28px !important; line-height: 1.3 !important; margin: 0 0 6px !important;
}

/* Rating: Judge.me/native stars already blue — just tighten the row + link to match "★★★★☆ (376)". */
html body.single-product .woocommerce-product-rating { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
html body.single-product .woocommerce-product-rating .star-rating { margin: 0; }
html body.single-product .woocommerce-review-link { color: var(--arro-blue); font-size: 15px; text-decoration: none; }
html body.single-product .woocommerce-review-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Live price: regular (struck through) + sale, updated by the purchase-widget JS on every selection change. */
html body.single-product .price-wrapper .price.product-page-price { font-size: 28px; line-height: 1.3; font-weight: 400; color: #121212; letter-spacing: .3px; }
html body .arro-live-price del { color: rgba(18, 18, 18, .5); font-size: 18px; font-weight: 400; text-decoration: line-through; margin-right: 8px; }
html body .arro-live-price ins { text-decoration: none; background: none; }

/* Testimonials: author / customer images removed site-wide (landing pages, PDP, home, collections, Craving Cubes) */
html body .osr-testimonial-slider-slide-image-content,
html body .arb-reviews__avatar { display: none !important; }
html body .arro-lp .arro-lp-ts__photo { display: none !important; }
html body .arro-lp .arro-lp-ts__img { aspect-ratio: auto; background: #fff; padding: 16px; display: flex; align-items: center; }
html body .arro-lp .arro-lp-ts__overlay { position: static; transform: none; max-width: 100%; padding: 0; }