@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════
   AGE GATE
   ═══════════════════════════════════════════════════════════ */
.pocky-age-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6, 1.5rem);
  background: rgba(15, 15, 15, 0.82);
  -webkit-backdrop-filter: saturate(140%) blur(20px);
  backdrop-filter: saturate(140%) blur(20px);
}

.pocky-age-verified .pocky-age-gate {
  display: none;
}

.pocky-age-gate-active,
.pocky-age-gate-active body {
  overflow: hidden;
}

.pocky-age-gate__panel {
  position: relative;
  width: min(100%, 36rem);
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 6vw, 4rem);
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.16));
  color: var(--color-text, #1d1d1f);
  text-align: center;
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.12));
}

.pocky-age-gate__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-2xl, clamp(2rem, 1.2rem + 2.5vw, 3.5rem));
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.pocky-age-gate__description {
  max-width: 25rem;
  margin: var(--space-6, 1.5rem) auto 0;
  color: var(--color-text-muted, #6e6e73);
  font-family: var(--font-body);
  font-size: var(--text-sm, 0.9375rem);
  font-weight: 400;
  line-height: 1.55;
}

.pocky-age-gate__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3, 0.75rem);
  margin-top: var(--space-12, 3rem);
}

.pocky-age-gate__button {
  position: relative;
  min-height: 3.5rem;
  padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
  border: 1px solid var(--color-interactive, #0f0f0f);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs, 0.8125rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--transition-interactive, 180ms ease),
    color var(--transition-interactive, 180ms ease),
    transform var(--transition-interactive, 180ms ease);
}

.pocky-age-gate__button--confirm {
  background: var(--color-bg, #fff);
  color: var(--color-interactive, #0f0f0f);
}

.pocky-age-gate__button--reject {
  background: transparent;
  color: var(--color-interactive, #0f0f0f);
}

.pocky-age-gate__button--confirm:hover {
  background: var(--color-interactive, #0f0f0f);
  color: var(--color-bg, #fff);
}

.pocky-age-gate__button--reject:hover {
  background: var(--color-interactive, #0f0f0f);
  color: var(--color-bg, #fff);
}

.pocky-age-gate__button:active {
  transform: scale(0.98);
}

.pocky-age-gate__button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--color-interactive, #0f0f0f);
}

@media (max-width: 480px) {
  .pocky-age-gate {
    align-items: flex-end;
    padding: var(--space-3, 0.75rem);
  }

  .pocky-age-gate__panel {
    padding: var(--space-12, 3rem) var(--space-6, 1.5rem)
      var(--space-8, 2rem);
  }
}

/* ── POCKY · Leverans ─────────────────────────────── */
.pocky-leverans {
  --pl-text: #1a1a1a;
  --pl-border: #1a1a1a;
  --pl-mono: 'JetBrains Mono', 'Courier New', monospace;
  --pl-sans: 'Inter', -apple-system, sans-serif;

  color: var(--pl-text);
  font-family: var(--pl-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 32px 120px;
}

.pocky-leverans .pl-title {
  font-family: var(--pl-sans);
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: -0.01em;
}

.pocky-leverans .pl-updated {
  font-family: var(--pl-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 16px;
  font-weight: 500;
}

.pocky-leverans h2 {
  font-family: var(--pl-sans);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0 0 20px;
}

.pocky-leverans h3 {
  font-family: var(--pl-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 24px 0 12px;
}

.pocky-leverans h3:first-child {
  margin-top: 0;
}

.pocky-leverans p {
  font-family: var(--pl-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.pocky-leverans p:last-child {
  margin-bottom: 0;
}

.pocky-leverans ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.pocky-leverans ul li {
  font-family: var(--pl-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding-left: 20px;
  position: relative;
  margin-bottom: 6px;
}

.pocky-leverans ul li::before {
  content: "•";
  position: absolute;
  left: 6px;
  top: 0;
}

.pocky-leverans .pl-intro {
  margin-bottom: 48px;
}

.pocky-leverans section {
  margin-bottom: 48px;
}

.pocky-leverans section:last-of-type {
  margin-bottom: 0;
}

.pocky-leverans .pl-sep {
  border: 0;
  border-top: 1px solid var(--pl-border);
  margin: 48px 0;
  opacity: 0.3;
}

.pocky-leverans .pl-contact {
  font-family: var(--pl-mono);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pocky-leverans .pl-contact strong {
  font-weight: 700;
  display: inline-block;
  min-width: 100px;
}

.pocky-leverans .pl-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
  border-radius: 2px;
}

.pocky-leverans .pl-link:hover {
  opacity: 0.6;
}

.pocky-leverans .pl-link:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--pl-border);
}

@media (max-width: 768px) {
  .pocky-leverans {
    padding: 48px 24px 80px;
  }
  .pocky-leverans .pl-title {
    font-size: 24px;
  }
  .pocky-leverans h2 {
    font-size: 16px;
  }
}

:root {
    --color-primary: #222222;
    --color-accent: #000000;

    --color-success: rgba(190 251 224);
    --color-alert: rgba(253 164 175);

    --color-foreground: rgb(50,50,50);

    --bg-body: #ffffff;
    --bg-header: rgb(255, 255, 255);
    --bg-footer: rgb(255, 255, 255);
    --bg-overlay: 146, 146, 146;

    --breakpoint-mobile: 1024px;

    --gap: 1rem;

    /* Swiper */
    --swiper-navigation-color: var(--color-foreground);
    --swiper-pagination-color: var(--color-accent);
    --swiper-navigation-size: 2rem;
    --swiper-theme-color: var(--color-primary);

    /* ── Bible Design Tokens ─────────────────────────────── */
    /* Type scale — fluid clamp (Apple spec) */
    --text-xs:    clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm:    clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    --text-base:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-lg:    clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
    --text-xl:    clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
    --text-2xl:   clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
    --text-hero:  clamp(3rem, 0.5rem + 7vw, 8rem);

    /* Spacing — 4px base, rem */
    --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
    --space-4: 1rem;     --space-6: 1.5rem;   --space-8: 2rem;
    --space-12: 3rem;    --space-16: 4rem;    --space-20: 5rem;
    --space-24: 6rem;    --space-30: 7.5rem;

    /* Color — Monochrome only */
    --color-bg:               #FFFFFF;
    --color-surface:          #F5F5F7;
    --color-border:           rgba(0, 0, 0, 0.16);
    --color-text:             #1D1D1F;
    --color-text-muted:       #6E6E73;
    --color-text-subtle:      #A1A1A6;
    --color-interactive:      #0F0F0F;
    --color-interactive-hover:#333335;

    /* Shadows — warm-toned OKLCH (never pure black) */
    --shadow-sm: 0 1px 2px oklch(0.2 0.01 80 / 0.06);
    --shadow-md: 0 4px 12px oklch(0.2 0.01 80 / 0.08);
    --shadow-lg: 0 12px 32px oklch(0.2 0.01 80 / 0.12);

    /* Radius */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-pill: 980px;

    /* Transitions — Apple-exact easing */
    --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
    --ease-entry:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-exit:   cubic-bezier(0.4, 0, 1, 1);

    /* Content widths */
    --content-narrow:  640px;
    --content-default: 960px;
    --content-nav:     1024px;
    --content-wide:    1200px;
}











:root {
    --font-body: 'Roboto', sans-serif;
    --font-heading: 'Roboto',
sans-serif;
}

body {
    background-color: var(--bg-body, #ffffff);
    overflow-x: clip;
}

html {
    overflow-x: clip;
    max-width: 100%;
}

.font-body {
    font-family: 'Roboto', sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Roboto',
sans-serif;
    line-height: 120%;
}

/**
 * Colors
 */

.text-primary {
    color: var(--color-primary);
}
.hover\:text-primary:hover {
    color: var(--color-primary);
}
.ring-primary,
.ring-primary:focus {
    --tw-ring-color: var(--color-primary);
}

.text-highlight {
    color: var(--color-accent);
}
.hover\:text-highlight:hover {
    color: var(--color-accent);
}
.ring-highlight {
    --tw-ring-color: var(--color-highlight);
}

.text-body {
    color: var(--color-foreground);
}
.hover\:text-body:hover {
    color: var(--color-foreground);
}
.border-text-body {
    border-color: var(--color-foreground);
}
.hover\:border-text-body:hover {
    border-color: var(--color-foreground);
}

.bg-primary {
    background-color: var(--color-primary) !important;
}
.hover\:bg-primary:hover {
    color: var(--color-primary);
}
.border-primary {
    border-color: var(--color-primary);
}


.bg-secondary {
    background-color: rgba(50,50,50, 0.05);
}

.bg-highlight {
    background-color: var(--color-accent) !important;
}
.hover\:bg-highlight:hover {
    color: var(--color-accent);
}

.bg-success {
    background: var(--color-success);
}

.bg-alert {
    background: var(--color-alert);
}

.bg-body {
    background-color: var(--bg-body);
}

.bg-header {
    background-color: var(--bg-header);
}

/* Active nav link — subtle underline indicator */
a.nav-active {
  color: rgba(0,0,0,1) !important;
  font-weight: 500 !important;
  position: relative !important;
}

a.nav-active::after {
  content: '' !important;
  position: absolute !important;
  bottom: 10px !important;
  left: 8px !important;
  right: 8px !important;
  height: 1.5px !important;
  background: rgb(29,29,31) !important;
  border-radius: 1px !important;
}

.bg-footer {
    background-color: var(--bg-footer);
}

.bg-overlay {
    background-color: rgba(var(--bg-overlay), var(--tw-bg-opacity));
}

.border-highlight {
    border-color: var(--color-accent) !important;
}

.decoration-primary {
    text-decoration-color: var(--color-primary);
}

.gap-default {
    gap: var(--gap);
}


/**
 * Disable spinner arrows on number inputs
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/**
 * Cart bubble tweaks
 */
.cart-bubble.text-xs {
    font-size: 0.7rem;
    line-height: 1;
}

/**
 * Tailwind
 */
[multiple]:focus, [type=date]:focus, [type=datetime-local]:focus, [type=email]:focus, [type=month]:focus, [type=number]:focus, [type=password]:focus, [type=search]:focus, [type=tel]:focus, [type=text]:focus, [type=time]:focus, [type=url]:focus, [type=week]:focus, select:focus, textarea:focus {
    --tw-ring-color: var(--color-primary);
    outline: none;
    border-color: var(--color-primary);
}

/**
 * PhotoSwipe
 */
.pswp {
    --pswp-icon-color-secondary: var(--color-foreground);
    --pswp-icon-color: var(--color-foreground);
    --pswp-bg: var(--bg-body);
    --pswp-icon-stroke-color: var(--pswp-bg);
}

.pswp img {
    max-width: none;
    object-fit: contain;
}

.pswp__img--placeholder {
    display: none !important;
}

.pswp__counter {
    font-weight: bold;
    text-shadow: 0 0 2px var(--pswp-bg)
}

/**
 * Swiper
 */


/**
 * Breadcrumb
 */
[data-qb-setting="show_breadcrumbs"] {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
[data-qb-setting="show_breadcrumbs"] a,
[data-qb-setting="show_breadcrumbs"] p {
    font-size: 0.65rem !important;
    letter-spacing: 0.03em !important;
}
[data-qb-setting="show_breadcrumbs"] svg {
    width: 0.35rem !important;
    height: 0.35rem !important;
}

/** Fix for pinch zoom on main product image */
.swiper.swiper-horizontal {
    touch-action: auto;
}

.swiper-button-next,
.swiper-button-prev {
    width: auto;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    display: none
}

.swiper-button-next:after,
.swiper-button-prev:after {
    content: '';
}

/**
 * Hero Slider
 */
.hero-slider {
    transition: height 0.3s ease;
    min-height: 300px;
}

@media (min-width: 768px) {
    .hero-slider {
        min-height: 400px;
    }
}

.hero-slider .swiper-slide {
    height: 100%;
}

.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev {
    color: white;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
}

.hero-slider .swiper-button-next:hover,
.hero-slider .swiper-button-prev:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
}

/* Remove Swiper's default arrow pseudo-elements */
.hero-slider .swiper-button-next:after,
.hero-slider .swiper-button-prev:after {
    content: none;
}

/* Style the SVG icons inside the arrow buttons */
.hero-slider .swiper-button-next svg,
.hero-slider .swiper-button-prev svg {
    stroke: white;
    stroke-width: 2.5;
}

.hero-slider .swiper-pagination {
    bottom: 20px;
}

.hero-slider .swiper-pagination-bullet {
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background: white;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.hero-slider .swiper-pagination-bullet-active {
    opacity: 1;
    background: white;
    width: 36px;
    border-radius: 2px;
}

.bg-dark-overlay {
    background: rgba(0, 0, 0, 0.4);
}

.bg-light-overlay {
    background: rgba(255, 255, 255, 0.4);
}

.products-swiper-main {
    min-height: 200px;
}

.products-swiper-thumbs {
    --swiper-navigation-size: 30px;
}

.swiper-slide-thumb-active {
    opacity: 100 !important;
}

@media (max-width: 767px) {
    .products-swiper-main {
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .products-swiper-main .swiper-slide img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }
}
@media (min-width: 768px) {
    .products-swiper-main .swiper-slide img {
        max-height: none;
    }
}

/**
 * Tailwind 
 */

.aspect-1\/1 {
    aspect-ratio: 1 / 1;
}

.aspect-4\/3 {
    aspect-ratio: 4 / 3;
}

.aspect-3\/2 {
    aspect-ratio: 3 / 2;
}

.aspect-3\/4 {
    aspect-ratio: 3 / 4;
}

select:not([size]) {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.focus\:outline-none:focus {
    --tw-ring-color: transparent;
}

.break-words {
    overflow-wrap: anywhere !important;
}

/* "Polyfill" for Tailwind */
.group:hover .group-hover\:scale-105{
    transform: scale(1.05);
}

/* ══════════════════════════════════════════════════════════
   SEARCH — Full-width animated dropdown
══════════════════════════════════════════════════════════ */

/* Backdrop — appended to <body> by search.js, outside header stacking context */
.search-body-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  z-index: 29; /* below header (z-30), above page content */
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}
.search-body-overlay--visible {
  opacity: 1;
}

/* Dropdown panel */
.search-panel {
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  will-change: transform, opacity;
}
.search-panel-enter { transition: opacity 360ms cubic-bezier(0.16, 1, 0.3, 1), transform 360ms cubic-bezier(0.16, 1, 0.3, 1); }
.search-panel-leave { transition: opacity 200ms cubic-bezier(0.4, 0, 1, 1),  transform 200ms cubic-bezier(0.4, 0, 1, 1); }
.search-panel-hidden  { opacity: 0; transform: translateY(-14px); }
.search-panel-visible { opacity: 1; transform: translateY(0); }

/* Inner container — matches header/footer alignment */
.search-panel-inner {
  max-width: 1536px;
  margin: 0 auto;
  padding: var(--space-8) 1rem var(--space-6);
}

/* Form row */
.search-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-6);
}

/* ── Wave input ─────────────────────────────────────────── */
.wave-group {
  position: relative;
  flex: 1;
}
.wave-group .input {
  font-size: var(--text-lg);
  font-family: inherit;
  padding: var(--space-3) 0;
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  box-shadow: none;
}
.wave-group .input:focus {
  outline: none;
  border-color: transparent;
  border-bottom-color: var(--color-border);
  box-shadow: none;
  --tw-ring-color: transparent;
  --tw-ring-shadow: 0 0 #0000;
}
.wave-group .label {
  color: var(--color-text-subtle);
  font-size: var(--text-lg);
  font-weight: 400;
  position: absolute;
  pointer-events: none;
  left: 0;
  top: var(--space-3);
  display: flex;
}
.wave-group .label-char {
  transition: 0.2s ease all;
  transition-delay: calc(var(--index) * 0.04s);
}
.wave-group .input:focus ~ .label .label-char,
.wave-group .input:not(:placeholder-shown) ~ .label .label-char {
  transform: translateY(-22px);
  font-size: var(--text-xs);
  color: var(--color-interactive);
}
.wave-group .bar {
  position: relative;
  display: block;
  width: 100%;
}
.wave-group .bar::before,
.wave-group .bar::after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: var(--color-interactive);
  transition: 0.28s cubic-bezier(0.16, 1, 0.3, 1) all;
}
.wave-group .bar::before { left: 50%; }
.wave-group .bar::after  { right: 50%; }
.wave-group .input:focus ~ .bar::before,
.wave-group .input:focus ~ .bar::after {
  width: 50%;
}

/* Cancel button */
.search-cancel-btn {
  flex-shrink: 0;
  padding: var(--space-3) 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
  transition: color var(--transition-interactive);
  white-space: nowrap;
}
.search-cancel-btn:hover {
  color: var(--color-text);
}

/* Results grid */
.search-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
  max-height: 48vh;
  overflow-y: auto;
  padding-bottom: var(--space-2);
}
.search-result-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-text);
  transition: opacity var(--transition-interactive);
}
.search-result-item:hover { opacity: 0.65; }
.search-result-img {
  aspect-ratio: 1;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.search-result-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.search-result-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.search-result-title {
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-result-price {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* No results */
.search-empty {
  padding: var(--space-8) 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Settings dropdown - shares the search panel shell */
.settings-panel-header {
  display: flex;
  align-items: flex-end;
  gap: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.settings-panel-title {
  flex: 1;
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text);
}

.settings-panel-content {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-6);
  max-height: 48vh;
  overflow-y: auto;
  padding-bottom: var(--space-2);
}

.settings-panel-section {
  min-width: 0;
}

.settings-panel-section-title {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.settings-option-grid {
  display: grid;
  gap: var(--space-2);
}

.settings-option-grid--inline {
  grid-template-columns: repeat(auto-fit, minmax(96px, max-content));
}

.settings-option {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.2;
  text-decoration: none;
  transition:
    border-color var(--transition-interactive),
    background-color var(--transition-interactive),
    color var(--transition-interactive);
}

.settings-option:hover {
  border-color: var(--color-text);
}

.settings-option:focus-visible {
  outline: none;
  border-color: var(--color-text);
  box-shadow: 0 0 0 1px var(--color-text);
}

.settings-option--active {
  border-color: var(--color-text);
  background: var(--color-text);
  color: #fff;
}

.settings-option-check {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.settings-option-check svg {
  width: 1rem;
  height: 1rem;
}

.settings-option-flag {
  width: 1.25rem;
  height: auto;
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  .settings-panel-header {
    align-items: center;
  }

  .settings-panel-content {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    max-height: 62vh;
  }
}

/**
 * Wishlist
 */
.wishlist-alert {
    background: var(--color-success);
    font-size: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.wishlist-alert i {
    display: none;
}

.wishlist-alert .wishlist-addok {
    background: #f00;
}

/**
 * Login
 */

.login,
.register {
    max-width: 24rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.login div,
.register div {
    width: 100% !important;
}

.login form,
.register form {
    margin-top: 3rem;
    text-align: left;
}

.login label,
.register label {
    display: block;
    margin-bottom: 0.5rem;
    text-align: left;
    font-size: 0.875rem;
}

.login label.cursor,
.register label.cursor {
    padding: 1rem 0;
}

.login label.cursor + label.cursor,
.register label.cursor + label.cursor {
    margin-left: 1rem;
}

.login label.cursor,
.register label.cursor,
.login label.cursor > input[type="radio"],
.register label.cursor > input[type="radio"] {
    display: inline-block;
    width: auto;
    cursor: pointer;
}

.login label.cursor > input[type="radio"],
.register label.cursor > input[type="radio"] {
    margin-right: .5rem;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-primary);
    --tw-ring-color: var(--color-primary);
}

.login input[type="text"],
.login input[type="email"],
.login input[type="password"],
.register input[type="text"],
.register input[type="email"],
.register input[type="password"] {
    border: 1px solid #e5e7eb;
    padding: 0.4rem 0.8rem;
    display: block;
    border-radius: 0.25rem;
    width: 100%;
    margin-bottom: 1rem;
}

.login .btn-inverse,
.register .btn-inverse,
.register hr + div > a[href] {
    margin: 1rem 0 2rem 0;
    background-color: var(--color-primary);
    color: #ffffff;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border: none;
    cursor: pointer;
    border-radius: 0.25rem;
    width: 100%;
}

.register hr + div a[href] {
    padding: 0.75rem 2rem;
}

.login .btn-inverse :hover,
.register .btn-inverse :hover {
    background-color: var(--color-foreground);
}

.login br,
.register br {
    display: none;
}

.login .btn-inverse:hover,
.register .btn-inverse:hover {
    background-color: var(--color-foreground);
}

.login hr,
.register hr {
    margin-bottom: 2rem;
}

.login hr + div,
.register hr + div {
    display: block;
}

.login hr + div > a,
.register hr + div > a[href] {
    display: block;
    margin-bottom: 1rem;
    font-size: 1rem !important;
    color: var(--color-primary);
}

.login hr + div > a:hover,
.register hr + div > a:hover {
    color: var(--color-foreground);
}

.login hr + div a.btn,
.register hr + div a[href] {
    display: block;
    background: transparent;
    font-size: 1rem !important;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.login hr + div a.btn:hover,
.register hr + div a:hover {
    background: transparent;
    color: var(--color-foreground);
    border-color: var(--color-foreground);
}

.customerarea_login_message {
    margin-bottom: 2rem !important;
}

/**
 * Fix for image alignment
 */
img.fr-dib {
    margin: 5px auto
}

img.fr-dib.fr-fil {
    margin-left: 0;
}

img.fr-dib.fr-fir {
    margin-right: 0;
}

/* ================================
   Apple-style Header
   ================================ */

/* Frosted glass background */
[data-qb-area="header"] {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Slim header with breathing room — 2rem from each edge */
[data-qb-area="header"] header {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

[data-qb-area="header"] nav > div {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
    max-width: 1536px !important;
      margin-left: auto !important;
        margin-right: auto !important;
          padding-left: 1rem !important;
            padding-right: 1rem !important;

}

/* Logo — slightly bigger than nav text (nav=12px, logo ~16px height) */
[data-qb-area="header"] a[href] img {
  height: 0.7rem !important;
  max-height: 0.7rem !important;
  width: auto !important;
  object-fit: contain !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Override Alpine.js dynamic max-height classes */
[data-qb-area="header"] [class*="max-h-20"],
[data-qb-area="header"] [class*="max-h-12"] {
  max-height: 1rem !important;
  height: 1rem !important;
}

/* Nav text — Apple style ~12px, clean & compact */
[data-qb-area="header"] nav a,
[data-qb-area="header"] nav button {
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  color: rgba(0, 0, 0, 0.85) !important;
}

[data-qb-area="header"] nav a:hover,
[data-qb-area="header"] nav button:hover {
  color: rgba(0, 0, 0, 0.55) !important;
}

/* Smaller icons */
[data-qb-area="header"] nav a svg,
[data-qb-area="header"] nav button svg {
  width: 1.1rem !important;
  height: 1.1rem !important;
}

/* Compact icon button padding */
[data-qb-area="header"] nav a.px-2,
[data-qb-area="header"] nav button.px-2 {
  padding-left: 0.4rem !important;
  padding-right: 0.4rem !important;
}

/* Grid: consistent height */
[data-qb-area="header"] nav .grid {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 2rem !important;
}

/* Nav link items (Shop, Foretag, Blogg) */
[data-qb-area="header"] .nav-link,
[data-qb-area="header"] nav > div > div a {
  font-size: 0.75rem !important;
  color: rgba(0, 0, 0, 0.85) !important;
  opacity: 1 !important;
}

/* ============================================
   FOOTER — LAYOUT
   ============================================ */

/* Container — constrained width, side padding */
[data-qb-area="footer"] .mx-auto {
  max-width: 1536px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Top section: all footer columns flow together above the large logo */
.footer-top {
  display: block !important;
  padding-top: var(--space-16) !important;
  padding-bottom: var(--space-8) !important;
}

@media (max-width: 1023px) {
  .footer-top {
    padding-top: var(--space-12) !important;
    padding-bottom: var(--space-6) !important;
  }
}

/* Footer columns: menu + information + social + account + newsletter */
.footer-group {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--space-12) !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

@media (max-width: 1023px) {
  .footer-group {
    gap: var(--space-8) !important;
    flex-wrap: wrap !important;
  }
}

/* Column heading — small caps label */
.footer-col__heading {
  display: block !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--color-text) !important;
}

/* Link list inside a column */
.footer-col__list {
  list-style: none !important;
  padding: 0 !important;
  margin-top: var(--space-3) !important;
}

/* Individual footer link */
.footer-link {
  display: block !important;
  font-size: var(--text-xs) !important;
  color: var(--color-text-muted) !important;
  text-decoration: none !important;
  line-height: 1.9 !important;
  transition: color var(--transition-interactive) !important;
}
.footer-link:hover {
  color: var(--color-text) !important;
}

/* Social icons row */
.footer-social {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-3) !important;
  margin-top: var(--space-3) !important;
  flex-wrap: wrap !important;
}

.footer-social__link {
  display: inline-flex !important;
  color: var(--color-text-muted) !important;
  transition: color var(--transition-interactive) !important;
}
.footer-social__link:hover {
  color: var(--color-text) !important;
}
.footer-social__link svg {
  width: 1rem !important;
  height: 1rem !important;
}

/* Newsletter column — follows the other footer columns */
.footer-newsletter {
  flex: 0 1 420px !important;
  max-width: 420px !important;
  min-width: 280px !important;
}

@media (max-width: 1023px) {
  .footer-newsletter {
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ============================================
   NEWSLETTER FORM
   ============================================ */

#footer_newsletter_form {
  display: flex !important;
  align-items: flex-end !important;
  gap: var(--space-4) !important;
  margin-top: var(--space-4) !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

#footer_newsletter_form input[type="email"] {
  flex: 1 !important;
  border: none !important;
  border-bottom: 1px solid var(--color-border) !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 0 var(--space-2) 0 !important;
  font-size: var(--text-xs) !important;
  color: var(--color-text) !important;
  outline: none !important;
  letter-spacing: 0.03em !important;
  transition: border-color var(--transition-interactive) !important;
}
#footer_newsletter_form input[type="email"]:focus {
  border-bottom-color: var(--color-text) !important;
}
#footer_newsletter_form input[type="email"]::placeholder {
  color: var(--color-text-subtle) !important;
}

/* Subscribe button — banner-btn pattern (sliding fill + roll text) */
.footer-subscribe-btn {
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 1px solid var(--color-interactive) !important;
  color: var(--color-interactive) !important;
  padding: var(--space-3) var(--space-6) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-family: inherit !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: color 300ms var(--ease-entry) !important;
}

/* Sliding fill from bottom */
.footer-subscribe-btn::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--color-interactive) !important;
  transform: translateY(105%) !important;
  transition: transform 300ms var(--ease-entry) !important;
  z-index: 0 !important;
}
.footer-subscribe-btn:hover::before {
  transform: translateY(0) !important;
}
.footer-subscribe-btn:hover {
  color: var(--color-bg) !important;
}
.footer-subscribe-btn:active {
  transform: scale(0.97) !important;
}

/* Roll text inside the button */
.footer-subscribe-btn .roll-btn__text {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  transition: transform 300ms var(--ease-entry) !important;
}
.footer-subscribe-btn .roll-btn__text:last-child {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateY(100%) !important;
  color: var(--color-bg) !important;
}
.footer-subscribe-btn:hover .roll-btn__text:first-child {
  transform: translateY(-150%) !important;
}
.footer-subscribe-btn:hover .roll-btn__text:last-child {
  transform: translateY(0) !important;
}

/* Large footer logo */
.footer-logo {
  padding: var(--space-6) 0 var(--space-8) !important;
}

.footer-logo__link {
  display: block !important;
  color: inherit !important;
  text-decoration: none !important;
}

.footer-logo__img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 220px !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: left center !important;
}

@media (max-width: 768px) {
  .footer-logo {
    padding: var(--space-4) 0 var(--space-6) !important;
  }

  .footer-logo__img {
    max-height: 120px !important;
  }
}

/* ============================================
   FOOTER DIVIDER + BOTTOM BAR
   ============================================ */

.footer-divider {
  border: none !important;
  border-top: 1px solid var(--color-border) !important;
  margin: 0 !important;
}

.footer-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-4) !important;
  padding: var(--space-4) 0 !important;
  flex-wrap: wrap !important;
}

/* Payment icons row */
.footer-payment {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  flex-wrap: wrap !important;
}
.footer-payment img {
  height: 1.1rem !important;
  width: auto !important;
  background: white !important;
  border-radius: 2px !important;
}

/* Copyright */
.footer-copyright {
  font-size: var(--text-xs) !important;
  color: var(--color-text-subtle) !important;
  margin: 0 !important;
}

/* Hide "Powered by Quickbutik" */
[data-qb-area="footer"] p[data-qb-setting="use_footer_poweredby"] span {
  display: none !important;
}
/* ============================================
   BANNER — DESIGN
   ============================================ */

.banner-grid {
  display: grid !important;
  gap: 3px !important;
  width: 100% !important;
  align-items: start !important;
}

.banner-grid--one {
  grid-template-columns: minmax(0, 1fr) !important;
}

.banner-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Banner card — height follows the displayed image's natural aspect ratio. */
.banner-card {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  background-color: var(--color-surface) !important;
}

@media (max-width: 1023px) {
  .banner-grid--two {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Picture participates in layout so the banner adopts the image height. */
.banner-card > picture {
  display: block !important;
  width: 100% !important;
}

/* Image — scales proportionally without cropping, zooming, or empty side gaps. */
.banner-card__img {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  object-fit: initial !important;
  object-position: center center !important;
  display: block !important;
  transform: none !important;
  transition: none !important;
}


/* ── BANNER OVERLAY
   Mobile  (<1024px): centred horizontally at bottom of image.
   Desktop (≥1024px, QB lg: breakpoint): anchored bottom-left. */
.banner-card__overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  z-index: 2 !important;
}

@media (min-width: 1024px) {
  .banner-card__overlay {
    justify-content: flex-start !important;
  }
}

/* Text overlay — transparent, black, and scaled for the banner image ratios. */
.banner-card__text {
  background: transparent !important;
  color: #000 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: var(--content-narrow) !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 var(--space-6) var(--space-8) var(--space-6) !important;
}

@media (min-width: 1024px) {
  .banner-card__text {
    align-items: flex-start !important;
    text-align: left !important;
    padding: 0 var(--space-8) var(--space-16) var(--space-20) !important;
  }
}

/* Title — responsive size without forced line breaks. */
.banner-card__title {
  color: inherit !important;
  font-size: clamp(22px, 6vw, 34px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.022em !important;
  line-height: 1 !important;
  word-spacing: normal !important;
}

@media (min-width: 1024px) {
  .banner-card__title {
    font-size: clamp(32px, 3vw, 48px) !important;
    line-height: 0.98 !important;
  }
}

/* Description — tighter max-width on mobile so centred text stays readable */
.banner-card__desc {
  font-size: clamp(13px, 2.8vw, 15px) !important;
  line-height: 1.45 !important;
  color: inherit !important;
  opacity: 0.85 !important;
  margin-top: var(--space-3) !important;
  max-width: 34ch !important;
}

@media (min-width: 1024px) {
  .banner-card__desc {
    font-size: clamp(14px, 1vw, 16px) !important;
    max-width: 60ch !important;
  }
}

/* CTA wrapper — mobile: centred, never stretched */
.banner-cta-wrap {
  display: flex !important;
  justify-content: center !important;
  margin-top: var(--space-6) !important;
  width: auto !important;
}

@media (min-width: 1024px) {
  .banner-cta-wrap {
    justify-content: flex-start !important;
  }
}

/* ============================================
   BANNER BUTTONS — thenobar outline style
   Transparent bg + currentColor border, inverts on hover.
   Works on any banner: white text over dark images,
   or black text over light images.
   ============================================ */

.banner-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Never full-width — padding drives the size on all screens */
  width: auto;
  min-width: 160px;
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0;
  color: #000 !important;
  border-color: #000 !important;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    color 300ms var(--ease-entry),
    transform var(--transition-interactive);
}

/* Sliding fill — slower than product btn for a more premium feel */
.banner-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-interactive);
  transform: translateY(105%);
  transition: transform 300ms var(--ease-entry);
  z-index: 0;
}

.banner-btn:hover::before {
  transform: translateY(0);
}

.banner-btn:hover {
  color: var(--color-bg) !important;
}

/* Roll text — 300ms to match fill speed */
.banner-btn .roll-btn__text {
  transition: transform 300ms var(--ease-entry);
}

.banner-btn:hover .roll-btn__text:first-child {
  transform: translateY(-150%);
}

.banner-btn:hover .roll-btn__text:last-child {
  transform: translateY(0);
  color: var(--color-bg) !important;
}

@media (min-width: 1024px) {
  .banner-btn {
    min-height: 44px;
  }
}

.banner-btn:active {
  transform: translateY(0) scale(0.97);
}

.banner-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
/* ============================================
   PRODUCT SLIDER
   ============================================ */

[data-qb-element="productslider"] {
  background-color: var(--color-bg) !important;
  padding-top: var(--space-16) !important;
  padding-bottom: var(--space-16) !important;
  margin: 0 !important;
}

/* Header — section title left, description right */
[data-qb-element="productslider"] .section-header {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  margin-bottom: var(--space-8) !important;
}

[data-qb-element="productslider"] .section-desc {
  margin-left: var(--space-8) !important;
}

/* ── PRODUCT CARD BASE ──────────────────────── */
[data-qb-element="productslider"] .product,
[data-qb-element="products"] .product {
  background-color: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* No lift — card stays in place on hover */
[data-qb-element="productslider"] .product:hover,
[data-qb-element="products"] .product:hover {
  transform: none !important;
}

/* ── IMAGE WRAPPER ──────────────────────────── */
/* 4 / 5 ratio matches the product-page thumbnail strip and gives the card a
   slightly taller, more editorial silhouette than the previous 3/4. */
[data-qb-element="productslider"] .product .relative.group,
[data-qb-element="products"] .product .relative.group {
  background-color: transparent !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  aspect-ratio: 4 / 5 !important;
}

/* Dark overlay fades in on hover — no zoom, no shadow, no movement */
[data-qb-element="productslider"] .product .relative.group::after,
[data-qb-element="products"] .product .relative.group::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: transparent !important;
  transition: background 300ms var(--ease-entry) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

[data-qb-element="productslider"] .product:hover .relative.group::after,
[data-qb-element="products"] .product:hover .relative.group::after {
  background: oklch(0.1 0 0 / 0.18) !important;
}

[data-qb-element="productslider"] .product .relative.group img,
[data-qb-element="products"] .product .relative.group img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 0 !important;
}

/* Pagination dots — hidden */
[data-qb-element="productslider"] .swiper-pagination {
  display: none !important;
}

/* Slide bottom padding */
[data-qb-element="productslider"] .swiper-slide {
  padding-bottom: var(--space-4) !important;
}

/* Swiper overflows to right edge */
[data-qb-element="productslider"] .swiper {
  overflow: visible !important;
}

/* Info block — consistent internal padding on both slider and grid.
   Overrides Tailwind pt-2 and the inline padding-right: 0.75rem on the div. */
[data-qb-selector="product-item"] > a + div {
  padding: var(--space-3) var(--space-3) var(--space-4) !important;
}

/* Bottom action row — full width, tight gap */
[data-qb-selector="product-item"] > a + div > div:last-child {
  width: 100% !important;
  gap: var(--space-2) !important;
  padding-top: var(--space-3) !important;
}

/* Slider-specific: remove the old flex.flex-col override (superseded above) */
[data-qb-element="productslider"] .product .flex.flex-col {
  padding-top: 0 !important;
  padding-right: 0 !important;
}

/* Stock status — monochrome only, no green/rose Tailwind colors */
[data-qb-selector="product-item"] [data-qb-element="product_lists_show_stockstatus"] {
  background-color: var(--color-surface) !important;
  color: var(--color-text-muted) !important;
  border-radius: 0 !important;
}

/* ============================================
   PRODUCT CARD — QTY SELECTOR + KÖP BUTTON
   ============================================ */

/* Hide QB's native submit button — replaced by product-buy-btn */
[data-qb-element="productslider"] .qs-cart-submit,
[data-qb-element="products"] .qs-cart-submit {
  display: none !important;
}

/* Qty dropdown trigger — compact, fixed width; buy button fills the rest */
.pq-select {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  cursor: pointer !important;
  position: static !important;
  color: var(--color-text) !important;
  overflow: visible !important;
}

.pq-selected {
  width: 100% !important;
  /* Transparent bg + border matches .product-buy-btn exactly — same height, same visual weight */
  background: transparent !important;
  border: 1px solid currentColor !important;
  padding: var(--space-2) var(--space-3) !important;
  height: auto !important;
  border-radius: 0 !important;
  position: relative !important;
  z-index: 25 !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-2) !important;
  font-family: inherit !important;
  white-space: nowrap !important;
  color: var(--color-text) !important;
}

.pq-selected::before {
  content: attr(data-default) !important;
  color: var(--color-text) !important;
}

.pq-select:has(#pq-opt1-:checked) .pq-selected::before {
  content: attr(data-one) !important;
}
.pq-select:has(#pq-opt2-:checked) .pq-selected::before {
  content: attr(data-two) !important;
}
.pq-select:has(#pq-opt3-:checked) .pq-selected::before {
  content: attr(data-three) !important;
}
.pq-select:has(#pq-opt4-:checked) .pq-selected::before {
  content: attr(data-four) !important;
}

.pq-arrow {
  height: 10px !important;
  width: 16px !important;
  fill: var(--color-text) !important;
  transform: rotate(-90deg) !important;
  transition: transform var(--transition-interactive) !important;
  flex-shrink: 0 !important;
}

.pq-arrow.open {
  transform: rotate(0deg) !important;
}

.pq-options {
  display: flex;
  flex-direction: column !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background-color: var(--color-bg) !important;
  position: absolute !important;
  bottom: calc(100% + var(--space-1)) !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  border: 1px solid currentColor !important;
  box-shadow: 0 4px 20px 0 rgba(0,0,0,0.05) !important;
}

.pq-option {
  border-radius: 0 !important;
  padding: 12px 12px !important;
  margin: 0 !important;
  transition: all 150ms linear !important;
  font-size: var(--text-xs) !important;
  font-family: inherit !important;
  color: var(--color-text) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.pq-option:last-child {
  border-bottom: none !important;
}

.pq-option--active {
  font-weight: 600 !important;
}

/* Hover — matching Codepen */
.pq-option:hover,
.pq-option--active {
  background-color: var(--color-surface) !important;
  color: var(--color-interactive) !important;
}

/* ── PRODUCT LIST GRID — GAPS ─────────────────────────────
   Rule: gap BETWEEN cards must be unmistakably larger than the
   gap BETWEEN buttons inside one card.
   Within-card button gap  = 4px  (space-1)
   Between-card column gap = 32px (space-8)  → 8× ratio
   Between-card row gap    = 48px (space-12) → breathing between rows
   ────────────────────────────────────────────────────────── */
/* Product-grid surfaces (category list, start_products, related products,
   productslider) share the catalog's 3px ICIW-hairline gap so the homepage,
   category, and product page all read with one consistent rhythm.
   `:has()` selector targets any grid that contains a product item — covers
   start_products, product_related, and any future surface using the same
   product_item partial without needing per-partial wrappers. */
#productList,
.grid:has(> [data-qb-selector="product-item"]) {
  gap: 3px !important;
}

/* ── PRODUCT CARD — MEDIA (IMAGE CONTAINER) ─── */
.product-card__media {
  position: relative !important;
  overflow: hidden !important;
}

.product-card__media-link {
  display: block !important;
  overflow: hidden !important;
}

/* Primary image — transitions always defined; hover only fires on
   pointer devices (see @media hover:hover below).              */
.product-card__img-primary {
  display: block !important;
  transition:
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 350ms ease !important;
}

/* Secondary image — absolute overlay */
.product-card__img-secondary {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  transition: opacity 400ms ease !important;
}

/* Hover effects — only on devices that support true hover
   (mouse/trackpad). Touch screens won't get stuck states.      */
@media (hover: hover) {
  .product-card__media:hover .product-card__img-primary {
    transform: scale(1.04) !important;
  }

  .product-card__media:hover .product-card__img-primary:not(:only-of-type) {
    opacity: 0 !important;
  }

  .product-card__media:hover .product-card__img-secondary {
    opacity: 1 !important;
  }
}

/* ── PRODUCT CARD — BODY (INFO BLOCK) ─────── */
.product-card__body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding-top: var(--space-3) !important;
  padding-bottom: var(--space-1) !important; /* slight bottom breath above grid gap */
}

/* ── PRODUCT CARD — ACTION ROW ────────────────────────────
   Gap within the row is intentionally tight (4px) so the two
   buttons read as ONE unit — contrasting with the 32px column
   gap between cards. 4px vs 32px = 8× ratio, unmistakably clear.
   ────────────────────────────────────────────────────────── */
.product-card__action {
  display: flex !important;
  align-items: stretch !important;
  gap: var(--space-1) !important;  /* 4px — tight, same "group" as one card */
  margin-top: var(--space-3) !important;
  position: relative !important;
}

/* Buy button fills remaining width inside the action row */
.product-card__action .product-buy-btn {
  flex: 1 !important;
}

/* Full-width variant (Välj variant / logged-out Köp) */
.product-buy-btn--full {
  width: 100% !important;
  flex: 1 !important;
}

/* ── MOBILE — stack qty selector + buy button vertically ──
   Both buttons visible on all mobile sizes, stacked on top
   of each other (column), each full-width within the card.
   ────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .product-card__action {
    flex-direction: column !important;
  }
  .product-card__action .pq-select,
  .product-card__action .product-buy-btn {
    width: 100% !important;
  }
}

/* ── PRODUCT CARD — STOCK STATUS ──────────── */
.product-card__stock {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-1) !important;
  font-size: var(--text-xs) !important;
  color: var(--color-text-muted) !important;
  margin-top: var(--space-2) !important;
  letter-spacing: 0.01em !important;
}

.product-card__stock-dot {
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* In stock — subtle green */
.product-card__stock-dot--in {
  background-color: #34c759 !important;
}

/* Out of stock — muted */
.product-card__stock-dot--out {
  background-color: var(--color-text-muted) !important;
}

/* ── PRODUCT CARD — TITLE + PRICE STACK ──────
   Title on top, price directly beneath it. Flush with the card's left edge
   so the text aligns with the image above. */
.product-card__header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

.product-card__info {
  width: 100% !important;
  min-width: 0 !important;
}

/* Title — editorial weight 500, not 700 (ICIW refined). No min-height — the
   stacked layout no longer needs to reserve 2 lines of space for parallel
   alignment with a sibling price column, since price now lives below. */
.product-card__title {
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Tag/subtitle — muted, tracked caps */
.product-card__tag {
  font-size: var(--text-xs) !important;
  color: var(--color-text-muted) !important;
  letter-spacing: 0.02em !important;
  margin-top: var(--space-1) !important;
  display: block !important;
}

/* Price wrapper (the data-qb-setting div sitting after .product-card__info) */
.product-card__header > [data-qb-setting="product_lists_show_price"] {
  margin: 0 !important;
  line-height: 1 !important;
}

.product-card__price {
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  color: var(--color-text) !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

/* Mobile — QB breakpoint matches lg: (1024px) */
@media (max-width: 1023px) {
  .product-card__title {
    font-size: var(--text-xs) !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;           /* 1 line: price always sits parallel on same row */
    min-height: auto !important;        /* 1 line is inherently consistent — no min-height needed */
  }

  .product-card__tag {
    font-size: var(--text-xs) !important;
  }

  .product-card__price {
    font-size: var(--text-xs) !important;
  }
}

/* ── KÖP / BUY BUTTON ──────────────────────────────────
   At rest  : white pill, black border, black text.
   On hover : black fill slides up from bottom,
              text rolls up (first layer exits, second enters).
   ──────────────────────────────────────────────────── */
.product-buy-btn {
  /* Clip the sliding fill and rolling text */
  position: relative !important;
  overflow: hidden !important;

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

  /* Sharp rect — matches .banner-btn exactly */
  border-radius: 0 !important;

  /* Outline at rest — transparent bg, currentColor border like banner-btn */
  background: transparent !important;
  border: 1px solid currentColor !important;
  color: inherit !important;

  /* Compact sizing — matches pq-selected padding so they're equal height */
  padding: var(--space-2) var(--space-3) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-family: inherit !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  cursor: pointer !important;

  transition:
    border-color var(--transition-interactive),
    box-shadow var(--transition-interactive),
    transform var(--transition-interactive) !important;
}

/* Black fill — lives behind text, slides in from the bottom */
.product-buy-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-interactive);
  border-radius: inherit;
  transform: translateY(105%);
  transition: transform 200ms var(--ease-entry);
  z-index: 0;
}

.product-buy-btn:hover::before {
  transform: translateY(0);
}

.product-buy-btn:hover {
  color: var(--color-bg) !important;    /* fallback when no roll spans */
  box-shadow: var(--shadow-sm) !important;
}

.product-buy-btn:active {
  transform: scale(0.97) !important;
}

.product-buy-btn:focus-visible {
  outline: 2px solid var(--color-interactive) !important;
  outline-offset: 3px !important;
}

/* ── ROLL TEXT LAYERS ──────────────────────────────────
   Two identical text spans stacked.
   First  : visible at rest → rolls upward and out on hover.
   Second : hidden below    → rolls upward into view on hover.
   ──────────────────────────────────────────────────── */
.roll-btn__text {
  position: relative;
  z-index: 1;           /* above the ::before fill */
  display: block;
  text-align: center;
  transition: transform 200ms var(--ease-entry);
}

/* First layer exits upward */
.product-buy-btn:hover .roll-btn__text:first-child {
  transform: translateY(-150%);
}

/* Second layer: sits below the button, rolls up into place */
.roll-btn__text:last-child {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
  color: var(--color-bg);  /* always white — visible once black fill arrives */
}

.product-buy-btn:hover .roll-btn__text:last-child {
  transform: translateY(0);
}

/* Sold out */
.product-soldout {
  font-size: var(--text-xs) !important;
  color: var(--color-text-subtle) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* CTA link fallback */
.product-cta {
  align-items: center !important;
  background-color: transparent !important;
  color: var(--color-text) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font-family: inherit !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  outline: 0 !important;
  border: 0 !important;
  padding: 0 !important;
}

.product-cta::before {
  background-color: var(--color-text) !important;
  content: "" !important;
  display: inline-block !important;
  height: 1px !important;
  margin-right: 0 !important;
  transition: width var(--transition-interactive), margin-right var(--transition-interactive) !important;
  width: 0 !important;
}

.product-cta:hover::before {
  width: 2rem !important;
  margin-right: var(--space-2) !important;
}
/* ============================================
   BLOG SLIDER — CLEAN CARD STYLE
   ============================================ */

[data-qb-element="blog"] {
  background-color: #fff !important;
  --blog-card-scale: 1 !important;
}

/* Slide width is now governed by Swiper's slidesPerView (2 / 3 / 4) so each
   blog card mirrors the product grid columns at the same breakpoints. */

/* Blog list grid — mirrors the product grid: same 3px hairline gap, same
   column count progression so blog and product surfaces feel siblings. */
.blog-list-grid {
  display: grid !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px !important;
}
@media (min-width: 768px)  { .blog-list-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .blog-list-grid { grid-template-columns: repeat(4, 1fr); } }

.blog-card {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  text-decoration: none !important;
  color: rgb(29, 29, 31) !important;
  border-radius: 0 !important;
}

.blog-card__image {
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  display: block !important;
  position: relative !important;
}

.blog-card__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: none !important;
}

.blog-card__image::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0) !important;
  transition: background 0.3s ease !important;
}

.blog-card:hover .blog-card__image::after {
  background: rgba(0, 0, 0, 0.15) !important;
}

.blog-card__body {
  padding: 1rem 0.25rem 0 0.25rem !important;
}

.blog-card__cat {
  display: block !important;
  font-size: calc(0.75rem * var(--blog-card-scale)) !important;
  color: rgb(110, 110, 115) !important;
  margin-bottom: 0.35rem !important;
  letter-spacing: 0.01em !important;
}

.blog-card__title {
  font-size: calc(1.1rem * var(--blog-card-scale)) !important;
  font-weight: 600 !important;
  color: rgb(29, 29, 31) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.blog-card:hover .blog-card__title {
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
/* =========================================
   LEGAL / DOCUMENT CONTENT — .qb-fineprint
   Clean, minimal, editorial. Used for pages
   like Terms, Privacy Policy, Returns, etc.
   ========================================= */

/* Outer wrapper — centred narrow column */
.qb-fineprint {
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: var(--space-16) var(--space-6) !important;
  color: var(--color-text) !important;
  font-size: var(--text-sm) !important;
  line-height: 1.75 !important;
}

@media (max-width: 1023px) {
  .qb-fineprint {
    padding: var(--space-12) var(--space-4) !important;
  }
}

/* Page title (h2) — thin weight, large, lots of breathing room below */
.qb-fineprint h2 {
  font-size: var(--text-xl) !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  color: var(--color-text) !important;
  margin-top: 0 !important;
  margin-bottom: var(--space-8) !important;
  padding-bottom: var(--space-6) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* Section headings (h3) — small caps feel, clear separation */
.qb-fineprint h3 {
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.4 !important;
  color: var(--color-text) !important;
  margin-top: var(--space-12) !important;
  margin-bottom: var(--space-3) !important;
}

/* h4 — same colour, lighter weight */
.qb-fineprint h4 {
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--color-text) !important;
  margin-top: var(--space-6) !important;
  margin-bottom: var(--space-2) !important;
}

/* Body paragraphs — muted, comfortable to read */
.qb-fineprint p {
  color: var(--color-text-muted) !important;
  margin-bottom: var(--space-4) !important;
}

/* Links */
.qb-fineprint a {
  color: var(--color-text) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-color: var(--color-border) !important;
  transition: text-decoration-color 180ms ease !important;
}
.qb-fineprint a:hover {
  text-decoration-color: var(--color-text) !important;
}

/* Unordered lists */
.qb-fineprint ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-bottom: var(--space-6) !important;
}
.qb-fineprint ul li {
  position: relative !important;
  padding-left: var(--space-6) !important;
  color: var(--color-text-muted) !important;
  margin-bottom: var(--space-2) !important;
}
.qb-fineprint ul li::before {
  content: '–' !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--color-text-subtle) !important;
}

/* Ordered lists */
.qb-fineprint ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin-bottom: var(--space-6) !important;
  counter-reset: legal-counter !important;
}
.qb-fineprint ol li {
  counter-increment: legal-counter !important;
  position: relative !important;
  padding-left: var(--space-6) !important;
  color: var(--color-text-muted) !important;
  margin-bottom: var(--space-2) !important;
}
.qb-fineprint ol li::before {
  content: counter(legal-counter) '.' !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--color-text-subtle) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: var(--text-xs) !important;
  top: 0.15em !important;
}

/* ============================================
   USP SECTION — MOBILE FIX
   ============================================ */

[data-qb-element="usp"] .grid > div:first-child {
  padding-left: 1.5rem !important;
}

/* ============================================
   CATEGORIES — ICIW STYLE
   ============================================ */

/* Grid layouts */
.cat-grid {
  display: grid !important;
  gap: 3px !important;
  width: 100% !important;
  align-items: start !important;
}

/* 1 category — full width */
.cat-grid--1 {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* 2 categories — 50/50 */
.cat-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* 3 categories */
.cat-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* 4 categories — 4 equal columns */
.cat-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* 5 categories */
.cat-grid--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* Card */
.cat-card {
  display: block !important;
  position: relative !important;
  text-decoration: none !important;
  overflow: hidden !important;
  min-width: 0 !important;
  color: #000 !important;
}

.cat-card__inner {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  background: var(--color-surface) !important;
}

/* Image — height follows the uploaded image ratio, with no crop or zoom. */
.cat-card__img {
  width: 100% !important;
  height: auto !important;
  object-fit: initial !important;
  object-position: center center !important;
  display: block !important;
  transform: none !important;
  transition: none !important;
}

.cat-card__inner::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: transparent !important;
  transition: background var(--transition-interactive) !important;
  z-index: 1 !important;
}

.cat-card:hover .cat-card__inner::after {
  background: oklch(0.1 0 0 / 0.15) !important;
}

/* No image fallback */
.cat-card__no-image {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 21 / 9 !important;
  background: var(--color-surface) !important;
}

/* Title overlay — bottom center */
.cat-card__overlay {
  position: absolute !important;
  bottom: var(--space-6) !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  justify-content: center !important;
  z-index: 2 !important;
}

.cat-card__title {
  font-family: inherit !important;
  font-size: var(--text-lg) !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #000 !important;
}

/* Responsive reflow — reduce columns while keeping natural image ratios. */
@media (max-width: 1023px) {
  .cat-grid--2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .cat-grid--4,
  .cat-grid--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .cat-card__inner {
    aspect-ratio: auto !important;
  }

  .cat-card__title {
    font-size: var(--text-sm) !important;
    letter-spacing: 0.16em !important;
  }
}

@media (max-width: 640px) {
  .cat-grid--3,
  .cat-grid--4,
  .cat-grid--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .cat-card__overlay {
    bottom: var(--space-4) !important;
  }

  .cat-card__inner {
    aspect-ratio: auto !important;
  }

  .cat-card__title {
    font-size: var(--text-xs) !important;
    letter-spacing: 0.12em !important;
  }
}

/* Section spacing + overflow containment */
[data-qb-element="categories"] {
  padding: var(--space-1) 0 var(--space-16) 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

[data-qb-element="categories"] .section-heading,
[data-qb-element="categories"] .section-desc {
  color: #000 !important;
}

[data-qb-element="categories"] .section-desc {
  margin-top: var(--space-1) !important;
}

/* Title wrapper spacing — replaces inline padding-bottom: 2rem */
[data-qb-element="categories"] .container-wide--padded {
  padding-bottom: var(--space-8) !important;
}

/* ============================================
   CATEGORY HERO — list.html full-bleed header image
   ============================================ */

/* Hero — matches banner-card pattern exactly */
.cat-hero {
  position: relative;
  width: 100%;
  height: 45vh;
  overflow: hidden;
  background-color: var(--color-surface);
}

@media (min-width: 1024px) {
  .cat-hero {
    height: 55vh;
  }
}

.cat-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Full-width rule directly below the hero image — no padding, edge to edge */
.cat-hero-rule {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0;
  width: 100%;
  display: block;
}

/* Overlay — padding applied via Tailwind px-4 pb-6 lg:pb-10 directly on the element */
.cat-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  z-index: 2;
}

/* Title sitting on top of image — same style as .cat-page-title, just white and bigger */
.cat-page-title--on-image {
  color: var(--color-bg) !important;
  font-size: var(--text-2xl) !important;
}

@media (min-width: 1024px) {
  .cat-page-title--on-image {
    font-size: var(--text-hero) !important;
  }
}

/* Product count below the hero image — sits in the container, tight top, close to the rule */
.cat-page-meta--below-hero {
  margin-top: 0 !important;
  margin-bottom: var(--space-3) !important;
}

/* Full-viewport-width rule below the product count — breaks out of the container */
.cat-section-rule {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-top: 0;
  margin-bottom: var(--space-12);
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
  display: block;
}

/* Category header — sits below image inside container */
.cat-page-header {
  margin-bottom: var(--space-12);
}

/* "SHOP ALL" — functional label, not decorative headline */
.cat-page-title {
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-text);
  margin: 0;
}

/* "12 products" — quiet metadata below the title */
.cat-page-meta {
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  color: var(--color-text);
  opacity: 0.55;
  margin-top: var(--space-2);
  margin-bottom: 0;
}

/* ============================================
   MARQUEE — SCROLLING USP BAR
   ============================================ */

/* Default spacing for all custom_html sections
   (replaces the py-8 removed from start_custom_html.html) */
[data-qb-element="custom_html"] {
  padding: var(--space-8) 0 !important;
}

/* Marquee — strip all wrapper spacing so it sits flush against the banner */
[data-qb-element="custom_html"]:has(.marquee-section) {
  padding: 0 !important;
  margin: var(--space-1) 0 0 !important;
}

[data-qb-element="custom_html"]:has(.marquee-section) > .container {
  padding: 0 !important;
  max-width: none !important;
}

/* Marquee bar itself — full-bleed, with top+bottom border lines */
.marquee-section {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow: hidden !important;
  padding: var(--space-4) 0 !important;
  border-top: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.marquee-track {
  display: flex !important;
  width: max-content !important;
  animation: marquee-scroll 40s linear infinite !important;
}


.marquee-content {
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

.marquee-content span {
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  color: var(--color-text) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0 var(--space-8) !important;
}

.marquee-dot {
  font-size: var(--text-xs) !important;
  color: var(--color-text-subtle) !important;
  line-height: 1 !important;
  padding: 0 !important;
}

@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none !important;
  }
}

/* ============================================
   SHARED UTILITIES — APPLE-STYLE DESIGN SYSTEM
   ============================================ */

/* Wide container — 1536px max, left-aligned padding, right bleeds for sliders */
.container-wide {
  max-width: 1536px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 0 !important;
}

/* Wide container variant with padding on both sides */
.container-wide--padded {
  max-width: 1536px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Section heading — Apple style */
.section-heading {
  font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: rgb(29, 29, 31) !important;
  line-height: 1.1 !important;
}

/* Section description — small link style */
.section-desc {
  font-size: 0.8rem !important;
  color: var(--color-primary) !important;
  white-space: nowrap !important;
}

/* Slider navigation button — circular pill */
.slider-nav-btn {
  position: static !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  background: #f5f5f7 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
  margin: 0 !important;
  top: auto !important;
  transform: none !important;
}

.slider-nav-btn:hover {
  background: #e5e7eb !important;
}

/* Hide default Swiper pseudo-elements on custom nav */
.slider-nav-btn::after {
  display: none !important;
}

/* Slider navigation row — right-aligned below slider */
.slider-nav-row {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 0.5rem !important;
  margin-top: 1.5rem !important;
  padding-right: 1rem !important;
}


/* ══════════════════════════════════════════════════════════
   NAV — Header shell
══════════════════════════════════════════════════════════ */
.header-wrap {
  transition:
    background-color var(--transition-interactive),
    backdrop-filter var(--transition-interactive),
    -webkit-backdrop-filter var(--transition-interactive),
    box-shadow var(--transition-interactive);
}

.header-top {
  background-color: transparent;
}

.header-scrolled {
  background-color: rgba(250, 250, 252, 0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow-sm);
}

/* ══════════════════════════════════════════════════════════
   NAV — Icon buttons (search, login, wishlist, settings, cart, burger)
══════════════════════════════════════════════════════════ */
.nav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-2);
  min-width: 44px;
  min-height: 44px;
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition-interactive);
}
.nav-icon-btn:hover {
  color: var(--color-text-muted);
}
.nav-icon-btn:focus {
  outline: none;
}
.nav-icon-btn:focus-visible {
  outline: 2px solid var(--color-interactive);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ══════════════════════════════════════════════════════════
   NAV — Desktop top-level links
══════════════════════════════════════════════════════════ */
.nav-link {
  display: block;
  height: 44px;
  line-height: 44px;
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-interactive);
}
.nav-link:hover {
  color: var(--color-text-muted);
}
.nav-link:focus-visible {
  outline: 2px solid var(--color-interactive);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ══════════════════════════════════════════════════════════
   NAV — Dropdown panels
══════════════════════════════════════════════════════════ */
/* L1 dropdown — appears below the top nav */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 150px;
  margin-top: var(--space-1);
  padding: var(--space-1) 0;
  list-style: none;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
}

/* L2+ sub-dropdowns — fly out to the right */
.nav-dropdown-sub {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 150px;
  margin-left: var(--space-1);
  padding: var(--space-1) 0;
  list-style: none;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
}

/* Standalone dropdown item (no children) */
.nav-dropdown-item {
  display: block;
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-interactive);
}
.nav-dropdown-item:hover {
  background-color: var(--color-surface);
}
.nav-dropdown-item:focus-visible {
  outline: 2px solid var(--color-interactive);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Parent row inside a dropdown (has a sub-dropdown) */
.nav-dropdown-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  cursor: default;
  transition: background-color var(--transition-interactive);
}
.nav-dropdown-parent:hover {
  background-color: var(--color-surface);
}

