/** Shopify CDN: Minification failed

Line 118:0 Unexpected "#170-179"
Line 126:0 Unexpected "#180-189"

**/
.privacy-bar__close {
  display: none;
}

.shopify-section--privacy-banner {
  z-index: 999;
}

.navigation-drawer.drawer { 
z-index: 999;
}

.shopify-pc__banner__dialog button.shopify-pc__banner__btn-decline {
    background: #E4E4E4 !important;
    color: #000 !important;
}

/* Growbix CRO */
.collection .v-stack.gap-4.md\:hidden {
    display: none;
}

.collection.collection--filters-drawer {
    margin-top: 0px;
}

.shopify-section--collection-banner {
    margin-bottom: -10px;
}

.product-info__price .rating-with-text{
  align-items: center;
}
.product-info__price .product-info__image {
    flex: auto;
}
.product-info__price .product-info__image img{
    margin-right: 0;
  margin-left: auto;
}
.product-info__buy-buttons .footer__payment-icons {
  margin: 0.5em auto;
}
.swatch-size-chart{
  display: none;
}
.product-info__variant-picker-size {
  float: right;
  margin: 3px 0 0;
}
button#gowishWhiteButton {
  margin-bottom: 0;
}

.product-list {
  gap: 1px !important;
  row-gap: 24px !important;
  margin-bottom: 30px !important;
}

.product-card__image {
  object-fit: cover !important;
}
x-drawer[id^=size-chart] {
  width: 100%;
}
.drawer::part(body) {
  padding: 10px;
}
.shopify-section--multi-column .multi-column__item {
  margin-top: 0;
}

@media screen and (max-width: 520px) {
  .product-info__price .product-info__image img {
    width: 180px !important;
  }
  .product-info__buy-buttons .footer__payment-icons{
    gap: 3px;
  }
  .product-info__buy-buttons .footer__payment-icons svg{
    height: 20px;
    width: auto;
  }
}

.collection__results {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}


.shopify-section--featured-collection .section {
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
}

.shopify-section--featured-collection .section-header.section-header {
    padding-inline-start: max(var(--calculated-section-spacing-inline), 50% - var(--container-max-width) / 2) !important;
}

.product-gallery__media-list {
  gap: 2px !important;
}

#under169 {
    font-size: 25px !important;
}

#170-179 {
    font-size: 25px !important;
}

#mellem170-179 {
    font-size: 25px !important;
}

#180-189 {
    font-size: 25px !important;
}

#mellem180-189 {
    font-size: 25px !important;
}

#over190 {
    font-size: 25px !important;
}

/* THE ROBBERY — Email input på hero (alle sider) */
[id$="__newsletter_Pzt3XE"] .input.is-floating {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
  color: #fff !important;
}
[id$="__newsletter_Pzt3XE"] .floating-label {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* THE ROBBERY — Email input under hero (alle sider) */
[id$="__newsletter_pbkjUa"] .input.is-floating {
  border: 1.5px solid rgba(255, 72, 0, 0.75) !important;
}

/* ==========================================================================
   CUSTOM PRODUCT CARD REDESIGN — collection page
   Title bottom-left, custom price order, scrollable gallery, hover size bar
   ========================================================================== */

/* --- Title + price block: force left alignment regardless of global setting --- */
.product-card__custom-title-price {
  align-items: flex-start !important;
  text-align: left !important;
  margin-top: 0 !important;
}

.product-card__info--custom-layout {
  padding-block-start: 1px !important;
  padding-inline-start: 5px !important;
}

.product-card__title-row {
  position: relative;
  display: block;
  width: 100%;
}

.product-card__custom-title-price .product-card__title {
  text-align: left;
  font-size: 11px;
  line-height: 1.15;
  display: block;
  max-width: 75%;
}

.product-card__custom-title-price .product-card__title a.bold {
  font-weight: 400 !important;
}

.product-card__title-row .product-card__size-trigger {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: -3px;
}

/* --- Custom price row: sale price on top, compare-at (red, strikethrough) below.
   Desktop: colors sit on the price line, right-aligned. Mobile: overridden below
   to stack under the price instead, left-aligned. --- */
.product-card__info--custom-layout {
  position: relative;
}

.product-card__info--custom-layout .product-card__custom-title-price {
  order: 1;
}

.product-card__info--custom-layout variant-swatch-king {
  display: none !important;
}

.product-card__custom-price-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  margin-bottom: -18px;
}

