/* ============================================================================
   skin-layout-f  "Directory"  -  PROTOTYPE stylesheet
   ----------------------------------------------------------------------------
   Becomes skins/skin-layout-f/assets/css/skin.css, enqueued AFTER the base
   `coway` stylesheet. Everything here is an override or an addition on top of
   themes/coway-base/assets/css/style.css. No base file is edited.

   Motif: a full bleed banner with the copy reversed out, and a solid white
   panel straddling its lower edge. On the homepage that panel carries the
   trust numerals; on a category page it carries that category's four facts.
   Either way each cell opens with a filled accent chip. The promotion poster
   follows, then the six categories as photo tiles in an uneven bento. Each
   tile carries the real model count and real starting price from
   catalog/products.json, which no other Coway skin puts on the homepage. The
   hairline idea repeats in the product card, which is flat and bordered
   rather than lifted, so the page does not read as skin-layout-a with a new
   photo.

   Superseded, do not re-propose for this site:
   - v1, a sticky left sidebar. Rejected by the client on sight.
   - v2, a flush full width directory band. Read as too plain.
   - v3, a light type led hero with the product as a cutout. Same note.
   - v5, the category card overlapping the hero on a negative margin, and the
     service facts floated over the photograph. Both pulled back by request:
     the card belongs under the banner. The service pills were then dropped
     altogether, so do not reintroduce them.
   - v6, the six categories as a white card of horizontal rows, each a small
     square thumbnail beside its label, and the numerals on a translucent
     glass bar. Replaced on request, 2026-09-23, with photo tiles and a solid
     chipped panel: the client wanted the bento and the chips from the root
     reference design. Do not go back to thumbnails in rows.

   Constraints honoured (see DESIGN-SYSTEM.md):
   - Light theme only. No dark mode block anywhere in this file.
   - One accent, the base --accent. No new accent introduced.
   - One radius system: --r-card 20px panels, --r-media 14px media, pills for
     buttons and chips. Full bleed bands carry no radius, by design: a 20px
     corner hard against the viewport edge reads as a rendering fault.
   - Motion is scroll reveal plus hover only. No parallax, no scroll hijack.
   ========================================================================== */

/* ------------------------------------------------------------- 1. Masthead */

.f-masthead {
  /* Groups the banner and the category card. They stack normally; nothing
     here overlaps, so no stacking context is needed. */
  display: block;
}

/* ----------------------------------------------------------------- 2. Hero */

/* Full bleed photograph with the copy reversed out over a deep blue scrim. */

.f-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.f-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.f-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Deep blue scrim family, never pure black, per the design system. */
  background: linear-gradient(
    to top,
    rgb(5 20 30 / 0.86) 0%,
    rgb(6 24 36 / 0.52) 46%,
    rgb(7 26 40 / 0.06) 100%
  );
}

.f-hero-inner {
  position: relative;
  /* Taller banner. The lower pad leaves room for the numerals bar that
     straddles the banner's bottom edge. */
  padding-block: clamp(104px, 12vw, 176px) clamp(120px, 13vw, 190px);
}

.f-hero-copy {
  min-width: 0;
  max-width: 44rem;
}

.f-hero-h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(2.2rem, 4.2vw, 3.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.032em;
  /* ch is measured against this element's own font size, so 20ch here is
     roughly 570px, which holds the headline to two lines at desktop. */
  max-width: 20ch;
}

.f-hero-lead {
  margin: 18px 0 0;
  color: rgb(255 255 255 / 0.9);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  max-width: 46ch;
}

.f-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* The ghost button sits on photography, so it needs its own treatment to stay
   legible. Base .btn-ghost assumes a light ground. */
.f-btn-on-dark.btn-ghost {
  border-color: rgb(255 255 255 / 0.55);
  color: #fff;
  background: rgb(255 255 255 / 0.10);
  backdrop-filter: blur(6px);
}

.f-btn-on-dark.btn-ghost:hover {
  border-color: #fff;
  color: #fff;
  background: rgb(255 255 255 / 0.2);
}

/* ------------------------------------------------------------ 3. Directory */

/* Six photo tiles straight on the page wash, sized unevenly so the eye moves
   through them instead of scanning a list. skin-layout-a runs a bento too, but
   leads with a tall block on the left; this one opens with a wide band across
   the top and hangs a tall tile off the right, and it keeps the skin's own
   marks, the ghosted index numeral and the from price pill, rather than
   skin-layout-a's circular arrow chip. */

.f-directory {
  position: relative;
  padding-block: 0;
}

.f-directory-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: clamp(180px, 17vw, 230px);
  gap: 16px;
}