/* Link inside a .nav-dropdown-parent row */
.nav-dropdown-link {
  display: block;
  padding: var(--space-1) 0;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

/* Chevron icon (down ↓ and right → variants) */
.nav-chevron {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  stroke: var(--color-text-subtle);
  transition: transform var(--transition-interactive);
}

/* ══════════════════════════════════════════════════════════
   NAV — Cart bubble
   Minimal corner badge on the cart icon. Overrides the Tailwind
   utilities set inline in partials/header.html (h-6 w-6, border-2,
   bg-primary, font-bold, -top-2.5, lg:-top-1.5, -right-0.5, text-xs)
   without touching the markup.
══════════════════════════════════════════════════════════ */
.cart-bubble {
  /* Shape — compact pill, auto-width so 1, 12, or 99+ all fit */
  width: auto !important;
  min-width: 14px !important;
  height: 14px !important;
  padding: 0 4px !important;

  /* Position — sits inside the button's top-right corner so it never
     clips into the warning bar above the header. */
  top: 5px !important;
  right: 5px !important;
  left: auto !important;
  bottom: auto !important;

  /* Visual — solid monochrome, no chrome */
  background-color: var(--color-interactive) !important;
  color: var(--color-bg) !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;

  /* Typography — whisper scale, editorial weight (not 700) */
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  font-family: inherit !important;

  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════
   NAV — Mobile panel
══════════════════════════════════════════════════════════ */
.nav-mobile-panel {
  background-color: var(--color-bg);
}

.nav-mobile-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  font-size: var(--text-sm);
}

.nav-mobile-link {
  display: block;
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-interactive);
}
.nav-mobile-link:hover {
  color: var(--color-text-muted);
}
.nav-mobile-link:focus-visible {
  outline: 2px solid var(--color-interactive);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Mobile CTA buttons */
.nav-btn-primary {
  display: block;
  padding: var(--space-3) var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-bg);
  background-color: var(--color-interactive);
  text-decoration: none;
  transition: background-color var(--transition-interactive);
}
.nav-btn-primary:hover {
  background-color: var(--color-interactive-hover);
}
.nav-btn-primary:focus-visible {
  outline: 2px solid var(--color-interactive);
  outline-offset: 3px;
}

