/* ==========================================================================
   NORA BABY SHOP — the one stylesheet for the whole site
   --------------------------------------------------------------------------
   Built from the ui-ux-pro-max library's match for baby products:
     - Style:   "Claymorphism" — chunky, toy-like, puffy shapes, thick
                rounded borders, buttons that press down like toy buttons
     - Colours: baby blue + soft peach, one warm coral accent for buttons
     - Font:    Baloo 2, a chunky rounded typeface, used alone

   RULE: never type a raw colour or size further down this file.
   Always use a token from section 2, e.g. var(--color-ink).
   The written explanation of these values is in DESIGN.md.

   Sections:
     1. Font   2. Design tokens   3. Base   4. Helpers   5. Buttons
     6. Header and category menu   7. Trust badges   8. Hero   9. Products
     10. Product page (produkt.html)   11. Cart window   12. Checkout page (porosia.html)
     13. Options   14. Footer   15. Information pages   16. Cookie notice
     17. Share button, other products, free-delivery line
   ========================================================================== */


/* 1. FONT ----------------------------------------------------------------- */
@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/baloo2-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}


/* 2. DESIGN TOKENS -------------------------------------------------------- */
:root {
  /* This site has one light look. Tells the browser not to apply its own
     dark-mode colours to buttons and scrollbars. */
  color-scheme: light;

  /* Colours */
  --color-page:       #F3FAFD; /* page background: almost-white blue */
  --color-white:      #FFFFFF; /* cards, clouds */
  --color-blue:       #ADD8E6; /* baby blue: hero, icon blobs */
  --color-blue-soft:  #E1F1F8; /* behind every product photo */
  --color-blue-edge:  #C5E0EC; /* thick borders and the "lip" under white shapes */
  --color-blue-deep:  #1F6E94; /* links, icons */
  --color-ink:        #1E2B4F; /* main text (deep navy) */
  --color-ink-deep:   #0F1830; /* lip under dark shapes */
  --color-ink-soft:   #46557A; /* secondary text */
  --color-peach:      #FDBCB4; /* soft peach: the sun behind the hero photo, tags */
  --color-coral:      #FF8566; /* THE warm accent: main buttons */
  --color-coral-hover:#FF7350; /* coral button when hovered: a little stronger */
  --color-coral-lip:  #D9603F; /* darker edge under a coral button */
  --color-green:      #1E7A46; /* "in stock" */
  --color-green-soft: #E3F4EA; /* background of the "in stock" pill */
  --color-grey:       #E6EBF2; /* disabled buttons, "out of stock" pill */
  --color-grey-edge:  #CBD3DF; /* lip under a disabled button */
  --color-error:      #A8271C; /* text of a form error message */
  --color-veil:       rgba(30, 43, 79, 0.30); /* dims the page behind the cart window */

  /* Typeface */
  --font: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;

  /* Type scale */
  --text-sm:   0.9375rem;  /* 15px */
  --text-base: 1.125rem;   /* 18px (Baloo 2 runs small, so the base is larger) */
  --text-md:   1.375rem;   /* 22px — product names */
  --text-lg:   1.75rem;    /* 28px — prices */
  --text-xl:   2.25rem;    /* 36px — section headings */
  --text-hero: clamp(2.75rem, 1.6rem + 5.4vw, 5rem); /* 44px → 80px */

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Corner rounding: everything is very round */
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* "Clay" shadow: a soft drop below, so shapes look puffy and lifted.
     Tinted navy, never coloured, never glowing. */
  --shadow-clay: 0 12px 24px rgba(30, 43, 79, 0.10);

  /* Sizes */
  --tap: 52px;            /* chunky: even bigger than the 48px minimum */
  --lip: 5px;             /* height of the 3D edge under buttons */
  --page-width: 1180px;
  --gutter: var(--space-4);
}

@media (min-width: 600px) {
  :root { --gutter: var(--space-5); }
}


/* 3. BASE ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.45;
  -webkit-tap-highlight-color: rgba(30, 43, 79, 0.12);
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

h1, h2, h3 {
  font-weight: 800;
  line-height: 1;
  text-wrap: balance;
}

/* Anything marked "hidden" in the page stays hidden, even if a rule further
   down gives it a layout (display: grid, flex...). Without this, hidden
   parts can show up empty. */
