/** Shopify CDN: Minification failed

Line 32:0 All "@import" rules must come first

**/
/* ============================================
   POCKETLUCHTJE — Custom Brand CSS
   Applied on top of NXT theme
   ============================================ */

/* ── BRAND TOKENS ── */
:root {
  --pl-cream:       #F9F5EF;
  --pl-warm-white:  #FDFAF6;
  --pl-ink:         #1A1612;
  --pl-ink-light:   #5C5248;
  --pl-gold:        #C9A96E;
  --pl-gold-light:  #E8D5B0;
  --pl-gold-pale:   #F5EDD8;
  --pl-blush:       #F0E8E0;
  --pl-border:      rgba(26,22,18,0.12);

  /* Override NXT theme colour tokens */
  --theme_bg:             #C9A96E !important;
  --theme_bg_dark:        #b8924a !important;
  --theme_bg_fade:        #E8D5B0 !important;
  --theme_bg_light:       #F5EDD8 !important;
  --body_bg:              #F9F5EF !important;
}

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=DM+Sans:wght@300;400;500&display=swap');

/* ── BODY & BASE ── */
body {
  background-color: var(--pl-cream) !important;
  color: var(--pl-ink) !important;
}

/* ── HEADINGS → Playfair Display ── */
h1, h2, h3,
.section-title,
.product-title,
[class*="title"],
[class*="heading"] {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  color: var(--pl-ink) !important;
}

/* ── BODY TEXT → DM Sans ── */
body, p, li, span, a, input, select, textarea, button {
  font-family: 'DM Sans', sans-serif !important;
}

/* ── ANNOUNCEMENT BAR ── */
#shopify-section-announcement-bar,
.announcement-bar,
[class*="announcement"] {
  background-color: var(--pl-ink) !important;
  color: var(--pl-gold-light) !important;
  letter-spacing: 0.08em;
  font-size: 13px;
}

/* ── HEADER ── */
#shopify-section-header header,
.site-header,
.top-main {
  background-color: var(--pl-warm-white) !important;
  border-bottom: 1px solid var(--pl-border) !important;
  box-shadow: none !important;
}

/* Logo */
.logo img, .header-logo img {
  max-height: 36px !important;
}

/* Nav links */
.nav-item a,
.top-main a,
.header-nav a {
  color: var(--pl-ink-light) !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  font-weight: 400 !important;
}
.nav-item a:hover,
.top-main a:hover {
  color: var(--pl-ink) !important;
}

/* Header CTA button */
.top-main .btn,
.header .btn-primary,
.nav-cta-btn {
  background-color: var(--pl-ink) !important;
  color: var(--pl-gold-light) !important;
  border-radius: 2px !important;
}

/* Cart icon */
.cart-icon-count,
[class*="cart-count"] {
  background-color: var(--pl-gold) !important;
  color: var(--pl-ink) !important;
}

/* ── BUTTONS ──
   Only targets non-Fleet buttons (.btn / .button without Fleet overlay classes).
   PL custom sections use .pl-atc-btn (in pocketluchtje-sections.css) — no override needed here.
   Fleet's own buttons (.link-btn, .s1bx, overlay-*) are intentionally excluded.
── */
.btn:not([class*="overlay-"]):not([class*="s1bx"]):not([class*="link-btn"]),
.button:not([class*="overlay-"]):not([class*="s1bx"]):not([class*="link-btn"]) {
  background-color: var(--pl-ink) !important;
  color: var(--pl-gold-light) !important;
  border: none !important;
  border-radius: 2px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: none !important;
  transition: background 0.2s, transform 0.15s !important;
}
.btn:not([class*="overlay-"]):not([class*="s1bx"]):hover,
.button:not([class*="overlay-"]):not([class*="s1bx"]):hover {
  background-color: #2d2520 !important;
  transform: translateY(-1px) !important;
  color: var(--pl-gold-light) !important;
}

