/** Shopify CDN: Minification failed

Line 152:53 Unexpected "*"

**/
/* ==========================================================================
   Wall in Roll — Design Tokens
   Single source of truth for color, type, spacing, borders and motion.
   Loaded after base.css (see layout/theme.liquid), so declarations here
   win the cascade over Dawn's defaults without needing !important.
   ========================================================================== */

:root {
  /* -- Color --------------------------------------------------------------
     Mirrors the Shopify color scheme presets (config/settings_data.json,
     scheme-1..5) so section-level "Color scheme" pickers in the theme
     editor stay in sync with these tokens. Keep both in sync if either
     changes. */
  --wir-paper:     #F4F0EA; /* primary background — warm cream */
  --wir-paper-2:   #EAE4DA; /* secondary background — light beige (scheme-2) */
  --wir-paper-3:   #DCD3C4;
  --wir-ink:       #1C1A17; /* primary text — near-black */
  --wir-ink-2:     #46413A;
  --wir-ink-3:     #837C71;
  --wir-line:      #D4CCBE; /* hairline borders */
  --wir-clay:      #B0563A; /* accent (scheme-4 / buttons) */
  --wir-clay-deep: #7E3A24;
  --wir-moss:      #5C6B4A; /* scheme-5 */
  --wir-ochre:     #C99A4F;
  --wir-dark:      #1C1A17; /* optional dark section background (scheme-3) */

  /* -- Typography -----------------------------------------------------------
     Overrides Shopify's font-picker variables (settings.type_header_font /
     type_body_font, currently "Assistant" in the theme editor) so the
     brand typefaces below are what actually render. Fonts are fetched via
     Google Fonts in layout/theme.liquid — see the <link> next to
     "fonts.googleapis.com"; do not add a second import. */
  --font-body-family:      "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body-style:       normal;
  --font-body-weight:      400;
  --font-body-weight-bold: 600;
  --font-heading-family:   "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --font-heading-style:    normal;
  --font-heading-weight:   400;
  --wir-font-mono:         "JetBrains Mono", "Geist Mono", ui-monospace, monospace;

  /* -- Spacing scale -------------------------------------------------------- */
  --wir-s-1: 4px;
  --wir-s-2: 8px;
  --wir-s-3: 12px;
  --wir-s-4: 16px;
  --wir-s-5: 24px;
  --wir-s-6: 32px;
  --wir-s-7: 48px;
  --wir-s-8: 64px;
  --wir-s-9: 96px;

  /* -- Borders & radius ------------------------------------------------------
     The brand direction is square corners + hairline borders. Dawn's own
     radius/border-thickness theme settings (buttons_radius, inputs_radius,
     card_corner_radius, etc. — config/settings_data.json) are already set
     to 0 / 1px to match; the tokens below exist for components (like this
     file's .wir-link / .wir-input) that sit outside Dawn's settings-driven
     CSS custom properties. */
  --wir-radius:      0px;
  --wir-radius-pill: 999px; /* reserved for pill-shaped badges only */
  --wir-border-w:    1px;

  /* -- Control sizing --------------------------------------------------------
     Matches Dawn's current button min-height (--buttons-* settings) so
     new components line up with existing ones. */
  --wir-control-h: 4.6rem;

  /* -- Shadows — used sparingly; most surfaces should have none -------------- */
  --wir-shadow-sm: 0 1px 2px rgba(28, 26, 23, .04), 0 1px 1px rgba(28, 26, 23, .03);
  --wir-shadow-md: 0 4px 12px rgba(28, 26, 23, .06), 0 1px 2px rgba(28, 26, 23, .04);
  --wir-shadow-lg: 0 16px 48px rgba(28, 26, 23, .10), 0 2px 6px rgba(28, 26, 23, .05);

  /* -- Focus ring — brand accent instead of Dawn's default ink ring ---------
     Consumed by base.css's *:focus-visible / .focused (see base.css:6-8). */
  --focused-base-outline:        0.2rem solid var(--wir-clay);
  --focused-base-outline-offset: 0.3rem;
  --focused-base-box-shadow:     0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(176, 86, 58, 0.35);
}

/* base.css hardcodes its own ink-colored ring on .focus-inset (every header
   icon/link — logo, menu items, search, account, cart) and .button
   (:focus-visible), bypassing the --focused-base-outline/--focused-base-box-shadow
   tokens above entirely. Recolor those two rings to the same brand accent so
   the header's actual keyboard focus state matches the token, instead of
   silently staying ink-colored. Geometry (offset/inset/shadow shape) is left
   untouched — only the color changes. */
