/* ==========================================================
   Edicions L'Escletxa — Identitat "Llibreria de Mercat"
   Blanc net, accent blau de confiança, sans-serif comercial.
   Patrons reconeixibles de botiga de llibres real (Casa del
   Libro, Fnac, Todostuslibros), no una peça de disseny arty.
   Bootstrap només aporta grid/utilitats; tota la resta és pròpia.
   ========================================================== */

:root{
  --bg:        #FFFFFF;
  --bg-soft:   #F5F6FA;   /* seccions alternades, capçalera */
  --bg-raised: #FFFFFF;   /* targetes */
  --ink:       #14161F;   /* gairebé negre, mai pur */
  --ink-soft:  #4A4E5C;
  --ink-dim:   #767A87;   /* gris de suport, contrast AA garantit */
  --accent:    #2451E0;   /* blau de confiança — CTA i enllaços */
  --accent-2:  #173AAE;
  --success:   #1E8E5A;   /* en estoc */
  --danger:    #E23F3F;   /* esgotat / oferta */
  --line:      #E4E6EC;
  --line-soft: #EEF0F4;
  --radius:    10px;
  --radius-sm: 6px;

  --font-display: 'Manrope', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'Inter', system-ui, sans-serif; /* es manté el nom per compatibilitat, ja no és monoespai */
}

/* ----------------------------------------------------------
   La Grieta — subeditorial en castellà servida a /grieta.
   Mateix sistema visual ("Taller Tipogràfic"), amb un accent
   propi (terracota) perquè es distingeixi de L'Escletxa (blau)
   sense duplicar cap altra regla d'estil.
   ---------------------------------------------------------- */
body.brand-grieta{
  --accent:   #B23A2E;
  --accent-2: #8A2C22;
}
body.brand-grieta .book-badge.is-new{ background: rgba(178,58,46,.1); }

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; font-size: 15px; } /* base una mica més petita: tot el que està en rem es redueix proporcionalment */
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* El contenidor no tenia cap amplada màxima: en una pantalla ampla tot (columnes,
   imatges, tipografia relativa) creixia sense límit i es feia desproporcionat.
   Ho capem i centrem — segueix sent fluid i mobile-first per sota d'aquesta amplada. */
.container-fluid{ max-width: 1280px; margin-left:auto; margin-right:auto; }
.site-nav .container-fluid{ max-width: 1400px; } /* la nav pot respirar una mica més ampla */

