/** Shopify CDN: Minification failed

Line 128:13 Expected identifier but found whitespace
Line 128:14 Unexpected "52px"
Line 409:0 Expected "}" to go with "{"

**/
/* --------------------------------------------------
   Pufy.pl – custom-surowa.css (GROK Version)
   -------------------------------------------------- */

/* Root variables expanded for better maintainability and reuse */
:root {
  --swatch-accent: #bada55; /* Ring color when active */
  --swatch-shadow: rgba(0, 0, 0, .18);
  --shine-light: rgba(255, 255, 255, .55);
  --shine-width: 50%; /* Shared for button shines; adjust for swatches */
  --hover-lift: translateY(-2px) scale(1.08);
  --hover-shadow: 0 3px 6px var(--swatch-shadow);
  --active-ring: 0 0 0 3px #fff, 0 0 0 5px var(--swatch-accent);
  --active-scale: scale(1.04);
  --texture-opacity-base: 1;
  --texture-opacity-hover: 0.7;
  --texture-opacity-active: 0.95;
}

/* ---------- Headings above the picker ----------
   This section styles the headings that appear above the variant picker,
   ensuring they are displayed as blocks with specific font properties for
   better readability and layout control in the Shopify product form.
*/
.materials-heading-inline {
  display: block;
  width: 100%;
  margin: 0 0 6px !important;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.25;
}

/* Keep the “Poliester: …” line tight 
   This rule removes top margin from the materials row to keep the text
   lines closer together, improving the compact appearance in the product
   details section.
*/
.materials-row {
  margin-top: 0 !important;
}

/* ---------- Variant picker “Apple-like Frosted Card” Style (Final Version) ---------- */
.materials-box {
  /* --- KEY CHANGE --- */
  display: block; /* Changed from inline-block to block */

  max-width: 100%;
  padding: 15px 25px;
  margin: 10px 0 20px;
  box-sizing: border-box; /* Good practice to include when using padding and width */

  /* --- Glass Effect Properties --- */
  background-color: rgba(247, 247, 248, 0.7);
  border-radius: 18px;
  
  /* --- Shadow & Border --- */
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 
              0 5px 15px rgba(0, 0, 0, 0.07);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.materials-box .form__label {
  margin: 0 0 4px !important;
}

.materials-box .product-form__input {
  margin: 0 !important;
  padding: 0 !important;
}

.materials-box .font-body-bolder {
  font-weight: 600;
}

/* General picker spacing tweak (outside the pill) 
   Adds a small top margin to swatch, color, and button inputs for better
   vertical spacing in the product form.
*/
.product-form__input--swatch,
.product-form__input--color,
.product-form__input--button {
  margin-top: 4px;
}

/* Hide heading/pill inside sticky bar & cart drawer 
   Ensures that the materials heading and box are hidden in sticky add-to-cart
   bars and cart drawers to avoid clutter in those compact UI elements.
*/
.sticky-atc-bar .materials-heading-inline,
.cart-drawer .materials-heading-inline,
.sticky-atc-bar .materials-box,
.cart-drawer .materials-box {
  display: none !important;
}

/* Utilities 
   Helper classes for zeroing out margins and paddings, useful for fine-tuning
   layouts across the Shopify theme without overriding core styles excessively.
*/
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }

/* --- REPLACEMENT: Playful "Gummy" Button Effects --- */
/* This new effect replaces the old shine animation with a tactile press-and-bounce. */

.product-form__submit[name="add"],
.shopify-payment-button__button,
.product-form__buttons .btn--secondary:not([name="add"]),
.sticky-atc-bar .product-form__submit[name="add"],
.sticky-atc-bar .btn--secondary {
  --shadow-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 12px var(--shadow-color);
  transition: all 0.2s cubic-bezier(0.17, 0.67, 0.5, 1.35); /* Bouncy transition */
}
  min-height: 52px;          /* Enforce the same minimum height */
  letter-spacing: 0.05em;    /* Add a little breathing room for text */
  font-weight: 600;          /* Unify the font weight */
  display: flex;             /* Use flexbox for perfect centering */
  align-items: center;
  justify-content: center;
}

/* Hover & Focus: Lift the button up */
.product-form__submit[name="add"]:hover,
.shopify-payment-button__button:hover,
.product-form__buttons .btn--secondary:not([name="add"]):hover,
.sticky-atc-bar .product-form__submit[name="add"]:hover,
.sticky-atc-bar .btn--secondary:hover,
.product-form__submit[name="add"]:focus-visible,
.shopify-payment-button__button:focus-visible {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 8px 20px var(--shadow-color);
}

/* Active/Click: Press the button down */
.product-form__submit[name="add"]:active,
.shopify-payment-button__button:active,
.product-form__buttons .btn--secondary:not([name="add"]):active,
.sticky-atc-bar .product-form__submit[name="add"]:active,
.sticky-atc-bar .btn--secondary:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 6px var(--shadow-color);
}