/* Tile shapes follow the catalog photography, not the other way round: the
   water purifier, air purifier, air conditioner and washer dryer shots are
   square, the mattress and massage chair ones 16:9. So the first two take
   tall tiles, the two landscape shots take the wide ones, and nothing gets
   cropped past its subject. Written out per cell because the run is fixed at
   six and a formula would be no shorter and no clearer.

     01 water (tall)  02 air (tall)  03 mattress (wide)
                                     04 aircon   (wide)
     05 massage (extra wide)         06 washer   (wide)  */
.f-dir-cell:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.f-dir-cell:nth-child(2) { grid-column: span 2; grid-row: span 2; }
.f-dir-cell:nth-child(3) { grid-column: span 2; }
.f-dir-cell:nth-child(4) { grid-column: span 2; }
.f-dir-cell:nth-child(5) { grid-column: span 4; }
.f-dir-cell:nth-child(6) { grid-column: span 2; }

.f-dir-cell {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--media);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.f-dir-cell:hover,
.f-dir-cell:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 26px 48px -22px rgb(16 56 80 / 0.5);
}

.f-dir-media {
  position: absolute;
  inset: 0;
  display: block;
}

.f-dir-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Wide tiles keep only the middle band of a photograph, so the three whose
   subject is not centred are biased by hand. The tall tiles take the default.
   Measured against the shipped crops, not guessed. */
.f-dir-cell:nth-child(3) .f-dir-media img { object-position: center 66%; }
.f-dir-cell:nth-child(4) .f-dir-media img { object-position: center 38%; }
.f-dir-cell:nth-child(5) .f-dir-media img { object-position: center 58%; }

.f-dir-cell:hover .f-dir-media img,
.f-dir-cell:focus-visible .f-dir-media img {
  transform: scale(1.05);
}

/* The scrim reaches the top of the tile, not just up behind the label,
   because the index numeral sits in the upper corner over whatever the
   photograph happens to be doing there. */
.f-dir-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(8 26 38 / 0.9) 0%,
    rgb(8 26 38 / 0.62) 30%,
    rgb(8 26 38 / 0.26) 64%,
    rgb(8 26 38 / 0.14) 100%
  );
}

.f-dir-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: clamp(18px, 2vw, 26px);
  color: #fff;
}

/* Still the skin's graphic mark, moved to the top corner now that the
   photograph is the ground rather than a thumbnail beside the text. */
