/** Shopify CDN: Minification failed Line 1134:61 Unexpected "(" **/ /* am-product-title.css — AM26 PDP title weight + product subtitle * Created 2026-07-27 on the "AM26 subtitle + title weight" draft theme. * * WHY THIS FILE EXISTS * Audio-Technica product titles were normalised to "Brand + model" on * 2026-07-27, deliberately dropping the category noun. The PDP therefore needs * a short descriptive subtitle to say what the product actually is: * AT-VM95E (doza, 243 RON) and AT-VMN95E (ac de rezerva, 159 RON) now differ by * a single letter, and until the subtitle ships they are distinguishable only * by price. * * CASCADE * Loaded from layout/theme.liquid immediately after custom-fields.css, which is * the last stylesheet in on this theme. That puts it last at equal * specificity, so no !important is needed here — see docs/theme-architecture.md * "Read this first" #1 for why load order (not selectors) is what usually bites. * * TOKENS * Uses the theme's existing --main_* / --size_* variable layer only. It does NOT * hardcode a font stack or a px size, so it follows whichever typography variant * is active (baseline screen.css, or am-type.css under ?am_type=). */ /* ---- 1. Title: make it the dominant element in the block ----------------- */ /* MEASURED ON THIS THEME (2026-07-27, draft 198758793551, via getComputedStyle): --main_h1 .. --main_h3 = 22px (the heading scale is flattened; h1, h2 and h3 all resolve to the SAME 22px) --main_fz = 14px --main_fw_h = 700 --main_fw_h_strong = 900 So weight alone cannot make the title dominant — at 22px it was competing with h2/h3 on the same page at identical size. The size step below is therefore deliberate and PDP-scoped: it does not touch --main_h1 itself, so no other heading anywhere on the site changes. */ .am-product-title { /* Heaviest weight the active type system offers (900 here; the am-type.css preview layer maps it to 600). Not a hardcoded 700. */ font-weight: var(--main_fw_h_strong, 700); /* Clamp from the theme's own h1 token up to a genuinely dominant size. max() keeps this a step UP from whatever --main_h1 becomes later, so if the type scale is ever fixed properly this rule degrades gracefully instead of shrinking the title back down. */ font-size: max(var(--main_h1, 22px), clamp(26px, 1.4rem + 0.9vw, 34px)); /* Slight negative tracking keeps a heavier, larger title optically tight rather than letting the added weight read as sprawl. */ letter-spacing: var(--main_ls_h, -0.01em); line-height: var(--main_lh_hc, 1.15); /* Pull the subtitle up close so the two read as one titling unit. */ margin-bottom: 6px; } /* SPECIFICITY TRAP (runda 7, 2026-07-29) — the title markup carries the theme's own `.m5` spacing class, and screen.css sets `#root .m5 { margin-bottom: 5px }` at specificity (1,1,0). `.am-product-title` is (0,1,0), so the rule above LOSES on margin no matter how late this file loads — load order only decides ties. Measured: the 6px above never applied; the live value was 5px. The pair below re-states the margins at (1,1,0) so they actually win. Titling unit: title and subtitle stay tight to each other (8px), and the separation from the price comes from the price's own top margin — see am-pdp-info.css §6b. */ #root .am-product-title { margin-bottom: 8px; } #root .am-product-subtitle { margin-bottom: 0; } /* ---- 2. Subtitle: clearly secondary ------------------------------------- */ /* Deliberately lighter, smaller and muted relative to the title: - weight: the body regular weight, against the title's strong weight - size: --main_lead (16px here) against the title's 26-34px - colour: a muted grey derived from the theme's body ink COLOUR TRAP — do not "simplify" this back to a token chain. The obvious-looking `var(--primary_text_light, var(--secondary_text, …))` renders the subtitle WHITE ON WHITE and invisible on this theme: --primary_text_light is UNSET, so it falls through to --secondary_text, which is #ffffff. On this theme --secondary_text means "text that sits on a dark background", NOT "muted text" — there is no muted-ink token. Verified by getComputedStyle on the draft, 2026-07-27. colour-mix keeps the subtitle tied to the theme's own ink (--primary_text, #303030) rather than hardcoding an unrelated grey, with a plain hex fallback for browsers without colour-mix. */ .am-product-subtitle { margin-top: 0; margin-bottom: 0; max-width: 46ch; /* keeps a long subtitle to a readable single-idea line */ /* 82% ink keeps the subtitle visibly muted against the near-black title while still clearing WCAG AA (4.5:1) for normal-size body text on the white PDP background. An earlier 68% mix measured 2.54:1 and FAILED — do not lighten this without re-measuring the contrast ratio. */ color: #56544f; color: color-mix(in srgb, var(--primary_text, #303030) 82%, #ffffff); font-family: var(--main_ff, inherit); font-size: var(--main_lead, var(--main_fz, 16px)); font-weight: var(--main_fw, 400); line-height: 1.45; letter-spacing: 0; text-transform: none; /* never inherit the title's uppercase setting */ } /* The theme can uppercase product titles via settings.product_titles_caps. That must not cascade into the subtitle. */ .am-product-title.text-uppercase + .am-product-subtitle { text-transform: none; } /* ---- 3. Mobile ---------------------------------------------------------- */ @media screen and (max-width: 767px) { .am-product-subtitle { /* Step down with the mobile type scale so the subtitle stays subordinate on small screens, where the title itself shrinks. */ font-size: var(--mob_lead, var(--mob_fz, 15px)); max-width: none; } } /* ---- 4. Product list / search cards ------------------------------------- */ /* The same custom.product_subtitle field, rendered on the collection and search result cards by snippets/product-item.liquid. It lives INSIDE the card's

, so it inherits heading weight, size and letter-spacing and must be reset back to body-text appearance — otherwise it reads as a second title. display:block puts it on its own line under the product name without needing a wrapper element. / .am-card-subtitle { display: block; margin: 2px 0 0; color: #56544f; color: color-mix(in srgb, var(--primary_text, #303030) 82%, #ffffff); font-family: var(--main_ff, inherit); font-size: var(--main_fz, 14px); font-weight: var(--main_fw, 400); line-height: 1.4; letter-spacing: normal; / headings carry --main_ls_h; body text should not / text-transform: none; / never inherit settings.product_titles_caps / } / ================================================================== PRP everywhere, black + faded — never red (Tudor, 2026-07-29: "schimba peste tot unde e pret de lista cu rosu sa fie PRP PRET cu negru opacity scazut"). This file is the right home because theme.liquid loads it on EVERY template, unlike am-collection-premium.css which is gated to collection/search. The collection card had already been fixed in isolation; the cart drawer, the PDP, upsell blocks, quickshop and the search dropdown were all still showing red "Pret de lista". Two halves to the change: 1. The LABEL is a locale string, not CSS — `product.list_price`, now "PRP" (ro-RO) / "RRP" (en.default). It is printed by a `content:` pseudo-element in monkeysmart.css and by an inline