.nav-btn-outline {
  display: block;
  padding: var(--space-3) var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-interactive);
  background: transparent;
  border: 1px solid var(--color-interactive);
  text-decoration: none;
  transition: opacity var(--transition-interactive);
}
.nav-btn-outline:hover {
  opacity: 0.7;
}
.nav-btn-outline:focus-visible {
  outline: 2px solid var(--color-interactive);
  outline-offset: 3px;
}

/* ============================================================
   CART DRAWER
   Right-sliding panel, thenobar-style minimal layout
   ============================================================ */

/* ── Wrapper (full-screen anchor for overlay + panel) ─────── */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none; /* children opt back in */
}

/* ── Overlay ──────────────────────────────────────────────── */
.cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}

/* Overlay transition classes */
.cart-overlay-enter {
  transition: opacity 300ms var(--ease-entry);
}
.cart-overlay-leave {
  transition: opacity 200ms var(--ease-exit);
}
.cart-overlay-hidden { opacity: 0; }
.cart-overlay-visible { opacity: 1; }

/* Rabatt row transition — fade + small lift so the row feels lightweight
   appearing as items land in the cart, not abrupt. */
.cart-discount-enter {
  transition: opacity 260ms var(--ease-entry), transform 260ms var(--ease-entry);
}
.cart-discount-leave {
  transition: opacity 160ms var(--ease-exit), transform 160ms var(--ease-exit);
}
.cart-discount-hidden  { opacity: 0; transform: translateY(4px); }
.cart-discount-visible { opacity: 1; transform: translateY(0); }

