/* JJ editorial storefront. Visual adaptation of the 21st references documented
   in docs/DIRECCION_VISUAL.md; native Django markup and shopping flows remain. */
.storefront-page { --paper:#f8f5ee; --ink:#27382c; --muted:#657064; --accent:#b3482c; --line:#deded1; }
html:has(>body.storefront-page) { scroll-padding-bottom:20px; }
.storefront-page :is(a,button,input,select,textarea,summary) { scroll-margin-block:12px; }
.storefront-page .site-header { background:var(--paper); }
.storefront-page .header-inner { max-width:1392px; height:96px; padding:0 48px; }
.storefront-page .brand { color:var(--ink); }
.storefront-page .header-inner nav a { font-size:13px; }
.storefront-page .bag-link { border:1px solid var(--line); border-radius:30px; padding:11px 16px; min-height:44px; }
.storefront-page .bag-link:hover { border-color:var(--ink); }
.storefront-page .button { border-radius:5px; min-height:52px; gap:24px; }
.storefront-page .button.dark { background:var(--ink); }
.storefront-page .button.dark:hover { background:#3f5542; }
.storefront-page .text-link { display:inline-flex; align-items:center; gap:12px; min-height:44px; padding-bottom:0; }
.storefront-page .text-link span { margin-left:0; }
.storefront-page .section-wrap { max-width:1280px; }
.storefront-page .editorial-hero { max-width:1392px; grid-template-columns:1fr 1fr; gap:30px; padding:48px 48px 56px; min-height:690px; align-items:center; border:0; }
.storefront-page .editorial-hero .hero-copy { padding:12px 0 20px; min-width:0; }
.storefront-page .editorial-hero .hero-copy .eyebrow { font-size:10px; letter-spacing:1.6px; }
.storefront-page .editorial-hero h1 { font-size:clamp(68px,7.5vw,108px); line-height:1; margin:30px 0 24px; }
.storefront-page .editorial-hero .hero-copy>p { font-size:17px; line-height:1.75; max-width:350px; margin-bottom:28px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center; }
.hero-actions .text-link { font-size:12px; }
.jj-signature { display:flex; align-items:center; gap:14px; margin-top:42px; }
.signature-initials { display:flex; padding-left:0; }
.signature-initials span { width:40px; height:40px; border-radius:50%; border:2px solid var(--paper); display:grid; place-items:center; font:italic 25px var(--serif); background:#e3e7d7; color:#344332; }
.signature-initials span+span { background:#e9c9b5; margin-left:-10px; color:#713c2c; }
.jj-signature strong,.jj-signature>div:not(.signature-initials)>span { display:block; font-size:11px; line-height:1.8; }
.jj-signature>div:not(.signature-initials)>span { color:var(--muted); font-size:10px; }
.editorial-collage { position:relative; min-width:0; height:565px; isolation:isolate; }
.collage-wash { position:absolute; z-index:-1; width:85%; height:88%; right:6%; top:8%; background:#e4e7d8; border-radius:48% 45% 42% 52%; transform:rotate(-8deg); }
.editorial-collage figure { margin:0; background:#fffdf7; padding:9px; box-shadow:0 12px 32px #27382c14; }
.editorial-collage figure img { width:100%; height:100%; object-fit:cover; }
.collage-main { position:absolute; width:72%; height:88%; right:2%; top:4%; transform:rotate(4deg); }
.collage-main figcaption { position:absolute; left:46%; right:20px; bottom:20px; background:#f8f5eeed; padding:12px 15px; font-size:8px; letter-spacing:1.5px; text-align:right; color:var(--ink); }
.collage-main figcaption em { display:block; font:italic 24px var(--serif); letter-spacing:-.5px; margin-top:5px; }
.collage-detail { position:absolute; width:38%; height:54%; left:1%; bottom:1%; transform:rotate(-8deg); }
.collage-detail img { object-position:50% 40%; }
.collage-detail figcaption { position:absolute; bottom:9px; left:9px; right:9px; background:var(--paper); padding:12px 7px 8px; text-align:center; font:italic 24px var(--serif); color:var(--ink); }
.collage-detail figcaption span { display:block; font:8px var(--sans); letter-spacing:1.4px; margin-top:7px; }
.collage-stamp { position:absolute; width:122px; height:122px; border:1px solid #b3482c80; border-radius:50%; left:0; top:9px; transform:rotate(-13deg); color:var(--accent); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; }
.collage-stamp span { font-size:8px; font-weight:600; letter-spacing:1.2px; }
.collage-stamp b { font:52px/1 var(--serif); }
.collage-note { position:absolute; right:0; bottom:-20px; font-size:8px; letter-spacing:1.4px; color:var(--muted); margin:0; }
.storefront-page .benefits { background:var(--ink); color:var(--paper); max-width:none; padding:19px max(32px,calc((100vw - 1280px)/2)); border:0; }
.storefront-page .benefits b { color:#c8d0b8; }
.storefront-page .collection { padding-top:76px; padding-bottom:72px; }
.storefront-page .section-heading h2 { font-size:49px; }
.storefront-page .collection-count { font-size:12px; }
.storefront-page .catalog-filters { border:1px solid var(--line); padding:20px 22px; border-radius:8px; background:#fffdf733; }
.storefront-page .category-links { border:0; padding-bottom:14px; gap:8px; }
.storefront-page .chip { border-radius:30px; font-size:12px; padding:9px 16px; min-height:42px; display:inline-flex; align-items:center; }
.storefront-page .chip.selected { background:var(--ink); }
.storefront-page .filter-row { padding-top:13px; border-top:1px solid var(--line); margin-top:0; gap:12px; }
.storefront-page .search-field input { font-size:13px; min-height:44px; }
.storefront-page .filter-row select { font-size:12px; min-height:44px; }
.storefront-page .filter-row .button { font-size:12px; min-height:44px; }
.storefront-page .product-grid { gap:38px 28px; }
.storefront-page .product-grid:not(.four) { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.storefront-page .product-card { padding-bottom:18px; border-bottom:1px solid var(--line); }
.storefront-page .product-image { border-radius:10px; background:#eeece4; padding:9px; }
.storefront-page .product-image>img { border-radius:5px; }
.storefront-page .image-label { top:21px; left:21px; border-radius:20px; color:var(--ink); background:#fffdf7ed; font-size:8px; padding:6px 10px; }
.storefront-page .image-arrow { width:42px; height:42px; right:20px; bottom:20px; font-size:23px; }
.storefront-page .product-meta { font-size:11px; margin-top:18px; }
.storefront-page .product-line { margin-top:6px; align-items:start; }
.storefront-page .product-line h3 { font-size:25px; letter-spacing:-.6px; }
.storefront-page .price { font-size:14px; font-weight:600; padding-top:6px; }
.storefront-page .product-condition { font-size:11px; margin-top:12px; }
.storefront-page .product-condition span { color:var(--muted); }
.storefront-page .jj-story { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:60px; padding:58px; margin:10px auto 0; background:#e7eadc; border:0; border-radius:12px; position:relative; }
.story-heading { position:relative; }
.storefront-page .jj-story h2 { font-size:49px; margin:18px 0 0; }
.storefront-page .jj-story h2 em { color:var(--accent); }
.storefront-page .jj-story .eyebrow { color:var(--muted); }
.storefront-page .jj-story .story-flower { font-size:82px; position:absolute; right:10px; top:-15px; opacity:.7; }
.storefront-page .jj-story p { font-size:14px; line-height:1.9; margin-bottom:18px; max-width:460px; }
.storefront-page .jj-story .small-text { font-size:12px; }
.story-locations { display:flex; align-items:center; gap:14px; margin:22px 0; font-size:11px; }
.story-locations span:not([aria-hidden]) { border:1px solid #bfc7af; padding:6px 12px; border-radius:20px; }
.jj-how { display:grid; grid-template-columns:1fr 1.2fr; gap:80px; padding-top:80px; padding-bottom:80px; }
.jj-how h2 { font-size:46px; margin:18px 0 24px; }
.jj-how ol { list-style:none; margin:0; padding:0; }
.jj-how li { display:flex; gap:24px; padding:24px 0; border-bottom:1px solid var(--line); }
.jj-how li:first-child { padding-top:0; }
.jj-how li>span { font:italic 31px var(--serif); color:var(--accent); }
.jj-how h3 { font-size:16px; margin:0 0 7px; }
.jj-how li p { margin:0; font-size:13px; line-height:1.7; }
.storefront-page .footer { background:var(--ink); color:var(--paper); border:0; padding-top:48px; }
.storefront-page .footer .brand,.storefront-page .footer-main p { color:var(--paper); }
.storefront-page .footer-main p span,.storefront-page .footer-bottom { color:#c6cdbd; }
.storefront-page .footer-bottom { border-color:#56614f; padding-bottom:4px; }
.storefront-page .footer a:hover { color:#e4baa5; }
.storefront-page .detail-image { border-radius:10px; padding:10px; background:#eeece4; }
.storefront-page .detail-image>img { border-radius:5px; }
.storefront-page .detail-pills span { border-radius:20px; }
.storefront-page .form-card,.storefront-page .summary-card { border-radius:8px; }

@media(max-width:1100px) {
  .storefront-page .editorial-hero { padding:32px 36px 48px; min-height:620px; gap:20px; }
  .storefront-page .editorial-hero h1 { font-size:76px; }
  .editorial-collage { height:490px; }
  .collage-stamp { width:100px; height:100px; }
  .collage-stamp span { font-size:7px; }
  .collage-stamp b { font-size:42px; }
  .storefront-page .jj-story { margin-left:32px; margin-right:32px; padding:38px; gap:35px; }
  .storefront-page .jj-story h2 { font-size:40px; }
  .storefront-page .jj-story .story-flower { display:none; }
}
@media(max-width:800px) {
  .storefront-page .product-grid:not(.four) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .storefront-page .header-inner { padding:0 25px; height:82px; }
  .storefront-page .editorial-hero { padding:35px 25px 45px; gap:10px; min-height:540px; }
  .storefront-page .editorial-hero h1 { font-size:62px; }
  .storefront-page .editorial-hero .hero-copy .eyebrow { font-size:8px; letter-spacing:.7px; }
  .storefront-page .editorial-hero .hero-copy>p { font-size:14px; }
  .hero-actions { gap:12px 18px; }
  .editorial-collage { height:440px; }
  .collage-stamp { width:88px; height:88px; }
  .collage-stamp span { font-size:6px; letter-spacing:.8px; }
  .collage-detail figcaption { font-size:20px; padding-top:8px; }
  .collage-detail figcaption span { font-size:6px; }
  .collage-main figcaption { right:15px; bottom:15px; font-size:6px; padding:8px; }
  .collage-main figcaption em { font-size:19px; }
  .collage-note { font-size:6px; }
  .jj-signature { margin-top:26px; gap:9px; }
  .jj-signature strong { font-size:10px; }
  .jj-signature>div:not(.signature-initials)>span { font-size:9px; }
  .storefront-page .filter-row { gap:10px; }
  .storefront-page .collection { padding-top:48px; padding-bottom:45px; }
  .storefront-page .product-line h3 { font-size:23px; }
  .storefront-page .jj-story { grid-template-columns:1fr; gap:26px; padding:32px; margin-left:25px; margin-right:25px; }
  .storefront-page .jj-story h2 { font-size:43px; }
  .jj-how { gap:35px; padding-top:52px; padding-bottom:52px; }
  .jj-how h2 { font-size:37px; }
}
@media(max-width:600px) {
  .storefront-page .header-inner { padding:0 20px; height:78px; gap:10px; }
  .storefront-page .header-inner nav { gap:13px; }
  .storefront-page .header-inner nav a { font-size:11px; }
  .storefront-page .bag-link { padding:7px; gap:5px; }
  .storefront-page .editorial-hero { grid-template-columns:1fr; padding:32px 24px 38px; gap:32px; min-height:0; }
  .storefront-page .editorial-hero .hero-copy { padding:0; }
  .storefront-page .editorial-hero h1 { font-size:clamp(65px,17vw,92px); margin:22px 0; }
  .storefront-page .editorial-hero .hero-copy>p { font-size:15px; margin-bottom:24px; }
  .hero-actions .button { padding:14px 17px; font-size:11px; }
  .hero-actions .text-link { font-size:11px; }
  .jj-signature { margin-top:25px; }
  .editorial-collage { height:410px; width:100%; max-width:410px; margin:0 auto; }
  .collage-stamp { width:92px; height:92px; }
  .collage-stamp span { font-size:6px; }
  .collage-main { width:71%; }
  .collage-detail { width:40%; }
  .collage-note { bottom:-15px; font-size:6px; }
  .storefront-page .benefits { padding:20px 24px; gap:15px 12px; }
  .storefront-page .benefits span { font-size:10px; gap:8px; }
  .storefront-page .section-heading h2 { font-size:37px; }
  .storefront-page .collection-count { font-size:10px; max-width:110px; padding-top:22px; }
  .storefront-page .catalog-filters { padding:15px; }
  .storefront-page .category-links { gap:8px; padding-bottom:15px; }
  .storefront-page .chip { font-size:11px; padding:9px 12px; min-height:44px; }
  .storefront-page .filter-row { gap:10px; padding-top:15px; }
  .storefront-page .filter-row select { font-size:16px; min-height:48px; padding:10px 6px; }
  .storefront-page .search-field input { font-size:16px; }
  .storefront-page .filter-row .button { font-size:13px; min-height:48px; }
  .storefront-page .product-grid,.storefront-page .product-grid.four { gap:28px 14px; }
  .storefront-page .product-image { padding:5px; border-radius:7px; }
  .storefront-page .product-image>img { border-radius:3px; }
  .storefront-page .image-label { top:12px; left:12px; padding:4px 7px; font-size:6px; }
  .storefront-page .image-arrow { width:32px; height:32px; right:11px; bottom:11px; font-size:20px; }
  .storefront-page .product-meta { font-size:9px; margin-top:13px; }
  .storefront-page .product-line h3 { font-size:21px; min-height:52px; }
  .storefront-page .price { font-size:14px; padding-top:0; }
  .storefront-page .product-condition { font-size:10px; margin-top:10px; }
  .storefront-page .jj-story { padding:27px 24px; margin-left:20px; margin-right:20px; gap:25px; }
  .storefront-page .jj-story h2 { font-size:36px; }
  .storefront-page .jj-story p { font-size:13px; }
  .story-locations { font-size:10px; gap:10px; flex-wrap:wrap; }
  .story-locations span:not([aria-hidden]) { padding:6px 10px; }
  .jj-how { grid-template-columns:1fr; gap:32px; padding-top:46px; padding-bottom:46px; }
  .jj-how h2 { font-size:38px; margin-bottom:15px; }
  .jj-how li { gap:20px; }
  .storefront-page .footer-main>div { gap:16px; }
}
@media(max-width:380px) {
  .editorial-collage { height:345px; }
  .storefront-page .editorial-hero h1 { font-size:clamp(53px,17vw,65px); }
  .storefront-page .header-inner nav a { font-size:10px; }
  .storefront-page .header-inner nav { gap:10px; }
  .storefront-page .hero-actions { gap:10px 18px; }
  .storefront-page .product-grid:not(.four) { grid-template-columns:1fr; }
  .storefront-page .product-line h3 { min-height:0; }
  .storefront-page .product-line { display:flex; }
  .storefront-page .product-meta span:first-child { max-width:none; }
}
@media(prefers-reduced-motion:no-preference) {
  .storefront-page .editorial-hero .hero-copy { animation:jj-appear .65s ease-out both; }
  .storefront-page .editorial-collage { animation:jj-appear .85s ease-out both; }
  @keyframes jj-appear { from { opacity:0; translate:0 12px; } to { opacity:1; translate:0 0; } }
}