[hidden] { display: none !important; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--color-blue-deep); }

/* Removes the short delay phones add after a tap (they wait to see if it
   is a double-tap zoom). */
a, button { touch-action: manipulation; }

:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* 4. HELPERS -------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 10;
  padding: var(--space-3) var(--space-5);
  background: var(--color-ink);
  color: var(--color-white);
  border-radius: var(--radius-md);
}
.skip-link:focus { top: var(--space-2); }

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* 5. BUTTONS -------------------------------------------------------------- */
/* Toy buttons: each has a darker "lip" underneath. Pressing pushes the
   button down onto the lip. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  margin-bottom: var(--lip);        /* room for the lip */
  padding: var(--space-2) var(--space-5);
  border: 0;
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, background-color 0.2s ease;
}
.btn:active {
  transform: translateY(4px);
}
.btn:focus-visible { border-radius: var(--radius-md); }

/* Main action: coral. */
.btn-primary {
  background: var(--color-coral);
  color: var(--color-ink);
  box-shadow: 0 var(--lip) 0 var(--color-coral-lip);
}
.btn-primary:hover { background: var(--color-coral-hover); }
.btn-primary:active { box-shadow: 0 1px 0 var(--color-coral-lip); }

/* Secondary action: white. */
.btn-outline {
  background: var(--color-white);
  color: var(--color-ink);
  box-shadow: 0 var(--lip) 0 var(--color-blue-edge), inset 0 0 0 3px var(--color-blue-edge);
}
.btn-outline:hover { background: var(--color-blue-soft); }
.btn-outline:active { box-shadow: 0 1px 0 var(--color-blue-edge), inset 0 0 0 3px var(--color-blue-edge); }
.btn-outline .icon { color: var(--color-green); }

.btn:disabled {
  background: var(--color-grey);
  box-shadow: 0 var(--lip) 0 var(--color-grey-edge);
  color: var(--color-ink-soft);
  cursor: not-allowed;
  transform: none;
}


/* 6. HEADER AND CATEGORY MENU -------------------------------------------- */
.header-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3) var(--space-2);
}

/* Shop name: big lowercase letters with a little cloud beside them. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  margin-right: auto;
  color: var(--color-ink);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}
.wordmark__cloud {
  width: 38px;
  height: auto;
  fill: var(--color-blue);
}
.wordmark__text { display: flex; flex-direction: column; }
.wordmark small {
  margin-top: -2px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.header-phone .icon { width: 20px; height: 20px; color: var(--color-blue-deep); }
.header-phone:hover { text-decoration: underline; }
/* On narrow phones the number moves out of the header row to save room;
   it is still shown in the trust badges' WhatsApp link below. */
/* Hidden from the eye but still read aloud by screen readers. */
.header-phone__number {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (min-width: 420px) {
  .header-phone__number {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}
@media (max-width: 419px) {
  .header-phone {
    width: var(--tap);
    justify-content: center;
    background: var(--color-white);
    border-radius: 50%;
    box-shadow: 0 4px 0 var(--color-blue-edge), inset 0 0 0 3px var(--color-blue-edge);
  }
}

/* Cart button: a puffy white bubble. Opens the cart window. */
.cart-status {
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding-inline: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 0 var(--color-blue-edge), inset 0 0 0 3px var(--color-blue-edge);
  font-weight: 700;
}
.cart-status:hover { background: var(--color-blue-soft); }
.cart-status__label { display: none; }
@media (min-width: 600px) {
  .cart-status__label { display: inline; }
}
.cart-status__count {
  min-width: 1.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Category menu: chunky chips. Scrolls sideways if too long. */
.category-nav__list {
  display: flex;
  gap: var(--space-2);
  padding-block: var(--space-2) var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.category-nav__list::-webkit-scrollbar { display: none; }

.category-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 0 var(--color-blue-edge), inset 0 0 0 3px var(--color-blue-edge);
  color: var(--color-ink);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.category-nav__link:hover { background: var(--color-blue-soft); }
/* The chosen category: dark navy chip, white text. */
.category-nav__link[aria-current="true"] {
  background: var(--color-ink);
  box-shadow: 0 4px 0 var(--color-ink-deep);
  color: var(--color-white);
}


/* 7. TRUST BADGES --------------------------------------------------------- */
.trust-bar { padding-bottom: var(--space-5); }
.trust-bar__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
/* Each fact is a puffy white badge with a baby-blue icon blob. */
.trust-bar__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 56px;
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  background: var(--color-white);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-clay);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.1;
}
.trust-bar__item .icon {
  width: 44px;
  height: 44px;
  padding: 10px;
  background: var(--color-blue);
  border-radius: 50%;
  color: var(--color-ink);
}
.trust-bar__item a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--color-ink);
}
.trust-bar__item a:hover { color: var(--color-blue-deep); }