/* ── Panel ────────────────────────────────────────────────── */
.cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(100vw - 2rem, 37.5rem); /* 600px max, small gap on mobile */
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  box-shadow: -8px 0 32px oklch(0.2 0.01 80 / 0.12);
  overflow: hidden;
}

/* Panel transition classes — slide from right */
.cart-panel-enter,
.cart-panel-leave {
  transition: transform 420ms var(--ease-entry);
}
.cart-panel-hidden  { transform: translateX(100%); }
.cart-panel-visible { transform: translateX(0); }

/* ── Header ───────────────────────────────────────────────── */
.cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.cart-drawer__title {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0;
}

.cart-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  padding: 0;
  border-radius: var(--radius-sm);
  transition: opacity var(--transition-interactive);
}
.cart-drawer__close:hover { opacity: 0.6; }

/* ── Body (scrollable) ────────────────────────────────────── */
.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
}

/* QB system message hook */
.qs-cart-message {
  margin-bottom: var(--space-3);
}
.qs-cart-message:empty {
  display: none;
}

/* ════════════════════════════════════════════════════════════
   FREE-SHIPPING PROGRESS BAR — driven by appsOverrides.js
   Capybara walks toward a tree along a dashed line.
   All decorative class names (.tree, .shadow, .branch, .stem,
   .capyhead, etc.) are scoped under .cart-shipbar to avoid
   leaking the generic names into the rest of the theme.
   ════════════════════════════════════════════════════════════ */
.cart-shipbar {
  --capy-color:  rgb(204, 125, 45);
  --capy-color2: rgb(83, 56, 28);
  --leaf:        #77dd77;
  --leaf-dark:   #69c069;
  --done:        #5a8a3f;
  --steps: 1;
  --step: 0;

  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
}
.cart-shipbar__msg {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--color-text);
}
.cart-shipbar__msg strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cart-shipbar--unlocked .cart-shipbar__msg {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--done);
}

/* ── Stage (the dashed walking line + actors) ───────────── */
.cart-shipbar__stage {
  width: 100%;
  height: 2.75rem;
  position: relative;
}
.cart-shipbar__line {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  border-top: 1px dashed var(--capy-color2);
  opacity: 0.35;
}

/* Walker — slides from left to right based on --step.
   Long, near-linear easing so the capybara visibly walks the distance
   (its leg cycle is 1s; this lets ~1.2 cycles play through during the slide). */
.cart-shipbar__walker {
  position: absolute;
  bottom: 0;
  width: 2.25rem; height: 1.4rem;
  left: calc((100% - 2.25rem - 2.25rem) * (var(--step) / var(--steps)));
  transition: left 1200ms cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.cart-shipbar__stage--complete .cart-shipbar__walker {
  animation: cs-arrival-hop 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@keyframes cs-arrival-hop {
  0%, 60%, 100% { transform: translateY(0); }
  20%           { transform: translateY(-6px); }
  40%           { transform: translateY(0); }
}
.cart-shipbar .capybaraloader {
  position: absolute;
  bottom: 0; left: 0;
  transform: scale(0.16);
  transform-origin: bottom left;
}

/* Destination — tree at the right edge */
.cart-shipbar__destination {
  position: absolute;
  right: 0; bottom: 0;
  width: 2.25rem; height: 2.25rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.cart-shipbar__tree-wrap {
  position: relative;
  width: 50px; height: 50px;
  transform: scale(0.32) translateY(-38px);
  transform-origin: bottom center;
  transition: transform 300ms ease;
}
.cart-shipbar__stage--complete .cart-shipbar__tree-wrap {
  animation: cs-arrival-wobble 1.4s ease-in-out infinite;
}
@keyframes cs-arrival-wobble {
  0%, 100% { transform: scale(0.32) translateY(-38px) rotate(0deg); }
  25%      { transform: scale(0.34) translateY(-40px) rotate(-3deg); }
  75%      { transform: scale(0.34) translateY(-40px) rotate(3deg); }
}

/* Sparkles — falling leaves on arrival */
.cart-shipbar__sparkles {
  position: absolute;
  right: 0.5rem; bottom: 0;
  width: 1.5rem; height: 2rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease;
}
.cart-shipbar__stage--complete .cart-shipbar__sparkles { opacity: 1; }
.cart-shipbar__sparkle {
  position: absolute;
  width: 4px; height: 6px;
  background: var(--leaf);
  border-radius: 50% 50% 50% 0;
  opacity: 0;
}
.cart-shipbar__stage--complete .cart-shipbar__sparkle {
  animation: cs-leaf-fall 1.6s ease-in infinite;
}
.cart-shipbar__sparkle:nth-child(1) { left: 10%; animation-delay: 0s; }
.cart-shipbar__sparkle:nth-child(2) { left: 35%; animation-delay: 0.25s; background: var(--leaf-dark); }
.cart-shipbar__sparkle:nth-child(3) { left: 60%; animation-delay: 0.5s; }
.cart-shipbar__sparkle:nth-child(4) { left: 85%; animation-delay: 0.75s; background: var(--leaf-dark); }
.cart-shipbar__sparkle:nth-child(5) { left: 25%; animation-delay: 1s; }
@keyframes cs-leaf-fall {
  0%   { transform: translateY(-1rem)   rotate(0deg);   opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(1.75rem) rotate(360deg); opacity: 0; }
}

/* ── Capybara (verbatim original, scoped) ───────────────── */
.cart-shipbar .capybaraloader {
  width: 14em; height: 7.5em;
  z-index: 1;
  --color: var(--capy-color);
  --color2: var(--capy-color2);
}
.cart-shipbar .capybara { width: 100%; height: 100%; position: relative; z-index: 1; }
.cart-shipbar .capy {
  width: 85%; height: 100%;
  background: linear-gradient(var(--color), 90%, var(--color2));
  border-radius: 45%; position: relative; z-index: 1;
  animation: cs-movebody 1s linear infinite;
}
.cart-shipbar .capyhead {
  width: 7.5em; height: 7em; bottom: 0; right: 0;
  position: absolute; background-color: var(--color); z-index: 3;
  border-radius: 3.5em; box-shadow: -1em 0 var(--color2);
  animation: cs-movebody 1s linear infinite;
}
.cart-shipbar .capyear {
  width: 2em; height: 2em;
  background: linear-gradient(-45deg, var(--color), 90%, var(--color2));
  top: 0; left: 0; border-radius: 100%;
  position: absolute; overflow: hidden; z-index: 3;
}
.cart-shipbar .capyear:nth-child(2) {
  left: 5em;
  background: linear-gradient(25deg, var(--color), 90%, var(--color2));
}
.cart-shipbar .capyear2 {
  width: 100%; height: 1em;
  background-color: var(--color2);
  bottom: 0; left: 0.5em; border-radius: 100%;
  position: absolute; transform: rotate(-45deg);
}
.cart-shipbar .capymouth {
  width: 3.5em; height: 2em;
  background-color: var(--color2);
  position: absolute; bottom: 0; left: 2.5em;
  border-radius: 50%;
  display: flex; justify-content: space-around; align-items: center;
  padding: 0.5em;
}
.cart-shipbar .capylips {
  width: 0.25em; height: 0.75em;
  border-radius: 100%; transform: rotate(-45deg);
  background-color: var(--color);
}
.cart-shipbar .capylips:nth-child(2) { transform: rotate(45deg); }
.cart-shipbar .capyeye {
  width: 2em; height: 0.5em;
  background-color: var(--color2);
  position: absolute; bottom: 3.5em; left: 1.5em;
  border-radius: 5em; transform: rotate(45deg);
}
.cart-shipbar .capyeye:nth-child(4) {
  transform: rotate(-45deg); left: 5.5em; width: 1.75em;
}
.cart-shipbar .capyleg {
  width: 6em; height: 5em; bottom: 0; left: 0;
  position: absolute;
  background: linear-gradient(var(--color), 95%, var(--color2));
  z-index: 2; border-radius: 2em;
  animation: cs-movebody 1s linear infinite;
}
.cart-shipbar .capyleg2 {
  width: 1.75em; height: 3em; bottom: 0; left: 3.25em;
  position: absolute;
  background: linear-gradient(var(--color), 80%, var(--color2));
  z-index: 2; border-radius: 0.75em;
  box-shadow: inset 0 -0.5em var(--color2);
  animation: cs-moveleg 1s linear infinite;
}
.cart-shipbar .capyleg2:nth-child(3) {
  width: 1.25em; left: 0.5em; height: 2em;
  animation: cs-moveleg2 1s linear infinite 0.075s;
}
@keyframes cs-moveleg {
  0%   { transform: rotate(-45deg) translateX(-5%); }
  50%  { transform: rotate( 45deg) translateX( 5%); }
  100% { transform: rotate(-45deg) translateX(-5%); }
}
@keyframes cs-moveleg2 {
  0%   { transform: rotate( 45deg); }
  50%  { transform: rotate(-45deg); }
  100% { transform: rotate( 45deg); }
}
@keyframes cs-movebody {
  0%, 100% { transform: translateX(0%); }
  50%      { transform: translateX(2%); }
}

/* ── Tree (verbatim original, scoped) ───────────────────── */
.cart-shipbar .tree {
  position: relative; width: 50px; height: 50px;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(30deg);
  animation: cs-tree-rotate 6s linear infinite;
}
@keyframes cs-tree-rotate {
  0%   { transform: rotateX(-20deg) rotateY(360deg); }
  100% { transform: rotateX(-20deg) rotateY(0deg); }
}
.cart-shipbar .tree > div {
  position: absolute; top: -50px; left: 0;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: translateY(calc(25px * var(--x))) translateZ(0px);
}
.cart-shipbar .tree .branch span {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, var(--leaf-dark), var(--leaf));
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  border-bottom: 5px solid #00000019;
  transform-origin: bottom;
  transform: rotateY(calc(90deg * var(--i))) rotateX(30deg) translateZ(28.5px);
}
.cart-shipbar .tree .stem span {
  position: absolute; top: 110px;
  left: calc(50% - 7.5px);
  width: 15px; height: 50%;
  background: linear-gradient(90deg, #bb4622, #df7214);
  border-bottom: 5px solid #00000019;
  transform-origin: bottom;
  transform: rotateY(calc(90deg * var(--i))) translateZ(7.5px);
}
.cart-shipbar .tree .tree-shadow {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.4);
  filter: blur(20px);
  transform-style: preserve-3d;
  transform: rotateX(90deg) translateZ(-65px);
}

@media (prefers-reduced-motion: reduce) {
  .cart-shipbar .capy,
  .cart-shipbar .capyhead,
  .cart-shipbar .capyleg,
  .cart-shipbar .capyleg2,
  .cart-shipbar .tree,
  .cart-shipbar__walker,
  .cart-shipbar__sparkle,
  .cart-shipbar__stage--complete .cart-shipbar__walker,
  .cart-shipbar__stage--complete .cart-shipbar__tree-wrap {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Empty state ──────────────────────────────────────────── */
.cart-drawer__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-12) 0;
  color: var(--color-text-muted);
  text-align: center;
}
.cart-drawer__empty p {
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}

/* ── Cart items list ──────────────────────────────────────── */
.cart-items {
  display: flex;
  flex-direction: column;
}

/* ── Single cart item ─────────────────────────────────────── */
.cart-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
}

/* Image */
.cart-item__img-wrap {
  flex-shrink: 0;
  display: block;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface);
}
.cart-item__img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Details column */
.cart-item__details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Title + price on the same row — name left, price right.
   Baseline alignment so the current price sits on the title's first line; the
   strikethrough then drops directly below the price without nudging the title. */
.cart-item__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.cart-item__title {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-item__title:hover { text-decoration: underline; }

/* Price column — right side of the title row. Tabular numerals so prices in
   neighbouring rows align column-perfect even when digits differ in width. */
.cart-item__price-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cart-item__price {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  line-height: 1.3;
}
.cart-item__price--sale {
  color: #15803d;
}
.cart-item__price--original {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  white-space: nowrap;
  line-height: 1.2;
}

.cart-item__variant,
.cart-item__property {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Actions: qty stepper on the left, tabort ghost-link on the right.
   space-between so the row mirrors the title/price row above — the kr column
   and tabort sit on the same right edge. */
.cart-item__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

/* Qty stepper */
.cart-qty {
  display: flex;
  align-items: stretch;
}

.cart-qty__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: 1px solid var(--color-interactive);
  cursor: pointer;
  font-size: var(--text-base);
  line-height: 1;
  color: var(--color-text);
  transition: background-color var(--transition-interactive);
  flex-shrink: 0;
}
.cart-qty__btn:hover {
  background-color: var(--color-surface);
}

.cart-qty__input {
  width: 3rem;
  height: 2rem;
  border: none;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
}
.cart-qty__input::-webkit-outer-spin-button,
.cart-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.cart-qty__input:focus {
  outline: none;
}

/* Tabort — ghost link, muted text-subtle, animated underline on hover. On
   desktop (hover-capable) the link stays hidden until the row is hovered,
   matching editorial Apple/ICIW restraint. On touch devices it's always
   visible since hover doesn't exist there. */
.cart-item__remove {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  padding: 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition:
    opacity var(--transition-interactive),
    color var(--transition-interactive),
    text-decoration-color var(--transition-interactive);
}
.cart-item__remove:hover {
  color: var(--color-text);
  text-decoration-color: currentColor;
}

@media (hover: hover) {
  .cart-item__remove {
    opacity: 0;
  }
  .cart-item:hover .cart-item__remove,
  .cart-item__remove:focus-visible {
    opacity: 1;
  }
}

/* ── Footer ───────────────────────────────────────────────── */
.cart-drawer__footer {
  padding: var(--space-4) var(--space-6) var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Discount row */
.cart-footer__discount {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-sm);
  font-weight: 500;
  color: #15803d;
  font-variant-numeric: tabular-nums;
}
.cart-footer__discount > span:first-child {
  letter-spacing: 0.04em;
}

/* Total row */
.cart-footer__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums;
}
.cart-footer__total > span:first-child {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
}
.cart-footer__total > span:last-child {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

/* Checkout CTA — matches .banner-btn style with sliding fill + roll text */
.cart-checkout {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  background: transparent;
  border: 1px solid var(--color-interactive);
  border-radius: 0;
  color: var(--color-interactive);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color 300ms var(--ease-entry);
}

/* Sliding fill from bottom */
.cart-checkout::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-interactive);
  transform: translateY(105%);
  transition: transform 300ms var(--ease-entry);
  z-index: 0;
}
.cart-checkout:hover::before {
  transform: translateY(0);
}
.cart-checkout:hover {
  color: var(--color-bg);
}

/* Roll text */
.cart-checkout .roll-btn__text {
  position: relative;
  z-index: 1;
  transition: transform 300ms var(--ease-entry);
}
.cart-checkout .roll-btn__text:last-child {
  position: absolute;
  transform: translateY(150%);
}
.cart-checkout:hover .roll-btn__text:first-child {
  transform: translateY(-150%);
}
.cart-checkout:hover .roll-btn__text:last-child {
  transform: translateY(0);
}

.cart-checkout:active {
  transform: scale(0.97);
}
.cart-checkout:focus-visible {
  outline: 2px solid var(--color-interactive);
  outline-offset: 3px;
}

/* Footnote */
.cart-footnote {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  text-align: center;
  letter-spacing: 0.02em;
}

/* Continue shopping — ghost link */
.cart-continue {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
  padding: 0;
  width: 100%;
  transition: color var(--transition-interactive);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cart-continue:hover {
  color: var(--color-text);
}

/* ── Mobile — full-width panel at ≤480px ─────────────────── */
@media (max-width: 480px) {
  .cart-drawer__panel {
    width: 100vw;
  }
  .cart-drawer__header,
  .cart-drawer__body,
  .cart-drawer__footer {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* ============================================================
   FAQ ACCORDION
   HTML inserted via custom_html in the control panel.
   JS lives in appsOverrides.js (bottom of file).
   ============================================================ */

/* Strip QB's .container wrapper — same pattern as .marquee-section.
   overflow: visible is required on every ancestor of .faq-intro-sticky;
   any overflow value other than visible silently breaks position:sticky. */
[data-qb-element="custom_html"]:has(.faq-section),
[data-qb-element="custom_html"]:has(.faq-section) > .container {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important;
}

.faq-section {
  padding: var(--space-20) 0;
}

/* Two-column layout — left column stretches to grid height so
   position:sticky on .faq-intro-sticky has room to travel.
   Width matches .container-wide--padded (1536px + 1rem sides). */
.faq-layout {
  max-width: 1536px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-16);
}

.faq-content {
  align-self: start;
}

.faq-intro-sticky {
  position: sticky;
  /* 72px = warning bar (28px) + fixed header (44px) */
  top: calc(72px + var(--space-4));
}

.faq-intro h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xl);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-text);
}

.faq-intro p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
}

.faq-panel {
  background: transparent;
}

.dropdowns {
  display: grid;
  gap: var(--space-1);
}

.dropdown-item {
  background: var(--color-surface);
  border-radius: 0;
  overflow: hidden;
  transition:
    background-color var(--transition-interactive),
    box-shadow var(--transition-interactive);
}

/* JS adds .faq-js to the section on init — hidden state only applies then */
.faq-js .dropdown-item {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    background-color var(--transition-interactive),
    box-shadow var(--transition-interactive);
}

.faq-js .dropdown-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.dropdown-item.active {
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
}

.dropdown-item > button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-6);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: opacity var(--transition-interactive);
}

.dropdown-item:not(.active) > button:hover {
  opacity: 0.7;
}

.dropdown-item > button h3 {
  margin: 0;
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.dropdown-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.dropdown-icon::before,
.dropdown-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  border-radius: 999px;
  background: var(--color-interactive);
  transform: translate(-50%, -50%);
  transition: transform 240ms var(--ease-entry);
}

.dropdown-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.dropdown-item.active .dropdown-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.dropdown-content {
  height: 0;
  overflow: hidden;
  transition: height 300ms var(--ease-entry);
}

.dropdown-inner {
  border-top: 1px solid var(--color-border);
  margin: 0 var(--space-6);
  padding: var(--space-4) 0 var(--space-6);
}

.dropdown-inner p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
}

