/* JetBrains Mono + Inter laddas via <link> i template.mustache (tidigare @import här —
   flyttad för att inte blockera renderingen med en seriell hämtning). */

/* ═══════════════════════════════════════════════════════════
   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;
    /* Soft light grey for overlay type on photography (banner Textfärg: Ljusgrå) */
    --color-hero-soft:        #CECFCA;
    --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: 'Asap', sans-serif;
    --font-heading: 'Asap',
sans-serif;
}

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

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

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

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Asap',
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).
   OBS: selektorn måste vara begränsad till <nav> — sök- och inställnings-
   panelerna renderas också inuti header-sektionen, och en bredare selektor
   krympte deras produktbilder/flaggor till 11px. */
[data-qb-area="header"] nav 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 — sized by ASPECT RATIO, not viewport height.
   The settings give the banner's height as a percentage of its width, so
   aspect-ratio = 100 / setting. Match the setting to the uploaded image and
   the image never crops — it just scales with the viewport, which is exactly
   what ICIW does (they hard-code aspect-ratio: 4000 / 1980 on their hero).
   A vh-based height would drift from the image ratio as the window changes
   and crop the sides; this cannot.
     50  → 2:1   (a 2000x1000 upload)
     125 → 4:5   (a 960x1200 upload)
   --banner-h-m / --banner-h-d / --banner-fit are set inline per banner. */
.banner-card {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 100 / var(--banner-h-m, 125) !important;
  background-color: var(--color-surface) !important;
  color: #000;
}

.banner-card.text-white {
  color: #fff;
}

.banner-card.text-soft {
  color: var(--color-hero-soft, #cecfca);
}

/* Two banners stay side by side down to the 900px breakpoint (ICIW behaviour);
   below that they stack. */
@media (max-width: 899px) {
  .banner-grid--two {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (min-width: 900px) {
  .banner-card {
    aspect-ratio: 100 / var(--banner-h-d, 50) !important;
  }
}

/* Picture fills the card; the card's height rules the layout, not the image. */
.banner-card > picture {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Image — fills the box and crops, so the banner height stays predictable. */
.banner-card__img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: var(--banner-fit, cover) !important;
  object-position: center center !important;
  display: block !important;
  transform: none !important;
  transition: transform 0.4s ease !important;
  will-change: transform;
}

/* Slow zoom on hover — same feel as ICIW (scale 1.02, 400ms). */
.banner-card:hover .banner-card__img {
  transform: scale(1.02) !important;
}

@media (prefers-reduced-motion: reduce) {
  .banner-card__img,
  .banner-card:hover .banner-card__img {
    transform: none !important;
    transition: none !important;
  }
}


/* ── BANNER OVERLAY
   Mobile  (<900px): centred horizontally at bottom of image.
   Desktop (≥900px): anchored bottom-left, or centred when the banner's
   "Textposition" setting is Centrerad (--center modifier, ICIW treatment). */
.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: 900px) {
  .banner-card__overlay {
    justify-content: flex-start !important;
  }
}

/* No scrim — the photograph is shown exactly as uploaded, with no tint or
   wash over it. Legibility is handled by choosing a text colour that suits
   the image, not by altering the image. */
.banner-card__overlay {
  background: transparent !important;
}

/* Text overlay — colour inherits from the card so the Textfärg setting works. */
.banner-card__text {
  background: transparent !important;
  color: inherit !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: 900px) {
  .banner-card__text {
    align-items: flex-start !important;
    text-align: left !important;
    padding: 0 var(--space-8) var(--space-16) var(--space-20) !important;
  }

  /* Textposition: Höger */
  .banner-card__overlay--right {
    justify-content: flex-end !important;
  }

  .banner-card__text--right {
    align-items: flex-end !important;
    text-align: right !important;
    padding: 0 var(--space-20) var(--space-16) var(--space-8) !important;
  }
}

/* Textposition: Centrerad — dead centre on both axes at every width, which is
   how ICIW places its hero copy and CTA row. */
.banner-card__overlay--center {
  align-items: center !important;
  justify-content: center !important;
}

.banner-card__text--center {
  align-items: center !important;
  text-align: center !important;
  padding: 0 var(--space-6) !important;
  max-width: 34rem !important;
}

@media (min-width: 900px) {
  .banner-card__text--center {
    align-items: center !important;
    text-align: center !important;
    padding: 0 var(--space-8) !important;
  }
}

/* ── LEGIBILITY WITHOUT TINTING THE PHOTO
   The image carries no scrim, so the type is lifted off it with a shadow
   instead. This darkens only the pixels immediately around each glyph — the
   photograph itself is untouched. Two layers: a tight one for edge contrast
   and a wide soft one for ambient separation. The small subline gets a
   stronger shadow because thin 14px type loses the fight first.
   Dark shadow under light type, light shadow under dark type. */
/* Ingen skugga bakom texten — hero och NYHET visar samma bild och ska se
   likadana ut. Läsbarheten vilar på bildens egen kontrast, precis som i
   bildspelet. */
.banner-card__title,
.banner-card__desc,
.banner-btn {
  text-shadow: none !important;
  box-shadow: none !important;
}

/* The sliding fill covers the photo on hover, so the lift is no longer
   needed and would only muddy the inverted label. */
.banner-card .banner-btn:hover {
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Title — responsive size without forced line breaks.
   Mobile floor raised to 32px to match ICIW's hero headline. */
.banner-card__title {
  color: inherit !important;
  font-size: clamp(32px, 8vw, 40px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.022em !important;
  line-height: 1 !important;
  word-spacing: normal !important;
}

@media (min-width: 900px) {
  .banner-card__title {
    font-size: clamp(40px, 3.2vw, 56px) !important;
    line-height: 0.98 !important;
  }
}

/* Description — tighter max-width on mobile so centred text stays readable */
/* Full opacity: over photography the subline needs every bit of contrast it
   can get. The old 0.85 softening made sense on a flat background, but here
   it just fades thin 14px type into the image. */
.banner-card__desc {
  font-size: clamp(14px, 2.8vw, 16px) !important;
  line-height: 1.45 !important;
  color: inherit !important;
  opacity: 1 !important;
  font-weight: 500 !important;
  margin-top: var(--space-3) !important;
  max-width: 34ch !important;
}

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

/* CTA wrapper — mobile: centred, never stretched. Wraps rather than
   overflowing when a banner carries two buttons on a narrow screen. */
.banner-cta-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-3) !important;
  justify-content: center !important;
  margin-top: var(--space-6) !important;
  width: auto !important;
}

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

  .banner-card__text--right .banner-cta-wrap {
    justify-content: flex-end !important;
  }
}

.banner-card__text--center .banner-cta-wrap {
  justify-content: center !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.
     Metrics match ICIW: 14px/500, 1.4px tracking, 13px 21px, 48px tall.
     No min-width, so two CTAs sit side by side without dominating. */
  width: auto;
  min-width: 0;
  min-height: 48px;
  padding: 13px 21px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0;
  /* Inherit from .banner-card so the Textfärg setting drives the button too. */
  color: inherit;
  border-color: currentColor;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  /* Samma övergång som NYHET-knappen. */
  transition: background 250ms ease, color 250ms ease;
}

/* ── KNAPPANIMATION — identisk med NYHET-bandets knapp.
   Hero-knappen hade tidigare två rörelser: en fyllning som gled upp
   underifrån (::before) och en "roll" där etiketten byttes mot en dold
   kopia. NYHET-knappen tonar i stället bara fram en svag bakgrund.
   Här stängs båda rörelserna av så knapparna beter sig likadant:
   background + color, 250ms ease, ingen förflyttning. */
.banner-btn::before {
  display: none !important;
}

.banner-btn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: inherit !important;
}

