/* CWL-01 — "night and day", 2026-09-30.

   The page opens at night: the lamp is the only light source, and the seven
   colours appear as glows in the dark. Where the copy turns to heating and
   materials, the page turns its own lights on — warm paper daylight — and the
   waitlist returns to night as the bookend. One page, two states: the product's
   claim, performed by the page itself.

   Colour lives in product-theme.css (night defaults, .paper-chapter overrides);
   this file holds layout, type and light placement only. */

body.candle-v1 { margin: 0; overflow-x: hidden; background: var(--page-bg); color: var(--text-primary); font-family: var(--font-body); }
body.candle-v1 * { box-sizing: border-box; }
body.candle-v1 img { display: block; max-width: 100%; }
body.candle-v1 figure, body.candle-v1 p, body.candle-v1 h1, body.candle-v1 h2, body.candle-v1 h3 { margin-top: 0; }

.candle-shell { width: min(calc(100% - 64px), var(--container-wide)); margin-inline: auto; }

.skip-link { position: fixed; z-index: 100; top: 14px; left: 14px; padding: 10px 15px; background: var(--surface-emphasis); color: var(--text-primary); }
.skip-link:not(:focus-visible) { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }

/* --- Header / footer: the night's edges -------------------------------- */

.site-header { position: relative; z-index: 20; min-height: 68px; border-bottom: 1px solid var(--border-subtle); background: var(--page-bg); }
.header-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 68px; }
.logo-link { color: var(--text-primary); font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; text-decoration: none; letter-spacing: -.02em; }
.site-header nav { display: flex; justify-content: flex-end; gap: 28px; }
.site-header nav a { min-height: var(--touch-target-min); display: inline-flex; align-items: center; color: var(--text-secondary); font: 600 .78rem var(--font-utility); text-decoration: none; letter-spacing: .04em; }
.site-header nav a:hover { color: var(--accent-primary); }

.site-footer { padding: 34px 0; border-top: 1px solid var(--border-subtle); background: var(--surface-default); color: var(--text-secondary); }
.footer-grid { display: flex; justify-content: space-between; gap: 28px; align-items: center; }
.footer-grid > span, .footer-links a { color: var(--text-muted); font: 600 .72rem var(--font-utility); }
.footer-links { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-links a { min-height: var(--touch-target-min); display: inline-flex; align-items: center; text-decoration: none; }
.footer-links a:hover { color: var(--accent-primary); }

/* --- Shared pieces ------------------------------------------------------ */

.product-name, .section-label { margin-bottom: 22px; color: var(--accent-primary); font: 700 .72rem var(--font-utility); letter-spacing: .16em; text-transform: uppercase; }

.candle-button { min-height: var(--touch-target-min); display: inline-flex; align-items: center; justify-content: center; padding: 14px 24px; border: 0; border-radius: var(--radius-sm); color: var(--text-on-accent); font: 700 .84rem var(--font-utility); text-decoration: none; letter-spacing: .02em; cursor: pointer; transition: transform .16s ease, background .16s ease, box-shadow .16s ease; }
.candle-button--light { background: linear-gradient(135deg, var(--cta-gradient-from), var(--cta-gradient-to)); }
.candle-button--light:hover { transform: translateY(-2px); background: linear-gradient(135deg, var(--cta-gradient-from-hover), var(--cta-gradient-to-hover)); }

/* The studio-photo plate (white ground, feathered) is retired with the unlit
   photo; the ceramic macro is a dark render shown square, uncropped — its
   bright detail sits off-centre, so a 4:5 cover crop would eat into it. */
.detail-media img { width: 100%; height: 100%; object-fit: cover; }

.hero-media figcaption, .detail-media figcaption { position: absolute; z-index: 2; right: 16px; bottom: 13px; padding: 6px 10px; background: var(--page-bg); color: var(--text-muted); font: 600 .72rem var(--font-utility); letter-spacing: .04em; }

/* --- Hero: the lamp is the page's light source -------------------------- */

.candle-hero { position: relative; overflow: hidden; padding: 56px 0 96px; background: var(--page-bg); }
.candle-hero::before { position: absolute; z-index: 0; inset: -12% -18% auto auto; width: 76vw; height: 92%; background: var(--hero-glow); content: ""; pointer-events: none; }
.hero-composition { position: relative; display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); align-items: center; min-height: 660px; }
.hero-copy { position: relative; z-index: 2; padding: 42px 0; }
.hero-copy h1 { max-width: 640px; margin-bottom: 28px; color: var(--text-primary); font: 400 clamp(3.4rem, 6vw, 6.2rem)/0.95 var(--font-display); letter-spacing: -.055em; }
.hero-copy h1 em { color: var(--accent-primary); font-style: italic; }
.hero-lede { max-width: 500px; margin-bottom: 24px; color: var(--text-secondary); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.65; }
.hero-tags { max-width: 500px; margin-bottom: 38px; color: var(--text-muted); font: 600 .78rem/1.8 var(--font-utility); letter-spacing: .02em; }
.hero-tags span { padding-inline: 5px; color: var(--accent-primary); }