@media (max-width: 1023px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .faq-intro-sticky {
    position: static;
  }

  .faq-intro h2 {
    font-size: var(--text-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dropdown-item,
  .dropdown-content,
  .dropdown-icon::before,
  .dropdown-icon::after {
    transition: none !important;
  }

  .faq-js .dropdown-item {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   TOP WARNING BAR — 18+ Nicotine strap
   Sits above the fixed header. Editorial minimal: monochrome
   bar, hairline divider, no box/badge. Header is shifted down
   here (not in partials/header.html) so this component is
   self-contained and can be toggled on/off without touching
   the header markup.
   ═══════════════════════════════════════════════════════════ */
.top-warning-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;                                /* above header (z-30) */
  /* Locked height so the header offset (top: 28px) and body
     padding-top (72px) below stay valid at every breakpoint. */
  height: 28px;
  display: flex;
  align-items: center;
  background-color: var(--color-interactive); /* fallback before Alpine hydrates */
  color: rgba(255, 255, 255, 0.88);
  transition:
    background-color var(--transition-interactive),
    backdrop-filter var(--transition-interactive),
    -webkit-backdrop-filter var(--transition-interactive),
    box-shadow var(--transition-interactive);
}

/* Top state — solid ICIW black, mirrors header's .header-top */
.top-warning-bar.warning-top {
  background-color: var(--color-interactive);
}

/* Scrolled state — frosted dark glass; dark mirror of .header-scrolled
   (same blur, same saturate, similar alpha) so the two bars share one
   visual language as the page scrolls. */
.top-warning-bar.warning-scrolled {
  background-color: rgba(15, 15, 15, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow-sm);
}

.top-warning-bar .top-warning-inner {
  width: 100%;
  height: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  /* Single row at every viewport — never wraps to two lines and
     pushes the header out of view. */
  flex-wrap: nowrap;
  min-width: 0;
}

.top-warning-bar .warning-label {
  font-size: clamp(0.5625rem, 1.2vw, 0.6875rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  color: #FFFFFF;
  flex-shrink: 0;
  white-space: nowrap;
}

.top-warning-bar .warning-divider {
  width: 1px;
  height: 10px;
  background: rgba(255, 255, 255, 0.24);
  flex-shrink: 0;
}

.top-warning-bar .warning-text {
  font-size: clamp(0.625rem, 1.6vw, 0.75rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.72);
  /* Stay on one line; ellipsis is the safety net at the narrowest
     viewports. min-width:0 lets flex actually shrink the text. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Shift the existing fixed header below the warning bar — keeps
   partials/header.html untouched. */
.header-wrap {
  top: 28px !important;
}

@media (max-width: 640px) {
  .top-warning-bar .top-warning-inner {
    padding: 0 var(--space-2);
    gap: var(--space-2);
  }
  .top-warning-bar .warning-divider {
    height: 8px;
  }
}

/* ── POCKY · Integritetspolicy ─────────────────────────────── */
.pocky-integritet {
  --pi-text: #1a1a1a;
  --pi-border: #1a1a1a;
  --pi-mono: 'JetBrains Mono', 'Courier New', monospace;
  --pi-sans: 'Inter', -apple-system, sans-serif;

  color: var(--pi-text);
  font-family: var(--pi-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 32px 120px;
}

.pocky-integritet .pi-title {
  font-family: var(--pi-sans);
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: -0.01em;
}

.pocky-integritet .pi-updated {
  font-family: var(--pi-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 16px;
  font-weight: 500;
}

.pocky-integritet h2 {
  font-family: var(--pi-sans);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0 0 20px;
}

.pocky-integritet h3 {
  font-family: var(--pi-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 24px 0 12px;
}

.pocky-integritet h3:first-child {
  margin-top: 0;
}

.pocky-integritet p {
  font-family: var(--pi-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.pocky-integritet p:last-child {
  margin-bottom: 0;
}

.pocky-integritet ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.pocky-integritet ul li {
  font-family: var(--pi-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding-left: 20px;
  position: relative;
  margin-bottom: 6px;
}

.pocky-integritet ul li::before {
  content: "•";
  position: absolute;
  left: 6px;
  top: 0;
}

.pocky-integritet .pi-intro {
  margin-bottom: 48px;
}

.pocky-integritet section {
  margin-bottom: 48px;
}

.pocky-integritet section:last-of-type {
  margin-bottom: 0;
}

.pocky-integritet .pi-sep {
  border: 0;
  border-top: 1px solid var(--pi-border);
  margin: 48px 0;
  opacity: 0.3;
}

.pocky-integritet .pi-contact {
  font-family: var(--pi-mono);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pocky-integritet .pi-contact strong {
  font-weight: 700;
  display: inline-block;
  min-width: 100px;
}

.pocky-integritet .pi-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
  border-radius: 2px;
}

.pocky-integritet .pi-link:hover {
  opacity: 0.6;
}

.pocky-integritet .pi-link:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--pi-border);
}

@media (max-width: 768px) {
  .pocky-integritet {
    padding: 48px 24px 80px;
  }
  .pocky-integritet .pi-title {
    font-size: 24px;
  }
  .pocky-integritet h2 {
    font-size: 16px;
  }
}

/* ── POCKY · Kontakta oss ─────────────────── */
.pocky-kontakt {
  --pk-text: #1a1a1a;
  --pk-border: #1a1a1a;
  --pk-mono: 'JetBrains Mono', 'Courier New', monospace;
  --pk-sans: 'Inter', -apple-system, sans-serif;

  color: var(--pk-text);
  font-family: var(--pk-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 32px 120px;
}

.pocky-kontakt .pk-title {
  font-family: var(--pk-sans);
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.pocky-kontakt .pk-lead {
  font-family: var(--pk-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 24px;
}

.pocky-kontakt h2 {
  font-family: var(--pk-sans);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0 0 20px;
}

.pocky-kontakt h3 {
  font-family: var(--pk-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 24px 0 12px;
}

.pocky-kontakt p {
  font-family: var(--pk-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.pocky-kontakt p:last-child {
  margin-bottom: 0;
}

.pocky-kontakt section {
  margin-bottom: 48px;
}

.pocky-kontakt section:last-of-type {
  margin-bottom: 0;
}

.pocky-kontakt .pk-sep {
  border: 0;
  border-top: 1px solid var(--pk-border);
  margin: 48px 0;
  opacity: 0.3;
}

.pocky-kontakt .pk-contact {
  font-family: var(--pk-mono);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--pk-border);
  padding: 16px 24px;
}

.pocky-kontakt .pk-contact div {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--pk-border);
  flex-wrap: wrap;
}

.pocky-kontakt .pk-contact div:last-child {
  border-bottom: none;
}

.pocky-kontakt .pk-contact strong {
  font-weight: 700;
  display: inline-block;
  min-width: 90px;
}

.pocky-kontakt .pk-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
  border-radius: 2px;
}

.pocky-kontakt .pk-link:hover {
  opacity: 0.6;
}

.pocky-kontakt .pk-link:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--pk-border);
}

/* Social */
.pocky-kontakt .pk-social {
  margin-top: 24px;
}

.pocky-kontakt .pk-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.pocky-kontakt .pk-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--pk-border);
  color: var(--pk-text);
  transition: background-color 0.2s, color 0.2s;
}

.pocky-kontakt .pk-social-link:hover {
  background: var(--pk-text);
  color: #fff;
}

.pocky-kontakt .pk-social-link svg {
  width: 16px;
  height: 16px;
}

/* Form */
.pocky-kontakt .pk-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pocky-kontakt .pk-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pocky-kontakt .pk-field label {
  font-family: var(--pk-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--pk-text);
}

.pocky-kontakt .pk-field input,
.pocky-kontakt .pk-field textarea {
  width: 100%;
  font-family: var(--pk-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid var(--pk-border);
  color: var(--pk-text);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow 0.2s;
}

.pocky-kontakt .pk-field textarea {
  resize: vertical;
  min-height: 140px;
  font-family: var(--pk-mono);
}

.pocky-kontakt .pk-field input::placeholder,
.pocky-kontakt .pk-field textarea::placeholder {
  color: var(--pk-text);
  opacity: 0.4;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pocky-kontakt .pk-field input:focus,
.pocky-kontakt .pk-field textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--pk-border);
}

.pocky-kontakt .pk-submit {
  display: inline-block;
  padding: 14px 24px;
  border: 1px solid var(--pk-border);
  background: var(--pk-text);
  color: #fff;
  font-family: var(--pk-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: opacity 0.2s, background-color 0.2s, color 0.2s;
}

.pocky-kontakt .pk-submit:hover {
  background: transparent;
  color: var(--pk-text);
}

.pocky-kontakt .pk-submit:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--pk-border);
}

/* Alerts */
.pocky-kontakt .pk-alert {
  border: 1px solid var(--pk-border);
  padding: 16px 20px;
  font-family: var(--pk-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pocky-kontakt .pk-alert h4 {
  font-family: var(--pk-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin: 0 0 8px;
}

.pocky-kontakt .pk-alert p {
  text-transform: uppercase;
  margin: 0;
}

.pocky-kontakt .pk-alert--success {
  border-color: var(--pk-border);
  background: rgba(0, 0, 0, 0.04);
}

.pocky-kontakt .pk-alert--error {
  border-color: var(--pk-border);
  background: rgba(0, 0, 0, 0.06);
}

/* reCAPTCHA — Quickbutik injects this; we can only scale the iframe wrapper.
   Origin/iframe blocks any internal styling, so transform-scale is the
   only reliable way to make the widget smaller without breaking it. */
.pocky-kontakt .g-recaptcha,
.pocky-kontakt [class*="recaptcha"] {
  transform: scale(0.85);
  transform-origin: 0 0;
  margin-bottom: -10px;
}

@media (max-width: 480px) {
  .pocky-kontakt .g-recaptcha,
  .pocky-kontakt [class*="recaptcha"] {
    transform: scale(0.78);
    margin-bottom: -16px;
  }
}

/* Free text below form */
.pocky-kontakt .pk-freetext {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 13px;
}

/* Map section — full bleed below the centered column */
.pocky-kontakt-map {
  margin-top: 48px;
}

.pocky-kontakt-map .pk-map-wrap {
  position: relative;
  width: 100%;
  height: 480px;
  border-top: 1px solid rgba(26, 26, 26, 0.3);
  border-bottom: 1px solid rgba(26, 26, 26, 0.3);
}

.pocky-kontakt-map .pk-map {
  width: 100%;
  height: 100%;
  background: #f5f5f7;
}

@media (max-width: 768px) {
  .pocky-kontakt {
    padding: 48px 24px 80px;
  }
  .pocky-kontakt .pk-title {
    font-size: 24px;
  }
  .pocky-kontakt h2 {
    font-size: 16px;
  }
  .pocky-kontakt-map .pk-map-wrap {
    height: 320px;
  }
}

/* ── POCKY · Retur och reklamation ─────────────────── */
.pocky-retur {
  --pr-text: #1a1a1a;
  --pr-border: #1a1a1a;
  --pr-mono: 'JetBrains Mono', 'Courier New', monospace;
  --pr-sans: 'Inter', -apple-system, sans-serif;

  color: var(--pr-text);
  font-family: var(--pr-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 32px 120px;
}

.pocky-retur .pr-title {
  font-family: var(--pr-sans);
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: -0.01em;
}

.pocky-retur .pr-updated {
  font-family: var(--pr-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 16px;
  font-weight: 500;
}

.pocky-retur h2 {
  font-family: var(--pr-sans);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0 0 20px;
}

.pocky-retur h3 {
  font-family: var(--pr-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 24px 0 12px;
}

.pocky-retur h3:first-child {
  margin-top: 0;
}

.pocky-retur p {
  font-family: var(--pr-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.pocky-retur p:last-child {
  margin-bottom: 0;
}

.pocky-retur ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.pocky-retur ul li {
  font-family: var(--pr-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding-left: 20px;
  position: relative;
  margin-bottom: 6px;
}

.pocky-retur ul li::before {
  content: "•";
  position: absolute;
  left: 6px;
  top: 0;
}

.pocky-retur .pr-intro {
  margin-bottom: 0;
}

.pocky-retur section {
  margin-bottom: 48px;
}

.pocky-retur section:last-of-type {
  margin-bottom: 0;
}

.pocky-retur .pr-sep {
  border: 0;
  border-top: 1px solid var(--pr-border);
  margin: 48px 0;
  opacity: 0.3;
}

.pocky-retur .pr-info-box {
  border: 1px solid var(--pr-border);
  padding: 24px;
  margin: 24px 0;
}

.pocky-retur .pr-info-box h3 {
  margin-top: 0;
}

.pocky-retur .pr-info-box p:last-child {
  margin-bottom: 0;
}

.pocky-retur .pr-download {
  display: inline-block;
  margin-top: 12px;
  padding: 12px 20px;
  border: 1px solid var(--pr-border);
  text-decoration: none;
  font-family: var(--pr-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--pr-text);
  transition: background-color 0.2s, color 0.2s;
}

.pocky-retur .pr-download:hover {
  background: var(--pr-text);
  color: #fff;
}

.pocky-retur .pr-download:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--pr-border);
}

.pocky-retur .pr-contact {
  font-family: var(--pr-mono);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--pr-border);
  padding: 16px 24px;
}

.pocky-retur .pr-contact div {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--pr-border);
  flex-wrap: wrap;
}

.pocky-retur .pr-contact div:last-child {
  border-bottom: none;
}

.pocky-retur .pr-contact strong {
  font-weight: 700;
  display: inline-block;
  min-width: 100px;
}

.pocky-retur .pr-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
  border-radius: 2px;
}

.pocky-retur .pr-link:hover {
  opacity: 0.6;
}

.pocky-retur .pr-link:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--pr-border);
}

@media (max-width: 768px) {
  .pocky-retur {
    padding: 48px 24px 80px;
  }
  .pocky-retur .pr-title {
    font-size: 24px;
  }
  .pocky-retur h2 {
    font-size: 16px;
  }
}

/* ── POCKY · Uppförandekod ─────────────────── */
.pocky-uppforandekod {
  --puk-text: #1a1a1a;
  --puk-border: #1a1a1a;
  --puk-mono: 'JetBrains Mono', 'Courier New', monospace;
  --puk-sans: 'Inter', -apple-system, sans-serif;

  color: var(--puk-text);
  font-family: var(--puk-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 32px 120px;
}

.pocky-uppforandekod .puk-title {
  font-family: var(--puk-sans);
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: -0.01em;
}

.pocky-uppforandekod .puk-meta {
  font-family: var(--puk-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 16px;
  font-weight: 500;
}

.pocky-uppforandekod h2 {
  font-family: var(--puk-sans);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0 0 20px;
}

.pocky-uppforandekod h3 {
  font-family: var(--puk-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 24px 0 12px;
}

.pocky-uppforandekod h3:first-child {
  margin-top: 0;
}

.pocky-uppforandekod p {
  font-family: var(--puk-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.pocky-uppforandekod p:last-child {
  margin-bottom: 0;
}

.pocky-uppforandekod ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.pocky-uppforandekod ul li {
  font-family: var(--puk-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding-left: 20px;
  position: relative;
  margin-bottom: 6px;
}

.pocky-uppforandekod ul li::before {
  content: "•";
  position: absolute;
  left: 6px;
  top: 0;
}

.pocky-uppforandekod .puk-intro {
  margin-bottom: 0;
}

.pocky-uppforandekod section {
  margin-bottom: 48px;
}

.pocky-uppforandekod section:last-of-type {
  margin-bottom: 0;
}

.pocky-uppforandekod .puk-sep {
  border: 0;
  border-top: 1px solid var(--puk-border);
  margin: 48px 0;
  opacity: 0.3;
}

.pocky-uppforandekod .puk-signoff,
.pocky-uppforandekod .puk-contact {
  font-family: var(--puk-mono);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--puk-border);
  padding: 16px 24px;
}

.pocky-uppforandekod .puk-signoff div,
.pocky-uppforandekod .puk-contact div {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--puk-border);
  flex-wrap: wrap;
}

.pocky-uppforandekod .puk-signoff div:last-child,
.pocky-uppforandekod .puk-contact div:last-child {
  border-bottom: none;
}

.pocky-uppforandekod .puk-signoff strong,
.pocky-uppforandekod .puk-contact strong {
  font-weight: 700;
  display: inline-block;
  min-width: 140px;
}

.pocky-uppforandekod .puk-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
  border-radius: 2px;
}

.pocky-uppforandekod .puk-link:hover {
  opacity: 0.6;
}

.pocky-uppforandekod .puk-link:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--puk-border);
}

@media (max-width: 768px) {
  .pocky-uppforandekod {
    padding: 48px 24px 80px;
  }
  .pocky-uppforandekod .puk-title {
    font-size: 24px;
  }
  .pocky-uppforandekod h2 {
    font-size: 16px;
  }
  .pocky-uppforandekod .puk-signoff strong,
  .pocky-uppforandekod .puk-contact strong {
    min-width: 110px;
  }
}

/* ── POCKY · Köpvillkor ─────────────────── */
.pocky-villkor {
  --pv-text: #1a1a1a;
  --pv-border: #1a1a1a;
  --pv-mono: 'JetBrains Mono', 'Courier New', monospace;
  --pv-sans: 'Inter', -apple-system, sans-serif;

  color: var(--pv-text);
  font-family: var(--pv-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 32px 120px;
}

.pocky-villkor .pv-title {
  font-family: var(--pv-sans);
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: -0.01em;
}

.pocky-villkor .pv-updated {
  font-family: var(--pv-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 16px;
  font-weight: 500;
}

.pocky-villkor h2 {
  font-family: var(--pv-sans);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0 0 20px;
}

.pocky-villkor h3 {
  font-family: var(--pv-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 24px 0 12px;
}

.pocky-villkor h3:first-child {
  margin-top: 0;
}

.pocky-villkor p {
  font-family: var(--pv-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.pocky-villkor p:last-child {
  margin-bottom: 0;
}

.pocky-villkor ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.pocky-villkor ul li {
  font-family: var(--pv-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding-left: 20px;
  position: relative;
  margin-bottom: 6px;
}

.pocky-villkor ul li::before {
  content: "•";
  position: absolute;
  left: 6px;
  top: 0;
}

.pocky-villkor .pv-intro {
  margin-bottom: 0;
}

.pocky-villkor section {
  margin-bottom: 48px;
}

.pocky-villkor section:last-of-type {
  margin-bottom: 0;
}

.pocky-villkor .pv-sep {
  border: 0;
  border-top: 1px solid var(--pv-border);
  margin: 48px 0;
  opacity: 0.3;
}

.pocky-villkor .pv-contact {
  font-family: var(--pv-mono);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--pv-border);
  padding: 16px 24px;
  margin-top: 16px;
}

.pocky-villkor .pv-contact div {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--pv-border);
  flex-wrap: wrap;
}

.pocky-villkor .pv-contact div:last-child {
  border-bottom: none;
}

.pocky-villkor .pv-contact strong {
  font-weight: 700;
  display: inline-block;
  min-width: 90px;
}

.pocky-villkor .pv-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
  border-radius: 2px;
}

.pocky-villkor .pv-link:hover {
  opacity: 0.6;
}

.pocky-villkor .pv-link:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--pv-border);
}

@media (max-width: 768px) {
  .pocky-villkor {
    padding: 48px 24px 80px;
  }
  .pocky-villkor .pv-title {
    font-size: 24px;
  }
  .pocky-villkor h2 {
    font-size: 16px;
  }
}

/* ── POCKY · Cookiepolicy ─────────────────── */
.pocky-cookies {
  --pc-text: #1a1a1a;
  --pc-border: #1a1a1a;
  --pc-mono: 'JetBrains Mono', 'Courier New', monospace;
  --pc-sans: 'Inter', -apple-system, sans-serif;

  color: var(--pc-text);
  font-family: var(--pc-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 32px 120px;
}

.pocky-cookies .pc-title {
  font-family: var(--pc-sans);
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: -0.01em;
}

.pocky-cookies .pc-updated {
  font-family: var(--pc-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 16px;
  font-weight: 500;
}

.pocky-cookies h2 {
  font-family: var(--pc-sans);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0 0 20px;
}

.pocky-cookies h3 {
  font-family: var(--pc-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 24px 0 12px;
}

.pocky-cookies h3:first-child {
  margin-top: 0;
}

.pocky-cookies p {
  font-family: var(--pc-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.pocky-cookies p:last-child {
  margin-bottom: 0;
}

.pocky-cookies ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.pocky-cookies ul li {
  font-family: var(--pc-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding-left: 20px;
  position: relative;
  margin-bottom: 6px;
}

.pocky-cookies ul li::before {
  content: "•";
  position: absolute;
  left: 6px;
  top: 0;
}

.pocky-cookies .pc-intro {
  margin-bottom: 0;
}

.pocky-cookies section {
  margin-bottom: 48px;
}

.pocky-cookies section:last-of-type {
  margin-bottom: 0;
}

.pocky-cookies .pc-sep {
  border: 0;
  border-top: 1px solid var(--pc-border);
  margin: 48px 0;
  opacity: 0.3;
}

.pocky-cookies .pc-contact {
  font-family: var(--pc-mono);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--pc-border);
  padding: 16px 24px;
  margin-top: 16px;
}

.pocky-cookies .pc-contact div {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--pc-border);
  flex-wrap: wrap;
}

.pocky-cookies .pc-contact div:last-child {
  border-bottom: none;
}

.pocky-cookies .pc-contact strong {
  font-weight: 700;
  display: inline-block;
  min-width: 90px;
}

.pocky-cookies .pc-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
  border-radius: 2px;
}

.pocky-cookies .pc-link:hover {
  opacity: 0.6;
}

.pocky-cookies .pc-link:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--pc-border);
}

@media (max-width: 768px) {
  .pocky-cookies {
    padding: 48px 24px 80px;
  }
  .pocky-cookies .pc-title {
    font-size: 24px;
  }
  .pocky-cookies h2 {
    font-size: 16px;
  }
}

/* ── POCKY · Villkor för webbplatsen ─────────────────── */
.pocky-webbvillkor {
  --pw-text: #1a1a1a;
  --pw-border: #1a1a1a;
  --pw-mono: 'JetBrains Mono', 'Courier New', monospace;
  --pw-sans: 'Inter', -apple-system, sans-serif;

  color: var(--pw-text);
  font-family: var(--pw-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 32px 120px;
}

.pocky-webbvillkor .pw-title {
  font-family: var(--pw-sans);
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: -0.01em;
}

.pocky-webbvillkor .pw-updated {
  font-family: var(--pw-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 16px;
  font-weight: 500;
}

.pocky-webbvillkor h2 {
  font-family: var(--pw-sans);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0 0 20px;
}

.pocky-webbvillkor h3 {
  font-family: var(--pw-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 24px 0 12px;
}

.pocky-webbvillkor h3:first-child {
  margin-top: 0;
}

.pocky-webbvillkor p {
  font-family: var(--pw-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.pocky-webbvillkor p:last-child {
  margin-bottom: 0;
}

.pocky-webbvillkor ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.pocky-webbvillkor ul li {
  font-family: var(--pw-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding-left: 20px;
  position: relative;
  margin-bottom: 6px;
}

.pocky-webbvillkor ul li::before {
  content: "•";
  position: absolute;
  left: 6px;
  top: 0;
}

.pocky-webbvillkor .pw-intro {
  margin-bottom: 0;
}

.pocky-webbvillkor section {
  margin-bottom: 48px;
}

.pocky-webbvillkor section:last-of-type {
  margin-bottom: 0;
}

.pocky-webbvillkor .pw-sep {
  border: 0;
  border-top: 1px solid var(--pw-border);
  margin: 48px 0;
  opacity: 0.3;
}

.pocky-webbvillkor .pw-contact {
  font-family: var(--pw-mono);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--pw-border);
  padding: 16px 24px;
  margin: 16px 0;
}

.pocky-webbvillkor .pw-contact div {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--pw-border);
  flex-wrap: wrap;
}

.pocky-webbvillkor .pw-contact div:last-child {
  border-bottom: none;
}

.pocky-webbvillkor .pw-contact strong {
  font-weight: 700;
  display: inline-block;
  min-width: 90px;
}

.pocky-webbvillkor .pw-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
  border-radius: 2px;
}

.pocky-webbvillkor .pw-link:hover {
  opacity: 0.6;
}

.pocky-webbvillkor .pw-link:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--pw-border);
}

@media (max-width: 768px) {
  .pocky-webbvillkor {
    padding: 48px 24px 80px;
  }
  .pocky-webbvillkor .pw-title {
    font-size: 24px;
  }
  .pocky-webbvillkor h2 {
    font-size: 16px;
  }
}

/* ── POCKY · Kvalitet och standarder ─────────────────── */
.pocky-kvalitet {
  --pq-text: #1a1a1a;
  --pq-border: #1a1a1a;
  --pq-mono: 'JetBrains Mono', 'Courier New', monospace;
  --pq-sans: 'Inter', -apple-system, sans-serif;

  color: var(--pq-text);
  font-family: var(--pq-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 32px 120px;
}

.pocky-kvalitet .pq-title {
  font-family: var(--pq-sans);
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: -0.01em;
}

.pocky-kvalitet .pq-updated {
  font-family: var(--pq-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 16px;
  font-weight: 500;
}

.pocky-kvalitet h2 {
  font-family: var(--pq-sans);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0 0 20px;
}

.pocky-kvalitet h3 {
  font-family: var(--pq-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 24px 0 12px;
}

.pocky-kvalitet h3:first-child {
  margin-top: 0;
}

.pocky-kvalitet p {
  font-family: var(--pq-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.pocky-kvalitet p:last-child {
  margin-bottom: 0;
}

.pocky-kvalitet ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.pocky-kvalitet ul li {
  font-family: var(--pq-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding-left: 20px;
  position: relative;
  margin-bottom: 6px;
}

.pocky-kvalitet ul li::before {
  content: "•";
  position: absolute;
  left: 6px;
  top: 0;
}

.pocky-kvalitet .pq-intro {
  margin-bottom: 0;
}

.pocky-kvalitet section {
  margin-bottom: 48px;
}

.pocky-kvalitet section:last-of-type {
  margin-bottom: 0;
}

.pocky-kvalitet .pq-sep {
  border: 0;
  border-top: 1px solid var(--pq-border);
  margin: 48px 0;
  opacity: 0.3;
}

.pocky-kvalitet .pq-notice {
  border: 1px solid var(--pq-border);
  padding: 20px 24px;
  margin: 24px 0 0;
}

.pocky-kvalitet .pq-notice h3 {
  margin-top: 0;
}

.pocky-kvalitet .pq-notice p:last-child {
  margin-bottom: 0;
}

.pocky-kvalitet .pq-contact {
  font-family: var(--pq-mono);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--pq-border);
  padding: 16px 24px;
  margin-top: 16px;
}

.pocky-kvalitet .pq-contact div {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--pq-border);
  flex-wrap: wrap;
}

.pocky-kvalitet .pq-contact div:last-child {
  border-bottom: none;
}

.pocky-kvalitet .pq-contact strong {
  font-weight: 700;
  display: inline-block;
  min-width: 90px;
}

.pocky-kvalitet .pq-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
  border-radius: 2px;
}

.pocky-kvalitet .pq-link:hover {
  opacity: 0.6;
}

.pocky-kvalitet .pq-link:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--pq-border);
}

@media (max-width: 768px) {
  .pocky-kvalitet {
    padding: 48px 24px 80px;
  }
  .pocky-kvalitet .pq-title {
    font-size: 24px;
  }
  .pocky-kvalitet h2 {
    font-size: 16px;
  }
}

/* ── POCKY · Föreskrifter och råd ─────────────────── */
.pocky-foreskrifter {
  --pf-text: #1a1a1a;
  --pf-border: #1a1a1a;
  --pf-mono: 'JetBrains Mono', 'Courier New', monospace;
  --pf-sans: 'Inter', -apple-system, sans-serif;

  color: var(--pf-text);
  font-family: var(--pf-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 32px 120px;
}

.pocky-foreskrifter .pf-title {
  font-family: var(--pf-sans);
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: -0.01em;
}

.pocky-foreskrifter .pf-updated {
  font-family: var(--pf-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 16px;
  font-weight: 500;
}

.pocky-foreskrifter h2 {
  font-family: var(--pf-sans);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0 0 20px;
}

.pocky-foreskrifter h3 {
  font-family: var(--pf-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 24px 0 12px;
}

.pocky-foreskrifter h3:first-child {
  margin-top: 0;
}

.pocky-foreskrifter p {
  font-family: var(--pf-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.pocky-foreskrifter p:last-child {
  margin-bottom: 0;
}

.pocky-foreskrifter ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.pocky-foreskrifter ul li {
  font-family: var(--pf-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding-left: 20px;
  position: relative;
  margin-bottom: 6px;
}

.pocky-foreskrifter ul li::before {
  content: "•";
  position: absolute;
  left: 6px;
  top: 0;
}

.pocky-foreskrifter .pf-intro {
  margin-bottom: 0;
}

.pocky-foreskrifter section {
  margin-bottom: 48px;
}

.pocky-foreskrifter section:last-of-type {
  margin-bottom: 0;
}

.pocky-foreskrifter .pf-sep {
  border: 0;
  border-top: 1px solid var(--pf-border);
  margin: 48px 0;
  opacity: 0.3;
}

.pocky-foreskrifter .pf-contact {
  font-family: var(--pf-mono);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--pf-border);
  padding: 16px 24px;
  margin-top: 16px;
}

.pocky-foreskrifter .pf-contact div {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--pf-border);
  flex-wrap: wrap;
}

.pocky-foreskrifter .pf-contact div:last-child {
  border-bottom: none;
}

.pocky-foreskrifter .pf-contact strong {
  font-weight: 700;
  display: inline-block;
  min-width: 90px;
}

.pocky-foreskrifter .pf-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
  border-radius: 2px;
}

.pocky-foreskrifter .pf-link:hover {
  opacity: 0.6;
}

.pocky-foreskrifter .pf-link:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--pf-border);
}

@media (max-width: 768px) {
  .pocky-foreskrifter {
    padding: 48px 24px 80px;
  }
  .pocky-foreskrifter .pf-title {
    font-size: 24px;
  }
  .pocky-foreskrifter h2 {
    font-size: 16px;
  }
}

/* ── POCKY · Vanliga frågor (FAQ) ─────────────────── */
.pocky-faq {
  --pfq-text: #1a1a1a;
  --pfq-border: #1a1a1a;
  --pfq-mono: 'JetBrains Mono', 'Courier New', monospace;
  --pfq-sans: 'Inter', -apple-system, sans-serif;

  color: var(--pfq-text);
  font-family: var(--pfq-sans);
  padding: 80px 24px 120px;
  max-width: 1100px;
  margin: 0 auto;
}

.pocky-faq.faq-section {
  padding: 80px 24px 120px;
}

.pocky-faq .pfq-title {
  font-family: var(--pfq-sans);
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.pocky-faq .pfq-lead {
  font-family: var(--pfq-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-align: center;
  margin: 0 0 56px;
  color: var(--pfq-text);
  opacity: 0.6;
}

.pocky-faq .faq-layout {
  padding-left: 0;
  padding-right: 0;
}

.pocky-faq .pfq-group {
  font-family: var(--pfq-sans);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin: 40px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pfq-border);
}

.pocky-faq .faq-content > .pfq-group:first-child {
  margin-top: 0;
}

.pocky-faq .faq-panel + .pfq-group {
  margin-top: 56px;
}

.pocky-faq .pfq-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
}

.pocky-faq .pfq-link:hover {
  opacity: 0.6;
}

.pocky-faq .pfq-contact {
  font-family: var(--pfq-mono);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--pfq-border);
  padding: 16px 24px;
  margin-top: 16px;
}

.pocky-faq .pfq-contact div {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--pfq-border);
  flex-wrap: wrap;
}

.pocky-faq .pfq-contact div:last-child {
  border-bottom: none;
}

.pocky-faq .pfq-contact strong {
  font-weight: 700;
  display: inline-block;
  min-width: 110px;
}

@media (max-width: 1023px) {
  .pocky-faq .pfq-group,
  .pocky-faq .faq-panel + .pfq-group {
    margin-top: 40px;
  }
}

@media (max-width: 768px) {
  .pocky-faq,
  .pocky-faq.faq-section {
    padding: 48px 24px 80px;
  }
  .pocky-faq .pfq-title {
    font-size: 24px;
  }
  .pocky-faq .pfq-lead {
    margin-bottom: 40px;
  }
}

/* ── POCKY · Legal/info page typography source of truth ─────────
   These pages used their own Inter/JetBrains font variables. Keep their
   document layout, but inherit the theme font settings used by the rest
   of the shop. */
.pocky-integritet,
.pocky-villkor,
.pocky-webbvillkor,
.pocky-kvalitet,
.pocky-foreskrifter,
.pocky-uppforandekod,
.pocky-cookies,
.pocky-retur,
.pocky-leverans,
.pocky-kontakt {
  font-family: var(--font-body) !important;
}

.pocky-integritet *,
.pocky-villkor *,
.pocky-webbvillkor *,
.pocky-kvalitet *,
.pocky-foreskrifter *,
.pocky-uppforandekod *,
.pocky-cookies *,
.pocky-retur *,
.pocky-leverans *,
.pocky-kontakt * {
  font-family: inherit !important;
}

.pocky-integritet .pi-title,
.pocky-integritet h1,
.pocky-integritet h2,
.pocky-villkor .pv-title,
.pocky-villkor h1,
.pocky-villkor h2,
.pocky-webbvillkor .pw-title,
.pocky-webbvillkor h1,
.pocky-webbvillkor h2,
.pocky-kvalitet .pq-title,
.pocky-kvalitet h1,
.pocky-kvalitet h2,
.pocky-foreskrifter .pf-title,
.pocky-foreskrifter h1,
.pocky-foreskrifter h2,
.pocky-uppforandekod .puk-title,
.pocky-uppforandekod h1,
.pocky-uppforandekod h2,
.pocky-cookies .pc-title,
.pocky-cookies h1,
.pocky-cookies h2,
.pocky-retur .pr-title,
.pocky-retur h1,
.pocky-retur h2,
.pocky-leverans .pl-title,
.pocky-leverans h1,
.pocky-leverans h2,
.pocky-kontakt .pk-title,
.pocky-kontakt h1,
.pocky-kontakt h2 {
  font-family: var(--font-heading) !important;
}

.pocky-integritet :where(h1, h2, h3, h4, h5, h6),
.pocky-villkor :where(h1, h2, h3, h4, h5, h6),
.pocky-webbvillkor :where(h1, h2, h3, h4, h5, h6),
.pocky-kvalitet :where(h1, h2, h3, h4, h5, h6),
.pocky-foreskrifter :where(h1, h2, h3, h4, h5, h6),
.pocky-uppforandekod :where(h1, h2, h3, h4, h5, h6),
.pocky-cookies :where(h1, h2, h3, h4, h5, h6),
.pocky-retur :where(h1, h2, h3, h4, h5, h6),
.pocky-leverans :where(h1, h2, h3, h4, h5, h6),
.pocky-kontakt :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading) !important;
}

.pocky-integritet p,
.pocky-integritet li,
.pocky-integritet h3,
.pocky-integritet .pi-updated,
.pocky-integritet .pi-contact,
.pocky-villkor p,
.pocky-villkor li,
.pocky-villkor h3,
.pocky-villkor .pv-updated,
.pocky-villkor .pv-contact,
.pocky-webbvillkor p,
.pocky-webbvillkor li,
.pocky-webbvillkor h3,
.pocky-webbvillkor .pw-updated,
.pocky-webbvillkor .pw-contact,
.pocky-kvalitet p,
.pocky-kvalitet li,
.pocky-kvalitet h3,
.pocky-kvalitet .pq-updated,
.pocky-kvalitet .pq-contact,
.pocky-foreskrifter p,
.pocky-foreskrifter li,
.pocky-foreskrifter h3,
.pocky-foreskrifter .pf-updated,
.pocky-foreskrifter .pf-contact,
.pocky-uppforandekod p,
.pocky-uppforandekod li,
.pocky-uppforandekod h3,
.pocky-uppforandekod .puk-meta,
.pocky-uppforandekod .puk-contact,
.pocky-uppforandekod .puk-signoff,
.pocky-cookies p,
.pocky-cookies li,
.pocky-cookies h3,
.pocky-cookies .pc-updated,
.pocky-cookies .pc-contact,
.pocky-retur p,
.pocky-retur li,
.pocky-retur h3,
.pocky-retur .pr-updated,
.pocky-retur .pr-contact,
.pocky-retur .pr-download,
.pocky-leverans p,
.pocky-leverans li,
.pocky-leverans h3,
.pocky-leverans .pl-updated,
.pocky-leverans .pl-contact,
.pocky-kontakt p,
.pocky-kontakt li,
.pocky-kontakt h3,
.pocky-kontakt .pk-lead,
.pocky-kontakt .pk-contact,
.pocky-kontakt .pk-field label,
.pocky-kontakt .pk-field input,
.pocky-kontakt .pk-field textarea,
.pocky-kontakt .pk-submit,
.pocky-kontakt .pk-alert {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* ── POCKY · Om oss (editorial magazine layout) ─────────────────── */
.pocky-about {
  --pa-ink: #6e3404;
  --pa-ink-muted: #7e7e7e;
  --pa-bg: transparent;
  --pa-sans: 'Inter', -apple-system, sans-serif;

  color: var(--pa-ink);
  font-family: var(--pa-sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  max-width: 820px;
  width: 100%;
  margin: 4em auto;
  padding: 0;
}

.pocky-about img {
  width: 100%;
  height: auto;
  display: block;
}

.pocky-about a {
  text-decoration: none;
  color: inherit;
}

.pocky-about .pa-page {
  margin-bottom: 6em;
}

.pocky-about .pa-page:last-child {
  margin-bottom: 0;
}

/* Utility — figcaption */
.pocky-about .pa-fct {
  width: 70px;
  font-size: 0.7rem;
  color: var(--pa-ink-muted);
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pocky-about .pa-fct a {
  display: block;
}

/* Utility — paragraph text block */
.pocky-about .pa-pgt {
  color: var(--pa-ink-muted);
  text-align: justify;
  line-height: 20px;
}

.pocky-about .pa-pgt p {
  margin-bottom: 1em;
}

.pocky-about .pa-pgt p:last-child {
  margin-bottom: 0;
}

/* PAGE ONE */
.pocky-about .pa-page--one {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: min-content;
  gap: 1em;
}

.pocky-about .pa-page-one__photo {
  grid-column: 1 / 8;
  grid-row: 1 / 4;
  position: relative;
  z-index: 1;
}

.pocky-about .pa-page-one__photo figcaption {
  position: absolute;
  top: 0;
  right: -75px;
  z-index: 2;
}

.pocky-about .pa-page-one__header,
.pocky-about .pa-page-one__subhead {
  grid-column: 7 / 9;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}

.pocky-about .pa-page-one__header {
  grid-row: 2 / 3;
}

.pocky-about .pa-page-one__header h2 {
  font-family: var(--pa-sans);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 1px;
  background-color: var(--pa-bg);
  margin: 0 0 5px;
  padding: 0.05em 0.2em;
  line-height: 1.1;
}

.pocky-about .pa-page-one__header h1 {
  font-family: var(--pa-sans);
  font-size: 2rem;
  font-weight: 700;
  background-color: var(--pa-bg);
  padding: 0.05em 0.2em;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.pocky-about .pa-page-one__subhead {
  grid-row: 3 / 5;
}

.pocky-about .pa-page-one__subhead p {
  line-height: 24px;
  margin-top: 20px;
  padding: 0.5em 0 0 0.5em;
  background-color: var(--pa-bg);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.pocky-about .pa-page-one__quote {
  grid-column: 1 / 3;
  grid-row: 5 / 7;
  text-transform: uppercase;
  line-height: 18px;
  text-align: right;
  position: relative;
  height: min-content;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.pocky-about .pa-page-one__quote p {
  padding: 20px 5px;
}

.pocky-about .pa-page-one__quote::before,
.pocky-about .pa-page-one__quote::after {
  content: "";
  position: absolute;
  right: 0;
  width: 20px;
  height: 5px;
  background-color: var(--pa-ink);
}

.pocky-about .pa-page-one__quote::before {
  top: 0;
}

.pocky-about .pa-page-one__quote::after {
  bottom: 0;
}

.pocky-about .pa-page-one__desc {
  grid-column: 3 / 9;
  grid-row: 6 / 9;
  columns: 2;
  column-gap: 1em;
}

.pocky-about .pa-page-one__info {
  grid-column: 1 / 3;
  grid-row: 8 / 9;
  text-transform: uppercase;
  line-height: 18px;
  text-align: right;
  font-size: 0.7rem;
  color: var(--pa-ink-muted);
  letter-spacing: 0.05em;
}

/* PAGE TWO */
.pocky-about .pa-page--two {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: min-content;
  gap: 1em;
}

.pocky-about .pa-page--two figcaption {
  position: absolute;
}

.pocky-about .pa-page-two__photo1 {
  grid-column: 1 / 5;
  grid-row: 1 / 4;
  margin-top: 150px;
  position: relative;
  z-index: 2;
}

.pocky-about .pa-page-two__photo1 figcaption {
  top: -20px;
  left: 0;
  z-index: 6;
}

.pocky-about .pa-page-two__photo2 {
  grid-column: 5 / 9;
  grid-row: 1 / 4;
  position: relative;
  z-index: 1;
}

.pocky-about .pa-page-two__photo2 figcaption {
  top: 0;
  left: -75px;
  z-index: 5;
  text-align: right;
}

.pocky-about .pa-page-two__subhead {
  grid-column: 5 / 7;
  grid-row: 2 / 4;
  text-transform: uppercase;
  line-height: 24px;
  padding: 0.5em 0 0 0.5em;
  background-color: var(--pa-bg);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  z-index: 3;
  position: relative;
}

.pocky-about .pa-page-two__info {
  grid-column: 1 / 3;
  grid-row: 8 / 9;
  text-transform: uppercase;
  line-height: 18px;
  position: relative;
  align-self: center;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.pocky-about .pa-page-two__info p {
  padding: 20px 5px;
}

.pocky-about .pa-page-two__info::before,
.pocky-about .pa-page-two__info::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 5px;
  background-color: var(--pa-ink);
}

.pocky-about .pa-page-two__info::before {
  top: 0;
}

.pocky-about .pa-page-two__info::after {
  bottom: 0;
}

.pocky-about .pa-page-two__desc {
  grid-column: 3 / 9;
  grid-row: 8 / 9;
  columns: 2;
  column-gap: 1em;
}

/* PAGE THREE */
.pocky-about .pa-page--three {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: min-content;
  gap: 1em;
}

.pocky-about .pa-page-three__photo1 {
  grid-column: 1 / 6;
  grid-row: 1 / 2;
  position: relative;
}

.pocky-about .pa-page-three__photo1 figcaption {
  position: absolute;
  top: 0;
  right: -75px;
}

.pocky-about .pa-page-three__photo2 {
  grid-column: 1 / 5;
  grid-row: 2 / 3;
  position: relative;
}

.pocky-about .pa-page-three__photo2 figcaption {
  position: absolute;
  top: 0;
  left: -80px;
  z-index: 10;
  text-align: right;
}

.pocky-about .pa-page-three__photo3 {
  grid-column: 5 / 9;
  grid-row: 2 / 3;
  position: relative;
}

.pocky-about .pa-page-three__photo3 figcaption {
  position: absolute;
  top: -20px;
  right: 0;
  width: 200px;
  text-align: right;
}

.pocky-about .pa-page-three__desc {
  grid-column: 1 / 7;
  grid-row: 4 / 6;
  columns: 2;
  column-gap: 1em;
}

.pocky-about .pa-page-three__footnote {
  grid-column: 7 / 9;
  grid-row: 4 / 5;
  font-size: 0.75rem;
  color: var(--pa-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 18px;
}

.pocky-about .pa-page-three__info {
  grid-column: 7 / 9;
  grid-row: 5 / 6;
  text-transform: uppercase;
  line-height: 18px;
  text-align: right;
  position: relative;
  height: min-content;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.pocky-about .pa-page-three__info p {
  padding: 20px 5px;
  text-align: left;
}

.pocky-about .pa-page-three__info::before,
.pocky-about .pa-page-three__info::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 5px;
  background-color: var(--pa-ink);
}

.pocky-about .pa-page-three__info::before {
  top: 0;
}

.pocky-about .pa-page-three__info::after {
  bottom: 0;
}

@media (max-width: 640px) {
  .pocky-about .pa-page-one__header,
  .pocky-about .pa-page-one__subhead {
    grid-column: 5 / 9;
  }
  .pocky-about figcaption {
    display: none;
  }
}

@media (max-width: 480px) {
  .pocky-about {
    margin: 1em auto;
  }
  .pocky-about .pa-page {
    margin-bottom: 1em;
    padding: 0 20px;
  }

  /* PAGE ONE */
  .pocky-about .pa-page-one__photo {
    grid-column: 1 / 9;
  }
  .pocky-about .pa-page-one__header {
    grid-row: 3 / 4;
  }
  .pocky-about .pa-page-one__subhead {
    grid-column: 2 / 8;
    grid-row: 4 / 5;
  }
  .pocky-about .pa-page-one__desc {
    grid-column: 1 / 9;
    grid-row: 5 / 6;
    columns: auto;
  }
  .pocky-about .pa-page-one__desc p:nth-of-type(2) {
    padding-left: 40%;
  }
  .pocky-about .pa-page-one__desc p:nth-of-type(1) {
    padding-right: 40%;
  }
  .pocky-about .pa-page-one__info {
    grid-column: 6 / 9;
    grid-row: 5 / 7;
  }
  .pocky-about .pa-page-one__quote {
    grid-column: 1 / 4;
    grid-row: 6 / 8;
    text-align: left;
    /* dialed in: -218px tucks the quote up beside the intro copy without
       touching the top paragraph. Copy-length sensitive — toward 0 = lower,
       more negative = higher. */
    margin-top: -218px;
  }
  .pocky-about .pa-page-one__quote::before,
  .pocky-about .pa-page-one__quote::after {
    left: -5px;
    right: auto;
  }

  /* PAGE TWO */
  .pocky-about .pa-page-two__photo1 {
    grid-column: 1 / 6;
    grid-row: 3 / 6;
    margin-top: 0;
  }
  .pocky-about .pa-page-two__photo2 {
    grid-column: 3 / 9;
    grid-row: 2 / 4;
  }
  .pocky-about .pa-page-two__subhead {
    grid-column: 6 / 9;
    grid-row: 4 / 6;
    margin-top: -50px;
  }
  .pocky-about .pa-page-two__info {
    grid-column: 1 / 3;
    grid-row: 6 / 7;
  }
  .pocky-about .pa-page-two__desc {
    grid-column: 1 / 9;
    grid-row: 6 / 8;
    columns: auto;
  }
  .pocky-about .pa-page-two__desc p:nth-of-type(1),
  .pocky-about .pa-page-two__desc p:nth-of-type(2) {
    padding-left: 34%;
  }

  /* PAGE THREE */
  .pocky-about .pa-page-three__photo1 {
    grid-column: 1 / 9;
  }
  .pocky-about .pa-page-three__desc {
    grid-column: 1 / 9;
    grid-row: 4 / 6;
    columns: auto;
  }
  .pocky-about .pa-page-three__footnote {
    grid-column: 7 / 9;
    grid-row: 4 / 5;
  }
  .pocky-about .pa-page-three__info {
    grid-column: 6 / 9;
    /* was 5 / 6 — shared a row with the body copy, so the orange note sat on
       top of it. 6 / 7 drops it into the row below the copy. */
    grid-row: 6 / 7;
    /* ↓ THIS is the knob for the orange note, same idea as the quote above.
       0 = sits just below the copy (current). Make it negative to pull it up
       beside the lower paragraphs — but don't go so far it reaches the
       full-width paragraph that was overlapping before. */
    margin-top: -260px;
  }
  .pocky-about .pa-page-three__desc p:nth-of-type(1) {
    padding-right: 30%;
  }
  .pocky-about .pa-page-three__desc p:nth-of-type(4),
  .pocky-about .pa-page-three__desc p:nth-of-type(5) {
    padding-right: 40%;
  }
}

/* ── Capybara (verbatim, scoped under .pocky-404) ───────── */
.pocky-404 .capybaraloader {
  width: 14em;
  height: 7.5em;
  position: relative;
  z-index: 1;
  --color: var(--p404-capy);
  --color2: var(--p404-capy2);
  transform: scale(0.95);
  transform-origin: bottom center;
}
.pocky-404 .capybara {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
.pocky-404 .capy {
  width: 85%;
  height: 100%;
  background: linear-gradient(var(--color), 90%, var(--color2));
  border-radius: 45%;
  position: relative;
  z-index: 1;
  animation: p404-movebody 1s linear infinite;
}
.pocky-404 .capyhead {
  width: 7.5em;
  height: 7em;
  bottom: 0;
  right: 0;
  position: absolute;
  background-color: var(--color);
  z-index: 3;
  border-radius: 3.5em;
  box-shadow: -1em 0 var(--color2);
  animation: p404-movebody 1s linear infinite;
}
.pocky-404 .capyear {
  width: 2em;
  height: 2em;
  background: linear-gradient(-45deg, var(--color), 90%, var(--color2));
  top: 0;
  left: 0;
  border-radius: 100%;
  position: absolute;
  overflow: hidden;
  z-index: 3;
}
.pocky-404 .capyear:nth-child(2) {
  left: 5em;
  background: linear-gradient(25deg, var(--color), 90%, var(--color2));
}
.pocky-404 .capyear2 {
  width: 100%;
  height: 1em;
  background-color: var(--color2);
  bottom: 0;
  left: 0.5em;
  border-radius: 100%;
  position: absolute;
  transform: rotate(-45deg);
}
.pocky-404 .capymouth {
  width: 3.5em;
  height: 2em;
  background-color: var(--color2);
  position: absolute;
  bottom: 0;
  left: 2.5em;
  border-radius: 50%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.5em;
}
.pocky-404 .capylips {
  width: 0.25em;
  height: 0.75em;
  border-radius: 100%;
  transform: rotate(-45deg);
  background-color: var(--color);
}
.pocky-404 .capylips:nth-child(2) { transform: rotate(45deg); }
.pocky-404 .capyeye {
  width: 2em;
  height: 0.5em;
  background-color: var(--color2);
  position: absolute;
  bottom: 3.5em;
  left: 1.5em;
  border-radius: 5em;
  transform: rotate(45deg);
}
.pocky-404 .capyeye:nth-child(4) {
  transform: rotate(-45deg);
  left: 5.5em;
  width: 1.75em;
}
.pocky-404 .capyleg {
  width: 6em;
  height: 5em;
  bottom: 0;
  left: 0;
  position: absolute;
  background: linear-gradient(var(--color), 95%, var(--color2));
  z-index: 2;
  border-radius: 2em;
  animation: p404-movebody 1s linear infinite;
}
.pocky-404 .capyleg2 {
  width: 1.75em;
  height: 3em;
  bottom: 0;
  left: 3.25em;
  position: absolute;
  background: linear-gradient(var(--color), 80%, var(--color2));
  z-index: 2;
  border-radius: 0.75em;
  box-shadow: inset 0 -0.5em var(--color2);
  animation: p404-moveleg 1s linear infinite;
}
.pocky-404 .capyleg2:nth-child(3) {
  width: 1.25em;
  left: 0.5em;
  height: 2em;
  animation: p404-moveleg2 1s linear infinite 0.075s;
}
@keyframes p404-movebody {
  0%, 100% { transform: translateX(0%); }
  50%      { transform: translateX(2%); }
}
@keyframes p404-moveleg {
  0%   { transform: rotate(-45deg) translateX(-5%); }
  50%  { transform: rotate( 45deg) translateX( 5%); }
  100% { transform: rotate(-45deg) translateX(-5%); }
}
@keyframes p404-moveleg2 {
  0%   { transform: rotate( 45deg); }
  50%  { transform: rotate(-45deg); }
  100% { transform: rotate( 45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .pocky-404 .capy,
  .pocky-404 .capyhead,
  .pocky-404 .capyleg,
  .pocky-404 .capyleg2,
  .pocky-404__floater,
  .pocky-404__shadow {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   POCKY PRODUCT PAGE — flavor picker · qty tiers · info tabs
   All classes prefixed with `pocky-` to isolate from theme.
   ════════════════════════════════════════════════════════════ */

/* Restyle the default Quickbutik qty +/- input — matches CTA button height (52px) */
.pocky-product-active [data-qb-setting="productpage_show_amount"] {
  display: flex !important;
  align-items: stretch !important;
}
.pocky-product-active [data-qb-setting="productpage_show_amount"] > div {
  border: 1px solid var(--color-interactive) !important;
  border-radius: 0 !important;
  height: 52px !important;
  min-height: 52px !important;
  align-items: stretch !important;
}
.pocky-product-active [data-qb-setting="productpage_show_amount"] button {
  padding: 0 var(--space-4) !important;
  background: transparent !important;
  height: 100% !important;
  min-height: 52px !important;
  color: var(--color-text-muted) !important;
}
.pocky-product-active [data-qb-setting="productpage_show_amount"] button:hover {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
}
.pocky-product-active [data-qb-setting="productpage_show_amount"] input[type="number"] {
  width: 48px !important;
  padding: 0 !important;
  height: 100% !important;
  min-height: 52px !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--color-text) !important;
  background: transparent !important;
  border: none !important;
}

/* Wishlist — full-width outlined button below "Lägg i korgen", same height (52px) */


/* ─── Flavor picker ─── */
.pocky-flavor-picker { margin: var(--space-8) 0; }

.pocky-flavor-picker__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.pocky-flavor-picker__label {
  font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-text);
}
.pocky-flavor-picker__meta {
  font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-text-muted);
}

.pocky-flavor-picker__row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}

/* Two-column variant (Styrka picker) — uses antal-style solid coloring,
   not the colored ink-blob fill of Smak. */
.pocky-flavor-picker--two .pocky-flavor-picker__row {
  grid-template-columns: repeat(2, 1fr);
}
.pocky-flavor-picker--two .pocky-flavor-option::before {
  display: none;            /* no ink-blob */
}
.pocky-flavor-picker--two .pocky-flavor-option__dot {
  display: none;
}
.pocky-flavor-picker--two .pocky-flavor-option {
  justify-content: center;        /* center the name since dot is gone */
}
.pocky-flavor-picker--two .pocky-flavor-option--active {
  background-color: var(--color-interactive);
  color: var(--color-bg);
}
.pocky-flavor-picker--two .pocky-flavor-option--active:hover {
  background-color: var(--color-interactive);  /* don't lighten on hover when active */
}

.pocky-flavor-option {
  position: relative; display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3); background: transparent; border: none;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer; font-family: inherit; color: var(--color-text-muted);
  text-align: left; text-decoration: none; overflow: hidden;
  transition: background-color var(--transition-interactive), color var(--transition-interactive);
}
.pocky-flavor-option:hover { background-color: var(--color-surface); color: var(--color-text); }
.pocky-flavor-option--active {
  background-color: var(--flavor-color);
  color: var(--color-text);
}
.pocky-flavor-option--active:hover { background-color: var(--flavor-color); }

.pocky-flavor-option__dot {
  display: block; width: 12px; height: 12px; border-radius: 999px;
  background: var(--flavor-color); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
  flex-shrink: 0; position: relative; z-index: 1;
}
.pocky-flavor-option--active .pocky-flavor-option__dot { box-shadow: none; }

.pocky-flavor-option__name {
  font-size: var(--text-xs); font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 1;
}
.pocky-flavor-option--active .pocky-flavor-option__name { font-weight: 700; }

@media (max-width: 1023px) { .pocky-flavor-picker__row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .pocky-flavor-picker__row { grid-template-columns: repeat(2, 1fr); } }

/* ─── Qty tier selector ─── */
.pocky-qty-tiers { margin: var(--space-6) 0; }
.pocky-qty-tiers__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--space-3);
}
.pocky-qty-tiers__label {
  font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pocky-qty-tiers__meta {
  font-size: var(--text-xs); color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.pocky-qty-tiers__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
/* Two-tile variant — used by Styrka picker */
.pocky-qty-tiers--two .pocky-qty-tiers__grid { grid-template-columns: repeat(2, 1fr); }
/* Anchor variant — strength tiles use <a> not <button> */
a.pocky-qty-tier { text-decoration: none; }

.pocky-qty-tier {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--space-1);
  padding: var(--space-4) var(--space-3) var(--space-3);
  background: transparent; border: 1px solid var(--color-border); margin-left: -1px;
  cursor: pointer; font-family: inherit; color: var(--color-text); text-align: center;
  transition: background-color var(--transition-interactive),
              color var(--transition-interactive),
              border-color var(--transition-interactive);
}
.pocky-qty-tier:first-child { margin-left: 0; }
.pocky-qty-tier:hover { border-color: var(--color-interactive); z-index: 1; }
.pocky-qty-tier--active {
  background-color: var(--color-interactive) !important;
  border-color: var(--color-interactive) !important;
  color: var(--color-bg) !important;
  z-index: 2;
}
.pocky-qty-tier--active .pocky-qty-tier__qty,
.pocky-qty-tier--active .pocky-qty-tier__total { color: var(--color-bg) !important; }
.pocky-qty-tier__qty {
  font-size: var(--text-lg); font-weight: 500; font-variant-numeric: tabular-nums;
}
.pocky-qty-tier__total { font-size: var(--text-sm); font-weight: 500; font-variant-numeric: tabular-nums; }
.pocky-qty-tier__unit { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.pocky-qty-tier--active .pocky-qty-tier__unit { color: rgba(255,255,255,0.7); }

.pocky-qty-tier__save {
  position: absolute; top: 6px; right: 8px;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--color-text-subtle); font-variant-numeric: tabular-nums;
}
.pocky-qty-tier--active .pocky-qty-tier__save { color: rgba(255,255,255,0.6); }

@media (max-width: 640px) {
  .pocky-qty-tiers__grid { grid-template-columns: repeat(2, 1fr); }
  .pocky-qty-tier:nth-child(odd) { margin-left: 0; }
  .pocky-qty-tier:nth-child(n+3) { margin-top: -1px; }
}

/* ─── Info tabs (prototype size: 11px / gap-12 / editorial) ─── */
.pocky-product-tabs {
  margin-top: var(--space-12); padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.pocky-product-tabs__strip {
  display: flex; gap: var(--space-12); padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.pocky-product-tabs__tab {
  position: relative; padding: 0; background: transparent; border: 0;
  cursor: pointer; font-family: inherit;
  font-size: 0.6875rem;        /* 11px — whisper scale */
  font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-text-subtle); transition: color var(--transition-interactive);
}
.pocky-product-tabs__tab:hover { color: var(--color-text-muted); }
.pocky-product-tabs__tab--active { color: var(--color-text); }
.pocky-product-tabs__tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: currentColor; opacity: 0;
  transform: scaleX(0.6);
  transition: opacity 220ms var(--ease-entry), transform 260ms var(--ease-entry);
}
.pocky-product-tabs__tab--active::after { opacity: 1; transform: scaleX(1); }
.pocky-product-tabs__content { padding-top: var(--space-8); }
.pocky-product-tabs__panel {
  font-size: var(--text-sm); line-height: 1.8; color: var(--color-text-muted);
}

/* ─── Säkerhet panel — sectioned editorial layout ─── */

/* Layout rhythm: left intro column, right safety details column. */
.pocky-product-tabs__panel.pocky-safety,
.pocky-product-tabs__panel.pocky-safety > .pocky-safety {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.55;
}

.pocky-safety__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}

.pocky-product-tabs__panel.pocky-safety > .pocky-safety {
  width: 100%;
  grid-column: 1 / -1;
}

.pocky-safety__details {
  min-width: 0;
}

@media (min-width: 900px) {
  .pocky-safety__body {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.42fr);
    column-gap: var(--space-8);
    row-gap: var(--space-8);
  }

  .pocky-safety__body > .pocky-safety__box:first-child,
  .pocky-safety__body > .pocky-safety__section:first-child,
  .pocky-safety__grid > .pocky-safety__section:first-child,
  .pocky-safety__grid > .pocky-safety__box:first-child {
    grid-column: 1;
  }

  .pocky-safety__body > .pocky-safety__details,
  .pocky-safety__body > :nth-child(n+2),
  .pocky-safety__grid > :nth-child(n+2) {
    grid-column: 2;
  }

  .pocky-safety__body > .pocky-safety__box:first-child,
  .pocky-safety__body > .pocky-safety__section:first-child,
  .pocky-safety__grid > .pocky-safety__section:first-child,
  .pocky-safety__grid > .pocky-safety__box:first-child {
    grid-row: 1 / span 20;
  }
}

/* Top: small skull + FARA, separated from sections by a hairline */
.pocky-safety__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: 0;
  margin: var(--space-4) 0 var(--space-4);
  border-bottom: 0;
}
.pocky-safety__icon {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  object-fit: contain;
  opacity: 1;
}
.pocky-safety__warning-label {
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}

/* Grid layout for the sections to save vertical space */
.pocky-safety__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-5, 1.25rem);
}
@media (min-width: 900px) {
  .pocky-safety__grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.42fr);
    column-gap: var(--space-8);
    row-gap: var(--space-6);
  }
}

/* Each named section */
.pocky-safety__box,
.pocky-safety__section {
  margin-bottom: 0;
}
.pocky-safety__section--full {
  margin-bottom: var(--space-4);
}

.pocky-safety__section-title {
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  margin: 0 0 var(--space-1);
}

/* Body paragraph */
.pocky-safety__text {
  font-size: inherit;
  font-weight: 400;
  line-height: 1.55;
  color: inherit;
  margin: 0;
}
.pocky-safety__text strong {
  font-weight: inherit;
  color: inherit;
}
.pocky-safety__ingredients {
  color: inherit;
}

.pocky-safety__details > * + * {
  margin-top: var(--space-4);
}

.pocky-safety__pictograms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.pocky-safety .pocky-safety__pictogram {
  display: inline-block;
  width: 84px;
  height: 84px;
  margin: 0;
  background: url('https://s3.eu-west-1.amazonaws.com/storage.quickbutik.com/stores/96764g/files/skull.png') center / contain no-repeat;
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  text-indent: -9999px;
}

.pocky-safety .pocky-safety__pictogram--ghs06,
.pocky-safety .pocky-safety__pictogram--skull {
  background-image: url('https://s3.eu-west-1.amazonaws.com/storage.quickbutik.com/stores/96764g/files/skull.png');
}

.pocky-safety .pocky-safety__pictogram--ghs08,
.pocky-safety .pocky-safety__pictogram--silhouette {
  background-image: url('https://s3.eu-west-1.amazonaws.com/storage.quickbutik.com/stores/96764g/files/silhouete.png');
}

/* Codes side-by-side */
.pocky-safety__codes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.pocky-safety__code {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pocky-safety__code-label {
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  margin-bottom: 0;
}
.pocky-safety__code-val {
  font-size: inherit;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: inherit;
}

.pocky-product-tabs__panel p { margin: 0 0 var(--space-4); }

.pocky-product-tabs__specs { list-style: none; padding: 0; margin: 0 0 var(--space-6); }
.pocky-product-tabs__specs li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-4); padding: var(--space-2) 0;
  font-size: inherit;
}
.pocky-product-tabs__specs li > span:first-child {
  color: var(--color-text-subtle); text-transform: uppercase;
  letter-spacing: 0.1em; font-weight: 500;
  font-size: 0.75rem;
}
.pocky-product-tabs__specs li > span:last-child {
  color: var(--color-text); font-variant-numeric: tabular-nums; text-align: right;
}
@media (max-width: 640px) {
  .pocky-product-tabs__strip { gap: var(--space-8); padding-bottom: var(--space-3); }
  .pocky-product-tabs__tab { font-size: 0.625rem; letter-spacing: 0.14em; }
}

/* ════════════════════════════════════════════════════════════
   POCKY PROTOTYPE PARITY — typography & component only.
   No flex/width overrides — Quickbutik's default 50/50 flex
   handles resize correctly. Sticky added only on image column.
   ════════════════════════════════════════════════════════════ */

/* (Page-wide header-grid alignment NOT used — Tailwind's default container
   centers the page with its own max-width.) */

/* Thumbnails: clean 4-col CSS grid, scaled down to ~60% of main image width
   (centered) so the strip reads as a smaller secondary element. Aspect 4:5
   with object-contain shows the full product photo, no cropping. */
.pocky-product-active .products-swiper-thumbs {
  height: auto !important;
  overflow: visible !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}
.pocky-product-active .products-swiper-thumbs .swiper-wrapper {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1px !important;
  transform: none !important;
  width: 100% !important;
}
/* Remove any margin Swiper adds to slides via spaceBetween config */
.pocky-product-active .products-swiper-thumbs .swiper-slide {
  margin-right: 0 !important;
}
.pocky-product-active .products-swiper-thumbs .swiper-slide {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.pocky-product-active .products-swiper-thumbs .swiper-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Sticky image column on desktop — image follows scroll, info column scrolls past.
   Selectors target ONLY .container and .flex.flex-wrap (not .w-full or .swiper)
   so Swiper's overflow:hidden is not accidentally overridden. */
@media (min-width: 1024px) {
  .pocky-product-active,
  .pocky-product-active section,
  .pocky-product-active section .container.mx-auto,
  .pocky-product-active section .container > .flex.flex-wrap {
    overflow: visible !important;
  }
  .pocky-product-active section .container > .flex.flex-wrap > div.flex.flex-col {
    position: sticky !important;
    top: var(--space-8) !important;
    align-self: flex-start !important;
    z-index: 1;
  }
}
/* Defensive: lock Swiper's own overflow no matter what ancestor rules say */
.pocky-product-active .swiper,
.pocky-product-active .products-swiper-main {
  overflow: hidden !important;
}

/* Title — editorial light weight, tight tracking */
.pocky-product-active h1[itemprop="name"] {
  font-size: var(--text-xl) !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  margin-bottom: var(--space-4) !important;
}

/* Supplier name (eyebrow above title) — full opacity, tracked caps */
.pocky-product-active [data-qb-setting="productpage_show_supplier_name"] {
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  color: var(--color-text-muted) !important;
  text-transform: uppercase !important;
  margin-bottom: var(--space-2) !important;
  opacity: 1 !important;
}

/* Price block */
.pocky-product-active [data-qb-selector="product-price-container"] {
  margin-bottom: var(--space-3) !important;
}
.pocky-product-active [data-qb-selector="product-price-container"] span {
  font-size: var(--text-lg) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: var(--color-text) !important;
  background: none !important;
}

/* Short description — muted, narrower max-width */
.pocky-product-active [data-qb-setting="productpage_show_shortdesc"] {
  font-size: var(--text-sm) !important;
  line-height: 1.6 !important;
  color: var(--color-text-muted) !important;
  max-width: 52ch !important;
  margin-bottom: var(--space-8) !important;
}

/* Add-to-cart row: lock both children to same 52px height for y-alignment */
.pocky-product-active .flex.flex-wrap.mt-8.mb-3.items-center.gap-4 {
  margin-top: 0 !important;
  margin-bottom: var(--space-3) !important;
  gap: var(--space-3) !important;
  align-items: stretch !important;
}
.pocky-product-active .flex.flex-wrap.mt-8.mb-3.items-center.gap-4 > div {
  height: 52px !important;
  display: flex !important;
  align-items: stretch !important;
}

/* Add-to-cart button: prototype's sharp-rect full-width design */
.pocky-product-active .qs-cart-submit {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: var(--space-3) var(--space-6) !important;
  background: var(--color-interactive) !important;
  border: 1px solid var(--color-interactive) !important;
  border-radius: 0 !important;
  color: var(--color-bg) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: var(--space-6) !important;
  text-decoration: none !important;
  transition: background-color var(--transition-interactive) !important;
}
.pocky-product-active .qs-cart-submit:hover {
  background-color: var(--color-interactive-hover) !important;
  opacity: 1 !important;
}

/* Meta rows (SKU + stock): top border, vertical layout, key/value split */
.pocky-product-active .mt-2.mb-6.text-sm {
  border-top: 1px solid var(--color-border) !important;
  padding-top: var(--space-4) !important;
  margin-top: var(--space-2) !important;
  margin-bottom: var(--space-6) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-2) !important;
  font-size: var(--text-xs) !important;
}
.pocky-product-active [data-qb-setting="productpage_show_sku"],
.pocky-product-active [data-qb-setting="productpage_show_stockstatus"] {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  letter-spacing: 0.02em !important;
  color: var(--color-text-muted) !important;
}

/* Stock dots — match prototype 6×6 size, prototype green */
.pocky-product-active [data-qb-setting="productpage_show_stockstatus"] .bg-green-600 {
  background-color: #34c759 !important;
  height: 6px !important;
  width: 6px !important;
}
.pocky-product-active [data-qb-setting="productpage_show_stockstatus"] .bg-red-600 {
  height: 6px !important;
  width: 6px !important;
}

/* ─── Custom Animated Wishlist Button ─── */
.pocky-wishlist-wrapper {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 30 !important;
  pointer-events: auto !important;
  width: max-content !important;
  height: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pocky-like-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  border: none !important;
  background-color: transparent !important;
  position: relative !important;
  padding: 0 !important;
  outline: none !important;
  z-index: 10 !important; /* Ensure it stays clickable over image */
}

.pocky-like-btn::after {
  content: "like" !important;
  width: fit-content !important;
  height: fit-content !important;
  position: absolute !important;
  font-size: 13px !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: 0.2s linear !important;
  top: 115% !important;
}

.pocky-like-icon {
  width: 22px !important;
  height: 22px !important;
  transition: 0.2s linear !important;
  overflow: visible !important;
}

.pocky-like-icon path {
  fill: var(--color-text) !important;
  stroke: var(--color-text) !important;
  stroke-width: 0.5px !important;
  transition: 0.2s linear !important;
}

.pocky-like-btn:hover > .pocky-like-icon {
  transform: scale(1.2) !important;
}

.pocky-like-btn:hover > .pocky-like-icon path,
.pocky-like-btn.added > .pocky-like-icon path,
.qb-wishlist-added > .pocky-like-icon path {
  fill: rgb(177, 139, 189) !important;
  stroke: rgb(177, 139, 189) !important;
}

.pocky-like-btn:hover::after {
  visibility: visible !important;
  opacity: 1 !important;
  top: 105% !important;
}


/* ============================================
   BLOG POST — POCKY EDITORIAL (v2)
   Aligned with Bible.md + theme.css design tokens.
   Scoped to .pocky-cs (rendered inside blog_post.html → .max-w-xl)
   Several sections break out of max-w-xl to full viewport width.

   v2 anatomy:
   1. Hero band — title left, byline, benefits with rules, product image right
   2. Big pull quote band — full-bleed surface gray (Bible: monochrome only)
   3. Layout — sticky meta sidebar left, main column right
   4. End-CTA band — full-bleed black, Bible banner-btn style
   ============================================ */

.pocky-cs {
  /* Self-contained tokens: do not depend on live/admin root vars resolving. */
  --text-xs:    clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:    clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:    clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl:    clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl:   clamp(2rem, 1.2rem + 2.5vw, 3.5rem);

  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-6: 1.5rem;   --space-8: 2rem;
  --space-12: 3rem;    --space-16: 4rem;    --space-20: 5rem;
  --space-24: 6rem;

  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --cs-bg:           #FFFFFF;
  --cs-surface:      #F5F5F7;
  --cs-ink:          #1D1D1F;
  --cs-ink-hover:    #333335;
  --cs-muted:        #6E6E73;
  --cs-subtle:       #A1A1A6;
  --cs-rule:         rgba(0, 0, 0, 0.16);
  --cs-interactive:  #0F0F0F;

  --cs-content:      1200px;
  --cs-content-text: 640px;
  --cs-sidebar-w:    200px;

  --cs-ease-entry:   cubic-bezier(0.16, 1, 0.3, 1);

  color: var(--cs-ink);
  font-family: inherit; /* Outfit comes from theme.css body font */
  font-size: var(--text-base);
  line-height: 1.6;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  hanging-punctuation: first last; /* Bible base style */
}

.pocky-cs p { margin: 0; }

/* ---- Full-viewport breakout. Body content sits in .max-w-xl (~36rem).
   Hero + layout cap at --cs-content. End-CTA spans the full viewport
   so its black bg bleeds edge-to-edge. ---- */
.pocky-cs__hero,
.pocky-cs__layout {
  width: 100vw;
  max-width: var(--cs-content);
  margin-left: 50%;
  transform: translateX(-50%);
}

.pocky-cs__end-cta {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* ============================================
   HERO BAND
   ============================================ */
.pocky-cs__hero {
  padding: var(--space-8) var(--space-4) var(--space-8);
  margin-top: 0 !important;
  margin-bottom: var(--space-12) !important;
}

@media (min-width: 768px) {
  .pocky-cs__hero { padding: var(--space-16) var(--space-12); }
}

.pocky-cs__hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr);
  gap: var(--space-8);
  align-items: stretch;    /* text column matches image height */
  max-width: var(--cs-content);
  margin: 0 auto;
}

@media (max-width: 560px) {
  .pocky-cs__hero-inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* Spread layout: title anchored to top, byline + benefits anchored to bottom.
   Always — regardless of benefits count. Middle space grows/shrinks. */
.pocky-cs__hero-left {
  display: flex;
  flex-direction: column;
}

.pocky-cs__hero-title {
  font-family: inherit;
  font-size: var(--text-2xl);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--cs-ink);
  margin: 0 0 var(--space-4) 0;
  max-width: 18ch;
  text-wrap: balance;
}

.pocky-cs__byline {
  font-size: var(--text-xs);
  color: var(--cs-muted);
  margin: 0 !important;          /* sits directly under the title */
  letter-spacing: 0.04em;
}

.pocky-cs__benefits {
  list-style: none;
  margin: 0;
  margin-top: auto;               /* push benefits to bottom of hero column */
  padding: 0;
  border-top: 1px solid var(--cs-rule);
}

/* Graceful empty state: when there are no benefits, hide the entire list so
   the lone border-top doesn't render. Title + byline stay clean on their own,
   vertically centered next to the image via .pocky-cs__hero-inner align-items. */
.pocky-cs__benefits:empty {
  display: none;
}

.pocky-cs__benefit {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--cs-rule);
}

.pocky-cs__benefit-title {
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  margin: 0 0 var(--space-1) 0;
  color: var(--cs-ink);
  letter-spacing: -0.005em;
}

.pocky-cs__benefit-desc {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--cs-muted);
  margin: 0 !important;
}

.pocky-cs__hero-right {
  overflow: hidden;
}

.pocky-cs__hero-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  /* Apple-spec easing — matches theme product-card image */
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  .pocky-cs__hero-right:hover .pocky-cs__hero-img {
    transform: scale(1.03);
  }
}

/* ============================================
   BIG PULL QUOTE BAND — full-bleed, monochrome surface
   ============================================ */
.pocky-cs__big-quote {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  background: var(--cs-surface);
  padding: var(--space-12) var(--space-4);
  margin-top: 0 !important;
  margin-bottom: var(--space-12) !important;
}

@media (min-width: 768px)  { .pocky-cs__big-quote { padding: var(--space-20) var(--space-12); } }
@media (min-width: 1100px) { .pocky-cs__big-quote { padding: var(--space-24) var(--space-12); } }

.pocky-cs__big-quote-inner {
  max-width: var(--cs-content);
  margin: 0 auto;
}

.pocky-cs__big-quote blockquote { margin: 0; }

.pocky-cs__big-quote p {
  font-family: inherit;
  font-size: var(--text-xl);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--cs-ink);
  margin: 0 0 var(--space-6) 0 !important;
  max-width: 26ch;
  text-wrap: balance;
}

@media (min-width: 1100px) { .pocky-cs__big-quote p { font-size: var(--text-2xl); max-width: 22ch; } }

.pocky-cs__big-quote cite {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--cs-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============================================
   LAYOUT GRID — sticky left sidebar + main column
   ============================================ */
.pocky-cs__layout {
  padding: 0 var(--space-4);
  margin-top: 0 !important;
  margin-bottom: var(--space-16) !important;

  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .pocky-cs__layout {
    grid-template-columns: var(--cs-sidebar-w) 1fr;
    column-gap: var(--space-12);
    padding: 0 var(--space-12);
  }
}

/* Sticky sidebar */
.pocky-cs__sidebar {
  font-size: var(--text-sm);
}

.pocky-cs__sidebar-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-12);
}

@media (min-width: 900px) {
  .pocky-cs__sidebar-inner {
    position: sticky;
    top: var(--space-6);
    flex-direction: column;
    gap: var(--space-6);
  }
}

.pocky-cs__meta-item p { margin: 0 !important; }

.pocky-cs__meta-label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cs-muted);
  margin-bottom: var(--space-1) !important;
}

.pocky-cs__meta-value {
  font-size: var(--text-sm);
  color: var(--cs-ink);
  font-weight: 500;
}

/* Main column */
.pocky-cs__main { min-width: 0; }

.pocky-cs__main > * + * {
  margin-top: var(--space-6);
}

.pocky-cs__intro {
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--cs-ink);
  letter-spacing: -0.005em;
  font-weight: 400;
  max-width: 60ch;
}

