/* ==============================================================
   WaifuWorld — WordPress port: accumulated fixes
   ==============================================================
   Load this file AFTER ww-custom.css / ww-landing.css / ww-header.css
   / ww-before-after.css / ww-faq.css. Every rule below corrects a
   real, verified defect found while porting the Shopify theme to
   static HTML/CSS. Each is commented with what was wrong and where
   it was found, so nothing here is a mystery override.
   ============================================================== */

/* ----------------------------------------------------------------
   FIX 1 — ww-lp-frame--r4-3 was never defined
   Found on: wall-scrolls-features-page, dakimakura-features-page
   The Liquid template emits this class as a ratio option, but
   ww-landing.css never defines it, so affected rows fell back to
   the base .ww-lp-frame rule (flex:1 1 0; max-width:520px) with
   object-fit:cover forcing a 4:3 crop — cropping portrait images
   (e.g. the 2-Way Tricot infographic, 900x1274) and stretching
   square ones oddly.
   Fix: take the frame out of flex-grow entirely (flex:0 0 auto,
   not just width) so max-width reliably caps it and the parent's
   justify-content:center can center it, then let the image keep
   its natural proportions instead of being cropped.
   ---------------------------------------------------------------- */
.ww-lp-frame--r4-3 {
  flex: 0 0 auto;
  max-width: 520px;
  width: fit-content;
}
.ww-lp-frame--r4-3 img {
  aspect-ratio: auto;
  object-fit: contain;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 560px;
  display: block;
}

/* ----------------------------------------------------------------
   FIX 2 — life-size dakimakura photo in a mismatched frame ratio
   Found on: dakimakura-features-page ("150 x 50 cm. The real thing.")
   dakimakura_life_size_photo.webp is square (700x699), but the row
   was configured with ratio r1-3 (180px wide, meant for tall strips
   like the Saber front/back shots at 440x1400). Result: the square
   photo got squeezed into a narrow vertical sliver.
   This is a content/settings issue, not a universal CSS bug, so the
   fix is scoped to a marker class rather than applied to all r1-3
   frames — the genuinely tall r1-3 rows are correct as-is and must
   not be touched.
   Apply class="ww-lp-frame ww-lp-frame--r1-3 ww-fix-square" to that
   one row's frame div.
   ---------------------------------------------------------------- */
.ww-lp-frame--r1-3.ww-fix-square {
  flex: 0 0 auto;
  max-width: 460px;
  width: fit-content;
}
.ww-lp-frame--r1-3.ww-fix-square img {
  aspect-ratio: auto;
  object-fit: contain;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 460px;
  display: block;
}

/* ----------------------------------------------------------------
   FIX 3 — Shop-the-look header had no font-family and an invalid
   font-weight
   Found on: frontpage ("Show Your Passion" / "Choose your merch")
   sections/ww-shop-the-look.liquid's h2/p rules never declare
   font-family, relying on inheritance from Shopify's base theme
   CSS (which this port doesn't include). It also sets
   font-weight:950, which is invalid (CSS caps at 900) and gets
   silently dropped. Net effect without the base theme: default
   browser serif font, no weight applied.
   ---------------------------------------------------------------- */
#shopify-section-template--32017147232587__ww_shop_the_look_9x7zgE .ww-stl-header h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: #fff7ff;
  background: linear-gradient(90deg, #ff6de3 0%, #8b5cff 58%, #6eefff 100%);
  background-size: 160% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 18px rgba(255, 79, 216, 0.18), 0 10px 28px rgba(0, 0, 0, 0.34);
}
#shopify-section-template--32017147232587__ww_shop_the_look_9x7zgE .ww-stl-header p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
  color: rgba(235, 250, 255, 0.88);
  background: none;
  -webkit-text-fill-color: rgba(235, 250, 255, 0.88);
  text-shadow: 0 0 12px rgba(53, 231, 255, 0.12);
}

/* ----------------------------------------------------------------
   STILL LIVE ON SHOPIFY — worth fixing at the source too
   ----------------------------------------------------------------
   Fixes 1 and 3 above are genuine bugs in the current theme, not
   artifacts of this port. If waifuworld.us stays live during
   migration, both are cheap fixes to apply there directly:
     - add a .ww-lp-frame--r4-3 rule to assets/ww-landing.css
     - add font-family/font-weight to .ww-stl-header h2/p in
       sections/ww-shop-the-look.liquid
   Fix 2 is a theme-editor setting, not code: switch the life-size
   photo row's ratio from 1-3 to 4-3 (or natural) in the block
   settings for that section.
   ---------------------------------------------------------------- */