/* Amer about, design 1 — "TRUE SOUND" (home-headphone.html:1553-1568:
 * .section-about.flat-spacing-6 > .container > .row.justify-content-center >
 * .col-lg-10.text-center, holding p.h6.text-primary.fw-semibold.mb-16,
 * p.h3.fw-medium.mb-40.text-capitalize and a.tf-btn.animate-btn.mx-auto).
 * Measured on the bought template at 1440/1200/1024/768/425/390:
 *
 *   Container: .container — 1440px with 15px gutters, this theme's default
 *     --amer-page-width/--amer-gutter, so nothing is set on the section.
 *   Column: .col-lg-10 — 83.3333% of the row from 992px (1200px at 1440,
 *     1000 at 1200, 853.33 at 1024), 100% below it; 15px of padding on each
 *     side, so the text runs 1170 / 970 / 823.33px wide, and 738 / 395 /
 *     360px at 768 / 425 / 390. text-align: center throughout.
 *   Section spacing: .flat-spacing-6 (styles.css:1188) — 71px top and 80px
 *     bottom (not a symmetric pair), 60/60 from 991px down, 40/40 from 425px
 *     down. Its own breakpoints, not the theme's usual 767px phone line, so
 *     the -mobile controls take effect at 991px here (the same tiers
 *     gallery-1.css and testimonials-1.css already use for their
 *     own flat-spacing classes).
 *   Eyebrow (p.h6.text-primary.fw-semibold.mb-16): 20px on a 28px line,
 *     weight 600, in the template's --primary #DC4646 — the theme's accent —
 *     16px above the statement. Not the shared .amer-eyebrow (14px, tracked,
 *     uppercase, muted): this line is an h6, drawn at full size and never
 *     transformed (the template's words are typed in capitals).
 *   Statement (p.h3.fw-medium.mb-40.text-capitalize): clamp(28px,3.8vw,40px)
 *     on a clamp(36px,4.5vw,48px) line (40/48 at 1440 and 1200, 38.91/46.08
 *     at 1024, 29.18/36 at 768, 28/36 at 425 and 390), weight 500,
 *     text-transform capitalize, --text #101010, 40px above the button.
 *     Tracking is .01em — `.section-about .h3` (styles.css:20294) overrides
 *     the .05em every other h3 on the page carries, so the theme's
 *     --amer-ls-title is not used here; .01em is also look 3's own heading
 *     tracking, so one value serves all three looks. Arabic is never tracked.
 *     Drawn as the section's h2 (the block has no other heading; SEO: the
 *     page's h1 lives elsewhere), at the h3 size the template gives it.
 *   Button (a.tf-btn.animate-btn): the shared .amer-btn is this template's
 *     .tf-btn — 44px tall, 58px from 1200px, padding 24/32px, 16px/600 on a
 *     26px line, gap 12px, filled --text with white text. Only two things
 *     are this block's own: .tf-btn has no hover colour of its own
 *     (styles.css:7795-7813 — the shared .amer-btn darkens to
 *     --amer-primary-hover, so the resting fill is restated below), and
 *     .animate-btn sweeps a light band across it on hover (styles.css:7885-
 *     7910, keyframes shine-reverse, 1s), the same technique
 *     product-thumbs-3.css already uses for the same template class.
 *
 * Deliberate differences, all recorded: the fonts are the look's (look 1
 * loads the template's own DM Sans), colours run through the tokens so the
 * three looks recolour the band, and the button's radius is
 * --amer-radius-button (999px in look 1) where the template writes 60px —
 * both fully round a 44/58px pill, and the token is what a merchant's own
 * radius setting reaches.
 *
 * The optional paragraph under the statement (`text`) has no counterpart in
 * the template block: an added merchant control that renders nothing when
 * empty, so the template match is unaffected. It takes the template's body
 * type (16px/26px, --amer-muted, the tone .amer-head__text uses) and the
 * statement's own 40px gap above the button.
 *
 * Four things below are states the template block never shows, so none of them
 * touches the match (35 measured pairs, 0 differences): the ink
 * (--amer-about-ink, the merchant's `text_color`), the ground under the copy
 * when a background picture is set, the keyboard ring, and the still hover cue
 * under prefers-reduced-motion. Each carries its own measurement where it is
 * written.
 */
.mt-section.amer-about--d1 {
  padding-block: var(--mt-space-top, 71px) var(--mt-space-bottom, 80px);
}
@media (max-width: 991px) {
  .mt-section.amer-about--d1 {
    padding-block: var(--mt-space-top-mobile, var(--mt-space-top, 60px)) var(--mt-space-bottom-mobile, var(--mt-space-bottom, 60px));
  }
}
@media (max-width: 425px) {
  .mt-section.amer-about--d1 {
    padding-block: var(--mt-space-top-mobile, var(--mt-space-top, 40px)) var(--mt-space-bottom-mobile, var(--mt-space-bottom, 40px));
  }
}