.pocky-cs__main p {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--cs-ink);
  max-width: 65ch;
  text-wrap: pretty;
}

.pocky-cs__main a {
  color: var(--cs-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: var(--transition-interactive);
}

.pocky-cs__main a:hover {
  text-decoration-thickness: 2px;
}

/* Eyebrow section labels — quiet, no decoration */
.pocky-cs__section-label {
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--cs-muted);
  margin: var(--space-20) 0 var(--space-2) 0 !important;
}

/* H2 — Müller-Brockmann/Vignelli weight: medium not bold */
.pocky-cs__h2 {
  font-family: inherit;
  font-size: var(--text-xl);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--cs-ink);
  margin: 0 0 var(--space-4) 0 !important;
  max-width: 22ch;
  text-wrap: balance;
}

@media (min-width: 768px) { .pocky-cs__h2 { font-size: var(--text-2xl); } }

.pocky-cs__h2--takeaway {
  margin-top: var(--space-20) !important;
}

/* Bulleted list */
.pocky-cs__list {
  list-style: disc;
  padding-left: var(--space-6);
  margin: var(--space-4) 0 0 0 !important;
  color: var(--cs-ink);
}

.pocky-cs__list li {
  margin: var(--space-2) 0;
  padding-left: var(--space-1);
  line-height: 1.55;
  font-size: var(--text-base);
  max-width: 65ch;
}