.f-dir-num {
  position: absolute;
  top: clamp(14px, 1.6vw, 20px);
  right: clamp(16px, 1.8vw, 24px);
  z-index: 1;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  opacity: 0.34;
  /* The scrim is thin at the top of the tile, and the washer dryer shot has a
     bright window exactly where the numeral lands. A shadow carries it there
     without darkening the other five photographs. */
  text-shadow: 0 2px 14px rgb(8 26 38 / 0.5);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.f-dir-cell:hover .f-dir-num,
.f-dir-cell:focus-visible .f-dir-num {
  opacity: 0.52;
}

.f-dir-name {
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.f-dir-meta {
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgb(255 255 255 / 0.82);
}

/* Filled by default rather than glass, which echoes the chips in the numerals
   bar and keeps the pill clear of skin-layout-a's translucent arrow chip. */
.f-dir-price {
  margin-top: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  transition: background 0.3s ease, color 0.3s ease;
}

.f-dir-cell:hover .f-dir-price,
.f-dir-cell:focus-visible .f-dir-price {
  background: #fff;
  color: var(--accent-strong);
}

/* -------------------------------------------------------------- 4. Section */

.f-section-head {
  max-width: 52ch;
  margin-bottom: clamp(28px, 3vw, 40px);
}

.f-section-head .h-section {
  max-width: 24ch;
}

.f-section-head .lead {
  margin-top: 12px;
}

.f-anchor {
  display: block;
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

[id] {
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

/* ------------------------------------------------- 5. Ledger product cards */

/* Required per-skin divergence: the base card is a lifted, shadowed tile and
   every skin inherits it identically. Here it becomes flat and bordered, with
   a hairline under the media, so it belongs to the same family as the
   directory band above. Base markup and partials are untouched. */

.f-grid .product-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: none;
  overflow: hidden;
  transition: border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.f-grid .product-card:hover {
  /* No lift, no shadow. The border does the work. */
  transform: none;
  box-shadow: none;
  border-color: var(--accent);
}

.f-grid .product-media {
  border-radius: 0;
  border-bottom: 1px solid var(--line);
}

.f-grid .product-body {
  padding: 20px;
}

.f-grid .product-card h3 {
  letter-spacing: -0.015em;
}

.f-grid .product-price {
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.f-grid .product-actions .btn {
  width: 100%;
  justify-content: center;
}

/* --------------------------------------------------- 5b. Plan cards */

/* Single model categories (mattress, air conditioner, massage chair, washer
   dryer) have plans rather than a model range, so they get a wide card that
   pairs the product with its real figures instead of a grid of tiles. Same
   flat bordered ledger treatment as the product card, at a larger size. */

.f-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}

.f-plan {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(16px, 2vw, 26px);
  padding: clamp(18px, 2vw, 24px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.f-plan:hover {
  border-color: var(--accent);
}

.f-plan-media {
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--media);
}

.f-plan-media img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.f-plan-body h3 {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.f-plan-body .product-price {
  margin: 10px 0 0;
  padding: 0;
  border: 0;
}

.f-plan-list {
  list-style: none;
  margin: 16px 0 20px;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
}

.f-plan-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.f-plan-list i {
  font-size: 1rem;
  color: var(--accent);
  margin-top: 1px;
}

.f-plan-body .btn {
  width: 100%;
  justify-content: center;
}

/* -------------------------------------------------------------- 6. Numbers */

/* The trust numerals straddle the bottom edge of the banner on a solid white
   panel, each numeral introduced by a filled accent chip. skin-layout-a runs
   the same components flat on the page with a soft tinted chip; here the panel
   is lifted onto the photograph and the chips are solid, so the row reads as a
   band of marks rather than a footnote under the banner. */

.f-numbers {
  position: relative;
  z-index: 2;
  margin-top: clamp(-104px, -8vw, -72px);
}

.f-numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: clamp(22px, 2.6vw, 34px) clamp(20px, 2.4vw, 36px);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -26px rgb(5 20 30 / 0.5);
}

.f-number {
  padding-inline: clamp(12px, 1.4vw, 22px);
}

.f-number + .f-number {
  box-shadow: inset 1px 0 0 var(--line);
}

/* Solid, not a soft tint: at four across on a white panel a pale chip
   dissolves, and the row loses the beat that makes it read as a set. */
.f-chip {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  font-size: 1.25rem;
  background: var(--accent);
  color: var(--accent-contrast);
}

.f-number .f-chip {
  margin-bottom: 16px;
}

.f-number strong {
  display: block;
  font-size: clamp(1.7rem, 2.5vw, 2.3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.f-number span {
  display: block;
  margin-top: 9px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink-2);
}

/* ---------------------------------------- 6b. Category facts (interior) */

/* Interior pages reuse the straddling panel, but carry four labelled facts
   instead of four numerals. Same bar, same chips, different payload, so the
   skin reads as one system across the page types. */

.f-facts {
  align-items: start;
}

.f-fact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-inline: clamp(12px, 1.4vw, 22px);
}

.f-fact + .f-fact {
  box-shadow: inset 1px 0 0 var(--line);
}

.f-fact .f-chip {
  margin-bottom: 10px;
}

.f-fact strong {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.f-fact span {
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink-2);
}

/* The interior banner is shorter than the homepage one: it introduces a
   category rather than opening the site. */
.f-hero-interior .f-hero-inner {
  padding-block: clamp(84px, 9vw, 132px) clamp(120px, 13vw, 190px);
}

/* ------------------------------------------------------------ 8b. Leading */

/* Full bleed band of brand figures. Centred, which keeps it clearly apart
   from the left aligned banner at the top of the same page. */

.f-leading {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.f-leading-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.f-leading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgb(5 20 30 / 0.78) 0%,
    rgb(6 24 36 / 0.72) 55%,
    rgb(5 20 30 / 0.84) 100%
  );
}

.f-leading-inner {
  padding-block: clamp(64px, 8vw, 104px);
  text-align: center;
}

.f-leading-h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.028em;
}

.f-leading-lead {
  margin: 12px 0 0;
  color: rgb(255 255 255 / 0.85);
  font-size: 1.05rem;
}

.f-leading-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(36px, 4.5vw, 56px);
}

.f-leading-stat strong {
  display: block;
  color: #fff;
  font-size: clamp(1.2rem, 1.9vw, 1.65rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.f-leading-stat span {
  display: block;
  margin-top: 6px;
  color: rgb(255 255 255 / 0.75);
  font-size: 0.82rem;
  line-height: 1.4;
}

.f-leading-certs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  margin-top: clamp(36px, 4.5vw, 56px);
  padding-top: clamp(26px, 3vw, 36px);
  border-top: 1px solid rgb(255 255 255 / 0.22);
}

.f-leading-certs img {
  height: 38px;
  width: auto;
}

/* --------------------------------------------------------------- 7. Poster */

/* The live Coway promotion artwork, shown whole. It is a designed poster
   already, so the page gives it a frame and gets out of its way rather than
   cropping it into a band or laying type over it. */

.f-poster {
  padding-block: clamp(52px, 6.5vw, 88px) clamp(32px, 4vw, 48px);
}

.f-poster-frame {
  display: block;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.f-poster-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -24px rgb(16 56 80 / 0.38);
}

.f-poster-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.f-poster-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 24px;
}

.f-poster-foot p {
  margin: 0;
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ----------------------------------------------------------------- 8. Care */

.f-care {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}

/* The care image is a cutout, not a photograph, so it sits in a tinted well
   and is contained rather than cropped. Same treatment the design system
   gives product cutouts in .product-media. */
.f-care-media {
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--accent-soft);
  padding: clamp(18px, 2.5vw, 32px);
}

.f-care-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: 5 / 4;
}

.f-care-list {
  list-style: none;
  margin: clamp(20px, 2.5vw, 28px) 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.f-care-list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.f-care-list i {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-media);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.15rem;
}

.f-care-list strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 650;
  color: var(--ink);
  margin-bottom: 3px;
}