/* --- END REPLACEMENT --- */

/* =======================================================
   SWATCH HOVER + ACTIVE EFFECTS
   Works for BOTH render paths:
   - snippets/swatch-input.liquid (class .swatch-input__label)
   - "color" picker labels (class .block.relative)
   Enhanced with variables for less repetition and accessibility media query.
   ======================================================= */

/* Base swatch element */
.product-form__input--swatch .swatch-input__label .swatch-color,
.product-form__input--color label.block.relative .swatch-color,
.swatch-input__label .swatch-color {
  position: relative;
   /* UPDATED transition to include opacity */
 transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  cursor: pointer;
}

/* --- NEW APPROACH: Replace the problematic hover style with this --- */
.swatch-input__input:not(:checked) + .swatch-input__label:hover .swatch-color,
.product-form__input--color input[type="radio"]:not(:checked) + label.block.relative:hover .swatch-color {
  /* REMOVED the transform property */
  /* transform: var(--hover-lift); */ 
  
  /* NEW: Create a "lift and glow" effect using only box-shadow */
  box-shadow: 0 0 0 3px white, 0 0 0 5px var(--swatch-accent);
  transition: box-shadow 0.2s ease;
}


/* Checked (active) - REFINED */
.product-form__input--swatch .swatch-input__input:checked + .swatch-input__label .swatch-color,
.product-form__input--color input[type="radio"]:checked + label.block.relative .swatch-color,
.swatch-input__input:checked + .swatch-input__label .swatch-color {
  /* A single, cleaner ring */
  box-shadow: 0 0 0 2px var(--swatch-accent); 
  transform: scale(1.05); /* Keep the subtle scale */
}

/* Ripple pulse on selection */
.product-form__input--swatch .swatch-input__input:checked + .swatch-input__label .swatch-color::after,
.product-form__input--color input[type="radio"]:checked + label.block.relative .swatch-color::after,
.swatch-input__input:checked + .swatch-input__label .swatch-color::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--swatch-accent) 0%, rgba(186,218,85,0) 70%);
  opacity: .35;
  animation: swatch-ripple .7s ease-out forwards;
  pointer-events: none;
}
/* When a swatch is selected, fade the other non-selected ones */
.product-form__input--swatch:has(input:checked) .swatch-input__input:not(:checked) + .swatch-input__label,
.product-form__input--color:has(input:checked) input[type="radio"]:not(:checked) + label.block.relative {
    opacity: 0.8;
}
/* Ensure the hovered one comes back to full opacity */
.product-form__input--swatch:has(input:checked) .swatch-input__input:not(:checked) + .swatch-input__label:hover,
.product-form__input--color:has(input:checked) input[type="radio"]:not(:checked) + label.block.relative:hover {
    opacity: 1;
}


/* Selected hover: Steady state, no shine/ripple */
.swatch-input__input:checked + .swatch-input__label:hover .swatch-color,
.product-form__input--color input[type="radio"]:checked + label.block.relative:hover .swatch-color {
  transform: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--swatch-accent); /* Slight press effect */
}

.swatch-input__input:checked + .swatch-input__label:hover .swatch-color::before,
.swatch-input__input:checked + .swatch-input__label:hover .swatch-color::after,
.product-form__input--color input[type="radio"]:checked + label.block.relative:hover .swatch-color::before,
.product-form__input--color input[type="radio"]:checked + label.block.relative:hover .swatch-color::after {
  display: none !important;
}