.pocky-cs__list li::marker { color: var(--cs-ink); }

/* ============================================
   INLINE PULL QUOTE — bare, no box. Larger italic + em-dash attribution.
   ============================================ */
.pocky-cs__quote {
  margin: var(--space-16) 0 !important;
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  font-style: italic;
  color: var(--cs-ink);
}

.pocky-cs__quote p {
  font-size: var(--text-lg);
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-3) 0;
  text-wrap: balance;
  max-width: 50ch;
}

.pocky-cs__quote cite {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--cs-muted);
  letter-spacing: 0;
  text-transform: none;
}

.pocky-cs__quote cite::before {
  content: '— ';
}

/* ============================================
   SINGLE INLINE IMAGE (full width of main column, optional caption)
   ============================================ */
.pocky-cs__figure {
  margin: var(--space-12) 0 !important;
  padding: 0;
}

.pocky-cs__figure img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 600ms var(--cs-ease-entry);
}

.pocky-cs__figure figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--cs-muted);
  letter-spacing: 0;
  font-style: italic;
}

/* ============================================
   2-COLUMN INLINE IMAGE GRID — sits inside main column
   ============================================ */
.pocky-cs__figure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: var(--space-12) 0 !important;
  padding: 0;
}

@media (min-width: 768px) {
  .pocky-cs__figure-grid { gap: var(--space-3); }
}

