/* =========================================================
   JOEMA — Design tokens
   Concept: "Mesa de luz" (light table). Digital images read
   like negatives on a lightbox; personalized objects read like
   instant photos pinned beside it. Two photographic vocabularies,
   one coherent studio identity.
   ========================================================= */
:root{
  /* --- color --- */
  --ink:        #131318;   /* deep, slightly blue-black — the "room" */
  --ink-soft:   #1D1E24;
  --ink-2:      #26212B;   /* secondary ink tone, for gradients */
  --paper:      #F2EEE4;   /* warm bone paper — the "print" surface */
  --paper-dim:  #E7E2D4;
  --text-hi:    #F5F1E7;   /* on ink */
  --text-lo:    #1C1B18;   /* on paper */
  --muted-hi:   rgba(245,241,231,.62);
  --muted-lo:   rgba(28,27,24,.60);
  --amber:      #F2A93C;   /* lamp glow / primary accent — hotter, punchier */
  --amber-dim:  #C97F1F;
  --amber-glow: rgba(242,169,60,.55);
  --crimson:    #E2482F;   /* secondary hot accent — energy, offers */
  --plum:       #9A6BE0;   /* tertiary accent — tags, links */
  --sage:       #8FA98F;   /* success / in-stock */
  --line-hi:    rgba(245,241,231,.14);
  --line-lo:    rgba(28,27,24,.12);
  --shadow-lift: 0 20px 46px rgba(19,19,24,.22), 0 4px 10px rgba(19,19,24,.12);

  /* --- type --- */
  --f-display: 'Bricolage Grotesque', 'Inter', sans-serif;
  --f-body:    'Inter', system-ui, sans-serif;
  --f-mono:    'Space Mono', ui-monospace, monospace;

  /* --- scale & radius --- */
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 24px;
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background-color:var(--paper);
  background-image:radial-gradient(rgba(28,27,24,.06) 1px, transparent 1px);
  background-size:22px 22px;
  color:var(--text-lo);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,select{ font-family:inherit; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--amber); color:var(--text-lo);
  padding:.6rem 1rem; z-index:1000; border-radius:0 0 var(--radius-s) 0;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

h1,h2,h3{ font-family:var(--f-display); font-weight:700; line-height:1.05; margin:0; letter-spacing:-.01em; }
h2{ font-size:clamp(1.6rem, 2.4vw, 2.4rem); }
.eyebrow{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--amber-dim); margin:0 0 .5rem;
}
.section-sub{ color:var(--muted-lo); max-width:46ch; margin:.5rem 0 0; }
code{ font-family:var(--f-mono); }

/* --- buttons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 1.7rem; border-radius:999px; font-weight:700; font-size:.95rem;
  border:1px solid transparent; transition:transform .18s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:linear-gradient(135deg, var(--amber), var(--crimson)); color:#1a0e05; box-shadow:0 12px 28px rgba(226,72,47,.35); }
.btn-primary:hover{ box-shadow:0 16px 34px rgba(226,72,47,.48); }
.btn-ghost{ border-color:rgba(245,241,231,.5); color:var(--text-hi); }
.btn-ghost:hover{ border-color:var(--text-hi); background:rgba(245,241,231,.08); }
.btn-outline{ border-color:var(--line-lo); color:var(--text-lo); background:transparent; }
.btn-outline:hover{ border-color:var(--amber-dim); color:var(--amber-dim); }
.btn-block{ width:100%; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(242,238,228,.85); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line-lo);
}
.header-inner{
  max-width:var(--container); margin:0 auto; padding:.9rem var(--gutter);
  display:flex; align-items:center; gap:2rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; margin-right:auto; color:var(--text-lo); }
.brand-mark{
  color:var(--text-hi); display:flex; background:linear-gradient(135deg, var(--ink), var(--ink-2));
  padding:6px; border-radius:9px; box-shadow:0 4px 10px rgba(19,19,24,.25);
}
.brand-mark circle{ fill:var(--amber); }
.brand-name{ font-family:var(--f-display); font-weight:800; font-size:1.3rem; letter-spacing:-.01em; }
.main-nav{ display:flex; gap:1.9rem; font-size:.92rem; font-weight:600; }
.main-nav a{ position:relative; padding:.3rem 0; }
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:linear-gradient(90deg, var(--amber), var(--crimson)); transition:right .25s ease;
}
.main-nav a:hover{ color:var(--amber-dim); }
.main-nav a:hover::after{ right:0; }
.header-actions{ display:flex; gap:.4rem; }
.icon-btn{
  position:relative; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:999px; color:var(--text-lo);
}
.icon-btn:hover{ background:var(--paper-dim); }
.badge{
  position:absolute; top:-2px; right:-2px; background:var(--amber); color:#191008;
  font-family:var(--f-mono); font-size:.62rem; font-weight:700; min-width:16px; height:16px;
  border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.search-bar{ border-top:1px solid var(--line-lo); background:var(--paper); }
.search-bar-inner{ max-width:var(--container); margin:0 auto; padding:.75rem var(--gutter); display:flex; gap:.5rem; }
#search-input{
  flex:1; border:1px solid var(--line-lo); border-radius:999px; padding:.6rem 1rem; background:#fff;
}

@media (max-width: 860px){
  .main-nav{ display:none; }
}

/* =========================================================
   HERO — mesa de luz
   ========================================================= */
