@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --fb-bg: #cdc0b6;
  --fb-paper: #fdf7e8;
  --fb-paper-2: #f2e6c9;
  --fb-ink: #2b2621;
  --fb-ink-soft: #6b5738;
  --fb-gold: #9c7d4f;
  --fb-gold-dark: #7a5f39;
  --fb-line: rgba(43,38,33,0.22);
}

*{ box-sizing: border-box; }


.fb-page{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* ---------- Top bar ---------- */
.fb-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 30px;
  border-bottom:1px solid var(--fb-line);
}
.fb-brand{ display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; }
.fb-brand .mark{
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--fb-ink);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond', serif; font-style:italic; font-size:15px;
}
.fb-brand .word{ font-size:13px; letter-spacing:5px; }
.fb-back{
  font-size:13px; letter-spacing:.08em; color:var(--fb-ink-soft);
  text-decoration:none; border-bottom:1px solid transparent;
  transition: border-color .2s ease;
}
.fb-back:hover{ border-color: var(--fb-ink-soft); }

.fb-title{
  text-align:center; padding: 22px 20px 4px;
  font-family:'Cormorant Garamond', serif;
}
.fb-title h1{ margin:0; font-size: clamp(28px, 4vw, 44px); font-weight:500; }
.fb-title p{ margin:6px 0 0; color:var(--fb-ink-soft); font-size:14px; letter-spacing:.05em; }

/* ---------- Toolbar ---------- */
.fb-toolbar{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:10px;
  padding: 6px 20px 12px;
}
.fb-toolbar__group{
  display:flex; align-items:center; gap:6px;
  background:#fff; border:1px solid var(--fb-line);
  border-radius: 999px; padding: 4px 6px;
}
.fb-tool-btn{
  width:36px; height:36px; border-radius:50%;
  border:none; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color: var(--fb-ink); transition: background .2s ease, color .2s ease;
}
.fb-tool-btn:hover:not(:disabled){ background: var(--fb-paper-2); color: var(--fb-gold-dark); }
.fb-tool-btn:disabled{ opacity:.35; cursor:default; }
.fb-tool-btn svg{ width:16px; height:16px; }
.fb-tool-btn[aria-pressed="true"]{ background: var(--fb-gold); color:#fff; }

.fb-page-counter{
  font-size:12.5px; color:var(--fb-ink-soft); padding: 0 8px; white-space:nowrap;
}
.fb-page-counter{
  background:#fff; border:1px solid var(--fb-line); border-radius:999px;
  padding:8px 16px; font-weight:500;
}

/* ---------- Stage: sidebar + book ---------- */
.fb-stage{
  flex:1;
  display:flex;
  min-height:0;
  position:relative;
}

/* Index / thumbnails sidebar */
.fb-sidebar{
  width:0; height:0; overflow:hidden;
  background:#fff; border-right:1px solid var(--fb-line);
  transition: width .28s ease;
  flex-shrink:0;
}
.fb-sidebar.open{ width: 168px; height:auto; max-height:640px; overflow-y:auto; }
.fb-sidebar__inner{
  width:168px; height:100%; overflow-y:auto;
  padding: 16px 12px;
}
.fb-sidebar h2{
  font-family:'Cormorant Garamond', serif; font-size:16px; margin:0 0 12px 4px;
}
.thumb-item{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  width:100%; border:none; background:transparent; cursor:pointer;
  padding:8px 0; border-radius:6px;
}
.thumb-item:hover{ background: var(--fb-paper-2); }
.thumb-item.active .thumb-inner{ outline: 2px solid var(--fb-gold); }
.thumb-inner{
  width:110px; overflow:hidden; position:relative;
  background: var(--fb-paper); border:1px solid var(--fb-line);
  border-radius:2px;
}
.thumb-label{ font-size:10.5px; color:var(--fb-ink-soft); letter-spacing:.03em; }

/* Book viewport */
.fb-book-viewport{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  overflow:auto;
  padding: 10px 30px 30px;
}

#bookShell{
  display:flex; align-items:center; justify-content:center;
  width:100%;
  margin-bottom:40px;
}
#bookShell.is-fullscreen{ background: var(--fb-bg); }

.fb-divider{
  width:min(900px, 80%);
  height:1px;
  margin:0 auto 70px;
  background:linear-gradient(to right, transparent, var(--fb-line) 20%, var(--fb-line) 80%, transparent);
}