.pocky-cs__figure-grid-tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.pocky-cs__figure-grid-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--cs-ease-entry);
}

@media (hover: hover) {
  .pocky-cs__figure-grid-tile:hover img {
    transform: scale(1.03);
  }
}

/* ============================================
   END-CTA BAND — full-bleed black, Bible banner-btn style
   ============================================ */
.pocky-cs__end-cta {
  background: var(--cs-interactive);
  color: var(--cs-bg);
  padding: var(--space-16) 0;
  margin-top: var(--space-16) !important;
  margin-bottom: 0 !important;
  text-align: left;
}

@media (min-width: 768px) {
  .pocky-cs__end-cta { padding: var(--space-24) 0; }
}

.pocky-cs__end-cta-inner {
  max-width: var(--cs-content);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (min-width: 768px) {
  .pocky-cs__end-cta-inner { padding: 0 var(--space-12); }
}

.pocky-cs__end-cta-title {
  font-family: inherit;
  font-size: var(--text-2xl);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--cs-bg);
  margin: 0 0 var(--space-8) 0;
  max-width: 16ch;
  text-wrap: balance;
}

.pocky-cs__end-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ============================================
   BUTTONS — sharp ICIW rectangles, uppercase tracked caps
   ============================================ */
.pocky-cs__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-6);
  border-radius: 0;
  border: 1px solid currentColor;
  text-decoration: none !important;
  background: transparent;
  color: currentColor !important;
  transition: var(--transition-interactive);
  cursor: pointer;
  min-height: 44px;
}

/* Primary: filled — used inside dark CTA band, looks like Apple light pill on black */
.pocky-cs__btn--light {
  background: var(--cs-bg);
  color: var(--cs-interactive) !important;
  border-color: var(--cs-bg);
}

.pocky-cs__btn--light:hover {
  background: transparent;
  color: var(--cs-bg) !important;
  border-color: var(--cs-bg);
}

/* Ghost on dark band — outline white */
.pocky-cs__btn--ghost-light {
  background: transparent;
  color: var(--cs-bg) !important;
  border-color: rgba(255, 255, 255, 0.7);
}

.pocky-cs__btn--ghost-light:hover {
  background: var(--cs-bg);
  color: var(--cs-interactive) !important;
  border-color: var(--cs-bg);
}

.pocky-cs__btn:active { transform: scale(0.97); }

.pocky-cs__btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Production blog wrapper behavior:
   - Every blog post gets the universal POCKY CTA from partials/blog_post.html.
   - Editorial posts whose admin content contains .pocky-cs hide the default
     title/date/image because the custom body supplies its own hero. */
.blog-post > .pocky-cs--global-cta {
  display: block;
}

.blog-post.blog-post--pocky-cs > .blog-post__default-header {
  display: none;
}

@supports selector(:has(*)) {
  .blog-post:has(.blog-post__content .pocky-cs) > .blog-post__default-header {
    display: none;
  }
}


/* sr-only — visually hidden but accessible to screen readers + Schema.org parsers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}