.f-care-list span {
  display: block;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.f-cert-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 2.5vw, 30px);
  margin-top: clamp(24px, 3vw, 34px);
  padding-top: clamp(20px, 2.5vw, 26px);
  border-top: 1px solid var(--line);
}

.f-cert-strip img {
  height: 34px;
  width: auto;
  opacity: 0.75;
}

/* ------------------------------------------------------- 9. Prototype flag */

.proto-flag {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 40;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
}

/* --------------------------------------------------------- 10. Breakpoints */

/* The six column bento needs the room. Below it, a plain two up of equal
   tiles: the uneven rhythm only reads while the row is wide. */
@media (max-width: 1100px) {
  .f-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Tall enough that the four square catalog shots are not cropped into a
       letterbox once every tile is the same shape. */
    grid-auto-rows: clamp(190px, 27vw, 290px);
  }

  .f-dir-cell:nth-child(1),
  .f-dir-cell:nth-child(2),
  .f-dir-cell:nth-child(3),
  .f-dir-cell:nth-child(4),
  .f-dir-cell:nth-child(5),
  .f-dir-cell:nth-child(6) {
    grid-column: span 1;
    grid-row: span 1;
  }

  .f-numbers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 22px;
  }

  .f-fact:nth-child(2n + 1) {
    box-shadow: none;
  }

  .f-leading-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 28px;
  }

  /* With two rows the vertical hairline is wrong on the left column. */
  .f-number + .f-number {
    box-shadow: inset 1px 0 0 var(--line);
  }

  .f-number:nth-child(2n + 1) {
    box-shadow: none;
  }
}

@media (max-width: 860px) {
  .f-plan {
    grid-template-columns: minmax(0, 1fr);
  }

  .f-plan-media img {
    aspect-ratio: 16 / 10;
  }

  .f-care {
    grid-template-columns: minmax(0, 1fr);
  }

  .f-care-media img {
    aspect-ratio: 16 / 10;
  }

  .f-hero-copy {
    max-width: none;
  }

  .f-poster-foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .f-directory-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: clamp(190px, 56vw, 260px);
  }

  .f-hero-inner {
    padding-block: 72px 104px;
  }

  /* A shallower straddle on a phone, and one numeral per row. */
  .f-numbers {
    margin-top: -56px;
  }

  .f-dir-num {
    font-size: 2.2rem;
  }

  .f-numbers-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
  }

  .f-number,
  .f-number + .f-number,
  .f-fact,
  .f-fact + .f-fact {
    box-shadow: none;
    padding-inline: 0;
  }

  .f-leading-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .f-leading-certs img {
    height: 30px;
  }

  .f-number span {
    max-width: none;
  }

  .f-hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .f-poster-foot .btn {
    width: 100%;
    justify-content: center;
  }

  .proto-flag {
    left: 10px;
    bottom: 10px;
    font-size: 0.66rem;
  }
}

/* ------------------------------------------------------ 11. Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .f-dir-cell,
  .f-dir-num,
  .f-dir-price,
  .f-dir-media img,
  .f-poster-frame,
  .f-grid .product-card {
    transition: none;
  }

  .f-dir-cell:hover,
  .f-dir-cell:focus-visible,
  .f-dir-cell:hover .f-dir-media img,
  .f-dir-cell:focus-visible .f-dir-media img,
  .f-poster-frame:hover {
    transform: none;
  }
}


/* =========================================================== 12. Single product

   The product page keeps base's structure (gallery, info column, then the
   shared rich detail partial) because that content is the same on every
   Coway site. Only the surfaces change, so this is a restyle rather than a
   template rewrite: flat bordered panels and hairlines instead of base's
   lifted cards, matching the ledger product card and the directory band.
   ========================================================================== */