.skip-link{ position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:.6rem 1rem; z-index:2000; font-weight:700; }
.skip-link:focus{ left:.5rem; top:.5rem; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background: var(--accent); color:#fff; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

h1,h2{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 .35em;
}
h1{ font-size: clamp(2.1rem, 4.2vw, 2.7rem); }
h2{ font-size: clamp(1.5rem, 2.6vw, 1.75rem); }
h3{ font-family: var(--font-body); font-weight:600; font-size:1.02rem; margin:0 0 .3em; }

.eyebrow{
  font-family: var(--font-body);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: .74rem;
  color: var(--accent);
  margin: 0 0 .7rem;
}

.page-lede, .hero-lede{ color: var(--ink-soft); font-size:1rem; line-height:1.6; max-width:52ch; }

/* ---------- Motiu de marca: petita fissura discreta al costat del logo ---------- */
.brand-glyph{ display:inline-block; vertical-align:middle; margin-right:.4rem; color: var(--accent); }
.brand-logo-img{ height:32px; max-width:180px; object-fit:contain; }

/* ---------- Botons ---------- */
.btn-ink, .btn-outline-ink{
  font-family: var(--font-body);
  font-weight:700;
  font-size: .88rem;
  border-radius: 999px;
  padding: .72rem 1.5rem;
  display:inline-block;
  border: 1.5px solid transparent;
  transition: transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn-ink{ background: var(--accent); color: #fff; box-shadow: 0 3px 8px rgba(36,81,224,.16); }
.btn-ink:hover{ background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 5px 12px rgba(36,81,224,.2); color:#fff; }
.btn-outline-ink{ background: transparent; color: var(--ink); margin-left:.6rem; border-color: var(--line); }
.btn-outline-ink:hover{ background: var(--bg-soft); border-color: var(--ink-dim); transform: translateY(-1px); color: var(--ink); }
.btn-sm{ padding:.5rem 1.1rem; font-size:.82rem; }
.hero-actions{ margin-top:2rem; }
@media (max-width:420px){ .btn-outline-ink{ margin-left:0; margin-top:.6rem; display:block; } }

/* ---------- Navegació ---------- */
.site-nav{ background: var(--bg); position: sticky; top:0; z-index:1000; border-bottom:1px solid var(--line); box-shadow: 0 1px 0 rgba(20,22,31,.02); }
.navbar{ padding: .85rem 0; }
.brand-mark{ font-family: var(--font-display); font-weight:700; font-size:1.4rem; letter-spacing:-.01em; color: var(--ink); }
.brand-sub{ font-family: var(--font-body); font-weight:700; font-size:.62rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-dim); margin-left:.5rem; vertical-align: middle; }
.nav-link{ font-family: var(--font-body); font-weight:600; font-size:.9rem; color: var(--ink-soft) !important; padding: .5rem .9rem !important; position:relative; }
.nav-link.active{ color: var(--accent) !important; }
.navbar-toggler{ border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding:.4rem .6rem; }
.navbar-toggler:focus{ box-shadow:none; }
.toggler-lines{ display:flex; flex-direction:column; gap:4px; width:20px; }
.toggler-lines span{ height:2px; background:var(--ink); display:block; }
.lang-switch{ font-family: var(--font-body); font-weight:700; font-size:.78rem; margin-top:.6rem; }
.lang-switch a{ opacity:.4; }
.lang-switch a.is-active{ opacity:1; color:var(--accent); }
@media (min-width: 1200px){ .lang-switch{ margin-top:0; margin-left:1rem; } }

/* Enllaç creuat entre les dues editorials del grup (L'Escletxa <-> La Grieta) */
.other-brand-link{
  font-weight:700; font-size:.82rem; border:1px solid currentColor; border-radius:999px;
  padding:.3rem .85rem !important; margin-top:.6rem; display:inline-block;
}
@media (min-width: 1200px){ .other-brand-link{ margin-top:0; margin-left:1rem; } }

.nav-search{ flex:1; max-width:360px; }
.nav-search input{
  width:100%; border:1.5px solid var(--line); border-radius:999px; padding:.55rem 1rem .55rem 2.4rem;
  background: var(--bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23767A87' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat .85rem center;
  font-size:.92rem;
}
.nav-search input:focus{ outline:none; border-color: var(--accent); background-color:#fff; }

.nav-cart{ position:relative; display:inline-flex; align-items:center; gap:.35rem; font-weight:700; color: var(--ink) !important; }
.nav-cart-count{
  background: var(--accent); color:#fff; font-family: var(--font-body); font-size:.68rem; font-weight:700;
  min-width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  padding:0 .2rem;
}
.nav-cart-count[data-empty="true"]{ display:none; }

/* ---------- Hero: banner promocional, no muntatge artístic ---------- */
.hero{ padding: 2.6rem 0; background: linear-gradient(180deg, var(--bg-soft), var(--bg) 70%); }
.hero-stack{ position:relative; height: 280px; }
.hero-cover{
  position:absolute; width: 42%;
  border-radius: var(--radius);
  box-shadow: 0 8px 20px rgba(20,22,31,.1);
  border: 1px solid var(--line);
}
.hero-cover-0{ top:8%; left:6%; z-index:3; }
.hero-cover-1{ top:2%; left:52%; z-index:2; }
.hero-cover-2{ top:36%; left:28%; z-index:1; width:36%; opacity:.85; }
@media (max-width: 991px){ .hero-stack{ height:220px; } }

/* ---------- Seccions genèriques ---------- */
.section-featured, .section-collections, .section-catalog, .catalog-filters, .book-detail, .manifesto-body, .contact-section, .about-section, .press-section, .legal-section, .cart-section, .checkout-section{
  padding: 2.8rem 0;
}
.page-header{ padding: 2.4rem 0 1.4rem; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.6rem; flex-wrap:wrap; }
.section-link{ font-family: var(--font-body); font-weight:700; font-size:.85rem; color:var(--accent); }
.breadcrumb-line{ font-family: var(--font-body); font-size:.82rem; color: var(--ink-dim); margin-bottom:1rem; }
.breadcrumb-line a{ color: var(--ink-dim); }
.breadcrumb-line a:hover{ color: var(--accent); }

/* ---------- Targetes de llibre (patró d'e-commerce) ---------- */
.book-card{ display:block; }
.book-card-cover{
  aspect-ratio: 2/3; background: var(--bg-soft); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; margin-bottom:.85rem; position:relative;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.book-card:hover .book-card-cover{ box-shadow: 0 12px 26px rgba(20,22,31,.12); transform: translateY(-3px); border-color: var(--line); }
.book-card-cover img{ width:100%; height:100%; object-fit:cover; }
.book-badge{
  position:absolute; top:.55rem; left:.55rem; background:rgba(255,255,255,.94); color: var(--ink-soft); font-size:.64rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.03em; padding:.24rem .5rem; border-radius:999px; box-shadow: 0 1px 4px rgba(20,22,31,.08);
}
.book-badge.is-new{ background: rgba(36,81,224,.1); color: var(--accent); }
.book-badge.is-low{ background: rgba(226,63,63,.1); color: var(--danger); }
.book-card-collection{ font-family: var(--font-body); font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-dim); margin:0 0 .25rem; }
.book-card-title{ font-family: var(--font-body); font-weight:600; font-size:1rem; margin:0 0 .15rem; line-height:1.3; }
.book-card-author{ font-size:.86rem; color:var(--ink-dim); margin:0 0 .4rem; }
.book-card-price{ font-family: var(--font-body); font-weight:700; font-size:.96rem; margin:0; color: var(--ink); }

/* ---------- Col·leccions ---------- */
.collection-card{ display:block; border:1px solid var(--line); border-radius: var(--radius); padding:1.6rem; height:100%; background: var(--bg-raised); transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.collection-card:hover{ box-shadow: 0 12px 28px rgba(20,22,31,.1); transform: translateY(-3px); border-color: var(--accent); }
.collection-card h3{ font-family: var(--font-display); font-size:1.25rem; font-weight:700; }
.collection-index{ font-family: var(--font-body); font-weight:700; font-size:1rem; color:var(--accent); display:block; margin-bottom:.5rem; }

/* ---------- Filtres de catàleg ---------- */
.filter-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.filter-chip{ font-family: var(--font-body); font-weight:700; font-size:.82rem; border:1.5px solid var(--line); padding:.42rem .9rem; border-radius: 999px; color: var(--ink-soft); }
.filter-chip.is-active{ background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- Fitxa de llibre ---------- */
.book-detail-cover img{
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 22px rgba(20,22,31,.08);
  max-width: 340px;
  margin: 0 auto;
}
.book-detail-cover{ text-align:center; }
@media (min-width: 992px){ .book-detail-cover{ text-align:left; } .book-detail-cover img{ margin:0; } }
.book-detail-author{ font-size:1rem; color: var(--ink-soft); font-weight:600; }
.book-detail-author a{ color: var(--accent); }
.book-detail-author a:hover{ text-decoration: underline; }
.book-detail-price{ font-family: var(--font-body); font-weight:700; font-size:1.4rem; margin: .5rem 0 1rem; color: var(--ink); }
.book-detail-synopsis{ max-width:62ch; line-height:1.68; font-size:.96rem; color: var(--ink-soft); }
.book-detail-meta{ list-style:none; padding:0; margin: 1.3rem 0; border-top:1px solid var(--line); }
.book-detail-meta li{ display:flex; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid var(--line); font-weight:600; font-size:.9rem; max-width:32ch; }
.book-detail-meta li span{ color: var(--ink-dim); font-weight:400; }
.book-detail-author-bio{ max-width:62ch; color: var(--ink-dim); margin: 1.2rem 0; line-height:1.6; }
.buy-box{ display:flex; align-items:center; gap:.7rem; margin-top:1.3rem; flex-wrap:wrap; background: var(--bg-soft); border:1px solid var(--line); border-radius: var(--radius); padding:1rem; }
.qty-input{ width:64px; border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:.7rem .6rem; background:#fff; color:var(--ink); text-align:center; font-weight:700; }
.stock-flag{ font-family: var(--font-body); font-size:.82rem; font-weight:700; }
.stock-flag.ok{ color: var(--success); }
.stock-flag.out{ color: var(--danger); }

/* ---------- Valoracions (estrelles) ---------- */
.stars{ position:relative; display:inline-block; font-size:1.05rem; letter-spacing:2px; line-height:1; }
.stars-bg{ color: var(--line); }
.stars-fg{ position:absolute; top:0; left:0; overflow:hidden; white-space:nowrap; color:#F5A623; }
.rating-summary{ display:flex; align-items:center; gap:.5rem; margin:.3rem 0 1rem; }
.rating-summary .rating-count{ font-size:.86rem; color: var(--ink-dim); }
.rating-summary .rating-avg{ font-weight:700; }
.review-card{ border-bottom:1px solid var(--line); padding:1.1rem 0; }
.review-card:last-child{ border-bottom:none; }
.review-card-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.3rem; }
.review-author{ font-weight:700; }
.review-date{ font-size:.78rem; color: var(--ink-dim); }
.review-comment{ color: var(--ink-soft); margin:0; }

/* ---------- Manifest / prosa ---------- */
.prose{ font-size:1.02rem; line-height:1.72; max-width: 62ch; color: var(--ink-soft); }

/* ---------- Contacte / formularis ---------- */
.contact-form .form-control, .cart-section .form-control{ border:1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); padding:.75rem .9rem; }
.contact-form .form-control::placeholder{ color: var(--ink-dim); }
.contact-form .form-control:focus{ box-shadow: 0 0 0 3px rgba(36,81,224,.14); border-color: var(--accent); background: #fff; color: var(--ink); }
.form-check-label a{ text-decoration: underline; color: var(--accent); }
.form-field-hp{ position:absolute; left:-9999px; }
.alert-sent{ border:1px solid var(--success); color: #146641; padding: 1rem; font-weight:600; font-size:.9rem; background: rgba(30,142,90,.07); border-radius: var(--radius-sm); }
.alert-error{ border:1px solid var(--danger); color: #a12727; padding: 1rem; font-size:.85rem; background: rgba(226,63,63,.06); border-radius: var(--radius-sm); }
.contact-aside p{ margin:.1rem 0 1rem; color: var(--ink-dim); }
.footer-heading{ font-family: var(--font-body); font-weight:700; text-transform:uppercase; font-size:.72rem; letter-spacing:.04em; color:#8891C7; margin-bottom:.5rem; }

.empty-state{ font-size:.9rem; color: var(--ink-dim); }

/* ---------- Newsletter ---------- */
.newsletter-box{ background: var(--bg-soft); border:1px solid var(--line); border-radius: var(--radius); padding:2.1rem; }
.newsletter-form{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; }
.newsletter-form input[type=email]{ flex:1; min-width:220px; border:1.5px solid var(--line); border-radius: var(--radius-sm); padding:.8rem 1rem; background: #fff; color: var(--ink); }

/* ---------- Carret / checkout ---------- */
.cart-table{ width:100%; border-collapse:collapse; }
.cart-table th{ font-family: var(--font-body); font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-dim); text-align:left; padding-bottom:.6rem; border-bottom:1.5px solid var(--line); }
.cart-table td{ padding: 1rem 0; border-bottom:1px solid var(--line); vertical-align:middle; }
.cart-item-cover{ width:52px; height:78px; object-fit:cover; border:1px solid var(--line); border-radius: var(--radius-sm); }
.cart-item-title{ font-weight:700; font-size:1rem; }

/* Sota 576px, la taula del carret es converteix en targetes apilades en lloc de
   desbordar-se horitzontalment o esquitxar-se en columnes il·legibles. */
@media (max-width: 575px){
  .cart-table thead{ display:none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td{ display:block; width:100%; }
  .cart-table tr{ border-bottom:1px solid var(--line); padding:1rem 0; display:grid; grid-template-columns:56px 1fr; gap:.4rem .8rem; }
  .cart-table td{ border-bottom:none; padding:.2rem 0; }
  .cart-td-cover{ grid-row: 1 / span 4; }
  .cart-table td[data-label]:not([data-label=""])::before{
    content: attr(data-label); display:block; font-size:.7rem; text-transform:uppercase;
    letter-spacing:.03em; color:var(--ink-dim); font-weight:700; margin-bottom:.1rem;
  }
}
.cart-summary{ background: var(--bg-soft); border:1px solid var(--line); border-radius: var(--radius); padding:1.6rem; }
.cart-summary-row{ display:flex; justify-content:space-between; padding:.4rem 0; font-size:.95rem; }
.cart-summary-row.total{ border-top:1.5px solid var(--line); margin-top:.6rem; padding-top:.8rem; font-weight:700; font-size:1.15rem; }
.remove-link{ font-family: var(--font-body); font-size:.78rem; font-weight:700; color: var(--danger); }

/* ---------- Peu ---------- */
.site-footer{ background: var(--ink); color: #E7E8F0; padding: 3.2rem 0 1.4rem; margin-top: 2.5rem; }
.footer-brand{ font-family: var(--font-display); font-weight:700; font-size:1.7rem; margin:0; color:#fff; }
.footer-claim{ color: rgba(231,232,240,.6); }
.footer-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.45rem; }
.footer-list a{ color: rgba(231,232,240,.72); }
.footer-list a:hover{ color: #fff; }
.footer-newsletter input[type=email]{ background: rgba(231,232,240,.08); border:1.5px solid rgba(231,232,240,.25); color: #fff; border-radius: var(--radius-sm); }
.footer-newsletter input[type=email]::placeholder{ color: rgba(231,232,240,.5); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:.4rem; font-size:.75rem; color: rgba(231,232,240,.5); border-top:1px solid rgba(231,232,240,.14); margin-top:2.2rem; padding-top:1rem; }
.footer-bottom a{ color: rgba(231,232,240,.5); }
.footer-bottom a:hover{ color: #fff; }

/* ---------- Breakpoints extra (mobile-first: base = mòbil) ---------- */
@media (min-width: 576px){
  .hero{ padding: 3rem 0; }
}
@media (min-width: 992px){
  .hero{ padding: 3.4rem 0 3.6rem; }
  .section-featured, .section-collections, .section-catalog{ padding: 3.4rem 0; }
}

/* ---------- Banner de consentiment de cookies ---------- */
.cookie-banner{ position:fixed; left:0; right:0; bottom:0; z-index:2000; background: var(--ink); color:#fff; box-shadow: 0 -6px 24px rgba(0,0,0,.18); }
.cookie-banner-inner{ max-width:1100px; margin:0 auto; padding:1.1rem 1.2rem; display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; }
.cookie-banner-text{ margin:0; font-size:.9rem; color:rgba(255,255,255,.85); flex:1; min-width:240px; }
.cookie-banner-text a{ color:#fff; text-decoration:underline; }
.cookie-banner-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }

/* ---------- Franja compacta de "Pròximament" (deliberadament més petita que
   les targetes de "Novetats" perquè no es llegeixin com el mateix bloc) ---------- */
.upcoming-strip{ display:flex; flex-direction:column; gap:.9rem; }
.upcoming-item{ display:flex; align-items:center; gap:.9rem; padding-bottom:.9rem; border-bottom:1px solid var(--line); }
.upcoming-item:last-child{ border-bottom:none; padding-bottom:0; }
.upcoming-item-cover{ width:44px; height:66px; object-fit:cover; border-radius:4px; border:1px solid var(--line); flex-shrink:0; }
.upcoming-item-title{ display:block; font-weight:600; font-size:.92rem; }
.upcoming-item-author{ display:block; font-size:.8rem; color:var(--ink-dim); }
.upcoming-item-date{ display:block; font-size:.76rem; color:var(--accent); margin-top:.1rem; }
@media (min-width: 768px){
  .upcoming-strip{ flex-direction:row; gap:1.6rem; }
  .upcoming-item{ flex:1; border-bottom:none; padding-bottom:0; }
}

/* ---------- Llista de desitjos ---------- */
.wishlist-btn{
  position:absolute; top:.55rem; right:.55rem; z-index:2; background:rgba(255,255,255,.94);
  border:none; border-radius:50%; width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 4px rgba(20,22,31,.12); cursor:pointer; color:var(--ink-dim);
}
.wishlist-btn svg{ width:16px; height:16px; }
.wishlist-btn.is-active{ color: var(--danger); }
.wishlist-btn.is-active svg{ fill: var(--danger); }
.nav-wishlist{ position:relative; display:inline-flex; align-items:center; color: var(--ink) !important; }
.wishlist-count{
  background: var(--danger); color:#fff; font-size:.68rem; font-weight:800;
  min-width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  position:absolute; top:-6px; right:-8px;
}