/** Shopify CDN: Minification failed

Line 33:50 Unexpected "*"

**/
/* ==========================================================================
   mk-custom.css
   Central home for custom styling on top of the Dawn-Manulla theme.
   Loaded in layout/theme.liquid, right after base.css, so anything here
   wins the cascade over Dawn's defaults without needing extra specificity
   or !important.

   Source design reference: C:\Users\Manulla\Desktop\them (static ISBA
   Footwear prototype). Sections there are annotated with which Shopify
   file they map to - see task.md for the full port-vs-reuse breakdown.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typography - Playfair Display (headings) + Manrope (body)
   Overrides Dawn's own font variables (set in layout/theme.liquid from the
   Typography theme settings), so this is the one place controlling type
   sitewide rather than fighting individual selectors.
   -------------------------------------------------------------------------- */
:root {
  --font-heading-family: 'Playfair Display', Georgia, serif;
  --font-heading-style: normal;
  --font-body-family: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-body-style: normal;
}

/* --------------------------------------------------------------------------
   2. Reference design tokens (namespaced --mk-*)
   Kept separate from Dawn's own --color-*/--font-* system (which uses RGB
   triplets consumed via rgb(var(...)), a different convention) so the two
   can coexist without collisions. Available for any custom section built
   here going forward.
   -------------------------------------------------------------------------- */
:root {
  /* Colors */
  --mk-color-background: #faf8f4;
  --mk-color-background-alt: #f1ece3;
  --mk-color-surface: #ffffff;
  --mk-color-text: #1e1b18;
  --mk-color-text-secondary: #6b6259;
  --mk-color-muted: #a79c8e;
  --mk-color-border: #e3dcd1;
  --mk-color-accent: #171412;
  --mk-color-accent-contrast: #faf8f4;
  --mk-color-sale: #a23e2c;

  /* Spacing (4px base) */
  --mk-space-1: 0.25rem;
  --mk-space-2: 0.5rem;
  --mk-space-3: 0.75rem;
  --mk-space-4: 1rem;
  --mk-space-5: 1.5rem;
  --mk-space-6: 2rem;
  --mk-space-7: 3rem;
  --mk-space-8: 4rem;

  /* Motion */
  --mk-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --mk-duration-base: 300ms;
}

/* --------------------------------------------------------------------------
   3. Hero (sections/slideshow.liquid). Height uses Dawn's own native
   "large" slide_height setting (see templates/index.json) rather than a
   custom min-height override - an earlier attempt to force a vh-based
   height here caused the hero image to render as solid black (likely a
   percentage-height resolution issue on the absolutely-positioned
   .banner__media against a min-height-only, no-explicit-height flex
   parent), so this now leans on Dawn's own tested height mechanism
   instead of fighting it. Overlay is left as Dawn's own per-slide flat
   opacity (already configurable per slide) rather than overridden, for
   the same reason - not worth risking a repeat of that bug for a gradient.
   -------------------------------------------------------------------------- */
.banner__eyebrow {
  color: rgba(250, 248, 244, 0.85);
}

.banner__heading {
  letter-spacing: 0.01em;
}

.banner__text {
  max-width: 40ch;
}

/* --------------------------------------------------------------------------
   4. Buttons - uppercase, letter-spaced, matching the reference's .btn
   -------------------------------------------------------------------------- */
.button {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   5. Header polish - circular hover state on icon buttons (search, account,
   wishlist, cart), matching the reference's .icon-btn treatment. Dawn's own
   icons already have fixed 4.4rem dimensions; this only adds shape + hover.
   -------------------------------------------------------------------------- */
.header__icon {
  border-radius: 50%;
  transition: background var(--mk-duration-base) var(--mk-ease);
}

.header__icon:hover {
  background: rgba(30, 27, 24, 0.06);
}

/* --------------------------------------------------------------------------
   6. Product page - quantity selector and Add to cart side by side on
   desktop, matching the reference (Dawn stacks them by default). Kept
   deliberately simple after the hero regression in section 3: plain
   inline-flex on flow siblings only, no percentage heights, no absolute
   positioning, no !important - nothing that touches how the elements size
   themselves internally. :has() scopes the sibling selector to "a div that
   actually contains a product form" so this can't accidentally match
   something unrelated elsewhere on the site. Falls back to Dawn's normal
   stacked layout below 750px, where side-by-side gets cramped.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 750px) {
  .product__info-container .product-form__quantity {
    display: inline-flex;
    vertical-align: top;
    margin-right: var(--mk-space-4);
  }

  .product__info-container .product-form__quantity + div:has(.product-form) {
    display: inline-block;
    vertical-align: top;
  }
}