.hero{
  position:relative; min-height:min(96vh, 860px); display:flex; flex-direction:column;
  justify-content:center; overflow:hidden; color:var(--text-hi);
  padding:7rem var(--gutter) 3.5rem;
  background:
    radial-gradient(70% 60% at 78% 18%, rgba(242,169,60,.20), transparent 60%),
    radial-gradient(60% 50% at 12% 85%, rgba(226,72,47,.16), transparent 60%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 60%, var(--ink) 100%);
}
.hero-noise{
  position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
.hero-beam{
  position:absolute; top:-20%; right:8%; width:60vw; height:140%;
  background:conic-gradient(from 200deg at 50% 0%, transparent, rgba(242,169,60,.18), transparent 30%);
  filter:blur(30px); pointer-events:none;
}
.ghost-text{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  font-family:var(--f-display); font-weight:800; font-size:clamp(6rem, 22vw, 15rem);
  color:transparent; -webkit-text-stroke:1px rgba(245,241,231,.07); letter-spacing:-.02em;
  white-space:nowrap; pointer-events:none; z-index:0; user-select:none;
}
.hero-grid{
  position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center;
  max-width:var(--container); margin:0 auto; width:100%;
}
.hero-content{ max-width:640px; }
.eyebrow{ color:var(--amber); }
.hero-title{ font-size:clamp(2.6rem, 5.6vw, 4.6rem); }
.hero-title em{ font-style:normal; background:linear-gradient(100deg, var(--amber), var(--crimson)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub{ margin:1.4rem 0 2.1rem; color:var(--muted-hi); max-width:46ch; font-size:1.08rem; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:2.2rem; margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line-hi); }
.hero-stats div{ display:flex; flex-direction:column; }
.hero-stats strong{ font-family:var(--f-display); font-size:1.5rem; color:var(--amber); }
.hero-stats span{ font-size:.78rem; color:var(--muted-hi); }

.hero-stack{ position:relative; height:min(58vh, 520px); }
.stack-frame{
  position:absolute; width:62%; aspect-ratio:4/5; border-radius:var(--radius-m); overflow:hidden;
  box-shadow:var(--shadow-lift); border:6px solid var(--ink-soft);
}
.stack-frame img{ width:100%; height:100%; object-fit:cover; }
.stack-frame:nth-child(1){ top:0; left:4%; transform:rotate(-9deg); z-index:1; }
.stack-frame:nth-child(2){ top:8%; left:34%; transform:rotate(6deg); z-index:2; }
.stack-frame:nth-child(3){ top:34%; left:14%; transform:rotate(-3deg); z-index:3; width:54%; }
.stack-frame:nth-child(2) .stack-code, .stack-frame:nth-child(1) .stack-code, .stack-frame:nth-child(3) .stack-code{
  position:absolute; bottom:.6rem; left:.6rem; font-family:var(--f-mono); font-size:.65rem;
  background:rgba(19,19,24,.6); color:var(--text-hi); padding:.15rem .5rem; border-radius:999px;
}
@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-stack{ display:none; }
}

.scroll-cue{
  position:relative; align-self:center; margin-top:2.5rem; z-index:1; background:transparent; border:none; color:var(--muted-hi);
  display:flex; flex-direction:column; align-items:center; gap:.4rem; font-size:.72rem; font-family:var(--f-mono);
  letter-spacing:.08em; text-transform:uppercase; animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

/* trust strip */
.trust-strip{ background:var(--ink-2); color:var(--text-hi); border-top:1px solid var(--line-hi); border-bottom:1px solid var(--line-hi); }
.trust-inner{
  max-width:var(--container); margin:0 auto; padding:1rem var(--gutter);
  display:flex; gap:0; flex-wrap:wrap; font-size:.8rem; font-family:var(--f-mono); font-weight:700;
  justify-content:center; letter-spacing:.02em;
}
.trust-inner span{ padding:0 1.6rem; border-right:1px solid var(--line-hi); }
.trust-inner span:last-child{ border-right:none; }

/* =========================================================
   CATEGORY RAIL
   ========================================================= */
.category-rail{ border-bottom:1px solid var(--line-lo); }
.category-rail-inner{
  max-width:var(--container); margin:0 auto; padding:1rem var(--gutter);
  display:flex; gap:.6rem; overflow-x:auto; scrollbar-width:none;
}
.category-rail-inner::-webkit-scrollbar{ display:none; }
.category-rail{ background:var(--paper); position:sticky; top:65px; z-index:60; }
.chip{
  flex:0 0 auto; padding:.6rem 1.3rem; border-radius:999px; border:1.5px solid var(--line-lo);
  font-size:.85rem; font-weight:700; background:#fff; white-space:nowrap; transition:all .2s ease;
}
.chip:hover{ border-color:var(--amber-dim); }
.chip[aria-pressed="true"]{
  background:linear-gradient(135deg, var(--ink), var(--ink-2)); color:var(--text-hi); border-color:var(--ink);
  box-shadow:0 6px 16px rgba(19,19,24,.25);
}

/* =========================================================
   SECTIONS — shared
   ========================================================= */
section{ max-width:var(--container); margin:0 auto; padding:5.5rem var(--gutter); }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap;
  margin-bottom:2.5rem;
}
.section-head h2{ position:relative; padding-left:1rem; }
.section-head h2::before{
  content:""; position:absolute; left:0; top:.15em; bottom:.15em; width:4px; border-radius:2px;
  background:linear-gradient(180deg, var(--amber), var(--crimson));
}
.toolbar select{
  border:1.5px solid var(--line-lo); border-radius:999px; padding:.6rem 1.1rem; background:#fff; font-size:.85rem; font-weight:600;
}
.empty-state{ color:var(--muted-lo); font-style:italic; }

/* reveal-on-scroll (progressive enhancement, JS toggles .is-visible) */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* =========================================================
   GALLERY — negative/frame cards, bento layout
   ========================================================= */
.frame-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:120px; gap:1.1rem; grid-auto-flow:dense;
}
.frame-card{ grid-column:span 2; grid-row:span 3; }
.frame-card.is-featured{ grid-column:span 2; grid-row:span 4; }
.promo-tile{ grid-column:span 2; grid-row:span 3; }

