/* Home — frame `pagrindinis` (116:1213), canvas 1728x7309.
   Offsets below are frame-absolute values from design/figma-cache/frames/pagrindinis.json. */

/* ---- Hero: bg @72 (1728x809), scrim @156 (h725), copy @294,564 ---- */
.hero { position: relative; height: 809px; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; left: 0; right: 0; top: 84px; height: 725px;
  /* Rectangle 11: stops 0 -> #2c2420, node opacity 0.7 */
  background: linear-gradient(180deg, rgba(44, 36, 32, 0) 0%, #2c2420 100%);
  opacity: .7;
}
.hero__inner { position: relative; padding-top: 492px; }   /* 564 - 72 */
.hero__title { color: var(--cream); white-space: nowrap; }
.hero__sub { color: var(--cream); margin: 25px 0 0; }      /* 660 - 564 - 72(ink) */
.hero__cta { display: flex; gap: 24px; margin-top: 29.2px; }
.hero__cta .btn { height: 50px; padding: 24px 32px; }

/* ---- USP bar: Group 5319, 1728x74, Frame 78 @295,913 gap 98 ---- */
.usp { background: var(--ink); height: 74px; display: flex; align-items: center; }
.usp__list {
  width: max-content; margin-inline: auto; display: flex; gap: 98px;
  color: var(--gold); font-weight: 400; font-size: 14px; line-height: 18.2px;
  letter-spacing: 1.4px; text-transform: uppercase; white-space: nowrap;
}
/* client 2026-11-04: content-sized items on the comp's 98px gap, the row centred on the band —
   the ink gaps stay equal whatever the copy (the comp's 207/214/199/224 boxes were its LT text
   widths; the live copy is longer, so the row may run past the 1138 column into the gutters) */

/* ---- Category tiles: Group 5703, 4 x 520, full bleed ---- */
.tiles { display: grid; grid-template-columns: 431px 433px 432px 432px; height: 520px; margin-top: -1px; background: var(--ink); }
.tile { position: relative; display: block; overflow: hidden; }
.tile__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile__scrim { position: absolute; left: 0; right: 0; }
.tile__scrim--top {                                  /* node opacity 0.86 */
  top: 0; height: 151px; opacity: .86;
  background: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,0));
}
.tile__scrim--bottom {                               /* runs dark towards the bottom */
  top: 289px; height: 231px;
  background: linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0));
}
.tile__title {
  /* Comment 10: the title is centred on the arrow (Frame 69 @1390, 50 tall → centre 1415),
     whether it runs one line (cap 1408-1422) or two (1395-1435) — never baseline-hung */
  position: absolute; left: 32px; top: 461px; width: 296px;    /* 1415 - 954 */
  transform: translateY(-50%);
  color: var(--cream); font-weight: 500; font-size: 20px; line-height: 26px;
}
.tile__go {
  position: absolute; right: 32px; top: 436px;                 /* 1390 - 954 */
  width: 49px; height: 50px; border-radius: var(--r-btn);
  border: 1px solid var(--cream); display: flex; align-items: center; justify-content: center;
  transition: background-color var(--t-tint) var(--ease-out);
}
.tile:hover .tile__go { background: rgba(245, 240, 232, .2); }

/* ---- Section head: title left, pill right (Group 5490 @1594) ---- */
.section-head { display: flex; align-items: flex-start; justify-content: space-between; }
.section-head__title { color: var(--accent); margin-top: 5.4px; }
.collections .btn-pill, .blog .btn-pill { width: 155px; }   /* Frame 68 */
.editorial__cta { width: 121px; }                            /* Frame 69 */

.collections { padding-top: 120px; }                          /* tiles end 1474 -> head 1594 */

/* ---- Tabs: y 1684. The comp's x 294/399/504/595/750 are its placeholder labels' own widths
        (65/65/51/115/228) + a constant 40px gap; comment 11 („nevienodi tarpai“) — with our
        real labels in those fixed boxes the gaps ran 34-70px — so the RULE is kept: each tab
        is as wide as its label and 40px separates every pair ---- */
.tabs { display: flex; gap: 40px; margin-top: 35.2px; }
.tab {
  text-transform: uppercase; white-space: nowrap;
  color: var(--muted); font-weight: 300; font-size: 16px; line-height: 20.8px;
  letter-spacing: 1.6px; padding-bottom: 8px; border-bottom: 1px solid transparent;
  transition: color var(--t-tint) var(--ease-out), border-color var(--t-tint) var(--ease-out);
}
.tab:hover, .tab:focus-visible { color: var(--accent); }
.tab.is-active { color: var(--accent); font-weight: 400; border-bottom-color: var(--accent); }