.product-card__custom-compare-price {
  order: 2;
  font-size: 10px;
  font-weight: 400;
  color: #d12b2b;
  text-decoration: line-through;
}

.product-card__custom-sale-price {
  order: 1;
  font-size: 10px;
  font-weight: 400;
  color: #000;
}

@media screen and (min-width: 750px) {
  .product-card__custom-title-price .product-card__title {
    font-size: 15.4px;
  }

  .product-card__custom-compare-price,
  .product-card__custom-sale-price {
    font-size: 14px;
  }
}

/* --- Scrollable media gallery --- */
.product-card__figure {
  position: relative;
}

.product-card__media-list {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.product-card__media-sizer {
  display: block;
  width: 100%;
  height: auto;
  visibility: hidden;
  pointer-events: none;
}

.product-card__media-track {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.product-card__media-track.is-dragging {
  transition: none;
}

.product-card__media-item {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.product-card__media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

.product-card__nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #111;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.product-card__nav-arrow svg {
  width: 20px;
  height: 20px;
}

.product-card__nav-arrow svg path {
  stroke: #111 !important;
  stroke-width: 1 !important;
}

.product-card__nav-arrow--prev {
  left: 2px;
}

.product-card__nav-arrow--next {
  right: 2px;
}

@media (hover: hover) {
  .product-card:hover .product-card__nav-arrow {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (hover: none) {
  .product-card__nav-arrow {
    opacity: 1;
    pointer-events: auto;
    width: 9px;
    height: 9px;
  }

  .product-card__nav-arrow svg {
    width: 6px;
    height: 6px;
  }

  .product-card__nav-arrow--prev {
    left: 0;
  }

  .product-card__nav-arrow--next {
    right: 0;
  }
}

/* --- Hover-to-reveal size bar, pinned to the bottom of the image frame --- */
.product-card__size-bar-wrapper {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 20 !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(255, 255, 255, 0.68) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.product-card__size-bar {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.product-card__presale-note {
  padding: 4px 6px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #fff !important;
  background: #d12b2b !important;
}

@media (hover: hover) {
  .product-card:hover .product-card__size-bar-wrapper {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .product-card__size-trigger,
  .product-card__size-sheet-backdrop,
  .product-card__size-sheet-close {
    display: none !important;
  }
}

/* --- Mobile: "+" trigger opens a bottom sheet instead of a cramped inline size row --- */
@media (hover: none) {
  .product-card__size-bar-wrapper {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 1000 !important;
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
  }

  .product-card__size-bar-wrapper.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .product-card__size-bar {
    flex-wrap: nowrap !important;
    padding: 20px 10px 28px !important;
    gap: 4px !important;
  }

  .product-card__size-btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 12px !important;
    padding: 8px 2px !important;
    margin: 1px !important;
  }

  .product-card__presale-note {
    order: -1;
  }

  .product-card__size-trigger {
    position: static;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #111;
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    padding: 0;
  }

  .product-card__size-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .product-card__size-sheet-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .product-card__size-sheet-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #f2f2f2;
    color: #111;
    font-size: 20px;
    line-height: 1;
    padding: 0;
  }

  .product-card__size-sheet-close span {
    display: block;
    margin-top: -2px;
  }
}

.product-card__size-btn {
  position: relative;
  flex: 1 1 auto;
  min-width: 32px;
  padding: 10px 4px !important;
  margin: 2px !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  background: transparent !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #111 !important;
  cursor: pointer;
  text-align: center;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
  .product-card__size-btn:not(:disabled):hover {
    background-color: #111 !important;
    color: #fff !important;
  }
}

.product-card__size-btn:not(:disabled):active {
  background-color: #111 !important;
  color: #fff !important;
}

.product-card__size-btn--unavailable {
  color: #b3b3b3 !important;
  text-decoration: line-through;
  cursor: not-allowed;
}

.product-card__size-btn-check {
  display: none;
  align-items: center;
  justify-content: center;
}

.product-card__size-btn-check svg {
  width: 14px;
  height: 14px;
}

.product-card__size-btn.is-loading .product-card__size-btn-label {
  opacity: 0.35;
}

.product-card__size-btn.is-added .product-card__size-btn-label {
  display: none;
}

.product-card__size-btn.is-added .product-card__size-btn-check {
  display: flex;
}

.product-card__quick-add-form {
  display: none;
}

@media screen and (max-width: 749px) {
  .product-card__size-bar {
    padding: 6px 4px;
  }

  .product-card__size-btn {
    font-size: 11px;
    padding: 5px 3px;
  }
}

/* --- PDP: allow vertical page scroll to pass through the marquee gallery on touch ---
   The horizontal swipe/drag logic on the gallery was also blocking vertical scroll
   when the user's finger only moved up/down. touch-action: pan-y tells the browser
   to always honour vertical scrolling natively here, regardless of any JS
   preventDefault() calls tied to the horizontal drag behaviour. */
.product-marquee,
.product-marquee__track,
.product-gallery--marquee {
  touch-action: pan-y;
}

/* --- CLP: same touch-action hint for the product card gallery swipe, so mobile
   swiping is faster to respond and doesn't fight with vertical page scroll --- */
.product-card__figure {
  touch-action: pan-y;
}
/* ======================================================================================================
   CART DRAWER — Cainte-style restyle
   Scoped to .cart-drawer / #cart-drawer only, so the shared line-item snippet still looks normal on the
   cart page and the account order history page.
   ====================================================================================================== */

/* --- Drawer size & position: narrower panel, flush against the right edge, no gap top/bottom/right --- */
#cart-drawer.drawer {
  padding: 0;
}

#cart-drawer.drawer::part(content) {
  border-radius: 0;
}

/* Only the line-item list should ever scroll, and only vertically — never the drawer itself horizontally. */
#cart-drawer.drawer::part(body) {
  overflow-x: hidden;
  /* Ambient horizontal padding reduced to almost nothing; padding is added back explicitly below to every
     region except the "You may like" carousel, so that carousel alone ends up ~3px from the drawer edges
     without relying on negative-margin bleed math (which was getting clipped depending on the exact
     drawer padding value and the body's own grid/overflow context). */
  padding-inline: 3px;
}

.cart-drawer__top,
.cart-drawer__line-items,
.cart-drawer__recommendations-heading {
  padding-inline: var(--spacing-6);
}

@media screen and (min-width: 700px) {
  .cart-drawer__top,
  .cart-drawer__line-items,
  .cart-drawer__recommendations-heading {
    padding-inline: var(--spacing-10);
  }
}

@media screen and (min-width: 700px) {
  #cart-drawer.drawer--lg {
    width: 440px;
    padding: 0;
  }
}

/* --- Header row: center "Indkøbskurv" title on its own line regardless of close button width --- */
.cart-drawer__header {
  position: relative;
}

.cart-drawer__header-title-group {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  flex-grow: 0;
}

/* With the title taken out of flow above, the close button is now the row's only flex child — pin it right */
.cart-drawer__header .drawer__close-icon {
  margin-inline-start: auto;
}

/* --- Drawer background: force white regardless of the theme's global dialog background setting --- */
#cart-drawer.drawer::part(content) {
  background: rgb(255, 255, 255);
}