@media (max-width:1080px){
  .frame-grid{ grid-template-columns:repeat(3,1fr); }
  .frame-card, .frame-card.is-featured, .promo-tile{ grid-column:span 3; grid-row:span 3; }
}
@media (max-width:640px){
  .frame-grid{ grid-template-columns:repeat(2,1fr); gap:.7rem; grid-auto-rows:100px; }
  .frame-card, .frame-card.is-featured, .promo-tile{ grid-column:span 2; grid-row:span 3; }
}

.frame-card{
  position:relative; background:linear-gradient(160deg, var(--ink), var(--ink-2)); border-radius:var(--radius-m); overflow:hidden;
  cursor:pointer; isolation:isolate; box-shadow:var(--shadow-lift); transition:transform .35s ease, box-shadow .35s ease;
}
.frame-card:hover{ transform:translateY(-6px); box-shadow:0 28px 54px rgba(19,19,24,.32); }
.frame-card::before, .frame-card::after{
  content:""; position:absolute; left:0; right:0; height:16px; z-index:2;
  background-image:radial-gradient(circle, rgba(245,241,231,.5) 3px, transparent 3.2px);
  background-size:20px 16px; background-position:6px center; background-repeat:repeat-x;
  opacity:.55;
}
.frame-card::before{ top:0; }
.frame-card::after{ bottom:0; }
.frame-card img{
  width:100%; height:100%; object-fit:cover; opacity:.9; transition:transform .6s ease, opacity .3s ease;
}
.frame-card:hover img{ transform:scale(1.06); opacity:1; }
.frame-code{
  position:absolute; top:22px; left:12px; z-index:3; font-family:var(--f-mono); font-size:.68rem;
  color:var(--text-hi); background:rgba(19,19,24,.6); backdrop-filter:blur(4px); padding:.2rem .55rem; border-radius:999px;
  letter-spacing:.04em; border:1px solid var(--line-hi);
}
.frame-meta{
  position:absolute; inset-inline:0; bottom:0; z-index:3; padding:1.1rem 1rem 1rem;
  background:linear-gradient(180deg, transparent, rgba(15,15,19,.95) 75%);
  color:var(--text-hi);
}
.frame-title{ font-family:var(--f-display); font-weight:700; font-size:1.02rem; margin:0 0 .3rem; }
.frame-price{ font-family:var(--f-mono); font-size:.9rem; color:var(--amber); font-weight:700; }
.frame-price .was{ color:var(--muted-hi); text-decoration:line-through; margin-right:.4rem; font-size:.78rem; font-weight:400; }
.frame-tag{
  position:absolute; top:22px; right:12px; z-index:3; font-family:var(--f-mono); font-size:.65rem;
  background:linear-gradient(135deg, var(--amber), var(--crimson)); color:#1a0e05; padding:.25rem .55rem; border-radius:999px; font-weight:800;
  box-shadow:0 4px 10px rgba(226,72,47,.35);
}