/* Secondary / outline buttons */
[class*="btn-secondary"],
[class*="button--secondary"],
.btn-outline {
  background-color: transparent !important;
  color: var(--pl-ink) !important;
  border: 1px solid var(--pl-border) !important;
  border-radius: 2px !important;
}
[class*="btn-secondary"]:hover {
  background-color: var(--pl-gold-pale) !important;
  border-color: var(--pl-gold) !important;
}

/* Add to cart — only target PL custom section buttons, not Fleet's native ATC */
.pl-atc-btn {
  background-color: var(--pl-ink) !important;
  color: var(--pl-gold-light) !important;
  border-radius: 2px !important;
  font-size: 14px !important;
  letter-spacing: 0.1em !important;
}
.pl-atc-btn:hover {
  background-color: #2d2520 !important;
}

/* ── PRODUCT CARDS ── */
.product-item,
.product-card,
[class*="product-item"] {
  background-color: var(--pl-warm-white) !important;
  border: 1px solid var(--pl-border) !important;
  border-radius: 4px !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.product-item:hover,
.product-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 32px rgba(26,22,18,0.08) !important;
}

/* Product titles on cards */
.product-item .title,
.product-card .title,
[class*="product-item"] [class*="title"] {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
  color: var(--pl-ink) !important;
}

/* Prices */
[class*="price"],
.price {
  color: var(--pl-ink) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
}
.price--compare,
[class*="price-compare"],
[class*="compare-price"] {
  color: var(--pl-ink-light) !important;
  opacity: 0.5 !important;
}

/* ── PRODUCT PAGE ── */
.main-product,
.product-page,
[class*="main-product"] {
  background-color: var(--pl-warm-white) !important;
}

/* Product image area */
.product-gallery,
.product-images,
[class*="product-image"] {
  background-color: var(--pl-gold-pale) !important;
  border-radius: 4px !important;
}

/* Variant buttons / swatches */
.variant-button,
[class*="variant-btn"],
.swatch {
  border: 2px solid var(--pl-border) !important;
  border-radius: 2px !important;
  font-family: 'DM Sans', sans-serif !important;
}
.variant-button.active,
.variant-button:focus,
[class*="variant-btn"].active {
  border-color: var(--pl-ink) !important;
  background-color: var(--pl-ink) !important;
  color: var(--pl-gold-light) !important;
}

/* ── QUANTITY STEPPER ──
   Probleem: de parent .link-btn heeft een ::before overlay (donkere achtergrond)
   die de .input-amount.inline bedekt. De .input-amount.inline heeft al
   position:relative (Fleet CSS) — z-index:2 tilt het boven de ::before overlay.
── */

/* De container boven de donkere ::before overlay tillen */
#root .input-amount.inline,
#root .f8pr-amount.inline {
  background:    #FDFAF6 !important;
  z-index:       2 !important;
  border-radius: 30px !important;
  overflow:      hidden !important;
}

/* Het getal — transparant zodat container achtergrond doorschijnt, donkere tekst */
#root .input-amount.inline input,
#root .f8pr-amount.inline input {
  background:              transparent !important;
  color:                   #1A1612 !important;
  -webkit-text-fill-color: #1A1612 !important;
  opacity:                 1 !important;
  font-weight:             700 !important;
  font-size:               15px !important;
}

/* De +/- pijltjes (icomoon icons) — donker op crème achtergrond */
#root .input-amount.inline .incr,
#root .input-amount.inline .decr,
#root .f8pr-amount.inline .incr,
#root .f8pr-amount.inline .decr {
  color:    #1A1612 !important;
  z-index:  3 !important;
}

/* Geen dubbele achtergrond op semantic anchor icons */
#root .input-amount .semantic-amount > a:before {
  background: none !important;
  box-shadow: none !important;
}