/* Phone: with three badges in two columns, the last one takes the full width. */
.trust-bar__item:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Very small phones: one badge per row, so the text is not squeezed. */
@media (max-width: 359px) {
  .trust-bar__list { grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
  .trust-bar__list { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .trust-bar__item:last-child:nth-child(odd) { grid-column: auto; }
  .trust-bar__item { font-size: 1rem; }
}


/* 8. HERO ----------------------------------------------------------------- */
/* A baby-blue sky with white clouds. Its bottom edge is scalloped, like
   the trim of a baby blanket. */
.hero {
  position: relative;
  background: var(--color-blue);
  padding-block: var(--space-7) var(--space-6);
  overflow: hidden; /* clouds may poke past the edges; clip them */
}
.hero__grid {
  position: relative; /* keeps words and photo above the clouds */
  z-index: 1;
  display: grid;
  gap: var(--space-7);
}
.hero__title {
  font-size: var(--text-hero);
  line-height: 0.95;
  letter-spacing: -0.01em;
  max-width: 9em;
}
.hero__text {
  margin-top: var(--space-4);
  max-width: 30em;
  font-size: 1.25rem;
  line-height: 1.4;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* The photo sits in an arch (round top, like a nursery window) with a
   soft peach sun peeking out behind it. */
.hero__photo {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  padding: 0 var(--space-4);
}
.hero__sun {
  position: absolute;
  top: -5%;
  right: -2%;
  width: 46%;
  aspect-ratio: 1 / 1;
  background: var(--color-peach);
  border-radius: 50%;
}
.hero__photo img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--color-blue-soft);
  border: 6px solid var(--color-white);
  border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-clay);
}

/* Decorations: clouds and stars. Purely for looks. */
.hero__cloud,
.hero__star {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.hero__cloud { fill: var(--color-white); }
.hero__star  { fill: var(--color-white); }
/* Phone: one cloud tucked in the top corner, one beside the photo.
   Stars appear only on wider screens, where there is room for them. */
.hero__cloud--a { width: 104px; top: -22px; right: -36px; opacity: 0.9; }
.hero__cloud--b { width: 170px; bottom: 60px; left: -60px; opacity: 0.75; }
.hero__star { display: none; }

/* The scalloped trim under the hero. */
.scallop {
  display: block;
  width: 100%;
  height: 22px;
  margin-top: -1px; /* hides a hairline gap on some screens */
}
.scallop__shape { fill: var(--color-blue); }

@media (max-width: 479px) {
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
}

@media (min-width: 800px) {
  .hero { padding-block: var(--space-8) var(--space-7); }
  .hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: var(--space-8);
  }
  .hero__photo { max-width: 480px; }
  .hero__cloud--a { width: 170px; top: 34px; right: auto; left: 44%; }
  .hero__cloud--b { width: 300px; bottom: 30px; left: -80px; }
  .hero__star { display: block; }
  .hero__star--a  { width: 34px; top: 70%; right: 45%; }
  .hero__star--b  { width: 20px; top: 84%; right: 2%; }
}