/* Kopian som rullade in hålls kvar utanför knappen. */
.banner-btn .roll-btn__text {
  transition: none !important;
}

.banner-btn:hover .roll-btn__text:first-child {
  transform: none !important;
}

.banner-btn:hover .roll-btn__text:last-child {
  transform: translateY(100%) !important;
  color: inherit !important;
}

/* Height stays 48px at every width — ICIW does not shrink its hero CTAs. */

.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;
  /* Ingen egen top-padding: sektionen ovanför (categories) har redan
     padding-bottom: var(--space-8). Med egen top-padding staplades de två
     till 64px luft ovanför rubriken medan det bara var 32px under den →
     osymmetriskt. Nu ger grannens 32px luften ovanför, header-marginalen
     32px under → symmetriskt kring "Se hela laguppställningen." */
  padding-top: 0 !important;
  /* Produktkorten har ~20px "svans" (tomrum under KÖP-knappen inuti kortet).
     Med full space-8 (32px) blir luften ovanför nästa rubrik (Blogg) 52px
     medan det bara är 32px under → osymmetriskt. Trimmad till space-3 (12px)
     så svans + padding = 32px, symmetriskt mot blocket nedanför. */
  padding-bottom: var(--space-3) !important;
  margin: 0 !important;
}

/* Header — centrerad titel + ev. beskrivning staplade, i stil med iciw.se */
[data-qb-element="productslider"] .section-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin-bottom: var(--space-8) !important;
}

[data-qb-element="productslider"] .section-desc {
  margin-left: 0 !important;
  margin-top: var(--space-2) !important;
  max-width: 42rem !important;
}

/* Full-bleed: slidrarna startar i kanten (flush) precis som banner/kategorier.
   .container-wide (max-width 1536 + vänster-padding) neutraliseras inuti
   sektionen så första kortet ligger vid x=0 även på breda skärmar (annars
   centrerades den → stor lucka till vänster). Rubriken är centrerad (egen
   text-align) och påverkas inte. Gäller produkt- OCH bloggslidern. */
[data-qb-element="productslider"] .container-wide,
[data-qb-element="blog"] .container-wide {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !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;
}

/* Card image ratio, driven by the "Produktbildens proportioner" setting.
   The partial emits a Tailwind class (aspect-3/4 etc.) but nothing generates
   those utilities here, so the computed aspect-ratio stayed `auto` and every
   card simply inherited its photo's own proportions — the setting had no
   effect at all. Declaring the ratios explicitly makes it work.
   2/3 is the taller ICIW-style portrait box. */
.product-card__img-primary.aspect-1\/1 {
  aspect-ratio: 1 / 1 !important;
}

.product-card__img-primary.aspect-4\/3 {
  aspect-ratio: 4 / 3 !important;
}

.product-card__img-primary.aspect-3\/2 {
  aspect-ratio: 3 / 2 !important;
}

.product-card__img-primary.aspect-3\/4 {
  aspect-ratio: 3 / 4 !important;
}

.product-card__img-primary.aspect-2\/3 {
  aspect-ratio: 2 / 3 !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;
}

/* ── SEGMENTED CTA — antal + KÖP sammanfogade i EN skarp ram (iciw-inspirerad) ──
   Två konkurrerande boxar → en enhet: yttre svart ram, antal som litet
   vänstersegment med hårlinjeavdelare, KÖP fyller resten. Scoped med
   :has(.pq-select) så fristående/slutsåld-knappar behåller sin egen ram. */
.product-card__action:has(.pq-select) {
  border: 1px solid var(--color-text) !important;
  gap: 0 !important;
}
.product-card__action:has(.pq-select) .pq-selected {
  border: 0 !important;
  border-right: 1px solid var(--color-border) !important;
  font-weight: 500 !important;
}
.product-card__action:has(.pq-select) .product-buy-btn {
  border: 0 !important;
}
.pq-arrow {
  width: 12px !important;
  height: 8px !important;
}