.hero-media { position: relative; z-index: 1; width: min(100%, 600px); aspect-ratio: 4/5; margin: 0 0 0 auto; overflow: visible; }
/* The hero is a real night shot now: no white-ground plate, no painted light
   pool — the photo brings its own darkness. Only its outermost rim dissolves
   into the page's night, so no rectangle seam shows where the two darks meet. */
.hero-media img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: var(--night-edge-feather); mask-image: var(--night-edge-feather); }

/* --- Independent light: deeper into the night ---------------------------- */

.light-section { position: relative; padding: 96px 0 104px; background: var(--page-bg-alt); color: var(--text-primary); }
.light-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px 76px; align-items: start; }
.light-copy { padding-top: 26px; }
.light-copy h2 { max-width: 560px; margin-bottom: 28px; color: var(--text-primary); font: 400 clamp(2.9rem, 4.8vw, 4.6rem)/0.98 var(--font-display); letter-spacing: -.05em; }
.light-copy > p:last-child { max-width: 480px; margin-bottom: 0; color: var(--text-secondary); font-size: 1.06rem; line-height: 1.7; }

/* The comparison, now carried by the diptych render: one room, two light
   systems, the panel labels beneath it naming each side. */
.comparison-photo { margin: 0; border: 1px solid var(--border-subtle); background: var(--stage-night); }
.comparison-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.comparison-labels { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border-subtle); }
.comparison-labels p { display: grid; gap: 6px; margin: 0; padding: 20px; }
.comparison-labels p + p { border-left: 1px solid var(--border-subtle); }
.comparison-labels strong { color: var(--text-primary); font: 700 .74rem var(--font-utility); letter-spacing: .04em; }
.comparison-labels span { color: var(--text-secondary); font-size: .82rem; line-height: 1.5; }
.comparison-photo figcaption { padding: 15px 20px; border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: .72rem; line-height: 1.55; }
.comparison-photo figcaption strong { color: var(--accent-primary); font: 700 .67rem var(--font-utility); letter-spacing: .08em; text-transform: uppercase; }

/* The seven colours as seven lamps on a shelf: same orb of light, seven
   hues, staggered like distances in one dark room. */
.color-spectrum { grid-column: 1/-1; display: grid; grid-template-columns: minmax(220px, .82fr) minmax(0, 2.18fr); gap: 26px 56px; align-items: end; padding-top: 56px; border-top: 1px solid var(--border-subtle); }
.color-spectrum h3 { max-width: 300px; margin: 0; color: var(--text-primary); font: 400 clamp(2rem, 3vw, 2.9rem)/1.04 var(--font-display); letter-spacing: -.04em; }
.color-spectrum .section-label { margin-bottom: 16px; }
.color-list { display: grid; grid-template-columns: repeat(7, minmax(48px, 1fr)); gap: 16px; align-items: end; }
.swatch { display: grid; justify-items: center; gap: 16px; color: var(--text-secondary); font: 600 .66rem/1.25 var(--font-utility); text-align: center; }
.swatch i { display: block; width: 84%; aspect-ratio: 1; border-radius: 50%; transition: filter .3s ease; }
.swatch:hover i { filter: brightness(1.18) saturate(1.06); }
.swatch--warm i { background: var(--glow-warm-yellow); }
.swatch--green i { background: var(--glow-green); }
.swatch--blue i { background: var(--glow-blue); }
.swatch--yellow i { background: var(--glow-yellow); }
.swatch--purple i { background: var(--glow-purple); }
.swatch--sky i { background: var(--glow-sky-blue); }
.swatch--white i { background: var(--glow-white); }
.mode-list { grid-column: 2; margin: -12px 0 0; color: var(--accent-primary); font: 700 .78rem/1.5 var(--font-utility); white-space: nowrap; }
.mode-list span { padding-inline: 4px; color: var(--text-muted); }
.color-note { grid-column: 2; margin: 6px 0 0; color: var(--text-muted); font-size: .72rem; line-height: 1.5; max-width: 640px; }

/* The purple room proves the section's claim with a picture: one lamp, one
   colour, no bulb wash. It reads as the swatches' room, so it sits under them
   and dissolves into the same night. */