/* ---- Product grid: 4 x 267, gap 24 ---- */
.collections .carousel { margin-top: 34px; }
.pgrid { gap: 24px; }

.pcard {
  position: relative; width: 267px; height: 458px; background: var(--white);
  padding: 16px; display: flex; flex-direction: column; overflow: hidden;
}
.pcard__badge {
  position: absolute; left: 16px; top: 16px; z-index: 2;
  display: inline-flex; align-items: center; height: 23px; padding: 8px;
  background: var(--accent); color: var(--cream); border-radius: var(--r-badge);
  font-weight: 500; font-size: 10px; line-height: 13px; letter-spacing: .5px;
}
/* 2026-11-04: the caps' INK centred in the pill in Chromium and Firefox alike: the label is a
   flex item whose box is trimmed to the cap height, so `align-items: center` centres the ink at
   every badge size (Firefox sets DM Sans ~1px lower in its line box than Chromium). The
   letter-spacing also trails the last letter, so the ink is nudged right by ~2/3 of it (.05em
   at every badge size) — the box keeps its width. */
.pcard__badge-ink { position: relative; left: .035em; }
@supports (text-box: trim-both cap alphabetic) {
  .pcard__badge-ink { display: block; text-box: trim-both cap alphabetic; }
}
.pcard__wish { position: absolute; right: 16px; top: 16px; z-index: 2; width: 18px; height: 16px; }
/* Saved: the comp draws the same heart filled (`Megstamos prekės` I428:7734;376:11380). */
.pcard__wish-on, .pcard__wish.is-active .pcard__wish-off { display: none; }
.pcard__wish.is-active .pcard__wish-on { display: block; }
.pcard__media { position: relative; display: block; margin-top: 31px; }  /* 1790 - 1743 - 16 */
/* Comment 13 / decision 1: the second photo and the optional video sit over the card photo and
   take its place on hover/focus (a video, later in the DOM, wins over the photo) — at once, no
   cross-fade (client, 2026-10-27); only the shared zoom moves. */
.pcard__alt, .pcard__video {
  position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none;
  transition: opacity 0s, transform var(--t-move) var(--ease-out);
}
.pcard__video { width: 100%; height: 100%; object-fit: cover; }
.pcard:hover .pcard__alt, .pcard:focus-within .pcard__alt,
.pcard:hover .pcard__video, .pcard:focus-within .pcard__video,
.fcard:hover .fcard__video, .fcard:focus-within .fcard__video { opacity: 1; }
/* R2-06 answer (Mindaugas, 2026-10-04): no white edges, never distorted — every photo is
   cropped to fill its box, centred. The Figma fill (STRETCH + imageTransform) is a crop of ONE
   file, the comp's own Aurora photo, so that crop is scoped to it; `cover` on top of it drops
   Figma's own ~2.5% stretch, and a browser without object-view-box just covers the whole photo. */
.pcard__media img { width: 234px; height: 227px; object-fit: cover; }
.pcard__media img[src*="fill-666effd14cf92151"] {
  object-view-box: inset(17.4115% 15.1082% 13.3403% 15.2599%);
}
.pcard__brand {
  color: var(--accent); font-weight: 300; font-size: 12px; line-height: 15.6px;
  margin: 12.4px 0 0;                                          /* cap top +290 */
}
.pcard__name { text-transform: uppercase; margin: 3.2px 0 0; font-weight: 300; font-size: 16px; line-height: 20.8px; }
.pcard__name a { color: var(--ink); }
.pcard__summary {
  color: var(--muted); font-weight: 300; font-size: 12px; line-height: 15.6px; margin: 3.4px 0 0;
}
.pcard__row { display: flex; align-items: center; justify-content: space-between; margin-top: 9.8px; height: 18.2px; }
.pcard__price { text-transform: uppercase; color: var(--ink); font-weight: 400; font-size: 14px; line-height: 18.2px; flex: none; white-space: nowrap; }
/* P-03 — a sale on a card: the price, then the struck old price at the Kortele comp's 11px gap
   (340:2903 → 340:2904), styled as the cart/drawer frames' struck price (417:4817 / 375:3878:
   DM Sans Regular 12/15.6 #fb6262, line-through). No card comp draws a sale — DEVIATIONS.md. */