/* 9. PRODUCT GRID AND PRODUCT CARD ---------------------------------------- */
.products {
  padding-block: var(--space-7) var(--space-9);
  scroll-margin-top: var(--space-4);
}
.products__title { font-size: var(--text-xl); }
/* A hand-drawn squiggle under the section title. */
.products__squiggle {
  width: 110px;
  height: auto;
  margin-top: var(--space-1);
  fill: none;
  stroke: var(--color-coral);
  stroke-width: 5;
  stroke-linecap: round;
}
.products__count {
  margin-top: var(--space-2);
  color: var(--color-ink-soft);
}
.products__message {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-clay);
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-5);
}
@media (min-width: 560px) {
  .product-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}
/* Three per row only once each card is wide enough for both buttons side by side. */
@media (min-width: 1100px) {
  .product-grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-6); }
}

/* A puffy white card with a thick pale-blue border. */
.product-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-3);
  background: var(--color-white);
  border: 4px solid var(--color-blue-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-clay);
  overflow-wrap: anywhere;
}

.product-tile__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--color-blue-soft);
  border-radius: var(--radius-md);
}
.product-tile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}
/* "Example" sticker, slightly tilted. Only on made-up products. */
.product-tile__example {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 2px var(--space-3);
  background: var(--color-peach);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  transform: rotate(-5deg);
}

.product-tile__name {
  margin-top: var(--space-4);
  padding-inline: var(--space-1);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.1;
}
.product-tile__desc {
  margin-top: var(--space-1);
  padding-inline: var(--space-1);
  color: var(--color-ink-soft);
  font-size: 1rem;
  line-height: 1.3;
}
.product-tile__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-2);
  margin-top: var(--space-2);
  padding-inline: var(--space-1);
}
.product-tile__price {
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
/* Stock status: a small pill with a dot. */
.product-tile__stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px var(--space-3);
  background: var(--color-green-soft);
  border-radius: var(--radius-pill);
  color: var(--color-green);
  font-size: var(--text-sm);
  font-weight: 700;
}
.product-tile__stock::before {
  content: "";
  width: 8px;
  height: 8px;
  background: currentColor;
  border-radius: 50%;
}
.product-tile__stock[data-in-stock="false"] {
  background: var(--color-grey);
  color: var(--color-ink-soft);
}

.product-tile__actions {
  display: flex;
  flex-wrap: wrap; /* on a narrow card the WhatsApp button drops to its own row */
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
}
/* Both buttons may grow; "add to cart" takes the larger share. */
.product-tile__actions .btn { padding-inline: var(--space-3); flex: 1 1 auto; }
.product-tile__add { flex-grow: 3; }


/* Links inside a product tile: the photo and the name open the product page. */
.product-tile__photo-link { display: block; height: 100%; }
.product-tile__name a {
  color: var(--color-ink);
  text-decoration: none;
}
.product-tile__name a:hover { text-decoration: underline; }


/* 10. PRODUCT PAGE (produkt.html) ----------------------------------------- */

/* "All products" link under the header. */
.back-nav { padding-bottom: var(--space-3); }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 48px;
  color: var(--color-ink);
  font-weight: 700;
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; }
.back-link .icon { width: 20px; height: 20px; }

.product { padding-block: var(--space-2) var(--space-9); }

/* Phone: photos first, information underneath.
   From 800px: photos on the left, information on the right. */
.product__grid {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 800px) {
  .product__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--space-8);
  }
}

/* The large photo sits in the same puffy white card as the home page tiles. */
.gallery { min-width: 0; }
.gallery__main {
  padding: var(--space-3);
  background: var(--color-white);
  border: 4px solid var(--color-blue-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-clay);
}
.gallery__main img {
  width: 100%;
  height: auto;       /* each photo keeps its own shape */
  background: var(--color-blue-soft);
  border-radius: var(--radius-md);
}

/* The small pictures to tap. */
.gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.gallery__thumb {
  display: block;
  width: 76px;
  height: 76px;
  padding: 0;
  background: var(--color-white);
  border: 4px solid var(--color-blue-edge);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
}
.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery__thumb:hover { border-color: var(--color-blue-deep); }
/* The photo being shown: dark border. */
.gallery__thumb[aria-current="true"] { border-color: var(--color-ink); }

.product__info { min-width: 0; overflow-wrap: anywhere; }