.color-scene { grid-column: 2; max-width: 680px; margin: 44px 0 0; }
.color-scene img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; -webkit-mask-image: var(--night-edge-feather); mask-image: var(--night-edge-feather); }
.color-scene figcaption { margin: 10px 0 0; color: var(--text-muted); font-size: .72rem; line-height: 1.55; }
.color-scene strong { display: block; margin-bottom: 4px; color: var(--accent-primary); font: 700 .68rem var(--font-utility); letter-spacing: .08em; text-transform: uppercase; }

/* --- The page turns its lights on ----------------------------------------
   Ceramic, remote and everyday control sit on warm paper: the same object,
   in daylight, where materials and buttons are the subject. A thin amber
   line marks the switch — the one place night meets day. */

.ceramic-section { position: relative; padding: 104px 0 96px; background: var(--page-bg); }
.ceramic-section::before { position: absolute; top: 0; right: 0; left: 0; height: 1px; background: var(--sunrise-line); content: ""; }
.ceramic-layout { display: grid; grid-template-columns: minmax(300px, 1.05fr) minmax(280px, .95fr); gap: 9vw; align-items: center; }
.detail-media { position: relative; width: min(100%, 560px); aspect-ratio: 1/1; margin: 0 auto; overflow: hidden; border: 1px solid var(--border-subtle); background: var(--surface-stage); }
.ceramic-copy h2, .remote-copy h2, .waitlist-story h2, .specs-copy h2, .faq-copy h2 { max-width: 560px; margin-bottom: 24px; color: var(--text-primary); font: 400 clamp(2.6rem, 4.2vw, 4.2rem)/1 var(--font-display); letter-spacing: -.05em; }
.ceramic-copy > p:not(.section-label), .remote-copy > p:not(.section-label), .waitlist-story > p:not(.section-label) { max-width: 480px; margin-bottom: 32px; color: var(--text-secondary); font-size: 1.05rem; line-height: 1.7; }

/* Why flameless at all: the heat system's promise, as three plain ledger
   lines under the mechanism copy. */
.fragrance-line { color: var(--text-primary); }
.flameless-list { list-style: none; margin: 26px 0 0; padding: 0; }
.flameless-list li { display: grid; gap: 3px; padding: 13px 0; border-top: 1px solid var(--border-subtle); }
.flameless-list strong { color: var(--text-primary); font: 700 .82rem/1.4 var(--font-utility); letter-spacing: .02em; }
.flameless-list span { color: var(--text-secondary); font-size: .9rem; line-height: 1.55; }

.remote-section { padding: 88px 0; background: var(--page-bg-alt); }
.remote-layout { display: grid; grid-template-columns: minmax(280px, .74fr) minmax(0, 1.26fr); gap: 7vw; align-items: center; }
/* width:100% makes the box definite; with only the auto margin it would be
   content-sized and collapse to a sliver until the lazy image loads. */
.remote-composition { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 560px; margin-left: auto; }
.scene-photo { position: relative; aspect-ratio: 4/5; margin: 0; overflow: hidden; border: 1px solid var(--border-subtle); }
.scene-photo img { width: 100%; height: 100%; object-fit: cover; }
.scene-photo figcaption { position: absolute; right: 20px; bottom: 20px; left: 20px; padding: 14px 16px; background: var(--surface-default); color: var(--text-muted); font-size: .76rem; line-height: 1.55; }
.scene-photo strong { display: block; margin-bottom: 4px; color: var(--accent-primary); font: 700 .68rem var(--font-utility); letter-spacing: .08em; text-transform: uppercase; }

/* --- Everyday control: a ledger row, not a card wall --------------------- */

.convenience-section { padding: 88px 0 96px; background: var(--surface-emphasis); }
.convenience-layout { display: grid; grid-template-columns: minmax(160px, .34fr) minmax(0, 1.66fr); gap: 6vw; }
.convenience-layout > .section-label { margin: 10px 0 0; }
.convenience-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 0; }
.convenience-list article { padding: 6px 26px; border-left: 1px solid var(--border-default); }
.convenience-list article:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.convenience-list h2 { margin: 0 0 12px; color: var(--text-primary); font: 400 clamp(1.5rem, 2.2vw, 2.05rem)/1.1 var(--font-display); letter-spacing: -.03em; }
.convenience-list p { margin: 0; color: var(--text-secondary); font-size: .94rem; line-height: 1.6; }

/* --- Specifications: a hairline ledger, still daylight ------------------- */