.pcard__prices { display: inline-flex; align-items: baseline; gap: 11px; flex: none; white-space: nowrap; }
.pcard__was { color: var(--danger); font-weight: 400; font-size: 12px; line-height: 15.6px;
  text-decoration: line-through; }
.pcard__swatches { display: flex; gap: 7px; min-width: 0; overflow: hidden; }
.pcard__swatches span { width: 14px; height: 14px; border-radius: 50%; display: block; flex: none; }
.pcard__actions { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.pcard__add, .fcard__add {
  text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 180px; height: 47px; padding: 16px 24px; border-radius: var(--r-btn);
  background: var(--cream); color: var(--ink);
  font-weight: 500; font-size: 14px; line-height: 18.2px;
  transition: background-color var(--t-tint) var(--ease-out), color var(--t-tint) var(--ease-out);
}
.pcard__add span, .fcard__add span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard__add:hover, .pcard__add:focus-visible, .fcard__add:hover, .fcard__add:focus-visible { background: var(--ink-hover); color: var(--cream); }   /* ASSETS „CTA mani →“ 452:4464 */
.pcard__add:hover img, .pcard__add:focus-visible img,
.fcard__add:hover img, .fcard__add:focus-visible img { filter: invert(1) brightness(1.6); }
.pcard__go, .fcard__go {
  display: inline-flex; align-items: center; justify-content: center;
  width: 47px; height: 47px; border-radius: var(--r-btn); background: var(--cream);
  transition: background-color var(--t-tint) var(--ease-out);
}
.pcard__go:hover, .pcard__go:focus-visible, .fcard__go:hover, .fcard__go:focus-visible { background: var(--sand); }
/* R2-25: the circle is the compare toggle; „in the comparison" tints the glyph accent — the
   PDP circle's own pressed treatment (product.css .pdp__circle[aria-pressed]). */
.pcard__go img, .fcard__go img { transition: filter var(--t-tint) var(--ease-out); }
.pcard__go[aria-pressed="true"] img, .fcard__go[aria-pressed="true"] img {
  filter: brightness(0) saturate(100%) invert(38%) sepia(24%) saturate(600%) hue-rotate(330deg);
}

/* ---- Dots: Group 5347 — 8px @2225 (gap 6), 10px elsewhere (gap 8) ---- */
.dots { display: flex; gap: 6.33px; width: max-content; margin: 24px auto 0; }
.dots .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--shell); }
.dots .dot.is-active { background: var(--accent); }
.dots--lg { gap: 8px; }
.dots--lg .dot { width: 10px; height: 10px; }

/* ---- Quote band: Group 5377, 1728x548, text @294,2591 (w1064) ---- */
.quote { position: relative; height: 548px; overflow: hidden; margin-top: 120px; }
.quote__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quote .container { position: relative; padding-top: 238px; }  /* 2591 - 2353 */
.quote__text { color: var(--cream); white-space: nowrap; margin: 0; }

/* ---- Bestsellers: heading @3021, body @3083 (left 558 / right 876) ---- */
.best { padding-top: 110.35px; }                               /* h2 cap top 3021 */
.best__title { color: var(--accent); }
.best__body { display: flex; margin-top: 29.95px; }            /* body top 3083 */
.best__left {                                                  /* Rectangle 2976 @294,3083 */
  position: relative; width: 558px; margin-left: var(--gutter); flex: none; height: 682px;
  background: var(--white);
}
.best__right { position: relative; flex: 1; height: 682px; }
.best__right > img, .best__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.best__nav {
  position: absolute; top: 322px; width: 7px; height: 14px;    /* 3405 - 3083 */
  display: flex; align-items: center; justify-content: center;
}
.best__nav--prev { left: 67px; }                               /* 361 - 294 */
.best__nav--next { left: 485px; }                              /* 779 - 294 */
.best__nav img { width: 9px; height: 15px; max-width: none; margin: -0.5px -1px; }
                                          /* Vector 42/43 229:578/579: 7x14 path + 1px stroke */

.fcard-stage { position: absolute; left: 98px; top: 40px; width: 363px; height: 578px; overflow: hidden; }  /* 392-294, 3123-3083; clips the parked slides */
.fcard {
  position: absolute; inset: 0;
  width: 363px; height: 578px; background: var(--white); padding: 8px 8px 0;
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(var(--from, 100%)); pointer-events: none; visibility: hidden;
  transition: transform 0s, visibility 0s;                      /* parked: no motion at all */
}
/* A slide: the incoming card travels in from the arrow's side (`--from`, motion.js) while the
   outgoing one travels out the other way (`--to`) — the stage clips both, nothing reflows. */