/* --- Gift progress bar: markers sit directly on the bar itself --- */
.gift-progress-bar {
  display: grid;
  gap: var(--spacing-3);
  width: 100%;
}

.gift-progress-bar__text {
  text-align: center;
}

.gift-progress-bar__track {
  position: relative;
  padding-block: 10px;
  margin-right: 10px;
}

.gift-progress-bar__marker {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(255, 255, 255);
  border: 1.5px solid rgb(var(--border-color));
  border-radius: 0;
  opacity: 0.6;
  z-index: 1;
}

/* The last marker sits at (or near) 100% of the track, which pushes it half outside the visible bar —
   nudge it 10px back to the left so it stays fully visible. */
.gift-progress-bar__marker:last-child {
  transform: translate(calc(-50% - 10px), -50%);
}

.gift-progress-bar__marker svg {
  width: 20px;
  height: 20px;
}

.gift-progress-bar__marker.is-reached {
  opacity: 1;
  border-color: rgb(var(--text-color));
}

.gift-progress-bar__marker-image {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

.gift-progress-bar__reward-products {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.gift-progress-bar__reward-product-image {
  width: 32px;
  height: 32px;
  border-radius: var(--rounded-xs);
  object-fit: cover;
}

.gift-progress-bar__code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  border: 1px dashed rgb(var(--border-color));
  border-radius: var(--rounded-xs);
  padding: var(--spacing-1) var(--spacing-3);
  width: fit-content;
  margin-inline: auto;
}

@media screen and (min-width: 700px) {
  .gift-progress-bar {
    gap: var(--spacing-2-5);
  }
}

/* --- Compact, square product cards inside the cart drawer, matching Cainte --- */
.cart-drawer .line-item--compact {
  --line-item-image-width: var(--spacing-24);
  gap: var(--spacing-4);
  align-items: stretch;
}

/* The info column must always fill 100% of the remaining row width (not shrink-wrap to its content, which
   varies with title length) — otherwise the absolutely positioned "Remove" link below lands at a different
   x-position on every product, since it's positioned relative to this column's own right edge. */
.cart-drawer .line-item--compact .line-item__info {
  flex: 1 1 auto;
  min-width: 0;
}

.cart-drawer .line-item--compact .line-item__media-wrapper {
  height: var(--line-item-image-width);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f4f4f4;
}

.cart-drawer .line-item__media--square {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}

/* Info column stretches to the same height as the image (align-items: stretch above), then splits into a
   top group (title/price/size) and a bottom group (stepper/remove) pinned to the bottom via space-between,
   so the bottom row always lines up with the image's bottom edge regardless of how tall the title gets. */
.line-item__info--compact {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  gap: var(--spacing-2);
}

.line-item__info-top {
  display: grid;
  gap: var(--spacing-1);
}

/* Wrap long titles onto multiple lines instead of getting clipped */
.line-item__title--wrap {
  white-space: normal;
  overflow-wrap: break-word;
}

/* Price: current price matches the title's font weight/color, before-price (when marked down) is smaller,
   subdued, and struck through — both left-aligned under the title. */
.line-item__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-1-5);
  font-size: 75%;
}