.specs-section { padding: 88px 0 96px; background: var(--page-bg); }
.specs-layout, .faq-layout { display: grid; grid-template-columns: minmax(160px, .34fr) minmax(0, 1.66fr); gap: 6vw; }
.specs-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin: 40px 0 0; }
.specs-ledger div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; padding: 13px 0; border-top: 1px solid var(--border-default); }
.specs-ledger dt { color: var(--text-muted); font: 700 .68rem/1.7 var(--font-utility); letter-spacing: .1em; text-transform: uppercase; }
.specs-ledger dd { margin: 0; color: var(--text-primary); font-size: .95rem; line-height: 1.6; }
.specs-note { max-width: 560px; margin: 18px 0 0; color: var(--text-muted); font-size: .78rem; line-height: 1.55; }

/* --- FAQ: back to night, answers one click away -------------------------- */

.faq-section { padding: 96px 0 104px; background: var(--page-bg-alt); }
.faq-list { margin-top: 40px; }
.faq-list details { border-top: 1px solid var(--border-subtle); }
.faq-list details:last-child { border-bottom: 1px solid var(--border-subtle); }
.faq-list summary { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 19px 0; cursor: pointer; list-style: none; color: var(--text-primary); font: 600 1.02rem/1.45 var(--font-body); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; color: var(--accent-primary); font: 400 1.3rem/1 var(--font-body); transition: transform .2s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list summary:hover { color: var(--accent-primary); }
.faq-list details p { max-width: 620px; margin: 0 0 22px; color: var(--text-secondary); font-size: .96rem; line-height: 1.65; }

/* --- Waitlist: back to night --------------------------------------------- */

.waitlist-section { position: relative; padding: 104px 0 120px; background: var(--page-bg); }
.waitlist-section::before { position: absolute; top: 0; right: 0; left: 0; height: 1px; background: var(--sunrise-line); content: ""; }
.waitlist-composition { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(400px, .95fr); gap: 8vw; align-items: center; }
/* The height/width attributes on this img act as presentational hints; without
   height:auto the hinted size survives the narrowed width and the photo
   stretches. The frame is mostly darkness, so the night feather dissolves its
   edges into the page instead of ending in a hard rectangle. */
.waitlist-story img { width: min(100%, 400px); height: auto; margin-top: 44px; -webkit-mask-image: var(--media-feather); mask-image: var(--media-feather); }
.waitlist-panel { position: relative; z-index: 3; }
.waitlist-panel .shared-waitlist { min-height: 0; padding: 40px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-emphasis); box-shadow: var(--shadow-card); }
.waitlist-panel .waitlist-success { min-height: 0; border-radius: var(--radius-sm); }
/* The story image is an AI render; it carries the same render label as every
   other generated image on the page. */
.waitlist-story .story-caption { max-width: 400px; margin: 10px 0 0; color: var(--text-muted); font-size: .72rem; line-height: 1.5; }
/* Optional disclosure shares the form's control language and the FAQ's "+"
   marker; 44px keeps the tap target at the company minimum. */