/* ── MOBIL — behåll antal + KÖP sida vid sida (inte staplat) så
   kontrollen blir EN låg rad (~34px) i stället för ~77px. ── */
@media (max-width: 1023px) {
  .product-card__action {
    flex-direction: row !important;
  }
  .product-card__action:has(.pq-select) .pq-select {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .product-card__action:has(.pq-select) .product-buy-btn {
    width: auto !important;
    flex: 1 !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;
  /* Ingen egen top-padding: sektionen ovanför (productslider) har redan
     padding-bottom: var(--space-8). Utan detta staplas de två till 64px luft
     ovanför "Blogg" medan det bara är 32px under → osymmetriskt. */
  padding-top: 0 !important;
}

/* Rubriken staplad + centrerad: "Senaste nyheter" tätt under "Blogg",
   båda centrerade i stil med produktslidern ("Se hela laguppställningen."). */
[data-qb-element="blog"] .section-header {
  display: block !important;
  text-align: center !important;
}
[data-qb-element="blog"] .section-desc {
  display: block !important;
  margin-left: 0 !important;
  margin-top: 0.35rem !important;
  white-space: normal !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); } }
/* auto-fit + justify-content: center → få inlägg lämnar ingen tom kolumn till
   höger utan centreras; fler inlägg fyller/radbryter som vanligt. */
@media (min-width: 1024px) {
  .blog-list-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
    justify-content: center;
  }
}

.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;
}

/* NOTE: --blog-card-scale is only defined on the homepage slider
   ([data-qb-element="blog"]). On the /blogg list page it is undefined, so the
   fallback (, 1) keeps calc() valid there — without it the whole declaration is
   invalid and the browser default 16px leaks in, making the date/title look
   oversized. Mobile-first sizes below; bumped a little from md up. */
.blog-card__cat {
  display: block !important;
  font-size: calc(0.7rem * var(--blog-card-scale, 1)) !important;
  color: rgb(110, 110, 115) !important;
  margin-bottom: 0.3rem !important;
  letter-spacing: 0.01em !important;
}

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