.promo-tile{
  position:relative; border-radius:var(--radius-m); overflow:hidden; display:flex; align-items:flex-end; padding:1.4rem;
  color:var(--text-hi); background:linear-gradient(150deg, var(--crimson), var(--amber-dim) 120%);
}
.promo-tile::before{
  content:""; position:absolute; inset:0; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.promo-tile p{ position:relative; font-family:var(--f-display); font-size:1.3rem; font-weight:800; line-height:1.15; margin:0; max-width:16ch; }

.load-more-wrap{ text-align:center; margin-top:3rem; }

/* =========================================================
   PERSONALIZADOS — polaroid/instant-print cards on corkboard
   ========================================================= */
.polaroid-section{
  background:var(--paper-dim);
  background-image:
    radial-gradient(rgba(28,27,24,.05) 1px, transparent 1px),
    repeating-linear-gradient(90deg, rgba(28,27,24,.03) 0 1px, transparent 1px 34px);
  background-size:22px 22px, auto;
}
.polaroid-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem; padding-top:.5rem;
}
@media (max-width:1080px){ .polaroid-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .polaroid-grid{ grid-template-columns:1fr; } }

.polaroid-card{
  position:relative; background:#fff; padding:.75rem .75rem 1.2rem; border-radius:3px;
  box-shadow:0 14px 30px rgba(28,27,24,.16), 0 3px 8px rgba(28,27,24,.1);
  transform:rotate(var(--tilt, -2deg)); transition:transform .3s ease, box-shadow .3s ease;
}
.polaroid-card::before{
  content:""; position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(-4deg);
  width:34px; height:14px; border-radius:2px; background:rgba(242,169,60,.85); box-shadow:0 3px 6px rgba(0,0,0,.2);
}
.polaroid-card:nth-child(2n){ --tilt:1.8deg; }
.polaroid-card:nth-child(3n){ --tilt:-1deg; }
.polaroid-card:nth-child(4n){ --tilt:1deg; }
.polaroid-card:hover{ transform:rotate(0deg) translateY(-6px) scale(1.02); box-shadow:0 22px 40px rgba(28,27,24,.22); z-index:5; }
.polaroid-photo{ aspect-ratio:1/1; overflow:hidden; background:var(--ink-soft); border-radius:1px; }
.polaroid-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.polaroid-card:hover .polaroid-photo img{ transform:scale(1.08); }
.polaroid-caption{ padding-top:.9rem; text-align:center; }
.polaroid-caption .frame-title{ font-family:var(--f-display); font-size:1.05rem; }
.polaroid-caption .frame-price{ color:var(--crimson); font-weight:800; }
.polaroid-code{ font-family:var(--f-mono); font-size:.65rem; color:var(--muted-lo); margin-top:.2rem; }

/* =========================================================
   OFFERS
   ========================================================= */