.fcard.is-current {
  z-index: 2; transform: none; pointer-events: auto; visibility: visible;
  transition: transform var(--t-move) var(--ease-out), visibility 0s;
}
.fcard.is-leaving {
  z-index: 1; transform: translateX(var(--to, -100%)); visibility: visible;
  transition: transform var(--t-move) var(--ease-out), visibility 0s linear var(--t-move);
}
.fcard__badge {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  display: inline-flex; align-items: center; height: 23px; padding: 8px;
  background: var(--accent); color: var(--cream); border-radius: var(--r-badge);
  font-weight: 500; font-size: 10px; line-height: 13px; letter-spacing: .5px;
}
.fcard__wish { position: absolute; right: 8px; top: 8px; z-index: 2; width: 18px; height: 16px; }
.fcard__wish-on, .fcard__wish.is-active .fcard__wish-off { display: none; }
.fcard__wish.is-active .fcard__wish-on { display: block; }
.fcard__video {                                      /* comment 14: the stage's photo OR video */
  position: absolute; left: 0; top: 39px; width: 363px; height: 361px;  /* = .fcard__media's box */
  opacity: 0; pointer-events: none; object-fit: cover;
  transition: opacity var(--t-move) var(--ease-out);
}
.fcard__media {
  width: 363px; max-width: none; height: 361px; flex: none; object-fit: cover; margin: 31px -8px 0;
}
/* Group 5403 @456,3539 — a 235px column centred in the card, every line CENTER */
.fcard__info { width: 235px; margin: 0 auto; text-align: center; }
.fcard__brand {
  color: var(--accent); font-weight: 300; font-size: 12px; line-height: 15.6px;
  margin: 12.4px 0 0;                                          /* brand cap 3539 */
}
.fcard__name { text-transform: uppercase; margin: 7.2px 0 0; font-weight: 300; font-size: 16px; line-height: 20.8px; }
.fcard__summary {
  color: var(--muted); font-weight: 300; font-size: 12px; line-height: 15.6px; margin: 7.4px 0 0;
}
.fcard__row {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  margin: 8.2px 0 0 3px;                                       /* price+swatches centre on 575, not 573.5 */
}
.fcard__price { text-transform: uppercase; font-weight: 300; font-size: 16px; line-height: 20.8px; flex: none; white-space: nowrap; }
.fcard__swatches { display: flex; gap: 7px; min-width: 0; overflow: hidden; }
.fcard__swatches span { width: 14px; height: 14px; border-radius: 50%; display: block; flex: none; }
.fcard__actions { display: flex; gap: 16px; margin: 21px -8px 0; }
.fcard__add { width: 300px; }
.best__left .dots { position: absolute; left: 0; right: 0; top: 632px; margin-top: 0; }  /* 3715 - 3083 */

/* ---- Quiz band: Group 5380, 1728x704; panel from x294 to right edge ---- */
.quiz { position: relative; height: 704px; margin-top: 120px; }  /* band top 3885 */
.quiz__panel { position: absolute; left: var(--gutter); right: 0; top: 0; bottom: 0; background: var(--accent); }
.quiz__img {
  position: absolute; left: 0; top: 58px; width: 846px; height: 588px;
  object-fit: cover; z-index: 2;
}
.quiz__copy { position: absolute; left: 679px; top: 234px; width: 461px; }  /* 973-294, 4119-3885 */
.quiz__title {
  font-family: var(--font-display); font-weight: 500; font-size: 88px; line-height: 48px;
  color: var(--cream); margin: 0; width: 453px; white-space: nowrap;
}
.quiz__text {
  color: var(--cream); font-weight: 400; font-size: 16px; line-height: 20.8px;
  letter-spacing: .8px; margin: 56px 0 0;
}
.quiz__cta { height: 59px; margin-top: 41px; }

/* ---- Editorial: Group 5378, centred, 1138 wide ---- */
.editorial { padding-top: 115.2px; }                            /* eyebrow cap 4709 */
.editorial__inner { text-align: center; }
.editorial__eyebrow {
  text-transform: uppercase;
  color: var(--accent); font-weight: 400; font-size: 16px; line-height: 20.8px;
  letter-spacing: 3.2px; margin: 0;
}
.editorial__title { color: var(--ink); margin: 35px auto 0; white-space: nowrap; width: max-content; }
.editorial__img { width: 1138px; height: 349px; object-fit: cover; margin: 40px auto 0; }
.editorial__text {
  width: 753px; margin: 33.6px auto 0; text-align: center;
  font-weight: 400; font-size: 16px; line-height: 24px; color: var(--ink);
}
.editorial__cta { margin-top: 33.4px; }