.amer-about--d1 .amer-about__col { text-align: center; }
@media (min-width: 992px) {
  .amer-about--d1 .amer-about__col { inline-size: 83.333333%; }
}

/* ---- The ink -------------------------------------------------------------
   Every line of copy reads --amer-about-ink and falls back to the colour the
   template block uses, so look 1 on a plain page is unchanged. The merchant's
   `text_color` writes the variable inline on the section (inline beats the
   rule below), and a background picture turns it white — see "the ground".  */

.amer-about--d1 .amer-about__eyebrow {
  font-size: var(--amer-fs-h6);
  line-height: 28px;
  font-weight: 600;
  /* The template's --primary. --amer-accent-text is the same colour in looks
     1 and 2 and the look's readable cut in look 3, whose gold would sit at
     2.2:1 on its ivory. */
  color: var(--amer-about-ink, var(--amer-accent-text));
  margin-block-end: 16px;
}

.amer-about--d1 .amer-about__title {
  font-family: var(--amer-font-heading);
  font-size: var(--amer-fs-h3);
  line-height: clamp(36px, 4.5vw, 48px);
  font-weight: var(--amer-fw-heading);
  letter-spacing: .01em;
  /* No text-transform: the template capitalises every word of its sample
     copy, which turned a merchant's real sentence into «I Put It In The
     Reading Corner…» (visual review, 2026-09-23); the words show as typed. */
  color: var(--amer-about-ink, var(--amer-heading));
  margin-block-end: 40px;
}
/* Arabic suffers from tracking (core.css sets --amer-ls-title to 0 in
   RTL for the same reason); this design writes its own value, so it resets
   its own. */
[dir="rtl"] .amer-about--d1 .amer-about__title { letter-spacing: 0; }

/* The added paragraph has no counterpart in the template block, so its
   measure is ours to set: uncapped it inherits the column and runs 1170px at
   1440, which put 85 characters on one line (measured) — far past a readable
   line. 640px is the width the theme already gives a centred muted paragraph
   under a centred heading (.amer-shop-head__text, .amer-cart-title__text in
   category.css/cart-page.css), so this design does not invent a second
   number. The statement and the button are untouched: they still run the
   full column, which is what the template measures. */
.amer-about--d1 .amer-about__text {
  max-inline-size: 640px;
  margin-inline: auto;
  font-size: var(--amer-fs-body);
  line-height: 26px;
  color: var(--amer-about-ink, var(--amer-muted));
  margin-block-end: 40px;
}

/* .tf-btn keeps its fill on hover; only the sweep moves.
   white-space: the template's .tf-btn (styles.css:7795-7813) never sets it,
   so its label wraps; the shared .amer-btn holds every label on one line
   (core.css:191). With the template's own "Read About Us" the two are
   the same box, but a merchant who types a real sentence got a button wider
   than the phone: 457.5px at x=15 on a 390 viewport, cut off mid-word,
   invisible to a page-overflow check because `body` computes overflow-x:
   clip. The template's own button with that same label is 360x44, inside the
   page. So this block restores the template's value, and adds the two guards
   the template does not need: a single unbroken word may break, and the
   button may never be wider than the column it sits in. */
.amer-about--d1 .amer-about__button {
  position: relative;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  max-inline-size: 100%;
  /* .amer-btn's own list is background-color, color, border-color
     (core.css:191) and it overrides the :where() list that carried
     box-shadow, so the keyboard ring below snapped on with no transition
     (measured: transitionProperty on the focused button). The three template
     properties keep the template's .3s; the ring is faster, as a cue that
     answers a key press should be. */
  transition: background-color .3s var(--amer-ease), color .3s var(--amer-ease),
              border-color .3s var(--amer-ease), box-shadow .2s var(--amer-ease);
}
.amer-about--d1 .amer-about__button:hover,
.amer-about--d1 .amer-about__button:focus-visible {
  background: var(--amer-primary);
  color: var(--amer-on-primary);
}
/* Keyboard focus. The standing rule is "focus-visible shows the hover
   state", but this button's hover IS the 1s sweep and the template gives
   .tf-btn no colour change, so a focused button ends up pixel-identical to
   an idle one: measured at 1500ms the shine has parked off the edge while
   :focus-visible still matches, with outline none and box-shadow none.
   (Letting the shared .amer-btn:focus-visible darken to --amer-primary-hover
   instead is not a cue either: 1.02:1 against the resting fill.) So the
   keyboard cue is a two-layer ring — the look's page colour, then its
   heading ink — which reads on a light section through the dark layer and on
   a dark one through the light layer. It is a shadow, not an outline, and
   :focus-visible never fires on a mouse click or a tap, so rule 1 stands.
   The same gap exists on every filled .amer-btn in the theme; amer-core is
   not this section's to edit, so it is fixed here and reported. */