.offers-strip{ display:flex; gap:1.1rem; overflow-x:auto; padding-bottom:.5rem; scroll-snap-type:x mandatory; }
.offer-card{
  scroll-snap-align:start; flex:0 0 220px; position:relative; border-radius:var(--radius-m); overflow:hidden;
  aspect-ratio:3/4; box-shadow:var(--shadow-lift); background:var(--ink);
}
.offer-card img{ width:100%; height:100%; object-fit:cover; opacity:.85; }
.offer-card .frame-meta{ position:absolute; inset-inline:0; bottom:0; padding:.9rem; background:linear-gradient(180deg, transparent, rgba(15,15,19,.95) 75%); color:var(--text-hi); }
.offer-card .discount-badge{
  position:absolute; top:.7rem; left:.7rem; background:var(--crimson); color:#fff; font-family:var(--f-mono);
  font-weight:800; font-size:.7rem; padding:.25rem .5rem; border-radius:999px;
}

/* =========================================================
   REVIEWS
   ========================================================= */
.reviews-section{
  background:linear-gradient(160deg, var(--ink), var(--ink-2)); color:var(--text-hi);
  border-radius:var(--radius-l); margin-top:2rem; margin-bottom:2rem; position:relative; overflow:hidden;
}
.reviews-section .eyebrow{ color:var(--amber); }
.reviews-section .empty-state{ color:var(--muted-hi); }
.reviews-strip{ display:flex; gap:1.1rem; overflow-x:auto; position:relative; }
.review-card{
  flex:0 0 300px; background:rgba(245,241,231,.06); border:1px solid var(--line-hi); border-radius:var(--radius-m);
  padding:1.4rem;
}
.review-card .stars{ color:var(--amber); letter-spacing:.15em; margin-bottom:.6rem; }
.review-card p{ margin:0 0 1rem; color:var(--muted-hi); font-size:.92rem; line-height:1.5; }
.review-card .who{ font-family:var(--f-mono); font-size:.75rem; color:var(--text-hi); }

/* =========================================================
   TRACK ORDER
   ========================================================= */
.track-card{
  display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap;
  background:var(--paper-dim); border:1px solid var(--line-lo); border-radius:var(--radius-l); padding:3rem;
  position:relative; overflow:hidden;
}
.track-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--amber), var(--crimson));
}
.track-card code{ background:rgba(28,27,24,.06); padding:.1rem .4rem; border-radius:4px; }
.track-form{ display:flex; gap:.6rem; flex:1; min-width:260px; }
.track-form input{
  flex:1; border:1px solid var(--line-lo); border-radius:999px; padding:.75rem 1.1rem; background:#fff;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--ink); color:var(--muted-hi); }
.footer-inner{
  max-width:var(--container); margin:0 auto; padding:3.5rem var(--gutter) 2rem;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem;
}
.footer-brand .brand-name{ color:var(--text-hi); font-size:1.15rem; }
.footer-brand p{ margin:.75rem 0; max-width:32ch; }
.social-link{ color:var(--amber); font-weight:600; font-size:.9rem; }
.footer-col h3{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-hi); font-family:var(--f-body); margin-bottom:.9rem; }
.footer-col a, .footer-col p{ display:block; margin-bottom:.6rem; font-size:.9rem; }
.footer-bottom{ border-top:1px solid var(--line-hi); text-align:center; padding:1.25rem; font-size:.8rem; }
@media (max-width:760px){ .footer-inner{ grid-template-columns:1fr 1fr; } }

/* =========================================================
   CART DRAWER
   ========================================================= */
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(420px, 92vw); background:var(--paper);
  z-index:200; display:flex; flex-direction:column; box-shadow:-12px 0 30px rgba(0,0,0,.18);
  transform:translateX(100%); transition:transform .3s ease;
}
.drawer.is-open{ transform:translateX(0); }
.drawer-head{ display:flex; justify-content:space-between; align-items:center; padding:1.25rem 1.5rem; border-bottom:1px solid var(--line-lo); }
.drawer-body{ flex:1; overflow-y:auto; padding:1.25rem 1.5rem; }
.drawer-foot{ padding:1.25rem 1.5rem; border-top:1px solid var(--line-lo); }
.drawer-total{ display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:1.1rem; margin-bottom:1rem; }
.drawer-overlay{ position:fixed; inset:0; background:rgba(22,23,27,.5); z-index:190; }

.wa-float{
  position:fixed; right:1.25rem; bottom:1.25rem; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; border:none; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(37,211,102,.4); z-index:150;
}

/* =========================================================
   FAVORITE BUTTON (on cards)
   ========================================================= */