@media (min-width: 768px) {
  .blog-card__cat  { font-size: calc(0.75rem * var(--blog-card-scale, 1)) !important; }
  .blog-card__title { font-size: calc(1.05rem * var(--blog-card-scale, 1)) !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;
}

/* En ENDA kategori på desktop (≥1024, där två kategorier ligger sida vid sida):
   behåll samma höjd som ett 2-up-par. Annars blir full-breddsbrickan dubbelt så
   hög. aspect-ratio = 2 × bildens naturliga förhållande (~2.33) = 4.67; bilden
   beskärs (cover). Under 1024px staplas kategorierna redan i full bredd, så
   ingen justering behövs där. */
@media (min-width: 1024px) {
  .cat-grid--1 .cat-card__inner {
    aspect-ratio: 4.67 !important;
  }
  .cat-grid--1 .cat-card__img {
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !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;
}

/* Same legibility treatment as the hero: a light glow lifts the dark caps off
   the photography without tinting the image, and weight 500 stops the wide
   0.2em tracking from thinning the letterforms into the background. */
.cat-card__title {
  font-family: inherit !important;
  font-size: var(--text-lg) !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #000 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5), 0 2px 14px rgba(255, 255, 255, 0.35) !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-8) 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 — reduced from clamp(1.8rem, 3vw, 2.8rem), which rendered
   43px at 1440 against ICIW's 32px. At that size the heading overpowered the
   24px of air beneath it and read as crowding rather than hierarchy. */
.section-heading {
  font-size: clamp(1.6rem, 2.2vw, 2.2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: rgb(29, 29, 31) !important;
  line-height: 1.1 !important;
}

/* ============================================
   SIDÖVERGÅNGAR (View Transitions)
   Ett smakbyte är en vanlig sidladdning. Själva renderingen tar bara ~138 ms
   — det som känns långsamt är den vita blinkningen medan webbläsaren river
   ned den gamla sidan innan den nya målas upp.
   Med navigation: auto tonar webbläsaren i stället mellan sidorna. Inget
   JavaScript, ingen extra laddning: samma sida, men utan avbrottet.
   Bild och rubrik får egna namn så att de MORFAR mellan smakerna i stället
   för att tona — det ser ut som att produkten byts, inte som att sidan
   laddas om.
   ============================================ */
@view-transition {
  navigation: auto;
}

.products-swiper-main {
  view-transition-name: product-media;
}

/* OBS: h1, inte bara [itemprop='name'].
   Sidan har TVÅ element med itemprop="name" — dels <meta itemprop="name"
   content="POCKY"> för varumärket, dels produktens <h1>. Med enbart
   attributväljaren fick båda samma view-transition-name, och ett dubblerat
   namn får webbläsaren att avbryta HELA övergången. Det var därför bytet
   ibland gled fint och ibland laddade om med blink — beroende på om båda
   elementen fanns på sidan. */
h1[itemprop='name'] {
  view-transition-name: product-title;
}

/* Sidhuvudet måste också namnges.
   Under en övergång lyfts namngivna element ur sidan till ett eget lager som
   målas ÖVER allt annat — även över ett fixerat sidhuvud. Utan detta glider
   produktbilden i bråkdelen av en sekund ovanpå sidhuvudet innan den landar.
   Genom att ge sidhuvudet ett eget namn hamnar det i samma lager, och då kan
   ordningen styras med z-index nedan. */
.header-wrap {
  view-transition-name: site-header;
}

/* Måla i rätt ordning: sidhuvudet överst, sedan rubrik, bild, och sidan. */
::view-transition-group(site-header) {
  z-index: 20;
}

::view-transition-group(product-title) {
  z-index: 2;
}

::view-transition-group(product-media) {
  z-index: 1;
}

::view-transition-group(root) {
  z-index: 0;
}

/* Sidhuvudet är identiskt mellan smakerna — låt det stå stilla i stället för
   att tona, annars blinkar det till i onödan. */
::view-transition-old(site-header),
::view-transition-new(site-header) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
}

::view-transition-old(product-media),
::view-transition-new(product-media),
::view-transition-old(product-title),
::view-transition-new(product-title) {
  animation-duration: 260ms;
}

/* Ingen rörelse för den som valt bort det — då byts sidan direkt, som förut. */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  .products-swiper-main,
  h1[itemprop='name'],
  .header-wrap {
    view-transition-name: none;
  }
}

/* ============================================
   KATEGORITEXT — brödtexten efter produktrutnätet
   Texten låg tidigare ovanför produkterna i full bredd: 1248px, vilket ger
   ca 119 tecken per rad. Bekväm läslängd är 45–75 tecken; över det tappar
   ögat raden och blocket hoppas över. Här begränsas radlängden till ~65
   tecken och blocket får luft och en hårfin linje som skiljer det från
   produkterna ovanför.
   ============================================ */
.cat-page-copy {
  max-width: 65ch !important;
  margin-top: 64px !important;
  padding-top: 40px !important;
  border-top: 1px solid var(--color-border) !important;
}

.cat-page-copy + .cat-page-copy {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.cat-page-copy p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--color-text-muted, #6e6e73) !important;
  margin-bottom: 1em !important;
}

.cat-page-copy p:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 899px) {
  .cat-page-copy {
    margin-top: 40px !important;
    padding-top: 32px !important;
  }
}

/* ============================================
   BILDSPEL (slider) — ICIW-behandling
   Den inbyggda slider-komponenten kommer med generiska Tailwind-stilar:
   en fylld grå knapp (py-4 px-8, 16px, 56px hög) och en rubrik i brödtexten.
   Här får den samma språk som hero-bannern och som ICIW:s banderoller —
   samma knappmått (14px, 13px 21px, 48px, 1px ram, 0 radie) och samma
   rubrikskala. Endast CSS; markupen i partialen rörs inte.
   ============================================ */

/* Höjden styrs av proportion, inte av fasta pixlar.
   Partialen skriver height:620px i en egen <style>-tagg. Med fast höjd och
   rörlig bredd ändras rutans proportion hela tiden, och background-size:cover
   äter upp skillnaden — bilden zoomar in när fönstret smalnar. Med
   aspect-ratio är rutans proportion alltid densamma som bildens, så bilden
   skalas i stället för att beskäras. Samma lösning som på hero-bannern.
   Proportionen är satt så att banderollen blir lägre än hero-bannern och
   sitter i samma register som ICIW:s banderoller (deras "Shoppa din storlek"
   är 2.82:1). 2 / 1 gav 713px vilket blev för högt mot resten av sidan,
   2.8 / 1 gav 509px och 3 / 1 landar på 475px vid 1440px skärm.
     3 / 1 desktop   → bild 2000x667
     1 / 1 mobil     → bild 1200x1200
   Byter du bildformat är det de två värdena här som ska ändras. */
[data-qb-element='slider'] .hero-slider {
  height: auto !important;
  /* min-height och width måste nollställas, annars slår aspect-ratio bakvägen:
     en ärvd min-height: 400px låser höjden, och proportionen räknar då ut
     BREDDEN ur höjden (400 x 3 = 1200px) i stället för tvärtom. Resultatet
     blev en banderoll bredare än fönstret, med högerpilen utanför kanten så
     fort man drog ihop skärmen. Med min-height: 0 och width: 100% styr
     bredden höjden, som det var tänkt. */
  min-height: 0 !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
}

/* OBS: 768px, inte 900px som resten av mallen.
   Bildspelet byter bild vid Tailwinds md (768px) — både i markupen
   (hidden md:block / block md:hidden) och i sliders.js. Proportionen MÅSTE
   byta vid exakt samma punkt. Med 900px här visades desktopbilden (3:1) i en
   kvadratisk ruta mellan 768 och 899px, alltså 67% beskärning: bilden
   zoomade och pilarna hamnade utanför kanten precis innan mobilläget. */
@media (min-width: 768px) {
  [data-qb-element='slider'] .hero-slider {
    aspect-ratio: 3 / 1 !important;
  }
}

/* Endast rubrikerna INNE i bildspelet får den stora skalan. Sektionens
   egen rubrik (t.ex. "NYHET") ligger utanför .swiper-slide och behåller
   .section-heading-skalan som övriga sektioner på sidan. */
[data-qb-element='slider'] .swiper-slide h2 {
  font-size: clamp(32px, 8vw, 40px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.022em !important;
  line-height: 1 !important;
  margin-bottom: 20px !important;
}

@media (min-width: 900px) {
  [data-qb-element='slider'] .swiper-slide h2 {
    font-size: clamp(40px, 3.2vw, 56px) !important;
    line-height: 0.98 !important;
  }
}

[data-qb-element='slider'] p {
  font-size: clamp(14px, 2.8vw, 16px) !important;
  line-height: 1.45 !important;
  opacity: 1 !important;
  margin-bottom: 28px !important;
}

/* Knappen — samma kontur som hero och ICIW, inte en fylld ruta. */
[data-qb-element='slider'] a[data-qb-setting$='button_text'] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 13px 21px !important;
  background: transparent !important;
  border: 1px solid currentColor !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background 250ms ease, color 250ms ease !important;
  /* Ingen color här: knappen bär redan text-white/text-black från markupen,
     och border-color: currentColor följer med. Sätter vi color: inherit
     försvinner texten (ärver svart mot mörk bild). */
  text-shadow: none !important;
}

[data-qb-element='slider'] a[data-qb-setting$='button_text']:hover {
  background: rgba(255, 255, 255, 0.16) !important;
}

/* Ingen skugga bakom texten i bildspelet — bilden ska stå ren.
   Läsbarheten vilar därmed helt på att bildens bakgrund och textfärgen
   kontrasterar mot varandra. */
[data-qb-element='slider'] h2,
[data-qb-element='slider'] p,
[data-qb-element='slider'] .section-heading {
  text-shadow: none !important;
}

/* Pilar — flyttade till nedre högra hörnet.
   Standardplaceringen är lodrätt centrerad mot vänster/höger kant, vilket
   krockar med den vänsterställda texten så fort fönstret smalnar av: rubrik
   och knapp hamnar rakt under vänsterpilen. Som ett par i hörnet kan de
   aldrig kollidera med innehållet, oavsett bredd. */
[data-qb-element='slider'] .swiper-button-next,
[data-qb-element='slider'] .swiper-button-prev {
  width: 40px !important;
  height: 40px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  top: auto !important;
  bottom: 20px !important;
  left: auto !important;
  margin: 0 !important;
  transform: none !important;
}

[data-qb-element='slider'] .swiper-button-prev {
  right: 68px !important;
}

[data-qb-element='slider'] .swiper-button-next {
  right: 20px !important;
}

[data-qb-element='slider'] .swiper-button-next::after,
[data-qb-element='slider'] .swiper-button-prev::after {
  font-size: 20px !important;
  font-weight: 400 !important;
}

/* Punkterna är borttagna — pilarna räcker som navigering och banderollen
   blir renare utan dem. */
[data-qb-element='slider'] .swiper-pagination {
  display: none !important;
}

/* Texten ska stå i exakt samma lodräta linje som logotypen i sidhuvudet.
   Sidhuvudets innehåll ligger i en centrerad behållare: max-width 1536px
   + 16px padding. Under 1536px bred skärm hamnar den 16px in, över 1536px
   dras den inåt av auto-marginalen (t.ex. 201px vid 1920px skärm).
   Därför räcker det INTE att sätta 16px här — då står texten kvar i kanten
   på breda skärmar medan logotypen flyttar sig inåt. Slidens innehåll får
   samma behållargeometri i stället, så de följs åt i alla bredder.
   Slidens egen .container (max-width 1280 + 64px padding) skrivs över. */
[data-qb-element='slider'] .container.mx-auto {
  max-width: 1536px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

[data-qb-element='slider'] .h-full.flex.items-center {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Knappen hamnar under texten, vänsterställd i samma linje. */
[data-qb-element='slider'] a[data-qb-setting$='button_text'] {
  margin-top: 4px !important;
}

/* ============================================
   NYHET — produktlansering
   Färgad panel med rubriktext + produktbild till vänster, produktkort till
   höger. En produkt i taget; aktiv slide styrs av .is-active som sätts av
   js/interactions.js. Färgen byts via --nyhet-bg-N på sektionen.
   ============================================ */

.pk-nyhet {
  --nyhet-bg: var(--nyhet-bg-1, #f5f5f7);
  width: 100% !important;
}

.pk-nyhet__heading {
  text-align: center !important;
  margin-bottom: 32px !important;
}

@media (min-width: 900px) {
  .pk-nyhet__heading {
    margin-bottom: 56px !important;
  }
}

/* Stage: en kolumn på mobil, panel + kort sida vid sida på desktop. */
.pk-nyhet__stage {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 3px !important;
  align-items: stretch !important;
}

@media (min-width: 900px) {
  .pk-nyhet__stage {
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) !important;
  }
}

/* Färgad panel — bakgrunden är CSS, aldrig inbränd i bilden. */
.pk-nyhet__panel {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 40px 24px !important;
  background: var(--nyhet-bg) !important;
  transition: background 450ms ease !important;
  overflow: hidden !important;
  min-height: 340px !important;
}

@media (min-width: 900px) {
  .pk-nyhet__panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) !important;
    padding: 56px 48px !important;
    min-height: 520px !important;
  }
}

/* Rubriktexterna ligger staplade på varandra; bara den aktiva syns. */
.pk-nyhet__statements {
  position: relative !important;
  display: grid !important;
}

.pk-nyhet__statement {
  grid-area: 1 / 1 !important;
  margin: 0 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  font-size: clamp(28px, 7vw, 40px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.01em !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 450ms ease !important;
}

@media (min-width: 900px) {
  .pk-nyhet__statement {
    font-size: clamp(40px, 3.6vw, 64px) !important;
  }
}

.pk-nyhet__statement.is-active {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Produktbilderna likaså — transparent PNG ovanpå färgen. */
.pk-nyhet__shots {
  position: relative !important;
  display: grid !important;
  justify-items: center !important;
  min-height: 200px !important;
}

@media (min-width: 900px) {
  .pk-nyhet__shots {
    min-height: 380px !important;
  }
}

.pk-nyhet__shot {
  grid-area: 1 / 1 !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: 200px !important;
  object-fit: contain !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(8px) !important;
  transition: opacity 450ms ease, transform 450ms ease !important;
}

@media (min-width: 900px) {
  .pk-nyhet__shot {
    max-height: 400px !important;
  }
}

.pk-nyhet__shot.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Kortzonen — ett kort i taget, samma stapling. */
.pk-nyhet__cards {
  position: relative !important;
  display: grid !important;
  background: var(--color-bg, #fff) !important;
  align-items: center !important;
}

.pk-nyhet__card {
  grid-area: 1 / 1 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 450ms ease !important;
  padding: 16px !important;
}

.pk-nyhet__card.is-active {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Punkter */
.pk-nyhet__dots {
  position: absolute !important;
  left: 0 !important;
  bottom: 16px !important;
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  width: 100% !important;
  z-index: 3 !important;
}

@media (min-width: 900px) {
  .pk-nyhet__dots {
    width: auto !important;
    left: 48px !important;
    bottom: 32px !important;
    justify-content: flex-start !important;
  }
}

.pk-nyhet__dot {
  width: 8px !important;
  height: 8px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: background 200ms ease !important;
}

.pk-nyhet__dot.is-active {
  background: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
  .pk-nyhet__statement,
  .pk-nyhet__shot,
  .pk-nyhet__card,
  .pk-nyhet__panel {
    transition: none !important;
  }

  .pk-nyhet__shot {
    transform: none !important;
  }
}

/* ── UNIFORM SECTION RHYTHM
   One single gap between every startpage component.
   Each section owns only the space ABOVE it (padding-top) and none below.
   That is the whole trick: if sections padded both sides, two adjacent ones
   would stack into a double gap — which is exactly how this page ended up
   with 4px in some joins, 96px in others and 128px elsewhere.
   Change --section-gap and every gap on the page moves together. */
:root {
  --section-gap: 40px;
}

@media (min-width: 900px) {
  :root {
    --section-gap: 64px;
  }
}

[data-qb-element='banners'],
[data-qb-element='custom_html'],
[data-qb-element='categories'],
[data-qb-element='productslider'],
[data-qb-element='slider'],
[data-qb-element='blog'],
[data-qb-element='usp'] {
  padding-top: var(--section-gap) !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* THE ONE EXCEPTION — the marquee.
   It is a full-bleed ticker strip, not a content block, and is meant to sit
   flush against the banner above it (4px hairline, as it was originally).
   Because each section owns the space above it, keeping the marquee flush
   takes two rules: zero its own top space, and zero the top space of
   whatever follows it — otherwise the next section's 64px would reappear
   underneath the strip. */
[data-qb-element='custom_html']:has(.marquee-section) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: var(--space-1) 0 0 !important;
}

[data-qb-element='custom_html']:has(.marquee-section) + [data-qb-element] {
  padding-top: var(--space-1) !important;
}

/* The hero is the first component: nothing above it to be spaced from, so it
   stays flush under the header. */
[data-qb-element='banners'] {
  padding-top: 0 !important;
}

/* ...and the last component still needs air before the footer. */
[data-qb-element]:last-of-type {
  padding-bottom: var(--section-gap) !important;
}

/* Heading → cards. Was 24-32px, which is why the title felt glued to the row. */
[data-qb-element='productslider'] .section-header,
[data-qb-element='slider'] .section-header,
[data-qb-element='blog'] .section-header {
  margin-bottom: 32px !important;
}

@media (min-width: 900px) {
  [data-qb-element='productslider'] .section-header,
  [data-qb-element='slider'] .section-header,
  [data-qb-element='blog'] .section-header {
    margin-bottom: 56px !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: 0.75rem !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 {
  -moz-appearance: textfield; /* Firefox visar annars nummer-spinners i steppern */
  appearance: textfield;
}
.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-12) 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;
}

/* Läsbarare brödtext på footer-/legal-sidorna: basen var 12px vilket är för
   litet för längre juridisk text. Höjer p/li till 15px och h3 till 16px med
   proportionerlig radhöjd. Ligger efter namespace-reglerna (~5481 m.fl., ej
   !important) → vinner. */
:is(.pocky-integritet, .pocky-villkor, .pocky-webbvillkor, .pocky-kvalitet,
    .pocky-foreskrifter, .pocky-uppforandekod, .pocky-cookies, .pocky-retur,
    .pocky-leverans) :is(p, li) {
  font-size: 0.9375rem !important;   /* 15px */
  line-height: 1.65 !important;
}
:is(.pocky-integritet, .pocky-villkor, .pocky-webbvillkor, .pocky-kvalitet,
    .pocky-foreskrifter, .pocky-uppforandekod, .pocky-cookies, .pocky-retur,
    .pocky-leverans) h3 {
  font-size: 1rem !important;        /* 16px */
  line-height: 1.4 !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%;
  }
}

/* ════════════════════════════════════════════════════════════
   404-SIDAN — layout. Kapybara-figuren nedan fanns redan stylad
   men rot-/layoutklasserna och färgvariablerna saknades, så sidan
   renderades som oformaterad text. Markupen ligger i CMS-sidan.
   ════════════════════════════════════════════════════════════ */
.pocky-404 {
  --p404-capy:  rgb(204, 125, 45);
  --p404-capy2: rgb(83, 56, 28);
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) 1rem clamp(4rem, 10vw, 7rem);
  text-align: center;
}
.pocky-404__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}
.pocky-404__subtitle {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.pocky-404__stage {
  position: relative;
  width: 14em;
  height: 10em;
  margin: var(--space-8) auto var(--space-6);
  font-size: 12px; /* em-skalan för kapybara-figuren */
}
.pocky-404__floater {
  position: absolute;
  bottom: 1em;
  left: 0;
  animation: p404-float 3s ease-in-out infinite;
}
.pocky-404__shadow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 11em;
  height: 1.1em;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  filter: blur(2px);
  animation: p404-shadow 3s ease-in-out infinite;
}
@keyframes p404-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.9em); }
}
@keyframes p404-shadow {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 1; }
  50%      { transform: translateX(-50%) scaleX(0.85); opacity: 0.7; }
}
.pocky-404__msg {
  margin: 0 0 var(--space-8);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.55;
}
.pocky-404__buttons {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}
.pocky-404__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-8);
  border: 1px solid var(--color-interactive, #0f0f0f);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-interactive, #0f0f0f);
  background: transparent;
  transition:
    background-color var(--transition-interactive),
    color var(--transition-interactive);
}
.pocky-404__btn:hover {
  background: var(--color-interactive, #0f0f0f);
  color: #fff;
}
.pocky-404__btn--primary {
  background: var(--color-interactive, #0f0f0f);
  color: #fff;
}
.pocky-404__btn--primary:hover {
  background: transparent;
  color: var(--color-interactive, #0f0f0f);
}
.pocky-404__btn:focus-visible {
  outline: 2px solid var(--color-interactive);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── 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); }
/* Hårfin lista (samma stil som FAQ): tunna avdelare mellan varje spec-rad,
   inramad upptill och nedtill. */
.pocky-product-tabs__specs li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-4); padding: var(--space-3) 0;
  font-size: inherit;
  border-bottom: 1px solid var(--color-border);
}
.pocky-product-tabs__specs li:first-child {
  border-top: 1px solid var(--color-border);
}
.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: auto;
  object-fit: cover;
  display: block;
  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;
}