.pd-breadcrumb {
  font-size: 0.85rem;
  color: var(--ink-2);
  padding-block: clamp(20px, 2.5vw, 30px) 0;
}

.pd-breadcrumb a { color: var(--ink-2); text-decoration: none; }
.pd-breadcrumb a:hover { color: var(--accent); }

.pd-gallery .pd-main {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--media);
  box-shadow: none;
}

.pd-thumbs {
  gap: 10px;
  margin-top: 12px;
}

.pd-thumb {
  border: 1px solid var(--line);
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--media);
  box-shadow: none;
  transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.pd-thumb.active,
.pd-thumb:hover { border-color: var(--accent); }

/* The info column becomes one bordered panel, the same surface as a ledger
   card, so the page reads as part of this skin rather than base's default. */
.pd-info {
  align-self: start;
  padding: clamp(22px, 2.6vw, 32px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: none;
}

.pd-info h1 {
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.028em;
  margin: 0;
}

.pd-sku {
  display: inline-block;
  margin: 10px 0 0;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 700;
}

.pd-price {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.pd-tagline {
  color: var(--ink-2);
  line-height: 1.6;
  margin-top: 10px;
}

/* Plans are hairline separated rows, not stacked cards. */
.pd-plans {
  margin-top: 18px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.pd-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.pd-plan + .pd-plan { box-shadow: inset 0 1px 0 var(--line); }

.pd-plan b { font-size: 0.97rem; font-weight: 650; color: var(--ink); display: block; }
.pd-plan small { font-size: 0.84rem; color: var(--ink-2); display: block; margin-top: 2px; }

.pd-plan-price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-strong);
  white-space: nowrap;
}

.pd-meta {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
}

.pd-meta li,
.pd-meta > div {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.pd-info .btn { width: 100%; justify-content: center; }

@media (max-width: 860px) {
  .pd-info { padding: 20px; }
}


/* ======================================================= 13. Promotions + legal

   The last three pages kept base's styling while the rest of the skin moved on,
   so they read as a different site. Same treatment as everywhere else here: flat
   bordered surfaces and hairlines instead of tinted pills and lifted cards, and
   the ghosted index numeral as the recurring graphic mark.
   ========================================================================== */

/* The three promotion jumps were soft tinted pills in an even 3-up. Here they are
   a hairlined row of flat tiles, numbered, so they read as a short index into the
   page rather than as three buttons competing with the CTAs below them. */
.promo-tabs {
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface);
}

.promo-tab {
  position: relative;
  justify-content: flex-start;
  text-align: left;
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2vw, 26px);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.015em;
  transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

.promo-tab + .promo-tab {
  box-shadow: inset 1px 0 0 var(--line);
}

.promo-tab::after {
  content: counter(promo-tab, decimal-leading-zero);
  counter-increment: promo-tab;
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  opacity: 0.12;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.3s ease;
}

.promo-tabs {
  counter-reset: promo-tab;
}

.promo-tab:hover,
.promo-tab:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-strong);
  transform: none;
}

.promo-tab:hover::after,
.promo-tab:focus-visible::after {
  opacity: 0.22;
}

/* Legal pages are long-form reading, so the panel earns its keep: it holds the
   measure and separates the text from the page wash without lifting it. */
.legal {
  max-width: 820px;
  padding: clamp(28px, 4vw, 56px) clamp(22px, 4vw, 60px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.legal h1 {
  letter-spacing: -0.03em;
}

/* The date sits under a hairline rather than floating as grey text, which gives
   the article a masthead and a clear start to the body. */
.legal .legal-date {
  padding-bottom: clamp(18px, 2.4vw, 26px);
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  letter-spacing: 0.01em;
}

/* Numbered section marks, matching the directory tiles and the promo tabs. */
.legal h2 {
  position: relative;
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--line);
  letter-spacing: -0.015em;
}

.legal a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.legal a:hover {
  text-decoration-color: var(--accent);
}

@media (max-width: 640px) {
  /* One per row, so the vertical hairline becomes a horizontal one. */
  .promo-tab + .promo-tab {
    box-shadow: inset 0 1px 0 var(--line);
  }

  .legal {
    padding: 22px 18px;
  }
}