.fav-btn{
  position:absolute; z-index:4; width:32px; height:32px; border-radius:50%; border:none;
  background:rgba(19,19,24,.55); backdrop-filter:blur(4px); color:var(--text-hi);
  display:flex; align-items:center; justify-content:center; transition:background .2s ease, transform .15s ease;
}
.fav-btn:hover{ transform:scale(1.08); }
.fav-btn.is-active{ color:var(--crimson); background:rgba(255,255,255,.9); }
.frame-card .fav-btn{ top:22px; right:12px; }
.frame-card.has-tag .fav-btn{ top:60px; }
.polaroid-card .fav-btn{ top:.6rem; right:.6rem; background:rgba(255,255,255,.85); color:var(--text-lo); }
.polaroid-card .fav-btn.is-active{ color:var(--crimson); }

/* =========================================================
   TRACK RESULT
   ========================================================= */
.track-result{
  margin-top:1.5rem; padding:1.5rem; border-radius:var(--radius-m); border:1px solid var(--line-lo);
  background:#fff; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
}
.track-result .status-pill{
  font-family:var(--f-mono); font-size:.75rem; font-weight:700; padding:.35rem .8rem; border-radius:999px;
}
.status-pendiente{ background:rgba(242,169,60,.18); color:var(--amber-dim); }
.status-pagado{ background:rgba(143,169,143,.2); color:#4b6b4b; }
.status-enviado{ background:rgba(154,107,224,.18); color:var(--plum); }
.status-no-encontrado{ background:rgba(226,72,47,.15); color:var(--crimson); }

/* =========================================================
   MODAL — product detail / checkout / review
   ========================================================= */
.modal-overlay{ position:fixed; inset:0; background:rgba(19,19,24,.6); z-index:290; }
.modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.96); opacity:0; pointer-events:none;
  width:min(720px, 92vw); max-height:88vh; overflow-y:auto; background:var(--paper); border-radius:var(--radius-l);
  z-index:300; box-shadow:0 30px 70px rgba(0,0,0,.35); transition:opacity .2s ease, transform .2s ease;
}
.modal.is-open{ opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto; }
.modal-close{ position:sticky; top:.9rem; float:right; margin:.9rem .9rem -2.6rem 0; background:#fff; z-index:2; box-shadow:0 4px 10px rgba(0,0,0,.15); }
.modal-body{ padding:2rem; }

.pdp{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
@media (max-width:640px){ .pdp{ grid-template-columns:1fr; } }
.pdp-media{ position:relative; border-radius:var(--radius-m); overflow:hidden; aspect-ratio:4/5; background:var(--ink); }
.pdp-media img{ width:100%; height:100%; object-fit:cover; }
.pdp-media .frame-code{ position:absolute; top:12px; left:12px; }
.pdp-info .eyebrow{ color:var(--amber-dim); }
.pdp-info h2{ font-size:1.6rem; margin-bottom:.4rem; }
.pdp-price{ font-family:var(--f-mono); font-size:1.3rem; font-weight:700; color:var(--crimson); margin:.4rem 0 1rem; }
.pdp-desc{ color:var(--muted-lo); font-size:.92rem; margin-bottom:1.3rem; }

.field-group{ margin-bottom:1.2rem; }
.field-group label{ display:block; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.5rem; color:var(--muted-lo); }
.swatches{ display:flex; gap:.6rem; flex-wrap:wrap; }
.swatch{
  width:34px; height:34px; border-radius:50%; border:2px solid transparent; cursor:pointer;
  box-shadow:0 0 0 1px var(--line-lo) inset;
}
.swatch[aria-pressed="true"]{ border-color:var(--ink); box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.option-pills{ display:flex; gap:.5rem; flex-wrap:wrap; }
.option-pill{
  padding:.5rem 1rem; border-radius:999px; border:1.5px solid var(--line-lo); background:#fff; font-size:.85rem; font-weight:600;
}
.option-pill[aria-pressed="true"]{ background:var(--ink); color:var(--text-hi); border-color:var(--ink); }
.field-group input[type="text"], .field-group textarea, .field-group input[type="email"], .field-group input[type="tel"]{
  width:100%; border:1.5px solid var(--line-lo); border-radius:var(--radius-s); padding:.7rem .9rem; background:#fff; font-size:.92rem;
}
.field-group textarea{ resize:vertical; min-height:70px; }
.upload-drop{
  border:1.5px dashed var(--line-lo); border-radius:var(--radius-m); padding:1.2rem; text-align:center; font-size:.85rem; color:var(--muted-lo);
  cursor:pointer;
}
.upload-drop img{ max-height:90px; margin:0 auto .5rem; border-radius:var(--radius-s); }
.stepper{ display:inline-flex; align-items:center; border:1.5px solid var(--line-lo); border-radius:999px; overflow:hidden; }
.stepper button{ width:36px; height:36px; background:#fff; border:none; font-size:1.1rem; }
.stepper span{ width:36px; text-align:center; font-family:var(--f-mono); }

.checkout-form{ display:grid; gap:1.1rem; max-width:520px; }
.checkout-summary{ background:var(--paper-dim); border-radius:var(--radius-m); padding:1.2rem; margin-bottom:1.5rem; }
.checkout-summary .line{ display:flex; justify-content:space-between; font-size:.88rem; padding:.3rem 0; }
.checkout-summary .total-line{ border-top:1px solid var(--line-lo); margin-top:.5rem; padding-top:.7rem; font-weight:700; font-family:var(--f-mono); }
.rating-input{ display:flex; gap:.3rem; font-size:1.5rem; }
.rating-input button{ background:none; border:none; color:var(--line-lo); }
.rating-input button.is-active{ color:var(--amber); }

/* =========================================================
   FASE 3 — ajustes de totales del carrito y estados de carga
   ========================================================= */
.drawer-totals{ margin-bottom:1rem; }
.drawer-totals .line{
  display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:.88rem;
  padding:.3rem 0; color:var(--muted-lo);
}
.drawer-totals .total-line{
  border-top:1px solid var(--line-lo); margin-top:.5rem; padding-top:.7rem;
  font-size:1.1rem; font-weight:700; color:var(--text-lo);
}

/* skeleton loaders while Supabase responds */
.skeleton{
  border-radius:var(--radius-m); background:linear-gradient(100deg, var(--paper-dim) 30%, #fff 50%, var(--paper-dim) 70%);
  background-size:200% 100%; animation:shimmer 1.3s infinite linear;
}
.skeleton-frame{ grid-column:span 2; grid-row:span 3; }
@keyframes shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

.toast{
  position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%) translateY(120%);
  background:var(--ink); color:var(--text-hi); padding:.85rem 1.4rem; border-radius:999px;
  font-size:.88rem; font-weight:600; z-index:400; box-shadow:var(--shadow-lift);
  transition:transform .3s ease; max-width:90vw; text-align:center;
}
.toast.is-visible{ transform:translateX(-50%) translateY(0); }

/* renglones del carrito y favoritos */
.cart-item{ display:flex; gap:.9rem; padding:.9rem 0; border-bottom:1px solid var(--line-lo); }
.cart-item-thumb{ width:60px; height:60px; border-radius:var(--radius-s); object-fit:cover; flex:0 0 auto; background:var(--ink-soft); }
.cart-item-info{ flex:1; min-width:0; }
.cart-item-title{ font-weight:700; font-size:.9rem; margin:0; }
.cart-item-meta{ font-family:var(--f-mono); font-size:.68rem; color:var(--muted-lo); margin:.25rem 0 0; line-height:1.5; }
.cart-item-price{ font-family:var(--f-mono); font-weight:700; font-size:.9rem; white-space:nowrap; }
.cart-item-remove{ background:none; border:none; color:var(--crimson); font-size:.72rem; font-weight:700; padding:0; margin-top:.35rem; cursor:pointer; }

/* =========================================================
   AVISOS DE STOCK (solo productos físicos)
   ========================================================= */
.sold-out-badge{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(19,19,24,.62); color:var(--text-hi); font-family:var(--f-mono);
  font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.polaroid-photo{ position:relative; }
.polaroid-card.is-sold-out{ opacity:.72; }
.polaroid-card.is-sold-out:hover{ transform:rotate(0deg) translateY(-2px); }

.stock-warn{
  font-family:var(--f-mono); font-size:.66rem; color:var(--crimson);
  font-weight:700; margin:.3rem 0 0;
}
.stock-note{
  margin-top:1rem; font-size:.84rem; font-weight:600; padding:.6rem .9rem;
  border-radius:var(--radius-s);
}
.stock-ok{ background:rgba(143,169,143,.16); color:#4E7052; }
.stock-low{ background:rgba(242,169,60,.16); color:#8A5A11; }
.stock-out{ background:rgba(226,72,47,.12); color:#A8321F; }