/* ---- Blog: white band 1728x723 @5602 ---- */
.blog { background: var(--white); padding: 120px 0 120px; margin-top: 120px; }  /* band 5602, 723 tall */
.blog .carousel { margin-top: 40px; }
.blog__grid { gap: 24px; }
.bcard { width: 364px; }
.bcard__media { display: block; overflow: hidden; }
.bcard img { width: 364px; height: 240px; object-fit: cover; transition: transform var(--t-move) var(--ease-out); }
.bcard:hover img, .bcard:focus-within img { transform: scale(var(--zoom)); }
.bcard__cat {
  text-transform: uppercase;
  color: var(--accent); font-weight: 300; font-size: 12px; line-height: 15.6px; margin: 20.4px 0 0;
}
.bcard__title { margin: 1.9px 0 0; font-weight: 300; font-size: 18px; line-height: 23.4px; }
.bcard__title a { color: var(--ink); }
.bcard__excerpt {
  color: var(--muted); font-weight: 300; font-size: 12px; line-height: 18px; margin: 3.3px 0 0;
}
.blog .dots { margin-top: 42.4px; }

/* ---- Card text is a FIXED line count — the comp's, read off the node heights in the specs
   (pcard/fcard brand, name, summary and bcard category, title: one line each — the quiz
   mini card's summary alone is two lines at 12/14, set in quiz.css; the blog
   excerpt: two lines in the 364 card, three at 360, one in the wide journal cards) — and
   every card is a fixed box, so the clamp is a fixed height per element, never an auto
   margin (the comp leaves 8px of slack under the action row; an auto margin would move
   it). `1lh` is the element's own line-height, so every variant's override carries over.
   Longer content ends in an ellipsis; the full name rides in the link's `title`
   (design/DEVIATIONS.md). ---- */
.pcard__brand, .pcard__name, .pcard__summary, .fcard__brand, .fcard__name, .fcard__summary,
.bcard__cat, .bcard__title {
  height: 1lh; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.bcard__excerpt {
  height: 2lh; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* ---- Newsletter: Group 5341, 1728x624, centred 461 column @633 ---- */
.nl { position: relative; height: 624px; overflow: hidden; }
.nl__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nl__inner {
  position: relative; width: 461px; margin-inline: auto; padding-top: 185px; text-align: center;
}
.nl__title { color: var(--cream); margin: 0; text-align: left; }
.nl__sub {
  color: var(--white); font-weight: 400; font-size: 16px; line-height: 20.8px;
  letter-spacing: 1.6px; margin: 20.3px 0 0;
}
.nl__field {
  display: flex; align-items: center; justify-content: space-between;
  height: 50px; border-radius: 40px; border: 1px solid var(--cream); margin-top: 28.2px;
}
.nl__field input {
  flex: 1; background: none; border: 0; color: var(--white); padding: 0 24px;
  font-weight: 500; font-size: 14px; line-height: 18.2px;
}
.nl__field input::placeholder { color: var(--white); }
.nl__field input:focus { outline: none; }
.nl__field button {
  text-transform: uppercase;
  width: 181px; height: 50px; border-radius: 40px; background: var(--white); color: var(--ink);
  font-weight: 400; font-size: 16px; line-height: 20.8px; flex: none;
  transition: background-color var(--t-tint) var(--ease-out), color var(--t-tint) var(--ease-out);
}
.nl__field button:hover, .nl__field button:focus-visible { background: var(--ink-hover); color: var(--cream); }   /* ASSETS 452:4464 */
.nl__consent {
  display: flex; align-items: center; gap: 15px; margin-top: 24px;   /* 17 - the box's 2 */
  color: var(--white); font-weight: 400; font-size: 16px; line-height: 20.8px; letter-spacing: 1.6px;
}
.nl__consent input {                   /* the one checkbox (tokens.css) */
  appearance: none; width: var(--check); height: var(--check); flex: none; cursor: pointer;
  border: 1px solid var(--cream); border-radius: var(--r-check); background: transparent;
  transition: background var(--t-tint) var(--ease-out), border-color var(--t-tint) var(--ease-out);
}
.nl__consent input:checked {           /* checked box — 468:4362 */
  background: var(--accent) url("../img/icons/icon-check-white.svg") no-repeat 4.5px 5.5px / 10px 7px;
  border-color: var(--accent);
}