.product__category {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--color-blue-deep);
  font-weight: 700;
}
.product__category:hover { color: var(--color-ink); }
.product__name {
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem); /* 32px on phones → 48px */
}
.product__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
}
.product__price {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.product__short {
  margin-top: var(--space-3);
  max-width: 34em;
  font-size: 1.25rem;
  line-height: 1.4;
}

.product__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.product__actions .btn { flex: 1 1 auto; }
@media (max-width: 479px) {
  .product__actions { flex-direction: column; }
}

/* The short promise under the buttons. */
.product__promises {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-4);
  font-size: 1rem;
  font-weight: 700;
}
.product__promises li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.product__promises .icon { color: var(--color-blue-deep); }

.product__heading {
  margin-top: var(--space-7);
  font-size: var(--text-lg);
}
/* The details: one fact per line, each with a small coral dot. */
.product__details { margin-top: var(--space-3); }
.product__details li {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-bottom: 2px solid var(--color-blue-edge);
}
.product__details li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.05em;
  width: 10px;
  height: 10px;
  background: var(--color-coral);
  border-radius: 50%;
}
.product__code {
  margin-top: var(--space-4);
  color: var(--color-ink-soft);
  font-size: 1rem;
}


/* The large photo is a button: tapping it opens the photo viewer. */
.gallery__zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-md);
  cursor: zoom-in;
}
/* A small magnifying glass in the corner, so people know it can be opened. */
.gallery__zoom-hint {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--color-white);
  border-radius: 50%;
  box-shadow: var(--shadow-clay);
  color: var(--color-ink);
}

/* THE PHOTO VIEWER: shows one photo as large as fits, on top of the page.
   The page behind stays visible but blurred, so the visitor still feels
   they are on the same page. */
.lightbox {
  width: 100vw;
  height: 100vh;
  height: 100dvh;      /* on phones: the real visible height, minus browser bars */
  max-width: none;
  max-height: none;
  margin: 0;
  /* room for the close button on top and the arrows underneath */
  padding: 76px var(--space-4) 88px;
  background: transparent;
  border: 0;
  overscroll-behavior: contain; /* scrolling inside never drags the page behind */
}
.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The layer between the photo and the page: a light tint plus a blur of
   whatever is behind it. */
.lightbox::backdrop {
  background: rgba(243, 250, 253, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
/* Older browsers that cannot blur: an almost solid light layer instead,
   so the photo is never fighting with sharp text behind it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lightbox::backdrop { background: rgba(243, 250, 253, 0.94); }
}
/* While the viewer is open, the page behind does not scroll. */
html:has(.lightbox[open]) { overflow: hidden; }

.lightbox__photo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* white frame and soft shadow, so the photo stands clear of the blurred page */
  border: 6px solid var(--color-white);
  border-radius: var(--radius-lg);
  background: var(--color-blue-soft);
  box-shadow: 0 18px 44px rgba(30, 43, 79, 0.28);
}

/* Round white buttons: close, previous, next. */
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  background: var(--color-white);
  border: 0;
  border-radius: 50%;
  /* same puffy edge as the cart bubble, so they read as buttons on any background */
  box-shadow: 0 4px 0 var(--color-blue-edge), inset 0 0 0 3px var(--color-blue-edge), var(--shadow-clay);
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.lightbox__btn:hover { background: var(--color-blue); }
.lightbox__btn:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 3px;
  border-radius: 50%;
}
.lightbox__close { top: var(--space-3); right: var(--space-4); }
/* Phone: arrows in the bottom corners, within reach of the thumbs. */
.lightbox__prev  { bottom: var(--space-4); left: var(--space-4); }
.lightbox__next  { bottom: var(--space-4); right: var(--space-4); }