/* ============================================
   VANLIGA FRÅGOR — FAQ accordion inside editorial posts.
   Markup + behavior reuse the global .faq-section accordion
   (appsOverrides.js initFaq). The admin blog editor rewrites
   pasted markup (relocates text nodes, may drop empty spans),
   so the +/× icon is drawn on the button itself and the pasted
   span icon is ignored — icon alignment must not depend on
   editor-controlled markup.
   ============================================ */
.pocky-cs__faq.faq-section {
  padding: 0;
}

.pocky-cs__faq .dropdown-item > button {
  position: relative;
  /* clear the drawn icon: space-6 + 20px icon + space-4 */
  padding-right: calc(var(--space-6) + 20px + var(--space-4));
}

/* Question row — same presence as .pocky-cs__benefit-title */
.pocky-cs__faq .dropdown-item > button h3 {
  font-size: var(--text-base);
  letter-spacing: -0.005em;
}

.pocky-cs__faq .dropdown-icon {
  display: none;
}

/* Same 20px icon box the site FAQ uses, centered at right: space-6 */
.pocky-cs__faq .dropdown-item > button::before,
.pocky-cs__faq .dropdown-item > button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--space-6) + 3px);
  width: 14px;
  height: 1.5px;
  border-radius: 999px;
  background: var(--cs-interactive);
  transform: translateY(-50%);
  transition: transform 240ms var(--cs-ease-entry);
}