/* ── CHECKOUT BUTTON — warm dark bruin, niet pikzwart ── */
button[name="checkout"],
input[name="checkout"] {
  color: var(--pl-gold-light, #E8D5B0) !important;
  letter-spacing: 0.06em !important;
  font-size: 15px !important;
}
button[name="checkout"]:before,
input[name="checkout"]:before {
  background-color: #3a2e25 !important;
  background:       #3a2e25 !important;
}
html[data-whatin] button[name="checkout"]:hover:before {
  background-color: #2d2520 !important;
  background:       #2d2520 !important;
}

/* ── FORMS & INPUTS ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  background-color: var(--pl-warm-white) !important;
  border: 1px solid var(--pl-border) !important;
  border-radius: 2px !important;
  color: var(--pl-ink) !important;
  font-family: 'DM Sans', sans-serif !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--pl-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(201,169,110,0.2) !important;
}

/* ── CART ── */
.cart-drawer,
.side-cart,
[class*="cart-drawer"] {
  background-color: var(--pl-warm-white) !important;
}
.cart-item,
[class*="cart-item"] {
  border-bottom: 1px solid var(--pl-border) !important;
}
.cart-total,
[class*="cart-total"] {
  border-top: 1px solid var(--pl-border) !important;
  font-family: 'Playfair Display', serif !important;
}

/* ── COLLECTION PAGE ── */
.collection-header,
[class*="collection-header"] {
  background-color: var(--pl-warm-white) !important;
}
.collection-filters,
[class*="filters"] {
  background-color: var(--pl-cream) !important;
  border-right: 1px solid var(--pl-border) !important;
}

/* ── SECTIONS ── */

/* Slideshow / hero banners */
.section-slideshow,
[class*="slideshow"],
.hero-section {
  background-color: var(--pl-warm-white) !important;
}

/* USP bar */
.section-usp-bar,
[class*="usp-bar"] {
  background-color: var(--pl-ink) !important;
  color: var(--pl-gold-light) !important;
}
.section-usp-bar *,
[class*="usp-bar"] * {
  color: var(--pl-gold-light) !important;
}
.section-usp-bar [class*="icon"],
[class*="usp-bar"] [class*="icon"] {
  color: var(--pl-gold) !important;
}

/* Rich text sections */
.section-rich-text,
[class*="rich-text"] {
  background-color: var(--pl-cream) !important;
}

/* Image with text */
[class*="image-with-text"] {
  background-color: var(--pl-blush) !important;
}

/* Testimonials */
[class*="testimonials"],
[class*="reviews"] {
  background-color: var(--pl-blush) !important;
}
.testimonial-item,
.review-card,
[class*="testimonial-item"] {
  background-color: var(--pl-warm-white) !important;
  border: 1px solid var(--pl-border) !important;
  border-radius: 4px !important;
}

/* FAQ */
[class*="faq"] .question,
[class*="accordion"] .question {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  color: var(--pl-ink) !important;
  border-bottom: 1px solid var(--pl-border) !important;
}
[class*="faq"] .answer,
[class*="accordion"] .answer {
  color: var(--pl-ink-light) !important;
  font-weight: 300 !important;
}

/* Newsletter */
[class*="newsletter"] {
  background-color: var(--pl-ink) !important;
}
[class*="newsletter"] h2,
[class*="newsletter"] h3,
[class*="newsletter"] p {
  color: var(--pl-gold-light) !important;
}
[class*="newsletter"] input {
  background-color: rgba(255,255,255,0.08) !important;
  border-color: rgba(232,213,176,0.3) !important;
  color: var(--pl-gold-light) !important;
}

/* Icon + text blocks */
[class*="icon-text"] [class*="icon"],
[class*="usp"] [class*="icon"] {
  color: var(--pl-gold) !important;
}

/* ── FOOTER ──
   Achtergrond en kleurschema worden afgehandeld door Fleet's scheme-2
   (donker met gouden accenten). Hier alleen typografie en links finetunen.
── */
.shopify-section-group-footer-group footer h3,
.shopify-section-group-footer-group footer h4,
.shopify-section-group-footer-group footer h5 {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

/* ── BREADCRUMBS ── */
[class*="breadcrumb"] a,
[class*="breadcrumbs"] a {
  color: var(--pl-ink-light) !important;
  font-size: 12px !important;
}

/* ── BADGES & LABELS ── */
[class*="badge"],
[class*="label"],
[class*="tag"] {
  border-radius: 2px !important;
}
.sale-badge,
[class*="sale-label"] {
  background-color: var(--pl-gold) !important;
  color: var(--pl-ink) !important;
}
.new-badge,
[class*="new-label"] {
  background-color: var(--pl-ink) !important;
  color: var(--pl-gold-light) !important;
}

/* ── STARS / RATINGS ── */
[class*="stars"],
[class*="rating"] [class*="star"],
[class*="review-stars"] {
  color: var(--pl-gold) !important;
}

/* ── PAGINATION ── */
[class*="pagination"] a,
[class*="pagination"] button {
  border: 1px solid var(--pl-border) !important;
  color: var(--pl-ink) !important;
  border-radius: 2px !important;
}
[class*="pagination"] .active,
[class*="pagination"] [aria-current] {
  background-color: var(--pl-ink) !important;
  color: var(--pl-gold-light) !important;
  border-color: var(--pl-ink) !important;
}

/* ── POPUPS & OVERLAYS ── */
[class*="popup"],
[class*="modal"],
[class*="overlay-panel"] {
  background-color: var(--pl-warm-white) !important;
  border-radius: 4px !important;
}
[class*="popup-header"],
[class*="modal-header"] {
  border-bottom: 1px solid var(--pl-border) !important;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--pl-cream); }
::-webkit-scrollbar-thumb { background: var(--pl-gold-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--pl-gold); }

/* ── SELECTION ── */
::selection {
  background-color: var(--pl-gold-pale);
  color: var(--pl-ink);
}

/* ── FOCUS RING ── */
:focus-visible {
  outline: 2px solid var(--pl-gold) !important;
  outline-offset: 2px !important;
}

/* ── DIVIDERS / SEPARATORS ── */
hr,
[class*="divider"],
[class*="separator"] {
  border-color: var(--pl-border) !important;
}

/* ── SWIPER / SLIDER ARROWS ── */
.swiper-button-next,
.swiper-button-prev,
[class*="slider-arrow"],
[class*="carousel-arrow"] {
  background-color: var(--pl-warm-white) !important;
  border: 1px solid var(--pl-border) !important;
  color: var(--pl-ink) !important;
  border-radius: 2px !important;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background-color: var(--pl-gold-pale) !important;
}
.swiper-pagination-bullet-active {
  background-color: var(--pl-gold) !important;
}

/* ── ANNOUNCEMENT BAR LINKS ── */
.announcement-bar a {
  color: var(--pl-gold) !important;
  text-decoration: underline;
}

/* ── COOKIE BANNER ── */
[class*="cookie"] {
  background-color: var(--pl-ink) !important;
  color: var(--pl-gold-light) !important;
}
[class*="cookie"] .btn {
  background-color: var(--pl-gold) !important;
  color: var(--pl-ink) !important;
}

/* ── SEARCH ── */
[class*="search-drawer"],
[class*="livesearch"] {
  background-color: var(--pl-warm-white) !important;
}
[class*="search-result-item"]:hover {
  background-color: var(--pl-gold-pale) !important;
}

/* ── COLOUR SWATCHES (product variants) ── */
.color-swatch,
[class*="color-swatch"] {
  border: 2px solid transparent !important;
  transition: border-color 0.15s, transform 0.15s !important;
}
.color-swatch.active,
.color-swatch:hover,
[class*="color-swatch"].active {
  border-color: var(--pl-ink) !important;
  transform: scale(1.1) !important;
}