/* "2 / 4" */
.lightbox__count {
  position: absolute;
  bottom: calc(var(--space-4) + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-clay);
  color: var(--color-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Wide screens: arrows at the sides of the photo. */
@media (min-width: 800px) {
  .lightbox { padding: 76px 96px 64px; }
  .lightbox__prev, .lightbox__next { top: 50%; bottom: auto; margin-top: -26px; }
  .lightbox__prev { left: var(--space-5); }
  .lightbox__next { right: var(--space-5); }
  .lightbox__count { bottom: var(--space-4); }
}


/* Round white icon button (close, plus, minus). */
.round-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--color-white);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 4px 0 var(--color-blue-edge), inset 0 0 0 3px var(--color-blue-edge);
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.round-btn:hover { background: var(--color-blue-soft); }
.round-btn:focus-visible { border-radius: 50%; }
.round-btn--small { width: 44px; height: 44px; }

/* A button that looks like a text link. */
.text-btn {
  min-height: 48px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-blue-deep);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.text-btn:hover { color: var(--color-ink); }


/* 11. CART WINDOW ---------------------------------------------------------- */
/* Opens under the "Shporta" button, in the top right corner. On a phone it
   is almost as wide as the screen. */
.cart-panel {
  position: fixed;
  top: var(--space-3);
  right: var(--space-3);
  bottom: auto;
  left: auto;
  width: min(420px, calc(100vw - 2 * var(--space-3)));
  max-height: calc(100vh - 2 * var(--space-3));
  max-height: calc(100dvh - 2 * var(--space-3));
  margin: 0;
  padding: 0;
  background: var(--color-white);
  border: 4px solid var(--color-blue-edge);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px rgba(30, 43, 79, 0.25);
  color: var(--color-ink);
  overscroll-behavior: contain;
}
.cart-panel[open] { display: flex; flex-direction: column; }
.cart-panel::backdrop { background: var(--color-veil); }
html:has(.cart-panel[open]) { overflow: hidden; }

.cart-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
}
.cart-panel__title { font-size: var(--text-lg); }

.cart-panel__empty {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4) var(--space-5);
}

/* The list scrolls by itself if it is taller than the window. */
.cart-panel__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline: var(--space-4);
}

.cart-line {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-top: 2px solid var(--color-blue-edge);
}
.cart-line__photo {
  width: 72px;
  height: 90px;
  object-fit: cover;
  background: var(--color-blue-soft);
  border-radius: 12px;
}
.cart-line__body { min-width: 0; overflow-wrap: anywhere; }
.cart-line__name {
  color: var(--color-ink);
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
}
.cart-line__name:hover { text-decoration: underline; }
.cart-line__unit {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}
.cart-line__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
/* nowrap: the price and its euro sign always stay on one line */
.cart-line__total { font-size: 1.25rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-line__remove {
  min-height: 44px;
  margin-top: var(--space-1);
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-ink-soft);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.cart-line__remove:hover { color: var(--color-ink); }

/* The quantity control: minus, number, plus. */
.stepper { display: flex; align-items: center; gap: var(--space-1); }
.stepper__amount {
  min-width: 1.6em;
  font-size: 1.25rem;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cart-panel__foot {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 4px solid var(--color-blue-edge);
}
.cart-panel__total,
.order-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-weight: 700;
}
.cart-panel__total strong,
.order-total strong {
  font-size: var(--text-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}


/* 12. CHECKOUT PAGE (porosia.html) ----------------------------------------- */
.checkout { padding-block: var(--space-2) var(--space-9); }
.checkout__title { font-size: clamp(2.25rem, 1.6rem + 3vw, 3.25rem); }

/* Phone: the order first, the form under it.
   From 900px: form on the left, order on the right. */
.checkout__grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
}
@media (min-width: 900px) {
  .checkout__grid {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: start;
    gap: var(--space-6);
  }
  .checkout__summary { grid-column: 2; grid-row: 1; }
  .checkout__form, .checkout__sent { grid-column: 1; grid-row: 1; }
}

/* The same puffy white card as everywhere else. */
.checkout__box {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5) var(--space-4);
  background: var(--color-white);
  border: 4px solid var(--color-blue-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-clay);
}
.checkout > .checkout__box { margin-top: var(--space-5); justify-items: start; }
@media (min-width: 600px) {
  .checkout__box { padding: var(--space-6); }
}
.checkout__heading { font-size: var(--text-lg); }