.line-item__price-current {
  color: rgb(var(--text-color));
  font-weight: bold;
}

.line-item__price-current--on-sale {
  color: #e02020;
}

.line-item__price-before {
  color: rgb(var(--text-color) / .55);
  font-weight: normal;
  font-size: 0.85em;
  text-decoration: line-through;
}

.line-item__info-bottom {
  width: 100%;
}

/* Always pin "Remove" to the exact same rightmost position — the bottom-right corner of the info column,
   which lines up with every other line item and with the checkout button below since they share the same
   right padding edge. */
.line-item__remove {
  position: absolute;
  right: 0;
  bottom: 0;
}

/* --- Discount badge (e.g. "3FOR2: -534 kr") on marked-down / promo line items --- */
.line-item__discount-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid #ff6b4a;
  color: #ff6b4a;
  background: rgba(255, 107, 74, 0.08);
  border-radius: 3px 10px 10px 3px;
  font-size: 11px;
  font-weight: 600;
  width: fit-content;
}

.line-item__discount-badge svg {
  flex-shrink: 0;
}

/* Max 8px gap between products in the cart */
.cart-drawer__line-items > * + * {
  padding-block-start: 8px;
}

@media screen and (min-width: 700px) {
  .cart-drawer__line-items > * + * {
    padding-block-start: 8px;
  }
}

/* --- Quantity stepper (-/+) inside the cart drawer — no pill/border, just the icons and the number --- */
.line-item-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2-5);
  width: fit-content;
}

.line-item-stepper__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: inherit;
}

.line-item-stepper__button svg {
  pointer-events: none;
}

.line-item-stepper__input {
  width: 1.25rem;
  border: none;
  background: transparent;
  text-align: center;
  padding: 0;
  font: inherit;
}

/* --- "You may like" recommendations: reuse the same product-card component as CLP/PDP (hover/swipe through
   images, title + smaller price underneath), laid out as a horizontal scroll strip of narrow columns.
   The ~3px edge gap comes from the reduced ambient body padding above — this carousel intentionally does
   NOT get the extra padding added back (unlike .cart-drawer__top / .cart-drawer__line-items), so it sits
   almost flush with the drawer's edges. --- */
.cart-drawer__recommendations-carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.cart-drawer__recommendations-list {
  display: flex;
  gap: 2px;
}