#book{
  transition: transform .2s ease;
}

/* ---------- Page base ---------- */
.page{
  background: var(--fb-paper);
  box-shadow: inset 0 0 0 1px var(--fb-line);
  overflow:hidden;
}
.page-content{
  width:100%; height:100%;
  display:flex; flex-direction:column;
}

/* Covers */
.page-cover{
  background: radial-gradient(140% 100% at 50% 0%, #fdf7e8, var(--fb-paper-2) 70%);
}
.page-cover .page-content{ align-items:center; justify-content:center; text-align:center; position:relative; }

/* Franja del lomo, como en una libreta de tapa dura */
.page-cover--front::before{
  content:"";
  position:absolute;
  top:0; bottom:0; left:0;
  width:16px;
  background: var(--fb-paper-2);
  box-shadow: inset -1px 0 0 var(--fb-line), inset 1px 0 0 var(--fb-line);
}
.cover-inner{ padding: 40px; }
.cover-mark-img{
  width:80px; height:auto; display:block; margin:0 auto 18px;
}
.cover-title{ font-family:'Cormorant Garamond', serif; font-weight:500; font-size:30px; margin:0 0 8px; }
.cover-sub{ letter-spacing:.3em; font-size:13px; margin:0 0 18px; color:var(--fb-ink-soft); }
.cover-eyebrow{ letter-spacing:.2em; font-size:11px; color:var(--fb-ink-soft); margin:0 0 16px; }
.cover-note{ font-size:12px; color:var(--fb-ink-soft); margin:0; }

.cover-top-brand{
  position:absolute; left:50%; top:34px;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:12px;
}
.cover-full-logo{ height:72px; width:auto; display:block; }

.cover-top-text{
  position:absolute; left:50%; top:34px;
  transform:translateX(-50%);
}
.cover-top-text-img{ height:11px; width:auto; display:block; }

.cover-photo{
  width:320px; height:320px;
  max-width: calc(100% - 32px);
  object-fit:cover;
  display:block;
  margin:0 auto;
  border-radius:2px;
}

/* El libro achica su página real en pantallas chicas (PageFlip la redimensiona,
   no solo la ve más lejos), así que el contenido de tamaño fijo de la portada
   se desborda si no lo achicamos también acá. */
@media (max-width: 600px){
  .cover-top-brand{ top:18px; }
  .cover-full-logo{ height:40px; }
  .cover-photo{ width:150px; height:150px; }
  .page-cover--front::before{ width:10px; }
  .cover-top-text{ top:18px; }
  .cover-top-text-img{ height:8px; }
}

.cover-brand{
  position:absolute; left:50%; bottom:32px;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.cover-brand__icon{ width:34px; height:auto; display:block; }
.cover-brand__word{ width:78px; height:auto; display:block; }
.cover-brand__caption{
  font-family:'Jost', sans-serif;
  font-size:8px; font-weight:500;
  letter-spacing:1.3px; text-transform:uppercase;
  color:var(--fb-ink-soft); white-space:nowrap;
}

/* Product pages */
.page-product .page-content{ padding: 22px 20px; }
.page-product__header{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:'Cormorant Garamond', serif; font-size:14px;
  color:var(--fb-ink-soft);
  border-bottom:1px solid var(--fb-line);
  padding-bottom:10px; margin-bottom:14px;
}
.page-product__num{ font-weight:600; color:var(--fb-ink); }

.fb-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  align-content:start;
  gap:10px;
  flex:1;
}
.fb-card{
  background:#fff; border:1px solid var(--fb-line); border-radius:3px;
  overflow:hidden; text-decoration:none; color:inherit;
  display:flex; flex-direction:column;
}
/* Resalta un instante la tarjeta a la que salta el filtro de Medida (o el
   buscador), despues de que el libro termina de voltear la pagina. */
.fb-card--highlight{
  outline:3px solid var(--accent); outline-offset:2px;
  animation:fbCardPulse 1.8s ease;
}


@keyframes fbCardPulse{
  0%, 100%{ box-shadow:none; }
  25%{ box-shadow:0 0 0 8px rgba(107,90,69,.22); }
}
/* Medida (real): en vez de checkboxes, un grid de botones que saltan
   directo a la primera pieza con esa medida dentro del libro. */
.size-filter__groups{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  max-height: 280px; overflow-y: auto; padding-right: 2px;
}
.size-jump-chip{
  border: 1px solid var(--line-strong); border-radius: 4px; background: var(--white);
  padding: 6px 2px; font-family: 'Jost', sans-serif; font-size: 11.5px;
  font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.size-jump-chip:hover, .size-jump-chip:focus-visible{
  background: var(--accent); border-color: var(--accent); color: var(--white);
}
/* Ficha de producto: botón para volver al libro de la categoría, abierto
   justo en la página de este producto (no en la página 1). */
.back-to-catalog{
  display: inline-flex; align-items: center; gap: 6px;
  margin: 14px 40px 16px; padding: 7px 14px 7px 10px;
  border: 1px solid var(--line-strong); border-radius: 20px;
  font-family: 'Jost', sans-serif; font-size: 12.5px; letter-spacing: .02em;
  color: var(--ink); text-decoration: none; width: fit-content;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* Dos botones de regreso (categoria + catalogo general) en una sola fila. */
.back-links{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 40px 16px; }
.back-links .back-to-catalog{ margin:0; }
@media (max-width: 480px){ .back-links{ margin-left:20px; margin-right:20px; } }
.back-to-catalog svg{ width: 15px; height: 15px; }
.back-to-catalog:hover, .back-to-catalog:focus-visible{
  background: var(--accent); border-color: var(--accent); color: var(--white);
}
@media (max-width: 480px){ .back-to-catalog{ margin-left: 20px; margin-right: 20px; } }
.fb-card__img{
  aspect-ratio:16/10; background:#fffefa; padding:6px;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--fb-line);
}
.fb-card__img img{ width:100%; height:100%; object-fit:contain; }
/* El motor del libro (page-flip) intercepta el toque en celular para
   detectar el gesto de "pasar página", y si el toque cae sobre el
   <img> (en vez de caer literalmente sobre el <a>) cancela el tap y el
   link nunca navega. Con pointer-events:none el toque siempre "atraviesa"
   la imagen y llega directo al <a>, que la librería sí respeta. */
.fb-card__img img, .fb-card__fallback, .fb-card__diagram img{ pointer-events:none; }
.fb-card__fallback{ width:38%; height:38%; stroke:var(--fb-gold); fill:none; stroke-width:1.1; opacity:0.75; }
.fb-card__body{ padding:5px 8px 6px; }
.fb-card__name{
  font-family:'Cormorant Garamond', serif; font-weight:600;
  font-size:11.5px; line-height:1.15; margin:0 0 2px;
}
.fb-card__size{ font-size:8.5px; color:var(--fb-ink-soft); margin:0; }

/* ---------- Footer hint ---------- */
.fb-hint{
  text-align:center; padding: 10px 20px 22px;
  font-size:12px; color:var(--fb-ink-soft);
}

/* ---------- Responsive ---------- */
@media (max-width: 720px){
  .fb-sidebar.open{ position:absolute; inset:0; width:100%; z-index:10; }
  .fb-sidebar__inner{ width:100%; }
  .fb-topbar{ padding:14px 16px; }
  .fb-toolbar{ gap:6px; }
}

/* Celular de costado: la altura disponible es chica, así que el libro
   (que crece con el ancho) no debe superar lo que entra en pantalla. */
@media (max-height: 500px) and (orientation: landscape){
  .fb-topbar{ padding:6px 14px; }
  .fb-toolbar{ padding:2px 14px 6px; gap:6px; }
  .fb-tool-btn{ width:30px; height:30px; }
  .fb-stage{ max-height:78vh; }
  .fb-book-viewport{ padding:4px 14px 10px; }
}

/* ---------- Acordeón de categorías (debajo del libro) ---------- */
.cat-accordion{
  display:flex;
  width:100%;
  max-width:1200px;
  height:320px;
  margin:0 auto 90px;
  gap:4px;
}
.cat-accordion__item{
  position:relative;
  flex:1;
  min-width:0;
  overflow:hidden;
  border-radius:2px;
  text-decoration:none;
  cursor:pointer;
  background-image: linear-gradient(to top, rgba(20,16,10,.6), rgba(20,16,10,.15) 45%, rgba(20,16,10,.35)), var(--cat-img);
  background-size:cover;
  background-position:center;
  transition: flex 0.6s cubic-bezier(.22,.61,.36,1);
}
.cat-accordion__item:hover,
.cat-accordion__item:focus-visible,
.cat-accordion__item.is-active{ flex:2.6; }

.cat-accordion__label{
  position:absolute; left:20px; bottom:22px;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:'Jost', sans-serif;
  font-size:13px; font-weight:500; letter-spacing:.08em;
  color:#fdf7e8;
  white-space:nowrap;
  transition:opacity .35s ease;
}
.cat-accordion__item:hover .cat-accordion__label,
.cat-accordion__item:focus-visible .cat-accordion__label,
.cat-accordion__item.is-active .cat-accordion__label{ opacity:0; }

.cat-accordion__panel{
  position:absolute; left:28px; right:28px; bottom:24px;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .4s ease .1s, transform .4s ease .1s;
}
.cat-accordion__item:hover .cat-accordion__panel,
.cat-accordion__item:focus-visible .cat-accordion__panel,
.cat-accordion__item.is-active .cat-accordion__panel{
  opacity:1;
  transform:translateY(0);
}
.cat-accordion__panel h3{
  font-family:'Cormorant Garamond', serif; font-weight:500;
  font-size:26px; color:#fdf7e8; margin:0 0 12px;
  white-space:nowrap;
}
.cat-accordion__btn{
  display:inline-block;
  padding:9px 18px;
  border:1px solid #fdf7e8;
  color:#fdf7e8;
  font-family:'Jost', sans-serif;
  font-size:11px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase;
  transition: background .2s ease, color .2s ease;
}
.cat-accordion__btn:hover{
  background:#fdf7e8;
  color:#2b2621;
}

@media (max-width: 900px){
  .cat-accordion{ height:260px; }
  .cat-accordion__panel h3{ font-size:21px; }
}
/* Categoria del Catalogo General: lista compacta con scroll (rueda del
   raton) en vez de un panel altisimo con las 19 categorias a la vista. */
#categoryFilter .dfilter__panel{ padding:12px 14px 10px; }
#categoryFilter .dfilter__title{ margin-bottom:8px; }
#catOptList{
  max-height:172px; overflow-y:auto; overscroll-behavior:contain;
  gap:4px; padding-right:4px; scrollbar-width:thin;
}
#catOptList .opt-chip label{ padding:5px 9px; font-size:12px; }

/* La lupa de la barra del libro es el boton de buscar. */
.search-box .search-box__go{ cursor:pointer; pointer-events:auto; }
.search-box .search-box__go:hover{ stroke:#1a1a1a; }
.sort-select option[hidden]{ display:none; }

/* Dibujo de medidas de las tarjetas del libro: mas chico para que no le
   quite lugar al texto (codigo, medida, stock). Va con !important y mayor
   especificidad porque cada libro trae su propio tamano en linea. */
.fb-card__body .fb-card__diagram{
  width:10cqi !important; height:10cqi !important;
  min-width:30px !important; min-height:30px !important;
  max-width:54px !important; max-height:54px !important;
  object-fit:contain;
}
/* Indicador de "En stock / Bajo pedido / Agotado" arriba del nombre en
   cada tarjeta del libro (probado primero en Esquineros, ahora en todo
   el catalogo): punto + palabra en letra Petit Formal Script. */
/* Estilo frances: filete fino + cursiva Cormorant Garamond, en tono
   negro suave, con un pequeno rombo como florón. */
.fb-stock-label{ display:flex; align-items:center; gap:6px; margin:0 0 4%; max-width:100%; min-width:0; }
.fb-stock-label__dot{
  flex:none; width:5px; height:5px; background:#333; transform:rotate(45deg); border-radius:0;
}
.fb-stock-label__word{
  font-family:'Cormorant Garamond', 'Times New Roman', serif; font-style:italic; text-transform:none; color:#333;
  font-size:clamp(10px, 8.5cqi, 14px); font-weight:700; letter-spacing:.05em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}

@media (max-width: 640px){
  .cat-accordion{ flex-direction:column; height:auto; }
  .cat-accordion__item, .cat-accordion__item:hover, .cat-accordion__item:focus-visible{ flex:none; height:88px; }
  .cat-accordion__item:hover, .cat-accordion__item:focus-visible{ height:220px; }
  .cat-accordion__label{ writing-mode:horizontal-tb; transform:none; left:20px; bottom:16px; }
}