/* ported from apps/storefront/app/globals.css:5-321 (frozen) — hand-written, NOT
   Tailwind-compiled (Conflicto 9): the `:root` vars/`body` rule/`.product-description *`
   richtext styles/`.dv-btn-anim` keyframes. `--background`/`--foreground` here are the
   LITERAL fallback values (`:5-8`); `layout/theme.liquid`'s own `{% style %}` block
   sets `--color-background`/`--color-foreground`/`--font-body-family` per-render from
   `settings.*` (DRO-157 136d PR 2 Task 2.1's own binding carry-over #5's exact literal).
   Fix round 1 (final-review-pr2.md M2): `body` now reads `--color-*` WITH a fallback to
   `--background`/`--foreground` — before this fix the vars `theme.liquid` sets were
   computed but never READ anywhere, so editing `color_background` in the theme editor
   did nothing (an inert setting the founder's own mantra bans, `feedback_ui_incompleta_
   nace_detras_de_una_feature_sin_plan.md`). The fallback keeps every OTHER color-*-less
   fixture/golden byte-identical: `var(--color-background, var(--background))` resolves
   to `--background` exactly when `--color-background` is unset. */

:root {
  --background: #ffffff;
  --foreground: #171717;
}

body {
  color: var(--color-foreground, var(--foreground));
  background: var(--color-background, var(--background));
  font-family: var(--font-body-family);
}

/* Rich Text Content Styles (Quill editor output) */
.product-description {
  line-height: 1.7;
}

.product-description h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
}

.product-description h2 {
  font-size: 1.3125rem; /* 21px */
  font-weight: 700;
  color: #1f2937;
}

.product-description h3 {
  font-size: 1.024rem; /* ~16.38px */
  font-weight: 700;
  color: #374151;
}

.product-description p {
  margin-bottom: 1rem;
}

.product-description strong,
.product-description b {
  font-weight: 700;
}

.product-description em,
.product-description i {
  font-style: italic;
}

.product-description u {
  text-decoration: underline;
}

.product-description s,
.product-description strike {
  text-decoration: line-through;
}

.product-description ul,
.product-description ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.product-description ul {
  list-style-type: disc;
}

.product-description ol {
  list-style-type: decimal;
}

.product-description li {
  margin-bottom: 0.25rem;
}

.product-description blockquote {
  border-left: 4px solid #e5e7eb;
  padding-left: 1rem;
  margin: 1rem 0;
  color: #6b7280;
  font-style: italic;
}

.product-description a {
  color: #2563eb;
  text-decoration: underline;
}

.product-description a:hover {
  color: #1d4ed8;
}

.product-description img {
  max-width: 100%;
  height: auto;
}

/* Images with explicit alignment from editor - override defaults */
.product-description img[style*="margin-left: 0"] {
  margin-left: 0 !important;
}

.product-description img[style*="margin-right: 0"] {
  margin-right: 0 !important;
}

.product-description pre {
  background-color: #f3f4f6;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1rem 0;
}

.product-description code {
  background-color: #f3f4f6;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-family: monospace;
  font-size: 0.875em;
}

/* Quill alignment classes */
.product-description .ql-align-center,
.product-description p.ql-align-center,
.product-description h1.ql-align-center,
.product-description h2.ql-align-center,
.product-description h3.ql-align-center {
  text-align: center;
}

.product-description .ql-align-center img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.product-description .ql-align-right,
.product-description p.ql-align-right,
.product-description h1.ql-align-right,
.product-description h2.ql-align-right,
.product-description h3.ql-align-right {
  text-align: right;
}

.product-description .ql-align-right img {
  display: block;
  margin-left: auto;
  margin-right: 0;
}

.product-description .ql-align-justify {
  text-align: justify;
}

/* Quill indent classes */
.product-description .ql-indent-1 {
  padding-left: 3em;
}

.product-description .ql-indent-2 {
  padding-left: 6em;
}

.product-description .ql-indent-3 {
  padding-left: 9em;
}

/* Tables */
.product-description table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.product-description th,
.product-description td {
  border: 1px solid #e5e7eb;
  padding: 0.5rem 0.75rem;
  text-align: left;
}

.product-description th {
  background-color: #f9fafb;
  font-weight: 600;
}

.product-description hr {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 1.5rem 0;
}