.order-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 2px solid var(--color-blue-edge);
  font-variant-numeric: tabular-nums;
}
.order-line__name { min-width: 0; overflow-wrap: anywhere; }
.order-line strong { white-space: nowrap; }

/* Form fields */
.field { display: grid; gap: var(--space-1); }
.field__label { font-weight: 700; }
.field__optional { color: var(--color-ink-soft); font-weight: 500; }
.field__input {
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-2) var(--space-4);
  background: var(--color-white);
  /* a clearly visible border: people must be able to see where to type */
  border: 2px solid var(--color-ink-soft);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font: inherit;
  font-size: 1.125rem; /* 18px: also stops iPhones zooming in on tap */
}
.field__input--area { min-height: 96px; resize: vertical; }
/* example text inside an empty field: lighter than typed text, still readable */
.field__input::placeholder { color: var(--color-ink-soft); opacity: 0.9; }
.field__input:focus-visible { outline-offset: 2px; }
.field__input[aria-invalid="true"] { border-color: var(--color-error); border-width: 3px; }
.field__error {
  color: var(--color-error);
  font-size: 1rem;
  font-weight: 700;
}

/* The cash-on-delivery note */
.pay-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-blue-soft);
  border-radius: var(--radius-md);
}
.pay-box .icon { margin-top: 2px; color: var(--color-blue-deep); }

.checkout__send { width: 100%; white-space: normal; }
.checkout__other { justify-self: center; }
.checkout__hint { color: var(--color-ink-soft); font-size: 1rem; }
.checkout__sent { justify-items: start; }
/* This box is focused by the page only so screen readers read it; it is not a control. */
.checkout__sent:focus { outline: none; }
.checkout__thanks { font-weight: 700; }


/* A line of a sum: a label on the left, an amount on the right.
   Used above the total in the cart window and on the checkout page. */
.sum-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}

/* The chosen option under a product's name in the cart ("Ngjyra: Rozë"). */
.cart-line__option {
  font-size: var(--text-sm);
  font-weight: 700;
}

/* The order number on the "order sent" box. */
.order-number {
  padding: var(--space-2) var(--space-4);
  background: var(--color-blue-soft);
  border-radius: var(--radius-md);
  font-variant-numeric: tabular-nums;
}


/* 13. OPTIONS (for example colours) on the product page -------------------- */
.options {
  margin: var(--space-5) 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.options__label {
  padding: 0;
  font-weight: 700;
}
.options__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
/* Each choice is a chunky chip. The real radio button is still there for
   keyboards and screen readers, only drawn invisibly on top of the chip. */
.option {
  position: relative;
  display: inline-flex;
}
.option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.option span {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 0 var(--color-blue-edge), inset 0 0 0 3px var(--color-blue-edge);
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.option input:hover + span { background: var(--color-blue-soft); }
/* The chosen chip: dark navy, like the active menu chip. */
.option input:checked + span {
  background: var(--color-ink);
  box-shadow: 0 4px 0 var(--color-ink-deep);
  color: var(--color-white);
}
.option input:focus-visible + span {
  outline: 3px solid var(--color-ink);
  outline-offset: 3px;
}
.options .field__error { margin-top: var(--space-2); }


/* 14. FOOTER (added to every page by js/shared.js) ------------------------- */
.site-footer {
  margin-top: var(--space-8);
  padding-block: var(--space-7) var(--space-6);
  background: var(--color-blue);
}
.site-footer__grid {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 700px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.site-footer__name {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-2);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}
.site-footer__name small { font-size: 0.8125rem; font-weight: 600; }
.site-footer__heading {
  margin-bottom: var(--space-1);
  font-size: var(--text-base);
  font-weight: 800;
}
.site-footer a,
.site-footer__button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: underline;
}
.site-footer a:hover,
.site-footer__button:hover { text-decoration-thickness: 3px; }
.site-footer__button {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.site-footer__legal {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-ink);
  font-size: 1rem;
}
/* The cart window and the photo viewer are drawn after the footer in the
   page, but they float above it, so nothing here affects them. */


/* 15. INFORMATION PAGES (dergesa, kushtet, privatesia, kontakti, 404) ------- */
.page {
  max-width: 760px;       /* a comfortable line length for reading */
  padding-block: var(--space-2) var(--space-7);
}
.page h1 {
  margin-bottom: var(--space-4);
  font-size: clamp(2.25rem, 1.6rem + 3vw, 3.25rem);
}
.page h2 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
}
.page h3 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-1);
  font-size: var(--text-md);
}
.page p + p { margin-top: var(--space-3); }
.page ul:not(.contact-list),
.page ol {
  margin-top: var(--space-2);
  padding-left: 1.4em;
  list-style: revert;     /* bring back the bullets and numbers removed in section 3 */
}
.page li { margin-top: var(--space-1); }
.page a:not(.btn) { color: var(--color-blue-deep); font-weight: 600; }
.page a:not(.btn):hover { color: var(--color-ink); }
.page__date {
  margin-top: var(--space-6);
  color: var(--color-ink-soft);
  font-size: 1rem;
}
/* A part of a page that still has to be written. Hard to miss on purpose. */
.gap {
  padding: var(--space-3) var(--space-4);
  background: var(--color-peach);
  border-radius: var(--radius-md);
  font-weight: 700;
}