/* Keyframe for ripple (unchanged) */
@keyframes swatch-ripple {
  0% { transform: scale(.7); opacity: .45; }
  70% { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* === Quantity number-only pop ===================== */
.quantity__input {
  width: 3.2ch; /* Enough for 3 digits */
  text-align: center;
  line-height: 1;
  transform: none !important;
  --qty-font-size: 1.6rem;
  font-size: var(--qty-font-size);
}

.quantity__input.qty-pop {
  animation: qty-number-pop .24s cubic-bezier(.17,.89,.32,1.27);
}

@keyframes qty-number-pop {
  0% { font-size: var(--qty-font-size); }
  45% { font-size: calc(var(--qty-font-size) * 1.28); }
  100% { font-size: var(--qty-font-size); }
}

/* Force uppercase on dynamic checkout button */
.shopify-payment-button__button { 
  text-transform: uppercase !important;
}

/* Force white text on ATC hover/focus/active 
.product-form__submit[name="add"]:hover .btn__text,
.product-form__submit[name="add"]:focus-visible .btn__text,
.product-form__submit[name="add"]:active .btn__text,
.sticky-atc-bar .product-form__submit[name="add"]:hover .btn__text,
.sticky-atc-bar .product-form__submit[name="add"]:focus-visible .btn__text,
.sticky-atc-bar .product-form__submit[name="add"]:active .btn__text {
  color: #fff !important;
}
*/
/* --- Leather texture overlay for "Ekoskóra Dolaro" swatches --- 
   Uses variables for opacity adjustments.
*/
.product-form__input--color input[type="radio"][data-skora-overlay="true"] + label.block.relative .swatch-color .leather-texture,
.swatch-input__input[data-skora-overlay="true"] + .swatch-input__label .swatch-color .leather-texture {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--leather-overlay) center center / 100% 100% repeat;
  mix-blend-mode: multiply;
  opacity: var(--texture-opacity-base);
  filter: contrast(1.05) brightness(0.98) invert(0.1);
  pointer-events: none;
}

/* Opacity adjustments on hover/selected */
.product-form__input--color label.block.relative:hover .swatch-color .leather-texture,
.swatch-input__label:hover .swatch-color .leather-texture {
  opacity: var(--texture-opacity-hover);
}

.product-form__input--color input[type="radio"]:checked + label.block.relative .swatch-color .leather-texture,
.swatch-input__input:checked + .swatch-input__label .swatch-color .leather-texture {
  opacity: var(--texture-opacity-active);
}

/* Accessibility: Disable animations for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  /* Disable transforms and animations */
  .product-form__submit[name="add"],
  .sticky-atc-bar .product-form__submit[name="add"],
  .shopify-payment-button__button,
  .product-form__buttons .btn--secondary:not([name="add"]),
  .sticky-atc-bar .btn--secondary,
  .swatch-color,
  .quantity__input {
    transition: none;
    animation: none;
  }

  /* Static hover states without movement */
  .product-form__submit[name="add"]:hover,
  .sticky-atc-bar .product-form__submit[name="add"]:hover,
  .shopify-payment-button__button:hover,
  .product-form__buttons .btn--secondary:not([name="add"]):hover,
  .sticky-atc-bar .btn--secondary:hover {
    transform: none;
  }

  .swatch-input__input:not(:checked) + .swatch-input__label:hover .swatch-color,
  .product-form__input--color input[type="radio"]:not(:checked) + label.block.relative:hover .swatch-color {
    transform: none;
  }

  /* Remove pseudo-elements for shines/ripples */
  [class*="swatch-color"]::before,
  [class*="swatch-color"]::after,
  .product-form__submit[name="add"]::before,
  .shopify-payment-button__button::before {
    display: none;
  }
}

.variant-text {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 20px; /* Matches pill-shaped swatches */
  font-size: 14px;
  background: #fff;
  color: #333;
}
/* Collection desription text - out of container */
@media screen and (min-width: 750px) {
  .collection-hero__description.rte {
    max-width: none !important; /* Removes the built-in width limit */
    width: 100%; /* Ensures it fills the container fully */
  }
}
/*                                               */
/* PAGINATION STYLING                            */
/*                                              */
/* --- Custom Pagination Styles (Revised to Match Store Aesthetic) --- */
/* --- Custom Pagination Styles (Version 3: Bigger & Pill-Shaped) --- */

/* Target the main pagination container to add spacing and center it */
.pagination-wrapper {
    margin-top: 60px; /* Increased top margin for more breathing room */
    display: flex;
    justify-content: center; /* Centers the page numbers */
    align-items: center;
}

/* Style for each individual pagination item (the numbers and arrows) */
.pagination__item {
    font-size: 1.2rem; /* Make the font bigger */
    font-weight: 500; /* A bit bolder for better visibility */
    padding: 12px 24px; /* Increase padding to make the buttons larger */
    margin: 0 6px; /* Increase the gap between each number */
    border: 1px solid #e0e0e0; /* Softer, lighter border color */
    border-radius: 50px; /* Fully rounded corners for a "pill" shape */
    background-color: #ffffff; /* White background for inactive items */
    color: #333333; /* Dark grey text for readability on white */
    transition: all 0.25s ease; /* Smooth transition for hover effects */
    min-height: 52px; /* Set a larger minimum height for a bold look */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06); /* A slightly more noticeable but still soft shadow */
}

/* Style for when you hover over a clickable page number */
a.pagination__item:hover {
    border-color: #A3D44D; /* Use the accent color for the border on hover */
    color: #000000; /* Darker text on hover */
    transform: translateY(-2px); /* Add a slight lift effect on hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Enhance shadow on hover for a lift effect */
}

/* Specific style for the CURRENT/ACTIVE page number */
.pagination__item--current {
    background-color: #A3D44D; /* Matches your lime green accent color */
    color: #ffffff; /* White text for contrast */
    border-color: #A3D44D; /* Green border to match */
    font-weight: 700; /* Bold font for the active page */
    box-shadow: 0 3px 6px rgba(163,212,77,0.35); /* Green tinted shadow for active state */