.cart-drawer__recommendation-item {
  flex: 0 0 auto;
  width: 38%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

@media screen and (min-width: 700px) {
  .cart-drawer__recommendation-item {
    width: 144px;
  }
}

/* Carousel prev/next arrows: no circle background, just the icon */
.cart-drawer .circle-chevron {
  background: transparent;
  border-radius: 0;
  width: auto;
  height: auto;
  transform: translateX(-10px) scale(1.5);
}

/* Transparent card background — no white/colored box behind the title + price */
.cart-drawer__recommendation-item product-card,
.cart-drawer__recommendation-item .bg-custom {
  --background: transparent !important;
  background: transparent !important;
}

/* The custom product-card price row is a bit large for this narrow context — scale it down so title reads
   larger than price, as requested. The CLP layout uses a negative bottom margin to tuck the price under a
   fixed-height title area; that space doesn't exist in this compact card, so it's reset here or the price
   ends up pulled invisibly behind the title. */
.cart-drawer__recommendation-item .product-card__custom-price-row {
  margin-bottom: 0;
}

/* The compare/sale price spans set their own explicit font-size (including inside a desktop media query),
   which always overrides a font-size set on their parent — so it has to be targeted directly here instead. */
.cart-drawer__recommendation-item .product-card__custom-compare-price,
.cart-drawer__recommendation-item .product-card__custom-sale-price {
  font-size: 9px;
}

.cart-drawer__recommendation-item .product-card__title {
  font-size: var(--text-sm);
}

/* Hover size-selector: keep it fully contained inside the image instead of spilling past its edges. Buttons
   wrap onto a second line instead of overflowing horizontally, and shrink a bit to fit a narrow card. */
.cart-drawer__recommendation-item .product-card__size-bar-wrapper {
  overflow: hidden;
}

.cart-drawer__recommendation-item .product-card__size-bar {
  flex-wrap: wrap !important;
  gap: 2px !important;
}

.cart-drawer__recommendation-item .product-card__size-btn {
  min-width: 22px !important;
  padding: 4px 2px !important;
  margin: 1px !important;
  font-size: 10px !important;
}

/* --- Footer blocks (subtotal / text / trust badges / buttons) --- */
.cart-drawer__footer-block--text-sm {
  font-size: 12px;
}

.cart-drawer__footer-block--text-md {
  font-size: 13px;
}

.cart-drawer__footer-block--text-lg {
  font-size: var(--text-base);
}

.cart-drawer__footer-divider--sm {
  height: var(--spacing-2);
}

.cart-drawer__footer-divider--md {
  height: var(--spacing-4);
}

.cart-drawer__footer-divider--lg {
  height: var(--spacing-8);
}

/* --- Footer layout: Subtotal → Shipping → Savings → Delivery estimate → Checkout, checkout pinned to the
   very bottom, slim rather than the theme's chunky default button height. --- */
.cart-drawer__footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cart-drawer__footer-block--savings {
  color: rgb(var(--text-color));
}

.cart-drawer__footer-buttons {
  margin-block-start: 4px;
}

.cart-drawer__footer-buttons .button {
  padding-block: var(--spacing-2-5);
}

/* Override the drawer's own generous footer padding so the checkout button sits close to the edges (max 8px
   on each side and below), and pushes the whole footer block down as far as possible. */
#cart-drawer.drawer::part(footer) {
  padding: var(--spacing-3) 8px 8px;
}

/* --- Everything in the cart drawer in uppercase, except product titles --- */
#cart-drawer {
  text-transform: uppercase;
}

#cart-drawer .line-item__title--wrap,
#cart-drawer .product-card__title {
  text-transform: none;
}

/* Remove the circular bubble around the item count next to "Indkøbskurv" — plain text instead */
.cart-drawer__header-title-group .count-bubble {
  background: transparent;
  color: inherit;
  border-radius: 0;
  width: auto;
  height: auto;
}

/* Spacing for any app blocks a merchant adds after "You may like" */
.cart-drawer__app-blocks:not(:empty) {
  margin-top: var(--spacing-2);
}

/* --- Fix: sticky "tilføj til kurv"-bjælke må ikke ligge over en åben drawer, og skal skjules helt mens en drawer er åben --- */
.above-fold-sticky-atc {
  z-index: 40 !important;
}

html.lock .above-fold-sticky-atc {
  display: none !important;
}