.product-description details {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.product-description details:hover {
  border-color: #d1d5db;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.product-description details[open] {
  border-color: #d1d5db;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.product-description details summary {
  padding: 1rem 1.25rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: #1f2937;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  -webkit-user-select: none;
}

.product-description details summary::-webkit-details-marker {
  display: none;
}

.product-description details summary::marker {
  display: none;
  content: '';
}

.product-description details summary::after {
  content: '+';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: #f3f4f6;
  font-size: 1.1rem;
  font-weight: 400;
  color: #6b7280;
  flex-shrink: 0;
  margin-left: 1rem;
  transition: background 0.2s, color 0.2s;
}

.product-description details[open] summary::after {
  content: '\2212';
  background: #e5e7eb;
  color: #374151;
}

.product-description details[open] summary {
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 0.75rem;
}

.product-description details > *:not(summary) {
  padding: 0.75rem 1.25rem 1rem;
}

.product-description details p {
  color: #6b7280;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Purchase-button attention animation (shaker) — keyframes copied verbatim from
   globals.css:281-321 (the Releasit COD form). `.dv-btn-anim` is toggled on/off by the
   `droovin_product_form` island client-side (out of this PR's scope, 136c); the CSS
   rules themselves are theme-owned so PR 3's boosters can reference them the moment the
   island mounts. */
.dv-btn-anim {
  animation-duration: .86s;
  animation-timing-function: cubic-bezier(.35, .06, .2, .98);
  animation-fill-mode: both;
  transform-origin: center;
}
.dv-btn-anim--shake { animation-name: dvBtnShake; }
.dv-btn-anim--bounce { animation-name: dvBtnBounce; }
.dv-btn-anim--pulse { animation-name: dvBtnPulse; }

@keyframes dvBtnShake {
  0%, 100% { transform: scaleX(1); }
  10%, 20% { transform: scale3d(.97, .97, .97) rotate(-1deg); }
  30%, 50%, 70%, 90% { transform: scale3d(1.03, 1.03, 1.03) rotate(1deg); }
  40%, 60%, 80% { transform: scale3d(1.03, 1.03, 1.03) rotate(-1deg); }
}
@keyframes dvBtnBounce {
  15%, 45%, 70%, 90%, 99%, 100% { transform: translateY(0); }
  35% { transform: translateY(-22%); }
  55% { transform: translateY(-15%); }
  80% { transform: translateY(-6%); }
  95% { transform: translateY(-2%); }
}
@keyframes dvBtnPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .dv-btn-anim { animation: none !important; }
}

/* Gallery: CSS-only scroll-snap carousel (DRO-157 136d PR 3 Task 3.2, plan ruling 5) —
   hides the native scrollbar on the main scroller/thumbnail strip. Next's
   `ProductGalleryClient`/`Thumbnails` set `scrollbarWidth: 'none'`/`msOverflowStyle:
   'none'` inline plus Tailwind's arbitrary `[&::-webkit-scrollbar]:hidden` variant —
   Liquid/this theme's static `content` scan has no arbitrary-variant equivalent, so
   this is hand-written instead of a Tailwind utility (`snippets/product-gallery.liquid`
   README note). PR 5c: keyed on `data-classic-gallery-*` ATTRIBUTES, not classes — the
   scroller/strip carry Next's exact class strings (parity signature = tag + classes) and
   Next's own inline `scrollbar-width:none;-ms-overflow-style:none`; only the WebKit
   pseudo-element needs a stylesheet rule. */
[data-classic-gallery-scroller]::-webkit-scrollbar,
[data-classic-gallery-thumbnails]::-webkit-scrollbar {
  display: none;
}
/* Gallery counter on slides 2..N (PR 5c fix round 1, H-02): the element is Next's
   (`absolute bottom-4 right-4 … z-20`, role=status) but EMPTY, the "k / N" text lives in
   `data-counter` and is painted here — so a 13-image product adds zero visible-text tokens
   over Next's single JS-updated counter (`product-gallery-client.tsx:222-228`), while a
   visitor snapped to slide k still reads "k / N". Slide 1 keeps the real text (what Next
   SSRs). */
[data-counter]::after {
  content: attr(data-counter);
}

/* Header: the logo never covers the navigation (DRO-330, found in the PR 12 captures). The
   header markup is Next's own (`header.tsx`), and so is the bug: a centered logo is centered
   over the WHOLE row while the nav sits `absolute` on top of it, so any logo wider than the
   gap between them (a 260 px "large" image, or a store name as text) paints under "Productos";
   with a left logo the logo can't shrink, so the nav is pushed off a 320 px screen.
   Fixed here and not in `header.liquid` on purpose: the header's HTML must stay byte-identical
   to the frozen Classic (`classic-index-equivalence.spec.ts`) and to Next (the parity gate), so
   only layout changes, and only where the logo and the nav overlapped or touched (under
   0.5rem apart); everywhere else the header renders pixel for pixel as before:
   - both alignments: the logo link may shrink (`min-width: 0` down to the image, which keeps
     its inline height while `object-fit: contain`, also inline, scales the picture inside);
     0.5rem is the minimum distance to the nav (not more: "Recibe y Pagas" as text at 375 px
     sits 12 px from "Productos" today and must not start wrapping). The nav's top-level
     items never wrap (so the nav can't shrink either): a menu with multi-word titles
     ("Nuestra tienda online") stays on one line and the logo gives way instead. The nowrap is
     on the items, not on `nav`: with a left logo the mobile panel's `<ul>` is inside `nav`;
   - centered: the row becomes a 3-column grid (`1fr auto 1fr`) instead of absolute slots. The
     side columns get their content first and the logo column up to the logo's own width, the
     rest is split evenly: with room to spare the logo sits exactly where `justify-center` put
     it; when the nav needs more than its half, the logo moves toward the free side at full
     size; only when that isn't enough does it shrink. The side slots keep their old
     `left-4`/`right-4` inset (16/24/32 px) as margins, so the nav and the hamburger stay put
     (logical margins: the grid's columns follow the writing direction, so in RTL the inset
     stays on the outer side). The 0.5rem minimum is each slot's inner margin, not a
     `column-gap`: a gap would also sit around the empty side columns of a one-product store
     (logo alone) and narrow its centered logo by 16 px (DRO-330 Landing follow-up);
   - a text logo wraps (anywhere, for a single long word; `word-break: break-word` is the same
     for iOS < 15.4, which lacks `anywhere`; lines centered when the logo is
     centered) and stops at 2 lines, the row's 64 px, instead of spilling over the page. One
     line looks as before: the `h1` shrink-wraps its text, so the alignment has nothing to move.
     `overflow: hidden` is what hides the lines past the clamp (without it they are still
     painted below the box) and also lets the `h1` shrink, as a flex item, below its longest word.
   Keyed on the section wrapper plus the header's own literal classes (`h-16`, `justify-center`,
   `left-4`, `right-4`), all of them Next's. `header-logo-fit.spec.ts` renders every branch and
   checks each selector still lands on its element; `scripts/header-logo-fit-browser.mjs`
   measures the result in Chromium. */
.shopify-section[data-section-type="header"] > header > div > .h-16 {
  column-gap: 0.5rem;
  /* The open cart drawer's containing block (below); centered rows already carry `relative`. */
  position: relative;
}
.shopify-section[data-section-type="header"] > header > div > .h-16 > a {
  min-width: 0;
}
.shopify-section[data-section-type="header"] > header > div > .h-16 > a > img {
  min-width: 0;
}
.shopify-section[data-section-type="header"] > header > div > .h-16 > a > h1 {
  word-break: break-word;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.shopify-section[data-section-type="header"] > header > div > .h-16 nav > a,
.shopify-section[data-section-type="header"] > header > div > .h-16 nav > div > a,
.shopify-section[data-section-type="header"] > header > div > .h-16 nav > div > details > summary {
  white-space: nowrap;
}
.shopify-section[data-section-type="header"] > header > div > .h-16.justify-center {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 0;
}
.shopify-section[data-section-type="header"] > header > div > .h-16.justify-center > a {
  grid-column: 2;
  grid-row: 1;
}
.shopify-section[data-section-type="header"] > header > div > .h-16.justify-center > a > h1 {
  text-align: center;
}
.shopify-section[data-section-type="header"] > header > div > .h-16.justify-center > .left-4 {
  position: static;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  margin-inline-start: 1rem;
  margin-inline-end: 0.5rem;
}
.shopify-section[data-section-type="header"] > header > div > .h-16.justify-center > .right-4 {
  position: static;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  margin-inline-start: 0.5rem;
  margin-inline-end: 1rem;
}
@media (min-width: 640px) {
  .shopify-section[data-section-type="header"] > header > div > .h-16.justify-center > .left-4 { margin-inline-start: 1.5rem; }
  .shopify-section[data-section-type="header"] > header > div > .h-16.justify-center > .right-4 { margin-inline-end: 1.5rem; }
}
@media (min-width: 1024px) {
  .shopify-section[data-section-type="header"] > header > div > .h-16.justify-center > .left-4 { margin-inline-start: 2rem; }
  .shopify-section[data-section-type="header"] > header > div > .h-16.justify-center > .right-4 { margin-inline-end: 2rem; }
}

/* Header cart drawer (DRO-330, follow-up of #2317): with `cart_mode: cart` the shell mounts
   `<droovin-cart>` (`Island.astro`) right after the cart link, INSIDE the nav. Two bugs, both
   from before (the frozen Classic has the same header):
   - closed, the element is a 0 px block (`:host { display: block }` in its shadow root) but still
     a flex item of the nav, so the nav's `gap-6` leaves 24 px of empty nav after the cart: the
     cart icon never reached the edge where the nav sits (with a left logo and a StoreMenu, the
     hamburger after it got 48 px instead of 24). `display: contents` (outer rules beat `:host`)
     takes the closed drawer out of the layout;
   - open, its panel was an in-flow block inside the 24 px nav of a 64 px row: it grew the row,
     pushed the logo and the nav, and hung over the page from inside the header. Now it floats
     right under the row, its end edge on the nav's (the end of the header's content: the row's
     edge with a left logo, the `right-4 sm:right-6 lg:right-8` inset when centered, the same
     margins as `.right-4` above), as a card like the menu panels and one layer above them.
   Landing's twin is in `landing-base.css`. `scripts/header-logo-fit-browser.mjs` opens the
   drawer in every cart-mode cell and measures both. */
.shopify-section[data-section-type="header"] > header > div > .h-16 nav > droovin-cart {
  display: contents;
}
.shopify-section[data-section-type="header"] > header > div > .h-16 nav > droovin-cart[open] {
  display: block;
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  /* 21: over the mobile menu's panel (z-20, and later in the DOM with a left logo) if both are
     open, so the drawer the visitor just opened is the one on top. */
  z-index: 21;
  /* The element styles only its lines (`droovin-cart.element.ts`); floating over the page it
     needs its own card, the menu panels' look (white, rounded, shadow-lg + ring-1 gray-200),
     their 70vh cap with scroll (a long cart under a sticky header stays reachable). */
  width: min(20rem, calc(100vw - 4rem));
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.5rem 1rem 1rem;
  background-color: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 0 0 1px #e5e7eb;
}
.shopify-section[data-section-type="header"] > header > div > .h-16.justify-center nav > droovin-cart[open] {
  inset-inline-end: 1rem;
}
@media (min-width: 640px) {
  .shopify-section[data-section-type="header"] > header > div > .h-16.justify-center nav > droovin-cart[open] { inset-inline-end: 1.5rem; }
}
@media (min-width: 1024px) {
  .shopify-section[data-section-type="header"] > header > div > .h-16.justify-center nav > droovin-cart[open] { inset-inline-end: 2rem; }
}

/* Header text colour over a background image (DRO-409). `header.liquid` sets `data-dv-header-text`
   and `--dv-header-text` on `<header>` only when the merchant picked a `text_color` AND an image.
   CSS and not a class because the links carry `text-gray-*` and the theme's header-text token
   paints them at (0,3,1) (`layout/theme.liquid`); these selectors are (0,3,4) and their `:hover`
   twins (0,4,4) beat that token's own `:hover` rule. They target the row's own items (logo text,
   `nav > a`, `nav > div > a`, every `summary`) and never the panels' links (`ul > li > a`): the
   panels stay `bg-white`, and white text on them would vanish. Keyed on ` header` (descendant), not
   `> header`, so `header-logo-fit.spec.ts`'s selector-oracle prefix doesn't pick them up. */
.shopify-section[data-section-type="header"] header[data-dv-header-text] h1,
.shopify-section[data-section-type="header"] header[data-dv-header-text] nav > a,
.shopify-section[data-section-type="header"] header[data-dv-header-text] nav > a:hover,
.shopify-section[data-section-type="header"] header[data-dv-header-text] nav > div > a,
.shopify-section[data-section-type="header"] header[data-dv-header-text] nav > div > a:hover,
.shopify-section[data-section-type="header"] header[data-dv-header-text] summary,
.shopify-section[data-section-type="header"] header[data-dv-header-text] summary:hover {
  color: var(--dv-header-text);
}

/* Announcement bar motion (DRO-409), `sections/announcement-bar.liquid`. Themes ship no JS and no
   island fits, so both modes are keyframes here, in the theme's own stylesheet (not `custom.css`:
   a merchant can empty that file and the bar would stop moving). The section sets `--dv-ann-t`
   (seconds) inline; `data-ann-mode` / `data-ann-count` pick the rules.

   rotate: the `li`s share ONE grid cell (the bar is as tall as the tallest text). Every item runs
   the same keyframes, visible for 1/n of the cycle, with a NEGATIVE delay of (n - i) periods: at
   t=0 item 0 is at 0% (visible) and the others are near 100% (hidden). A positive delay would leave
   them at the 0% frame (visible) until their turn. `visibility` flips together with `opacity` so a
   link that isn't on screen isn't focusable. Keyframes exist for 2 and 3 items (`max_blocks` is 3);
   the section prints `static` when only 1 is shown. */
[data-ann-mode="rotate"] > ul > li {
  grid-area: 1 / 1;
  animation-duration: calc(var(--dv-ann-t) * var(--dv-ann-n, 3));
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
[data-ann-mode="rotate"][data-ann-count="2"] { --dv-ann-n: 2; }
[data-ann-mode="rotate"][data-ann-count="3"] { --dv-ann-n: 3; }
[data-ann-mode="rotate"][data-ann-count="2"] > ul > li { animation-name: dvAnnRotate2; }
[data-ann-mode="rotate"][data-ann-count="3"] > ul > li { animation-name: dvAnnRotate3; }
[data-ann-mode="rotate"][data-ann-count="2"] > ul > li:nth-child(2) { animation-delay: calc(var(--dv-ann-t) * -1); }
[data-ann-mode="rotate"][data-ann-count="3"] > ul > li:nth-child(2) { animation-delay: calc(var(--dv-ann-t) * -2); }
[data-ann-mode="rotate"][data-ann-count="3"] > ul > li:nth-child(3) { animation-delay: calc(var(--dv-ann-t) * -1); }
@keyframes dvAnnRotate2 {
  0% { opacity: 0; visibility: hidden; }
  3%, 47% { opacity: 1; visibility: visible; }
  50%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes dvAnnRotate3 {
  0% { opacity: 0; visibility: hidden; }
  3%, 30% { opacity: 1; visibility: visible; }
  33.34%, 100% { opacity: 0; visibility: hidden; }
}

/* marquee: the section prints the texts twice inside `[data-ann-track]` (the second copy is inert).
   The track is at least 200% of the bar (a percentage of the bar, which has a definite width) and
   the two copies grow equally (`flex: 1 0 auto`), so ONE copy is always >= the bar; when the text
   is longer than the bar the track is as wide as its two copies. Translating by -50% of the TRACK
   moves exactly one copy: the picture at the end equals the one at the start, and the text crosses
   the whole bar. `translateX(100% to -100%)` on the text itself (the pedido-11 attempt in staging)
   is relative to the TEXT's width, shorter than the bar, so it never crossed it. */
[data-ann-track] {
  display: flex;
  width: max-content;
  min-width: 200%;
  animation: dvAnnMarquee var(--dv-ann-t, 20s) linear infinite;
}
[data-ann-copy] {
  flex: 1 0 auto;
}
@keyframes dvAnnMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Both pause while the pointer or keyboard focus is on the bar (WCAG 2.2.2: moving text the
   visitor can't stop). */
[data-ann-mode]:hover [data-ann-track],
[data-ann-mode]:focus-within [data-ann-track],
[data-ann-mode]:hover > ul > li,
[data-ann-mode]:focus-within > ul > li {
  animation-play-state: paused;
}

/* A custom text colour on a bar whose default focus ring is white. */
[data-ann-custom] a:focus-visible {
  outline-color: currentColor;
}

/* Reduced motion = the static bar: every text, wrapped and centred, no second copy. */
@media (prefers-reduced-motion: reduce) {
  [data-ann-mode="rotate"] > ul {
    display: flex;
  }
  [data-ann-mode="rotate"] > ul > li {
    animation: none;
    opacity: 1;
    visibility: visible;
  }
  [data-ann-track] {
    animation: none;
    transform: none;
    width: auto;
    min-width: 0;
    justify-content: center;
  }
  [data-ann-copy] {
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: center;
    white-space: normal;
    padding-inline: 1rem;
    column-gap: 1.5rem;
    text-align: center;
  }
  [data-ann-copy][aria-hidden="true"] {
    display: none;
  }
}