.pocky-cs__faq .dropdown-item > button::after {
  transform: translateY(-50%) rotate(90deg);
}

.pocky-cs__faq .dropdown-item.active > button::after {
  transform: translateY(-50%) rotate(0deg);
}

/* .pocky-cs__main p (below) outweighs .dropdown-inner p by file order;
   restore the muted small answer style the site FAQ uses */
.pocky-cs__faq .dropdown-inner p {
  font-size: var(--text-sm);
  color: var(--cs-muted);
}

@media (prefers-reduced-motion: reduce) {
  .pocky-cs__faq .dropdown-item > button::before,
  .pocky-cs__faq .dropdown-item > button::after {
    transition: none !important;
  }
}

/* ── Editorial rhythm restorations ──
   Two v2 rules lose by specificity and never applied:
   .pocky-cs p { margin: 0 } (0,1,1) beats .pocky-cs__main > * + * (0,1,0),
   and .pocky-cs__main p outweighs .pocky-cs__intro by file order.
   Re-assert the intended values one class higher. */
.pocky-cs .pocky-cs__main > * + * {
  margin-top: var(--space-6);
}

.pocky-cs .pocky-cs__intro {
  font-size: var(--text-lg);
  line-height: 1.45;
}

/* 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;
}

/* ═══════════════════════════════════════════════════════════
   FINPUTS — tillgänglighet & små UX-detaljer (2026-07-08)
   ═══════════════════════════════════════════════════════════ */