/* --- "You may like" carousel: scroll-progress indicator (thin track + sliding thumb) ---
   Thumb width reflects how much of the carousel is currently visible; position/width are driven by JS
   in cart-drawer-enhancements.js, matched to the carousel's native scroll position. */
.cart-drawer__recommendations-progress {
  position: relative;
  width: 100%;
  height: 6px;
  margin-top: 2px;
}

.cart-drawer__recommendations-progress-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: rgb(var(--border-color));
  border-radius: 999px;
  transform: translateY(-50%);
}

.cart-drawer__recommendations-progress-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 6px;
  width: 32px;
  background: rgb(var(--text-primary));
  border-radius: 999px;
  transition: transform 0.1s linear, width 0.15s ease;
  will-change: transform;
}

/* --- "You may like" carousel progress thumb: draggable --- */
.cart-drawer__recommendations-progress-thumb {
  cursor: grab;
  touch-action: none; /* prevents the browser's own touch-scroll/pan from fighting the drag on mobile */
}

.cart-drawer__recommendations-progress-thumb.is-dragging {
  cursor: grabbing;
  transition: none; /* no easing lag while actively dragging — should track the pointer 1:1 */
}

/* Invisible, larger hit area — the visible thumb is only 6px tall, too thin to reliably grab on touch */
.cart-drawer__recommendations-progress-thumb::before {
  content: '';
  position: absolute;
  inset: -10px 0;
}

/* --- PDP billedgalleri: kant-til-kant også på desktop ---
   Temaets egen .md:unbleed-klasse (theme.css) nulstiller bevidst bleed-effekten fra 1000px og opefter,
   hvilket giver et hvidt mellemrum i venstre/højre side på desktop. Denne regel genindfører samme
   negative margin som .full-bleed allerede bruger på mobil, kun for selve billedgalleriet — resten af
   sitets .md:unbleed-brug (andre steder) er upåvirket, da reglen er scopet specifikt til galleriet. */
@media screen and (min-width: 1000px) {
  .product-gallery__media-list.md\:unbleed {
    margin-inline-start: calc(-1 * var(--container-outer-width)) !important;
    margin-inline-end: calc(-1 * var(--container-outer-width)) !important;
  }
}

/* --- PDP: billedgalleri kant-til-kant (begge sider) ---
   Denne CSS-regel alene virker IKKE for højre side: forsøg med margin-inline-end (selv med !important)
   har ingen effekt på selve galleriets bredde her — en anden, mere specifik regel et sted (formentlig fra
   en tredjeparts-app) vinder konsekvent over enhver stylesheet-baseret ændring. Det gælder også
   .product-info (prisboksen), som vi opdagede tidligere. Venstre side virker fint med ren CSS (nedenfor),
   men højre side + thumbnail-rækkens højre-kompensation er flyttet til JavaScript i stedet
   (cart-drawer-enhancements.js), hvor direkte inline style med !important beviseligt virker pålideligt. */
.product-gallery--marquee {
  margin-inline-start: calc(-1 * max(var(--calculated-section-spacing-inline), 50% - var(--container-max-width) / 2));
}

/* Kompensation for thumbnail-rækkens venstre kant (uændret fra før). Højre kant håndteres i JS, se ovenfor. */
.product-marquee-thumbs-nav {
  margin-inline-start: max(var(--calculated-section-spacing-inline), 50% - var(--container-max-width) / 2);
}

/* --- PDP marquee-galleri: billedbredde flyttet til JavaScript ---
   Et tidligere forsøg her satte "width: 50% !important" på hvert billede, ud fra en antagelse om at det
   ville få to billeder til altid at fylde hele beholderen. Det virkede ikke pålideligt: beholderen
   (.product-marquee__track) har "width: max-content" (den tilpasser sig sine børn), og
   procent-baserede bredder kan ikke regnes ud korrekt i en beholder der selv er størrelses-bestemt af
   sine børn — det gav uens/forkerte bredder og synlige huller ved bredere skærme. Den robuste løsning
   ligger nu i JavaScript i stedet (se product-marquee-fix.js), som måler den faktiske piksel-bredde af
   galleriet og sætter en præcis pixel-bredde på hvert billede — det er derfor der ikke er nogen CSS-regel
   for .product-marquee__item her længere. */