.optional-fields { margin-top: 20px; border-top: 1px solid var(--border-subtle); }
.optional-fields summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; color: var(--text-muted); font: 650 .78rem/1.4 var(--font-utility); letter-spacing: .04em; }
.optional-fields summary::-webkit-details-marker { display: none; }
.optional-fields summary span { flex: none; padding: 3px 9px; border: 1px solid var(--border-default); border-radius: 999px; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.optional-fields summary::after { content: "+"; margin-left: auto; font-size: 1rem; transition: transform .2s ease; }
.optional-fields[open] summary::after { transform: rotate(45deg); }
.optional-fields__inner { display: grid; gap: 16px; padding: 6px 0 10px; }

/* --- Wide ---------------------------------------------------------------- */

@media (max-width: 1020px) {
  .candle-shell { width: min(calc(100% - 48px), var(--container-wide)); }
  .hero-composition { min-height: 540px; }
  /* Shorter hero at this width makes the 96px floor padding read as dead
     space (0.132 vs the 0.12 contract); tighten it for the tablet band only. */
  .candle-hero { padding-bottom: 72px; }
  .hero-copy h1 { font-size: clamp(3.1rem, 6.6vw, 4.8rem); }
  .light-layout { gap: 48px 40px; }
  .color-spectrum { grid-template-columns: minmax(200px, .9fr) minmax(0, 2.1fr); gap: 24px 36px; }
  .ceramic-layout { gap: 6vw; }
  .remote-layout { grid-template-columns: .8fr 1.2fr; gap: 5vw; }
  .waitlist-composition { gap: 5vw; }
  .convenience-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 0; }
  .convenience-list article:nth-child(3n+1) { padding-left: 26px; border-left: 1px solid var(--border-default); }
  .convenience-list article:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* --- Tablet: the ledger's two columns get too tight for words like
   "Independent" between here and the mobile breakpoint --------------------- */

@media (max-width: 900px) {
  .specs-ledger { grid-template-columns: 1fr; }
}

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 760px) {
  html { scroll-behavior: auto; }
  .candle-shell { width: min(calc(100% - 36px), var(--container-wide)); }
  .header-grid { grid-template-columns: 1fr auto; }
  .site-header nav { gap: 16px; }
  .site-header nav a { font-size: .7rem; }

  .candle-hero { padding: 36px 0 48px; }
  .candle-hero::before { inset: -30% -55% auto auto; width: 150vw; height: 78%; }
  .hero-composition { display: grid; grid-template-columns: 1fr; grid-template-areas: "name" "title" "lede" "tags" "cta" "media"; min-height: 0; }
  .hero-copy { display: contents; }
  .product-name { grid-area: name; margin-bottom: 18px; }
  .hero-copy h1 { grid-area: title; margin-bottom: 24px; font-size: clamp(3rem, 14.5vw, 4.4rem); }
  .hero-lede { grid-area: lede; margin-bottom: 18px; }
  .hero-tags { grid-area: tags; margin-bottom: 28px; }
  .hero-copy .candle-button { grid-area: cta; justify-self: start; }
  .hero-media { grid-area: media; width: 100%; max-width: 480px; margin: 36px auto 0; }

  .light-section { padding: 56px 0 64px; }
  .light-layout { grid-template-columns: 1fr; gap: 44px; }
  .light-copy { padding-top: 0; }
  .light-copy h2 { font-size: clamp(2.8rem, 13.5vw, 4rem); }
  .comparison-labels p { padding: 16px 14px; }
  .color-spectrum { grid-column: 1; grid-template-columns: 1fr; gap: 26px; padding-top: 42px; }
  .color-list { grid-template-columns: repeat(4, 1fr); gap: 22px 14px; }
  .mode-list, .color-note { grid-column: 1; }
  .mode-list { margin: 2px 0 0; }
  .color-note { margin: 0; }
  .color-scene { grid-column: 1; max-width: 560px; margin-top: 34px; }

  .ceramic-section { padding: 56px 0 64px; }
  .ceramic-layout { grid-template-columns: 1fr; gap: 52px; }
  .detail-media { width: 100%; max-width: 500px; }
  .ceramic-copy h2, .remote-copy h2, .waitlist-story h2, .specs-copy h2, .faq-copy h2 { font-size: clamp(2.4rem, 12.5vw, 3.6rem); }

  .remote-section { padding: 48px 0 56px; }
  .remote-layout { grid-template-columns: 1fr; gap: 44px; }
  .remote-composition { max-width: 440px; margin-inline: auto; }
  .scene-photo figcaption { right: 10px; bottom: 10px; left: 10px; padding: 10px 12px; }

  .convenience-section { padding: 56px 0 64px; }
  .convenience-layout, .specs-layout, .faq-layout { grid-template-columns: 1fr; gap: 26px; }
  .convenience-layout > .section-label { margin: 0; }
  .specs-section, .faq-section { padding: 56px 0 64px; }
  .specs-ledger { grid-template-columns: 1fr; gap: 0; }
  .faq-list { margin-top: 28px; }
  /* Reserve the toggle lane so wrapped question text can never crowd the '+'. */
  .faq-list summary { padding: 19px 44px 19px 0; }
  .convenience-list { grid-template-columns: 1fr; gap: 0; }
  .convenience-list article, .convenience-list article:nth-child(3n+1) { padding: 26px 0; border-left: 0; border-top: 1px solid var(--border-default); }
  .convenience-list article:first-child { border-top: 0; padding-top: 6px; }

  .waitlist-section { padding: 56px 0 72px; }
  .waitlist-composition { grid-template-columns: 1fr; gap: 40px; }
  .waitlist-story img { margin-top: 30px; }
  .waitlist-panel .shared-waitlist { padding: 28px 22px; }
  .footer-grid { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 420px) {
  .candle-shell { width: min(calc(100% - 28px), var(--container-wide)); }
  .site-header nav a:first-child { display: none; }
  .hero-copy h1 { font-size: clamp(2.85rem, 13.8vw, 3.6rem); }
  /* Stack the three differentiators as rows: hiding the mid-dots used to mash
     them into one unbroken run-on line at this width. */
  .hero-tags span { display: block; height: 0; padding: 0; overflow: hidden; }
  .hero-tags { max-width: none; }
  .comparison-labels { grid-template-columns: 1fr; }
  .comparison-labels p + p { border-top: 1px solid var(--border-subtle); border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}