.focus-inset:focus-visible,
.focused.focus-inset {
  outline-color: var(--wir-clay);
  box-shadow: 0 0 0.2rem 0 rgba(176, 86, 58, 0.4);
}

.button:focus-visible,
.button:focus,
.button.focused,
.shopify-payment-button__button--unbranded:focus-visible,
.shopify-payment-button__button--unbranded:focus {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(176, 86, 58, 0.5),
    0 0 0.5rem 0.4rem rgba(176, 86, 58, 0.3);
}

/*
  Breakpoints (documentation only — CSS custom properties can't be used
  inside @media queries without a build step). Reuse these literal values
  for consistency with Dawn's existing responsive rules in base.css:
    mobile:  max-width: 749px
    tablet:  750px – 989px
    desktop: min-width: 990px
*/

/* ==========================================================================
   Typography refinements
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4 {
  letter-spacing: -0.015em;
  line-height: 1.1;
}

/* Eyebrow / label utility — small tracked-out mono caption used for
   meta labels (prices "od X zł/m²", collection counts, etc.) */
.wir-eyebrow {
  font-family: var(--wir-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wir-ink-3);
}

/* Hairline divider */
.wir-divider {
  border: none;
  border-top: 1px solid var(--wir-line);
}

/* "Od X zł/m²" price hint on product cards */
.wir-price-from {
  color: var(--wir-ink-3);
  margin-bottom: 2px;
}

/* ==========================================================================
   Components — light-touch additions layered on top of Dawn's own
   .button / .button--secondary / .link / .field__input (already themed
   correctly via the color-scheme + buttons_*/inputs_* settings above).
   Namespaced "wir-link" / "wir-input" — NOT "wir-btn", which is already
   used by the configurator app (assets/konfigurator-main.css) and must
   stay untouched to avoid class collisions on pages that load both.
   ========================================================================== */

/* Text link — underline-on-hover, ink colored, mono-adjacent tracking */
.wir-link {
  display: inline-flex;
  align-items: center;
  gap: var(--wir-s-2);
  color: var(--wir-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--wir-line);
  padding-bottom: 1px;
  transition: border-color .15s, color .15s;
}

.wir-link:hover {
  border-color: var(--wir-ink);
}

/* Standalone form input, for markup outside Dawn's .field/.select system */
.wir-input {
  display: block;
  width: 100%;
  min-height: var(--wir-control-h);
  padding: 0 var(--wir-s-4);
  background: var(--wir-paper);
  color: var(--wir-ink);
  border: var(--wir-border-w) solid var(--wir-line);
  border-radius: var(--wir-radius);
  font-family: var(--font-body-family);
  font-size: 1.5rem;
}

.wir-input:focus-visible {
  outline: var(--focused-base-outline);
  outline-offset: var(--focused-base-outline-offset);
}

/* ==========================================================================
   Header — logo fallback rendering
   Scales the inline SVG wordmark (assets/wir-logo-horizontal-dark.svg /
   -light.svg, rendered by sections/header.liquid when no settings.logo is
   set in the theme editor) to the same "Logo width" slider Dawn uses for
   uploaded logos, via the inline width style on the wrapper.
   ========================================================================== */

.header__heading-logo-wrapper svg,
.header__heading-logo-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Top nav block — announcement bar, header (incl. sticky), search modal and
   mobile drawer all share the same --wir-paper cream explicitly, instead of
   relying only on the color-scheme indirection (which resolves to the same
   value, but this guarantees it regardless of scheme/cache edge cases).
   Only one hairline (--wir-line) separates the whole block from hero/page
   content below; no line between the announcement bar and the header.
   ========================================================================== */

.utility-bar,
.header-wrapper,
.search-modal,
.menu-drawer {
  background-color: var(--wir-paper);
}

.header-wrapper--border-bottom {
  border-bottom-color: var(--wir-line);
}

/* ==========================================================================
   Header actions (search / account / cart) — one consistent glyph size, a
   short mono label on desktop, icon-only with a small counter badge on
   mobile. Markup is still Dawn's own header__icon components (search modal,
   account link, wir-cart.js's cart-icon-bubble) — only presentation changes
   here, so their JS/functionality is untouched. wir-cart.js keeps toggling
   the same [data-wir-cart-count-bubble]/[data-wir-cart-count] elements; this
   file only decides how that state looks (badge on mobile, "(N)" on desktop).
   ========================================================================== */

.wir-header-action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.4rem;
  gap: 0.6rem;
}

