@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Work+Sans:wght@300;400;500;600&display=swap');

:root{
  color-scheme: light only;
  --bg: #faf4ea;
  --surface: #ffffff;
  --paper: #241f26;
  --magenta: #d1266e;
  --orange: #e2711d;
  --cyan: #0f8fa0;
  --ink: #17141a;
  --onbright: #fffaf3;
  --muted: #6b6273;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

html, body{
  background:#faf4ea !important;
  color-scheme: light only;
}

body{
  color:#241f26 !important;
  font-family:'Work Sans', sans-serif;
  font-weight:300;
  overflow-x:hidden;
}

/* Bloqueo explícito del modo oscuro del sistema: si el dispositivo
   pide dark, forzamos igualmente los colores claros de la marca. */
@media (prefers-color-scheme: dark){
  html, body{
    background:#faf4ea !important;
  }
  body{
    color:#241f26 !important;
  }
  header{
    background:rgba(250,244,234,0.88) !important;
  }
  .step, .testi-card, .policy-item, .fab-option{
    background:#ffffff !important;
  }
}

h1,h2,h3,.display{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
}

a{ color:inherit; text-decoration:none; }

.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:0 24px;
}

/* header */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,244,234,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(30,25,36,0.08);
}
header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.logo{
  font-size:1.15rem; font-weight:700;
  display:flex; align-items:center; gap:10px;
  color:inherit; text-decoration:none;
}
.logo-img{
  width:40px; height:40px;
  border-radius:50%;
  object-fit:cover;
  flex:none;
}
.lang-switch{
  display:flex;
  background:rgba(30,25,36,0.06);
  border:1px solid rgba(30,25,36,0.18);
  border-radius:999px;
  padding:3px;
  gap:2px;
}
.lang-opt{
  border:none;
  background:transparent;
  color:var(--muted);
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:0.82rem;
  padding:7px 14px;
  border-radius:999px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.lang-opt.is-active{
  background:linear-gradient(100deg, var(--magenta), var(--orange));
  color:var(--ink);
}
.lang-opt:not(.is-active):hover{
  color:var(--paper);
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px;
  border-radius:999px;
  font-size:0.9rem; font-weight:600;
  font-family:'Work Sans', sans-serif;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-primary{
  background:linear-gradient(100deg, var(--magenta), var(--orange));
  color:var(--ink);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(209,38,110,0.35); }
.btn-secondary{ background:#fff; color:#1a1a2e; border:1.5px solid #1a1a2e; }
.btn-secondary:hover{ background:#f5f5f7; }
.cart-pay-btn:disabled{ opacity:0.6; cursor:not-allowed; }
.btn-ghost{
  border:1px solid rgba(30,25,36,0.25);
  color:var(--paper);
  padding:10px 20px;
}
.btn-instagram{
  background:linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7);
  color:#fff;
}
.btn-instagram:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(238,42,123,0.35); }
.btn-stripe{
  background:#635bff;
  color:#fff;
}
.btn-stripe:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(99,91,255,0.35); }
.icon{ width:18px; height:18px; flex:none; }
.cta-row{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
}

/* floating chat button */
.fab-wrap{
  position:fixed; right:20px; bottom:20px;
  /* Por encima del banner de cookies (900): si no, al abrir el menú de
     contacto, sus opciones quedan tapadas detrás del banner. */
  z-index:910;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  /* El menú (.fab-menu), aunque esté cerrado e invisible, sigue
     ocupando espacio dentro de este contenedor y por lo tanto podía
     "tapar" clics destinados a lo que hay detrás (como el banner de
     cookies). Se desactiva aquí y se reactiva solo en los elementos
     que sí deben responder al clic. */
  pointer-events:none;
}
.fab-btn{ pointer-events:auto; }
.fab-menu{
  display:flex; flex-direction:column; gap:10px;
  opacity:0; transform:translateY(10px) scale(0.95);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.fab-menu.open{
  opacity:1; transform:translateY(0) scale(1);
  pointer-events:auto;
}
.fab-option{
  display:flex; align-items:center; gap:10px;
  background:var(--surface);
  color:var(--paper);
  border:1px solid rgba(30,25,36,0.15);
  padding:10px 16px;
  border-radius:999px;
  font-size:0.85rem;
  font-family:'Work Sans', sans-serif;
  box-shadow:0 8px 20px rgba(40,30,20,0.18);
  white-space:nowrap;
}
.fab-option .icon{ width:20px; height:20px; }
.fab-btn{
  width:60px; height:60px;
  border-radius:50%;
  background:linear-gradient(100deg, var(--magenta), var(--orange));
  border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(209,38,110,0.45);
  transition:transform .2s ease;
}
.fab-btn:hover{ transform:scale(1.06); }
.fab-btn svg{ width:28px; height:28px; color:var(--ink); }
.fab-btn.is-open svg.icon-chat{ display:none; }
.fab-btn:not(.is-open) svg.icon-close{ display:none; }

.cookie-banner{
  position:fixed; left:16px; right:16px;
  /* Siempre por encima del botón flotante de chat (60px + 20px de
     margen inferior), para que nunca lo tape ni sus clics se pierdan
     detrás de él, sin importar el ancho de pantalla. */
  bottom:92px; z-index:900;
  max-width:640px; margin:0 auto;
  background:var(--paper); color:#fff;
  border-radius:14px;
  box-shadow:0 12px 32px rgba(20,14,10,0.3);
  padding:16px 18px;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px;
  opacity:0; transform:translateY(12px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.cookie-banner.is-visible{
  opacity:1; transform:translateY(0);
  pointer-events:auto;
}
.cookie-banner p{
  flex:1 1 220px;
  margin:0;
  font-size:0.85rem;
  line-height:1.5;
  color:#e7e1ec;
}
.cookie-banner-actions{
  display:flex; gap:10px; flex-shrink:0;
}
.cookie-banner-actions .btn{
  padding:9px 16px;
  font-size:0.82rem;
}

/* hero */
.hero{
  padding:100px 0 80px;
  position:relative;
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:48px;
  align-items:center;
}
.eyebrow{
  font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:18px; display:block;
}
.hero h1{
  font-size:clamp(2.3rem, 5vw, 3.6rem);
  line-height:1.05;
  margin-bottom:22px;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg, var(--magenta), var(--orange) 60%, var(--cyan));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p{
  font-size:1.05rem; color:var(--muted); max-width:44ch; margin-bottom:34px;
  line-height:1.6;
}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

/* logo hero art */
.mug-stage{
  display:flex; align-items:center; justify-content:center;
  position:relative; height:340px;
}
.hero-logo-glow{
  position:absolute;
  width:320px; height:320px;
  background:radial-gradient(circle, rgba(209,38,110,0.35), rgba(226,113,29,0.15) 55%, transparent 75%);
  filter:blur(10px);
  animation:pulseGlow 4s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{ transform:scale(1); opacity:0.8; }
  50%{ transform:scale(1.08); opacity:1; }
}
.hero-logo{
  position:relative;
  width:280px; height:280px;
  object-fit:contain;
  animation:floatLogo 5s ease-in-out infinite;
  filter:drop-shadow(0 20px 40px rgba(40,30,20,0.25));
}
@keyframes floatLogo{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}

/* process */
.process{ padding:80px 0; border-top:1px solid rgba(30,25,36,0.08); }
.section-head{ margin-bottom:52px; max-width:60ch; }
.section-head .eyebrow{ margin-bottom:12px; }
.catalog .section-head .eyebrow{
  margin-bottom:0;
  margin-top:10px;
  font-size:0.92rem;
}
.section-head h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); }

.steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.step{
  background:var(--surface);
  border-radius:18px;
  padding:32px 26px;
  border:1px solid rgba(30,25,36,0.08);
  box-shadow:0 6px 20px rgba(40,30,20,0.06);
}
.step-num{
  font-family:'Space Grotesk', sans-serif;
  font-size:0.85rem; font-weight:600;
  color:var(--ink);
  background:linear-gradient(100deg, var(--magenta), var(--orange));
  width:32px; height:32px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.step h3{ font-size:1.1rem; margin-bottom:10px; }
.step p{ color:var(--muted); font-size:0.92rem; line-height:1.6; }

/* catalog */
.catalog{ padding:80px 0; border-top:1px solid rgba(30,25,36,0.08); }
.cat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.cat-card{
  aspect-ratio:3/4;
  border-radius:18px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(30,25,36,0.08);
  box-shadow:0 8px 22px rgba(40,30,20,0.10);
  display:flex; align-items:flex-end;
  padding:18px;
}
.cat-card::before{
  content:'';
  position:absolute; inset:0;
  opacity:0.9;
}
.cat-card.mugs::before{
  background-image:linear-gradient(to top, rgba(20,10,15,0.55), rgba(20,10,15,0.05) 45%), url('/images/img-0002.jpg');
  background-size:cover;
  background-position:center 25%;
  opacity:1;
}
.cat-card.shirts::before{
  background-image:linear-gradient(to top, rgba(20,15,10,0.55), rgba(20,15,10,0.05) 45%), url('/images/img-0003.jpg');
  background-size:cover;
  background-position:center 30%;
  opacity:1;
}
.cat-card.caps::before{
  background-image:linear-gradient(to top, rgba(15,15,15,0.5), rgba(15,15,15,0.05) 45%), url('/images/img-0004.jpg');
  background-color:#f5f0e8;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  opacity:1;
}
.cat-card.other::before{
  background-image:linear-gradient(to top, rgba(15,15,20,0.55), rgba(15,15,20,0.05) 45%), url('/images/img-0005.jpg');
  background-size:cover;
  background-position:center 20%;
  opacity:1;
}
.cat-card span{
  position:relative; z-index:1;
  font-family:'Space Grotesk', sans-serif;
  font-weight:600; font-size:1.05rem;
  color:var(--onbright);
  text-shadow:0 2px 8px rgba(0,0,0,0.35);
}

/* why */
.why{ padding:80px 0; border-top:1px solid rgba(30,25,36,0.08); }
.why-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.why-item h3{
  font-size:1rem; margin-bottom:8px;
  display:flex; align-items:center; gap:10px;
}
.why-item .chip{
  width:8px; height:8px; border-radius:50%;
  background:var(--orange); flex:none;
}
.why-item p{ color:var(--muted); font-size:0.92rem; line-height:1.6; }

/* cta */
.cta{
  padding:90px 0;
  text-align:center;
  border-top:1px solid rgba(30,25,36,0.08);
}
.cat-card{ cursor:pointer; border:none; font:inherit; }

/* Galería de productos */
.gallery-overlay{
  display:none;
  position:fixed;
  /* Empieza debajo del header (72px) para que el logo, ES/EN y el
     carrito se queden visibles arriba mientras se ven las fotos. */
  top:72px; left:0; right:0; bottom:0;
  z-index:950;
  background:#faf4ea;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.gallery-overlay.open{ display:block; }
.gallery-shipping-strip{
  background:#ffffff;
  color:#000000;
  font-family:Arial, Helvetica, sans-serif;
  font-weight:700;
  font-size:0.78rem;
  text-align:center;
  padding:6px 8px;
  border-bottom:1px solid rgba(30,25,36,0.08);
}
.gallery-header{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  background:rgba(250,244,234,0.95);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(30,25,36,0.08);
}
.gallery-title{
  font-family:'Playfair Display', serif;
  font-size:1.3rem;
  font-weight:700;
  color:#241f26;
}
.gallery-close{
  width:36px; height:36px;
  border-radius:50%;
  border:none;
  background:#fff;
  color:#241f26;
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(30,25,36,0.15);
}
.gallery-back{
  width:36px; height:36px;
  border-radius:50%;
  border:none;
  background:#fff;
  color:#241f26;
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(30,25,36,0.15);
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  padding:16px 16px 40px;
}
.gallery-item{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 2px 10px rgba(30,25,36,0.08);
}
.gallery-item .photo{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
}
.gallery-item img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.gallery-item .price-tag{
  padding:10px 12px 12px;
  text-align:center;
}
.price-tag .p-name{
  display:block;
  font-size:0.8rem;
  font-weight:600;
  color:var(--paper);
  line-height:1.25;
  margin-bottom:4px;
}
.price-tag .p-price{
  font-family:'Playfair Display', serif;
  font-size:1.15rem;
  font-weight:700;
  background:linear-gradient(90deg, var(--magenta), var(--orange));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.gallery-empty{
  grid-column:1/-1;
  text-align:center;
  padding:60px 24px;
  color:var(--muted);
  font-size:1rem;
}
@media(min-width:640px){
  .gallery-grid{ grid-template-columns:repeat(3,1fr); }
}
@media(min-width:960px){
  .gallery-grid{ grid-template-columns:repeat(4,1fr); }
}
.gallery-item{ cursor:default; }
.gallery-item .photo{ position:relative; cursor:pointer; }

.product-lightbox{
  position:fixed;
  /* Empieza debajo del header (72px) para que el logo, ES/EN y el
     carrito se queden visibles arriba también aquí. */
  top:72px; left:0; right:0; bottom:0;
  z-index:1000;
  background:rgba(20,14,10,0.82);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.25s ease;
}
.product-lightbox.open{
  opacity:1;
  visibility:visible;
}
.product-lightbox-inner{
  background:var(--paper);
  border-radius:20px;
  max-width:920px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  display:grid;
  grid-template-columns:1fr;
  /* Filas explícitas + align-content:start: sin esto, cuando la
     descripción se expande y el contenido supera max-height, el navegador
     "aprieta" la fila de la foto a 0px en vez de solo activar el scroll. */
  grid-template-rows:auto auto;
  align-content:start;
  box-shadow:0 20px 60px rgba(0,0,0,0.35);
  position:relative;
}
@media(max-width:719px){
  /* Una sola columna: usamos apilado normal de bloques en vez de grid.
     Con grid, cuando la descripción se expande y el contenido supera
     max-height, el navegador "aprieta" la fila de la foto a 0px en vez
     de solo activar el scroll. Con bloques normales, cada uno se ajusta
     a su propio contenido sin ese problema. */
  .product-lightbox-inner{ display:block; }
}
@media(min-width:720px){
  .product-lightbox-inner{ grid-template-columns:1fr 1fr; }
}
@media(max-width:520px){
  /* En celular, que la foto llegue a los bordes de la pantalla en vez de
     quedar con margen alrededor. Ojo: NO forzar height:100% aquí — eso hace
     que la cuadrícula "estire" la fila de la descripción de forma pareja
     con la de la foto y se monten una sobre otra. Dejamos que la altura
     se ajuste sola al contenido, con scroll si no cabe todo. */
  .product-lightbox{ padding:0; }
  .product-lightbox-inner{ border-radius:0; max-height:100vh; }
}
.product-lightbox-close{
  position:absolute;
  top:14px; right:14px;
  width:38px; height:38px;
  border-radius:50%;
  border:none;
  background:#fff;
  color:#241f26;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(30,25,36,0.25);
  z-index:1;
}
.product-lightbox-photo{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--surface);
  position:relative;
}
.product-lightbox-photo img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}
.pl-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:38px; height:38px;
  border-radius:50%;
  border:none;
  background:rgba(20,15,10,0.5);
  color:#fff;
  font-size:1rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.2s ease;
}
.pl-nav:hover{ background:rgba(20,15,10,0.75); }
.pl-prev{ left:10px; }
.pl-next{ right:10px; }
.pl-dots{
  position:absolute;
  bottom:12px;
  left:0; right:0;
  display:flex;
  justify-content:center;
  gap:6px;
}
.pl-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:rgba(255,255,255,0.5);
  transition:background 0.2s ease, transform 0.2s ease;
}
.pl-dot.active{
  background:#ffffff;
  transform:scale(1.3);
}
.product-lightbox-info{
  padding:30px 30px 36px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.product-lightbox-info .pl-name{
  font-family:'Playfair Display', serif;
  font-size:1.8rem;
  font-weight:700;
  color:#ffffff;
  line-height:1.25;
}
.product-lightbox-info .pl-price{
  font-family:'Playfair Display', serif;
  font-size:1.5rem;
  font-weight:700;
  background:linear-gradient(90deg, #ff7fb0, var(--orange));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.pl-actions-row{ display:flex; gap:10px; flex-wrap:wrap; }
.product-lightbox-info .pl-share{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  color:#e7e1ec;
  font-size:0.85rem;
  padding:7px 14px;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s ease;
}
.product-lightbox-info .pl-share:hover{ background:rgba(255,255,255,0.16); }
.product-lightbox-info .pl-share svg{ width:15px; height:15px; flex-shrink:0; }
.product-lightbox-info .pl-share.copied{ background:rgba(80,200,120,0.28); border-color:rgba(80,200,120,0.55); }
.product-lightbox-info .pl-share.is-fav{ background:rgba(255,111,145,0.22); border-color:rgba(255,111,145,0.55); }
.product-lightbox-info .pl-share.is-fav svg{ fill:#ff6f91; stroke:#ff6f91; }

.gallery-item .photo .fav-heart{
  position:absolute;
  top:8px;
  right:8px;
  width:32px;
  height:32px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.9);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.18);
  z-index:2;
}
.gallery-item .photo .fav-heart svg{ width:17px; height:17px; fill:none; stroke:#c1493a; stroke-width:2; }
.gallery-item .photo .fav-heart.is-fav svg{ fill:#c1493a; }
.product-lightbox-info .pl-desc{
  white-space:pre-line;
  color:#e7e1ec;
  font-size:1.08rem;
  line-height:1.7;
  max-height:5.1em;
  overflow:hidden;
  position:relative;
  transition:max-height 0.3s ease;
}
.product-lightbox-info .pl-desc.expanded{
  max-height:2000px;
}
.pl-desc-toggle{
  display:inline-block;
  margin-top:2px;
  background:none;
  border:none;
  color:#ffd8a8;
  font-weight:700;
  font-size:0.92rem;
  cursor:pointer;
  padding:0;
  text-decoration:underline;
}
.pl-variants{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.pl-variants:empty{ display:none; }
.pl-variant-btn{
  padding:8px 16px;
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,0.35);
  background:transparent;
  color:#e7e1ec;
  font-size:0.88rem;
  font-weight:600;
  cursor:pointer;
  transition:all 0.2s ease;
}
.pl-variant-btn:hover{
  border-color:rgba(255,255,255,0.6);
}
.pl-variant-btn.active{
  background:#ffffff;
  color:#241f26;
  border-color:#ffffff;
}
.pl-sizes{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.pl-sizes:empty{ display:none; }
.pl-sizes-note{
  color:#ffd8a8;
  font-size:0.85rem;
  line-height:1.5;
  font-weight:600;
}
.pl-sizes .pl-sizes-label{
  color:#e7e1ec;
  font-size:0.88rem;
  font-weight:600;
  margin-right:2px;
}
.pl-size-btn{
  min-width:40px;
  height:38px;
  padding:0 14px;
  border-radius:8px;
  border:1.5px solid rgba(255,255,255,0.35);
  background:transparent;
  color:#e7e1ec;
  font-size:0.88rem;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  transition:all 0.2s ease;
}
.pl-size-btn:hover{
  border-color:rgba(255,255,255,0.6);
}
.pl-size-btn.active{
  background:#ffffff;
  color:#241f26;
  border-color:#ffffff;
}
.pl-design-select{
  padding:9px 14px;
  border-radius:8px;
  border:1.5px solid rgba(255,255,255,0.35);
  background:#241f26;
  color:#ffffff;
  font-size:0.9rem;
  font-weight:600;
  font-family:'Space Grotesk', sans-serif;
  cursor:pointer;
}

.pl-personalize{
  border:1px solid rgba(255,255,255,0.18);
  border-radius:14px;
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.pl-personalize-title{
  color:#ffffff;
  font-weight:700;
  font-size:0.98rem;
}
.pl-personalize-sub{
  color:#c9c2d1;
  font-size:0.83rem;
  line-height:1.5;
  margin-bottom:4px;
}
.pl-upload-box{
  display:flex;
  align-items:center;
  gap:14px;
  border:1.5px dashed rgba(255,255,255,0.35);
  border-radius:10px;
  padding:14px 16px;
  cursor:pointer;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.pl-upload-box:hover{
  border-color:rgba(255,255,255,0.6);
  background:rgba(255,255,255,0.04);
}
.pl-upload-box.has-file{
  border-style:solid;
  border-color:#3f9b56;
}
.pl-upload-plus{
  font-size:1.4rem;
  color:#e7e1ec;
  line-height:1;
  flex-shrink:0;
}
.pl-upload-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.pl-upload-text strong{
  color:#ffffff;
  font-size:0.92rem;
}
.pl-upload-text small{
  color:#a89fb2;
  font-size:0.78rem;
}
.pl-note-label{
  color:#e7e1ec;
  font-size:0.85rem;
  font-weight:600;
  margin-top:6px;
}
.pl-note-input{
  width:100%;
  min-height:64px;
  border-radius:10px;
  border:1.5px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.04);
  color:#ffffff;
  padding:10px 12px;
  font-family:inherit;
  font-size:0.9rem;
  resize:vertical;
}
.pl-note-input::placeholder{ color:#8a8092; }
.pl-note-count{
  align-self:flex-end;
  color:#8a8092;
  font-size:0.76rem;
}
.pl-personalize-error{
  color:#ff8f8f;
  font-size:0.82rem;
  line-height:1.4;
  margin-top:4px;
}

.pl-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:4px;
}
.pl-btn{
  flex:1 1 160px;
  padding:13px 16px;
  border-radius:10px;
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:0.95rem;
  cursor:pointer;
  border:none;
  transition:all 0.2s ease;
}
.pl-btn-cart{
  background:transparent;
  border:1.5px solid #ffffff;
  color:#ffffff;
}
.pl-btn-cart:hover{
  background:rgba(255,255,255,0.12);
}
.pl-btn-buy{
  background:var(--orange);
  color:#ffffff;
}
.pl-btn-buy:hover{
  filter:brightness(1.08);
}
.pl-btn.added{
  background:#3f9b56 !important;
  border-color:#3f9b56 !important;
  color:#fff !important;
}

.cart-btn{
  position:relative;
  background:transparent;
  border:1.5px solid rgba(30,25,36,0.18);
  border-radius:10px;
  padding:8px 12px;
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
}
.cart-badge{
  position:absolute;
  top:-8px;
  right:-8px;
  background:var(--orange);
  color:#fff;
  font-size:0.7rem;
  font-weight:700;
  border-radius:999px;
  min-width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
}

.cart-overlay{
  position:fixed; inset:0;
  background:rgba(20,15,10,0.55);
  z-index:1100;
  opacity:0; pointer-events:none;
  transition:opacity 0.25s ease;
}
.cart-overlay.open{ opacity:1; pointer-events:auto; }

.cart-panel{
  position:fixed;
  top:0; right:0;
  height:100%;
  width:min(400px, 92vw);
  background:var(--surface, #fff);
  z-index:1101;
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform 0.3s ease;
  box-shadow:-8px 0 30px rgba(0,0,0,0.2);
}
.cart-panel.open{ transform:translateX(0); }
.cart-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px;
  border-bottom:1px solid rgba(30,25,36,0.1);
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:1.15rem;
}
.cart-close{
  background:none; border:none; font-size:1.6rem; line-height:1; cursor:pointer;
  color:inherit;
}
.cart-items{
  flex:1;
  overflow-y:auto;
  padding:12px 22px;
}
.cart-item{
  display:flex;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid rgba(30,25,36,0.08);
}
.cart-item img{
  width:64px; height:64px; object-fit:cover; border-radius:8px; flex-shrink:0;
}
.cart-item-info{ flex:1; min-width:0; }
.cart-item-name{ font-weight:700; font-size:0.92rem; }
.cart-item-meta{ font-size:0.8rem; color:var(--muted); margin-top:2px; }
.cart-item-price{ font-weight:700; margin-top:4px; font-size:0.9rem; }
.cart-item-row{
  display:flex; align-items:center; gap:10px; margin-top:8px;
}
.cart-qty-btn{
  width:26px; height:26px; border-radius:6px; border:1px solid rgba(30,25,36,0.2);
  background:transparent; cursor:pointer; font-weight:700;
}
.cart-remove-btn{
  margin-left:auto; background:none; border:none; color:#c1493a; font-size:0.82rem;
  cursor:pointer; text-decoration:underline;
}
.cart-empty{
  display:none;
  padding:40px 22px;
  text-align:center;
  color:var(--muted);
}
.cart-panel.is-empty .cart-empty{ display:block; }
.cart-panel.is-empty .cart-items{ display:none; }
.cart-footer{
  padding:18px 22px 22px;
  border-top:1px solid rgba(30,25,36,0.1);
}
.cart-subtotal-row, .cart-shipping-row{
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.92rem; color:var(--muted); margin-bottom:6px;
}
.cart-total-row{
  display:flex; justify-content:space-between; align-items:center;
  font-weight:700; font-size:1.05rem; margin-bottom:14px;
}
.cart-note{ font-size:0.78rem; color:var(--muted); margin-top:10px; line-height:1.4; }
.trust-badges{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  margin-top:12px; padding-top:12px;
  border-top:1px solid rgba(30,25,36,0.08);
}
.trust-badge{
  display:flex; align-items:center; gap:6px;
  font-size:0.74rem; color:var(--muted);
}
.trust-badge svg{ width:18px; height:18px; flex:none; color:var(--muted); }
.cart-manchester-check{
  display:flex; align-items:flex-start; gap:8px;
  font-size:0.82rem; color:var(--muted);
  margin-bottom:10px; cursor:pointer; line-height:1.4;
}
.cart-manchester-check input{ margin-top:2px; flex:none; }

.testimonials{ padding:80px 0; border-top:1px solid rgba(30,25,36,0.08); }
.review-form{
  background:var(--surface);
  border:1px solid rgba(30,25,36,0.08);
  border-radius:18px;
  padding:28px 24px;
  box-shadow:0 6px 20px rgba(40,30,20,0.06);
  max-width:520px;
  margin:0 auto 40px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.review-form h3{
  font-family:'Playfair Display', serif;
  font-size:1.3rem;
  color:var(--ink);
}
.review-form-row{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.review-form-row label{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:0.85rem;
  color:var(--ink);
}
.review-form-row input[type="text"],
.review-form-row textarea{
  width:100%;
  border-radius:10px;
  border:1.5px solid rgba(30,25,36,0.15);
  background:var(--bg);
  color:var(--ink);
  padding:10px 12px;
  font-family:inherit;
  font-size:0.9rem;
  resize:vertical;
}
.review-form-row input[type="file"]{
  font-size:0.85rem;
  color:var(--muted);
}
.review-stars{
  display:flex;
  gap:4px;
}
.review-star{
  background:none;
  border:none;
  padding:0;
  line-height:1;
  font-size:1.7rem;
  color:rgba(30,25,36,0.22);
  cursor:pointer;
  transition:color .1s ease, transform .1s ease;
}
.review-star:hover{ transform:scale(1.1); }
.review-star.is-active{ color:var(--orange); }
.review-honeypot{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.review-form-msg{ font-size:0.88rem; font-weight:600; }
.review-form-msg.is-error{ color:#c0392b; }
.review-form-msg.is-success{ color:#1f8a4c; }
.review-form-note{ font-size:0.78rem; color:var(--muted); text-align:center; }
.testi-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:22px; }
.testi-card{
  background:var(--surface);
  border:1px solid rgba(30,25,36,0.08);
  border-radius:18px;
  padding:28px 24px;
  box-shadow:0 6px 20px rgba(40,30,20,0.06);
  display:flex; flex-direction:column; gap:14px;
}
.testi-stars{ color:var(--orange); font-size:1rem; letter-spacing:2px; }
.testi-quote{ color:var(--paper); font-size:0.95rem; line-height:1.6; flex-grow:1; }
.testi-name{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:0.9rem; }
.testi-product{ color:var(--muted); font-size:0.8rem; }
.testi-date{ color:var(--muted); font-size:0.72rem; margin-top:-6px; }
.testi-photo{ width:84px; height:84px; object-fit:cover; border-radius:12px; cursor:zoom-in; align-self:flex-start; box-shadow:0 2px 8px rgba(0,0,0,0.15); transition:transform .15s ease; }
.testi-photo:hover{ transform:scale(1.04); }
.testi-grid .testi-card:nth-child(n+5){ display:none; }
.testi-grid.testi-expanded .testi-card{ display:flex; }
.testi-more-btn{ display:block; margin:24px auto 0; }
.photo-viewer{ position:fixed; inset:0; background:rgba(20,15,10,0.88); display:none; align-items:center; justify-content:center; z-index:9999; padding:32px; }
.photo-viewer.open{ display:flex; }
.photo-viewer img{ max-width:100%; max-height:100%; border-radius:14px; box-shadow:0 10px 40px rgba(0,0,0,0.4); }
.photo-viewer-close{ position:absolute; top:18px; right:18px; width:42px; height:42px; border-radius:50%; border:none; background:rgba(255,255,255,0.15); color:#fff; font-size:1.6rem; line-height:1; cursor:pointer; }
.photo-viewer-close:hover{ background:rgba(255,255,255,0.28); }
@media (max-width:800px){
  .testi-grid{ grid-template-columns:1fr; }
}

.cta h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:16px; }
.cta p{ color:var(--muted); margin-bottom:30px; }

.policies{ padding:80px 0; border-top:1px solid rgba(30,25,36,0.08); }
.policy-list{ display:flex; flex-direction:column; gap:12px; max-width:760px; margin:0 auto; }
.policy-item{
  background:var(--surface);
  border:1px solid rgba(30,25,36,0.08);
  border-radius:14px;
  padding:18px 22px;
  box-shadow:0 4px 14px rgba(40,30,20,0.05);
}
.policy-item summary{
  cursor:pointer;
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:1rem;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.policy-item summary::-webkit-details-marker{ display:none; }
.policy-item summary::after{
  content:'+';
  font-size:1.4rem;
  color:var(--muted);
  flex-shrink:0;
}
.policy-item[open] summary::after{ content:'−'; }
.policy-item p{
  margin-top:12px;
  color:var(--muted);
  font-size:0.92rem;
  line-height:1.65;
  white-space:pre-line;
}
.policy-note{
  text-align:center;
  color:var(--muted);
  font-size:0.85rem;
  margin-top:20px;
}

footer{
  padding:36px 0;
  border-top:1px solid rgba(30,25,36,0.08);
  color:var(--muted);
  font-size:0.85rem;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
}

@media (max-width:800px){
  .hero .wrap{ grid-template-columns:1fr; }
  .mug-stage{ order:-1; height:220px; }
  .steps{ grid-template-columns:1fr; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .why-grid{ grid-template-columns:1fr; }
  footer{ flex-direction:column; text-align:center; }
  .logo span{ display:none; }
  header .wrap{ gap:10px; }
  .btn-primary{ padding:10px 16px; font-size:0.82rem; }
}