.amer-about--d1 .amer-about__button:focus-visible {
  box-shadow: 0 0 0 2px var(--amer-bg), 0 0 0 4px var(--amer-heading);
}
/* The template writes the sweep with physical `left` (styles.css:7895-7903,
   keyframes shine-reverse at :3979) because it only ever runs LTR. Written
   that way here, the band parked at left:-100% lands past the END side in
   Arabic, which gives the (overflow:hidden) button a scrollable area of
   exactly twice its width — 214px against a 107px button at ar/1440 — and
   the sweep still travelled right-to-left instead of mirroring. The logical
   pair is the same animation in English and its mirror in Arabic, and the
   button measures 107/107 again. */
.amer-about--d1 .amer-about__button::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -100%;
  inline-size: 100%;
  block-size: 100%;
  /* The template's white sweep, in the button's own text colour (white on
     the dark buttons of looks 1-2), so no colour is written here. */
  background-image: linear-gradient(120deg, transparent 20%, color-mix(in srgb, var(--amer-on-primary) 40%, transparent), transparent 70%);
  opacity: .6;
  pointer-events: none;
}
.amer-about--d1 .amer-about__button:hover::after,
.amer-about--d1 .amer-about__button:focus-visible::after { animation: amer-about-shine 1s forwards; }
@keyframes amer-about-shine {
  from { inset-inline-start: 100%; }
  to { inset-inline-start: -100%; }
}
@media (prefers-reduced-motion: reduce) {
  .amer-about--d1 .amer-about__button:hover::after,
  .amer-about--d1 .amer-about__button:focus-visible::after { animation: none; }
  /* With the sweep off, the button had NO hover feedback at all: measured with
     reducedMotion:'reduce', the background, the colour, the band's own offset
     and its animation-name were the same four values at rest and after
     hovering. The standing rule is that every button answers the pointer. The
     shared .amer-btn darkening is not an answer here — --amer-primary-hover
     measures rgb(14,14,14) against the resting rgb(16,16,16), 1.02:1, which is
     why the block restates the resting fill in the first place. So the cue is
     the template's own shine, held still: the band parks over the button
     instead of travelling across it. No animation, no transition, no
     movement — the same light the pointer earns on a normal machine. */
  .amer-about--d1 .amer-about__button:hover::after,
  .amer-about--d1 .amer-about__button:focus-visible::after { inset-inline-start: 0; }
}

/* ---- The ground, when the merchant sets a background picture -------------
   The panel offers bg_img + overlay on every section, and this block's copy is
   the template's dark type on a white page. Measured on the painted pixels
   (hide the element, photograph the 4x4 behind its centre, restore) at 1440 in
   both languages, with the template's own banner-41.jpg under a #000 overlay at
   55%: the statement read 2.68:1, the paragraph 1.70:1 and the eyebrow 3.11:1 —
   the h2 a shadow and the paragraph a ghost. An overlay is a wash over whatever
   the merchant uploaded, so it cannot promise a number; the surface has to
   (conventions.md). So in this state, and only in this state, the copy sits on
   its own ground and the ink turns white. Re-measured on the painted pixels,
   both languages: the same banner and overlay now read 18.56:1 (eyebrow),
   15.63:1 (statement) and 16.75:1 (paragraph); over the palest picture in the
   template (banner-57.jpg, mean 226/255) with no overlay at all — the worst
   ground a merchant can reach — all three read 6.10:1. `text_color` overrides
   the ink from the panel (an inline custom property on the section beats this
   rule): the gold #ffe9b0 measured 13.05–15.49:1. The button is untouched,
   because its own white-on-#101010 label measures 17.08:1 on the ground.
   Nothing here can reach a section without a picture, so the template match is
   unaffected — 35 measured pairs against home-headphone, 0 differences. */
.amer-about--d1:has(> .mt-section__background) {
  --amer-about-ink: #fff;
}
.amer-about--d1:has(> .mt-section__background) .amer-about__col {
  padding-block: 48px;
  padding-inline: 40px;
  border-radius: var(--amer-radius-card);
  /* A literal, not a token: it is a wash whose job is a contrast number, not a
     colour of the look. 60% is what makes white read at 4.5:1 over the palest
     picture a merchant can upload (a white photograph composites to 102/255). */
  background: rgba(0, 0, 0, .6);
}
@media (max-width: 767px) {
  .amer-about--d1:has(> .mt-section__background) .amer-about__col {
    padding-block: 32px;
    padding-inline: 20px;
  }
}
/* A browser without :has() keeps the dark type on the picture, so the
   merchant's own text_color is the way out there; it is the same fallback the
   rest of the theme's :has() rules carry (category-carousel-3.css and -8,
   featured-list.css). */