/* Ankarhopp ska inte hamna under den fasta headern (72px + varningsremsa) */
html {
  scroll-padding-top: 120px;
}

/* Textmarkering i varumärkets svartvita ton i stället för webbläsarblå */
::selection {
  background: var(--color-interactive, #0f0f0f);
  color: #fff;
}

/* Ingen grå blink vid tryck på iOS/Android — komponenterna har egna tryck-states */
a, button {
  -webkit-tap-highlight-color: transparent;
}

/* Tangentbordsfokus — samma ring som nav/knappar redan använder,
   för de interaktiva komponenter som saknade den */
.pocky-flavor-option:focus-visible,
.pocky-qty-tier:focus-visible,
.pocky-product-tabs__tab:focus-visible,
.search-cancel-btn:focus-visible,
.search-result-item:focus-visible,
.footer-link:focus-visible,
.footer-subscribe-btn:focus-visible,
.footer-social__link:focus-visible,
.blog-card:focus-visible,
.cat-card:focus-visible,
.product-cta:focus-visible,
.pk-submit:focus-visible {
  outline: 2px solid var(--color-interactive);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Aktiv smak/styrka är redan vald — gör den oklickbar så att
   '#'-länken inte hoppar till sidtoppen eller laddar om samma sida */
.pocky-flavor-option--active {
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   DISPLAY-RUBRIKER — Bebas Neue i versaler, i stil med iciw.se
   ══════════════════════════════════════════════════════════
   Hela sajten är annars Montserrat (settings body/headings). Endast de
   stora display-rubrikerna får Bebas: sektionsrubriker, hero-titel och
   kategorisidans hero. Produkttitlar, varukorg, blogg, nav och brödtext
   förblir Montserrat (font-heading/font-body) — precis som på iciw.se.
   Bebas finns bara i vikt 400 och är versalt/kondenserat, därav egen
   line-height + positiv tracking. Font-size ärvs från respektive
   rubrikklass (deras responsiva clamps rörs inte). Sist i filen så att
   den vinner över tidigare regler med samma specificitet. */
.section-heading,
.banner-card__title,
.cat-page-title,
[data-qb-element='slider'] h2,
[data-qb-setting="productpage_rp_title"] {
  font-family: 'Bebas Neue', var(--font-heading), sans-serif !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.02 !important;
}

/* Footer/legal-sidornas hero-titel i Bebas — matchar sajtens display-rubriker
   (t.ex. "SE HELA LAGUPPSTÄLLNINGEN"). Endast sidans h1/titel; numrerade
   underrubriker (h2/h3) förblir Montserrat för läsbarhet. Ligger efter regeln
   ovan + legal-typografiblocket (~6483) så den vinner. */
.pocky-integritet .pi-title, .pocky-integritet > h1,
.pocky-villkor .pv-title, .pocky-villkor > h1,
.pocky-webbvillkor .pw-title, .pocky-webbvillkor > h1,
.pocky-kvalitet .pq-title, .pocky-kvalitet > h1,
.pocky-foreskrifter .pf-title, .pocky-foreskrifter > h1,
.pocky-uppforandekod .puk-title, .pocky-uppforandekod > h1,
.pocky-cookies .pc-title, .pocky-cookies > h1,
.pocky-retur .pr-title, .pocky-retur > h1,
.pocky-leverans .pl-title, .pocky-leverans > h1,
.pocky-kontakt .pk-title, .pocky-kontakt > h1,
.pocky-faq .pfq-title, .pocky-faq > h1 {
  font-family: 'Bebas Neue', var(--font-heading), sans-serif !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.02 !important;
}

/* ═══════════════════════════════════════════════════════════════
   POCKY · INTERAKTIONS-SYSTEM ("restrained")
   Återanvändbart lager med små, konsekventa mikrointeraktioner.
   Byggt först på bloggen (flaggskepp) — tänkt att spridas sitewide.
   En rörelsekurva + en tajmning överallt = premiumkänsla.
   JS: js/interactions.js. Respekterar prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);  /* signaturkurva: mjuk expo-out */
  --dur-fast: 180ms;    /* mikro-feedback: pil-nudge */
  --dur: 240ms;         /* standard hover: kort-lyft, understrykning, fokus */
  --dur-zoom: 440ms;    /* graciös bildzoom (blogg + kategori) — långsammare = premium */
  --dur-reveal: 640ms;  /* scroll-reveal */
}

/* ── Scroll-reveal (generiskt) — JS sätter .is-in när elementet syns ── */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ── Blogg · kort-hover: bild zoomar mjukt i klippt ram, kortet lyfts ── */
.blog-card__img {
  transition: transform var(--dur-zoom) var(--ease-out) !important;
  will-change: transform;
}
.blog-card:hover .blog-card__img { transform: scale(1.03) !important; }
.blog-card:hover .blog-card__image::after { background: rgba(0, 0, 0, 0.06) !important; }
/* Lyft ligger på .blog-card; reveal ligger på <article> (annan nod) → ingen krock. */
.blog-card {
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out) !important;
}
.blog-card:hover { transform: translateY(-2px) !important; }

/* ── Blogg · titel-understrykning som ritas vänster→höger ── */
.blog-card__title {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur) var(--ease-out) !important;
  padding-bottom: 1px;
}
.blog-card:hover .blog-card__title {
  background-size: 100% 1px;
  text-decoration: none !important;
}