.contact-list {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.contact-list li { display: grid; gap: var(--space-1); justify-items: start; }
.contact-list__label {
  color: var(--color-ink-soft);
  font-size: 1rem;
  font-weight: 700;
}


/* 16. COOKIE NOTICE (js/consent.js; appears only when adverts are in use) ---- */
/* A card at the bottom of the screen. It does not block the page: the
   visitor can keep browsing and answer when they like. */
.cookie-note {
  position: fixed;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 20;
  display: grid;
  gap: var(--space-3);
  max-width: 560px;
  margin-inline: auto;
  padding: var(--space-4);
  background: var(--color-white);
  border: 4px solid var(--color-blue-edge);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px rgba(30, 43, 79, 0.25);
}
.cookie-note__text { font-size: 1rem; line-height: 1.4; }
.cookie-note__text a { color: var(--color-blue-deep); font-weight: 700; }
/* Two equal buttons: refusing must be as easy as accepting. */
.cookie-note__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

/* While the cookie notice is showing, leave room at the bottom when the
   browser scrolls to something (for example with the Tab key), so the notice
   never sits on top of the thing being used. */
html:has(.cookie-note:not([hidden])) { scroll-padding-bottom: 240px; }


/* 17. SHARE BUTTON, OTHER PRODUCTS, FREE-DELIVERY LINE ---------------------- */

/* The share button under the two main buttons of a product page. */
.product__share {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.product__share .icon { width: 22px; height: 22px; }

/* "Shiko edhe këto": up to four other products under a product.
   Phone: two per row. From 800px: four in one row. */
.related { margin-top: var(--space-8); }
.related__title { font-size: var(--text-lg); }
.related__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
@media (min-width: 800px) {
  .related__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
}
.related__grid li { min-width: 0; display: flex; }
/* The whole card is one link: one large target for a thumb. */
.related-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--space-2);
  background: var(--color-white);
  border: 4px solid var(--color-blue-edge);
  border-radius: var(--radius-lg);
  color: var(--color-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: border-color 0.2s ease;
}
.related-card:hover { border-color: var(--color-blue-deep); }
.related-card:hover .related-card__name { text-decoration: underline; }
.related-card__photo {
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--color-blue-soft);
  border-radius: var(--radius-md);
}
.related-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.related-card__name {
  margin-top: var(--space-2);
  padding-inline: var(--space-1);
  font-weight: 700;
  line-height: 1.15;
}
.related-card__price {
  margin-top: auto;
  padding: var(--space-1) var(--space-1) 0;
  font-size: var(--text-md);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* The free-delivery line in the cart window: a sentence and a bar that
   fills as the cart grows. The sentence carries the meaning; the bar is
   decoration and is hidden from screen readers. */
.free-delivery {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-3);
  background: var(--color-blue-soft);
  border-radius: var(--radius-md);
}
.free-delivery__text { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.free-delivery__track {
  height: 10px;
  background: var(--color-white);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.free-delivery__fill {
  display: block;
  height: 100%;
  background: var(--color-green);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}