.wir-header-action .svg-wrapper {
  width: 2rem;
  height: 2rem;
}

.wir-header-action .icon {
  stroke-width: 1.5;
}

.wir-header-action:hover,
.wir-header-action:focus-visible {
  color: var(--wir-clay, #B0563A);
}

/* Higher specificity than Dawn's ".header__icon span { display: flex }"
   base rule, which would otherwise force this span visible on mobile. */
.wir-header-action .wir-header-action__label {
  display: none;
}

/* Mobile: small clay badge pinned to the corner of the icon field, never
   overlapping the glyph itself (the button is icon-only here, so it's
   positioned relative to the whole 4.4rem action box). */
.wir-header-action__count {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.3rem;
  border-radius: 50%;
  background: var(--wir-clay, #B0563A);
  color: var(--wir-paper, #F4F0EA);
  font-family: var(--wir-font-mono, "JetBrains Mono", monospace);
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
}

@media screen and (min-width: 990px) {
  .wir-header-action {
    justify-content: flex-start;
    width: auto;
    padding: 0 1.6rem;
  }

  .wir-header-action--cart {
    margin-right: 0;
  }

  .wir-header-action--account,
  .wir-header-action--cart {
    border-left: 1px solid var(--wir-line, #D4CCBE);
  }

  .wir-header-action .wir-header-action__label {
    display: inline-flex;
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .wir-header-action__count {
    position: static;
    min-width: 0;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
  }

  .wir-header-action__count::before {
    content: "\0028";
  }

  .wir-header-action__count::after {
    content: "\0029";
  }
}

/* ==========================================================================
   Announcement bar — small, centered, hairline border, no gradient
   ========================================================================== */

.announcement-bar__message {
  font-family: var(--wir-font-mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 9px 0;
  min-height: 0;
}

/* ==========================================================================
   Combined top bar (announcement + header) height — used by hero-split to
   size itself as calc(100svh - this), so the first screen never exceeds
   the viewport. Keep in sync with the actual rendered heights above: the
   announcement bar padding/line-height here, and the header's
   padding_top/padding_bottom (sections/header-group.json) + logo size.
   ========================================================================== */
:root {
  --wir-topbar-h: 99px;
}

/* ==========================================================================
   Product card — single shared look, used on the homepage (rendered via
   sections/featured-products.liquid) and on collection pages (rendered via
   sections/main-collection-product-grid.liquid). Both call
   snippets/card-product.liquid with `wir_card: true`, which renders this
   markup instead of Dawn's default card — every other caller of that
   snippet (search, related products, product page "you may also like",
   quick order list) is untouched and keeps Dawn's original card.
   No radius, no shadow, no quick-add — the whole card is a plain link to
   the product page; configuration happens in the configurator.
   ========================================================================== */

.wir-pcard {
  display: block;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.wir-pcard__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--wir-paper-2, #EAE4DA);
}

.wir-pcard__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wir-pcard__image--primary,
.wir-pcard__image--secondary {
  position: absolute;
  inset: 0;
}

.wir-pcard__image--secondary {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wir-pcard:hover .wir-pcard__image--secondary {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .wir-pcard__image--secondary {
    transition: none;
  }
}

.wir-pcard__badge {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  z-index: 1;
  font-family: var(--wir-font-mono, "JetBrains Mono", monospace);
  font-size: 1.0rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wir-ink, #1C1A17);
  background: var(--wir-paper, #F4F0EA);
  padding: 0.5rem 0.8rem;
}

.wir-pcard__info {
  padding-top: 1.6rem;
}

.wir-pcard__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
}

.wir-pcard__title {
  font-family: var(--font-body-family);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--wir-ink, #1C1A17);
  transition: color 0.15s;
  min-width: 0;
}

.wir-pcard:hover .wir-pcard__title {
  color: var(--wir-clay, #B0563A);
}

.wir-pcard__price {
  font-family: var(--wir-font-mono, "JetBrains Mono", monospace);
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: var(--wir-ink, #1C1A17);
  white-space: nowrap;
  flex-shrink: 0;
}

/* 2-column layouts (mobile + tablet, both featured-products and the
   collection grid): let the title shrink and wrap instead of forcing the
   card wider than its column, and cap it at 2 lines. Desktop (3/4-col,
   plenty of width) is untouched. */
@media screen and (max-width: 989px) {
  .wir-pcard__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

.wir-pcard__caption {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--wir-font-mono, "JetBrains Mono", monospace);
  font-size: 1.0rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wir-ink-3, #837C71);
}