/* ── Kategorikort · bild zoomar mjukt i klippt ram vid hover ──
   .cat-card__inner har overflow:hidden; basbilden har transform/transition:none
   som vi måste överskriva. Reveal ligger på .cat-card (annan transform-kontext
   än bilden) → ingen krock. */
.cat-card__img {
  transition: transform var(--dur-zoom) var(--ease-out) !important;
  will-change: transform;
}
.cat-card:hover .cat-card__img { transform: scale(1.04) !important; }

/* ── Fokusring (tangentbord) ── */
.blog-card:focus-visible {
  outline: 2px solid var(--color-text, #1d1d1f);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Slider-pilar: nudge på hover + göm när de är låsta (allt får plats) ── */
.slider-nav-btn {
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out) !important;
}
.blog-swiper-prev:hover { transform: translateX(-3px) !important; }
.blog-swiper-next:hover { transform: translateX(3px) !important; }
.slider-nav-btn.swiper-button-lock { display: none !important; }

/* ── Reduced motion: ta bort förflyttning, behåll mjuk opacity ── */
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: opacity var(--dur) linear; }
  .blog-card:hover,
  .blog-card:hover .blog-card__img,
  .blog-swiper-prev:hover,
  .blog-swiper-next:hover { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   FAQ · konsekvent rubrik, alltid synliga rader, ren hårfin lista
   ═══════════════════════════════════════════════════════════════ */
/* Rubriken "Vanliga frågor och svar" i Bebas som övriga display-rubriker
   (var Montserrat → enda avvikande rubriken på startsidan). */
.faq-intro h2 {
  font-family: 'Bebas Neue', var(--font-heading), sans-serif !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.02 !important;
  font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
}

/* Bugg-fix: JS-reveal (.faq-js) lämnade flera frågor helt dolda (opacity:0,
   translateY) när observern inte hann avslöja dem. Tvinga alla synliga. */
.faq-js .dropdown-item {
  opacity: 1 !important;
  transform: none !important;
}

/* Renare, mer editorial lista: transparenta rader med hårfina avdelare i
   stället för grå block; platt öppet läge (ingen tung skugga). */
.dropdowns { gap: 0 !important; }
.dropdown-item {
  background: transparent !important;
  border-bottom: 1px solid var(--color-border) !important;
}
.dropdown-item:first-child {
  border-top: 1px solid var(--color-border) !important;
}
.dropdown-item.active {
  background: transparent !important;
  box-shadow: none !important;
}