/* -----------------------------------------------------------
  drivingbooks.gr – Light bookstore theme + road-sign decor
  - no frameworks (pure CSS)
  - responsive
  - easy theming via CSS variables
----------------------------------------------------------- */

:root{
  --bg: #f6f2ea;
  --paper: #fffdf8;
  --ink: #1f2937;
  --muted: #6b7280;

  --brand: #c2410c;     /* warm orange */
  --brand-2: #0f766e;   /* teal */
  --line: rgba(31,41,55,.10);

  --shadow: 0 10px 30px rgba(17,24,39,.10);
  --radius: 18px;
  --radius-sm: 14px;

  --serif: "Playfair Display", ui-serif, Georgia, serif;
  --sans: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --container: 1160px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  /* Darker, richer backdrop (traffic + road vibe) while keeping "paper" cards readable */
  background:
    radial-gradient(1200px 650px at 8% 0%, rgba(194,65,12,.12), transparent 58%),
    radial-gradient(980px 560px at 100% 8%, rgba(15,118,110,.14), transparent 60%),
    radial-gradient(1000px 520px at 50% -10%, rgba(17,24,39,.20), transparent 62%),
    radial-gradient(900px 520px at 50% 120%, rgba(17,24,39,.14), transparent 60%),
    linear-gradient(180deg, rgba(17,24,39,.12), rgba(17,24,39,.02) 45%, transparent 75%),
    var(--bg);
  line-height: 1.45;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 18px; }

/* Decorative background signs */
.page-bg{ position: fixed; inset:0; pointer-events:none; z-index: -1; }
/* Road-markings + subtle "document/grid" overlay (very low contrast) */
.page-bg::before{
  content:"";
  position:absolute;
  inset:0;
  /* side lane lines + faint blueprint grid */
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,.06) 8%,
      transparent 10%,
      transparent 90%,
      rgba(255,255,255,.06) 92%,
      transparent 94%,
      transparent 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035), rgba(255,255,255,.035) 1px, transparent 1px, transparent 42px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.028), rgba(255,255,255,.028) 1px, transparent 1px, transparent 52px),
    radial-gradient(900px 380px at 20% 80%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 380px at 85% 70%, rgba(255,255,255,.05), transparent 62%);
  opacity: .55;
}

/* dashed center line (behind everything) */
.page-bg::after{
  content:"";
  position:absolute;
  left: 50%;
  top: -20%;
  height: 140%;
  width: 6px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.26) 0 10px, transparent 10px 28px);
  opacity: .10;
  filter: blur(.15px);
}
.bg-sign{
  position:absolute;
  width: 220px; height: 220px;
  opacity: .18;
  filter: blur(.2px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: rotate(-8deg);
}
.bg-sign--stop{ left: -40px; top: 70px; background-image: url("../img/sign-stop.svg"); }
.bg-sign--speed{ right: -35px; top: 180px; transform: rotate(10deg); background-image: url("../img/sign-speed.svg"); }
.bg-sign--yield{ right: 30px; bottom: -30px; width: 260px; height:260px; transform: rotate(-14deg); background-image: url("../img/sign-yield.svg"); }

/* Topbar (distinct, high-contrast) */
:root{
  /* Topbar theme */
  --topbar-bg-a: rgba(17,24,39,.92);
  --topbar-bg-b: rgba(15,118,110,.34);
  --topbar-line: rgba(255,255,255,.12);
  --topbar-ink: rgba(255,255,255,.92);
  --topbar-muted: rgba(255,255,255,.70);
  --topbar-chip: rgba(255,255,255,.10);
  --topbar-chip-2: rgba(255,255,255,.14);
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  isolation: isolate;
  color: var(--topbar-ink);
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(194,65,12,.22), transparent 60%),
    radial-gradient(900px 260px at 85% 0%, rgba(15,118,110,.26), transparent 60%),
    linear-gradient(135deg, var(--topbar-bg-a), var(--topbar-bg-b));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--topbar-line);
  box-shadow: 0 18px 44px rgba(17,24,39,.18);
}
.topbar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 0;
  /* Subtle "road markings" (lane edges + dashed center line) */
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 10px),
    linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.06)),
    linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.05)),
    linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.12)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.34) 0 16px, transparent 16px 56px);
  background-size:
    220px 220px,
    100% 1px,
    100% 1px,
    100% 6px,
    72px 6px;
  background-position:
    center,
    0 14px,
    0 calc(100% - 14px),
    0 52%,
    0 52%;
  background-repeat:
    repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    repeat-x;
  opacity: .22;
  mix-blend-mode: overlay;
}
.topbar::after{
  content:"";
  position:absolute;
  z-index: 2;
  left:0; right:0; bottom:-1px;
  height: 3px;
  background: linear-gradient(90deg, rgba(194,65,12,1), rgba(15,118,110,1), rgba(59,130,246,1));
  opacity: .85;
  pointer-events:none;
}
.topbar .container{
  position: relative;
  z-index: 1;
  display:flex;
  align-items:center;
  gap:14px;
  padding: 14px 18px;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 210px;
}
.brand-mark{
  width: 40px; height: 40px;
  border-radius: 12px;
  background:
    radial-gradient(10px 10px at 30% 28%, rgba(255,255,255,.95), transparent 60%),
    linear-gradient(135deg, rgba(194,65,12,1), rgba(15,118,110,1));
  box-shadow: 0 12px 24px rgba(0,0,0,.28);
}
.brand-text{ display:flex; flex-direction:column; line-height: 1.05; }
.brand-title{
  font-family: var(--serif);
  letter-spacing: .2px;
  font-weight: 800;
  font-size: 18px;
  color: var(--topbar-ink);
}
.brand-tagline{
  color: var(--topbar-muted);
  font-size: 12.5px;
  margin-top: 2px;
}

/* Search (dark topbar treatment) */
.search{ flex: 1; display:flex; gap:10px; align-items:center; }
.search-input{
  flex:1;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  padding: 11px 12px;
  border-radius: 14px;
  outline:none;
  color: var(--topbar-ink);
  box-shadow: 0 1px 0 rgba(0,0,0,.10);
}
.search-input::placeholder{ color: rgba(255,255,255,.62); }
.search-input:focus{
  border-color: rgba(15,118,110,.55);
  box-shadow: 0 0 0 4px rgba(15,118,110,.22);
}

/* Nav links (pills + underline motion) */
.topbar .muted{ color: var(--topbar-muted); }
.nav{ display:flex; gap: 10px; align-items:center; }
.nav-link{
  position: relative;
  padding: 9px 12px;
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 14.5px;
  border: 1px solid transparent;
  background: transparent;
  transition: background .14s ease, border-color .14s ease, transform .12s ease;
}
.nav-link::after{
  content:"";
  position:absolute;
  left: 14px; right: 14px; bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.80);
  opacity: 0;
  transform: scaleX(.6);
  transition: opacity .14s ease, transform .14s ease;
}
.nav-link:hover{
  background: var(--topbar-chip);
  border-color: rgba(255,255,255,.12);
}
.nav-link:hover::after{ opacity: .45; transform: scaleX(1); }
.nav-link.is-active{
  background: var(--topbar-chip-2);
  border-color: rgba(255,255,255,.16);
}
.nav-link.is-active::after{ opacity: .85; transform: scaleX(1); }

/* Topbar buttons/icons */
.topbar .btn--soft{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}
.topbar .btn--soft:hover{ background: rgba(255,255,255,.16); }

.topbar .btn--ghost{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
}
.topbar .btn--ghost:hover{ background: rgba(255,255,255,.14); }

/* Icon chips */
.topbar .orders-link,
.topbar .wish-link,
.topbar .cart-btn{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  box-shadow: 0 12px 22px rgba(0,0,0,.20);
}
.topbar .orders-link:hover,
.topbar .wish-link:hover,
.topbar .cart-btn:hover{ background: rgba(255,255,255,.14); }

.orders-badge,
.wish-badge,
.cart-badge{
  border-color: rgba(17,24,39,.65);
}

/* Mobile menu (match topbar contrast) */
.mobile-menu{
  border-top: 1px solid var(--topbar-line);
  background: rgba(17,24,39,.96);
  color: rgba(255,255,255,.92);
  padding: 10px 18px 14px;
}
.mobile-link{
  display:block;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 900;
  margin: 6px 0;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.mobile-link:hover{ background: rgba(255,255,255,.10); }

/* Hamburger */
.nav-toggle{ display:none; margin-left:auto; border:0; background:transparent; padding: 8px; border-radius: 12px; }
.nav-toggle span{ display:block; width:22px; height:2px; background: rgba(255,255,255,.85); margin:4px 0; border-radius: 3px; }


/* Buttons */
.btn{
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 14px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  transition: transform .06s ease, box-shadow .14s ease, background .14s ease;
  user-select:none;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn--primary{
  background: linear-gradient(135deg, rgba(194,65,12,1), rgba(233,107,54,1));
  color: #fff;
  box-shadow: 0 10px 24px rgba(194,65,12,.24);
}
.btn--primary:hover{ box-shadow: 0 14px 30px rgba(194,65,12,.28); }

.btn--soft{
  background: rgba(15,118,110,.10);
  border-color: rgba(15,118,110,.18);
  color: rgba(15,118,110,1);
}
.btn--soft:hover{ background: rgba(15,118,110,.14); }

.btn--ghost{
  background: rgba(255,255,255,.55);
  border-color: var(--line);
}
.btn--lang{ padding: 10px 12px; min-width: 46px; }

.btn--mini{
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.60);
  border-color: var(--line);
}
.btn--mini:hover{ background: rgba(255,255,255,.88); }

/* Layout */
.main{ padding-bottom: 48px; }
.section{ padding: 28px 0; }

.h1{ font-family: var(--serif); font-size: 38px; line-height: 1.06; margin:0; letter-spacing: .2px; }
.h2{ font-family: var(--serif); font-size: 24px; margin:0; }
.h3{ font-family: var(--serif); font-size: 18px; margin:0; }
.lead{ color: rgba(31,41,55,.80); font-size: 16.8px; margin: 12px 0 0; max-width: 62ch; }
.muted{ color: var(--muted); }
.page-head{ margin: 10px 0 16px; }

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

/* Hero */
.hero{ padding-top: 22px; }
.hero-card{
  background: linear-gradient(135deg, rgba(255,253,248,.88), rgba(255,255,255,.62));
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  padding: 22px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  position: relative;
  overflow:hidden;
}
.hero-card::before{
  content:"";
  position:absolute;
  inset: -1px;
  background:
    radial-gradient(600px 260px at 0% 0%, rgba(194,65,12,.13), transparent 60%),
    radial-gradient(520px 240px at 100% 0%, rgba(15,118,110,.14), transparent 58%);
  opacity: .9;
  pointer-events:none;
}
.hero-copy, .hero-visual{ position: relative; }
.hero-actions{ display:flex; gap:10px; margin-top: 16px; flex-wrap: wrap; }
.hero-badges{ display:flex; gap:10px; flex-wrap: wrap; margin-top: 14px; }

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  background: rgba(255,255,255,.68);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 800;
  font-size: 12.5px;
  color: rgba(31,41,55,.84);
}

.hero-visual{
  min-height: 260px;
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative;
  overflow:hidden;
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(31,41,55,.10);
  background:
    radial-gradient(420px 220px at 20% 20%, rgba(15,118,110,.16), transparent 55%),
    radial-gradient(420px 220px at 80% 20%, rgba(194,65,12,.16), transparent 55%),
    rgba(255,255,255,.35);
}

/* Optional Hero photo (place your image at /public/assets/img/hero/hero-driving.jpg) */
.hero-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  opacity: .34;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
  z-index: 0;
}
.hero-visual.has-photo::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 1;
  background-image:
    /* dashed center line */
    repeating-linear-gradient(90deg, rgba(255,255,255,.32) 0 14px, transparent 14px 54px),
    /* lane edge lines */
    linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.10)),
    linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.10));
  background-size:
    68px 6px,
    100% 1px,
    100% 1px;
  background-position:
    0 56%,
    0 18px,
    0 calc(100% - 18px);
  background-repeat:
    repeat-x,
    no-repeat,
    no-repeat;
  opacity: .18;
  mix-blend-mode: overlay;
}
.hero-visual.has-photo::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 2;
  background:
    radial-gradient(420px 220px at 20% 20%, rgba(194,65,12,.20), transparent 58%),
    radial-gradient(420px 220px at 80% 20%, rgba(15,118,110,.20), transparent 58%),
    linear-gradient(135deg, rgba(17,24,39,.32), rgba(255,255,255,0));
}

/* Optional Hero “polaroid” photo (place your image at /public/assets/img/hero/hero-polaroid.jpg) */
.hero-polaroid{
  position:absolute;
  top: 14px;
  right: 14px;
  width: 176px;
  height: 216px;
  padding: 10px;
  padding-bottom: 34px;
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(17,24,39,.14);
  box-shadow: 0 24px 60px rgba(17,24,39,.28);
  transform: rotate(7deg);
  z-index: 4;
}
.hero-polaroid::before{
  content:"";
  position:absolute;
  left: 50%;
  top: -10px;
  width: 92px;
  height: 22px;
  transform: translateX(-50%) rotate(-4deg);
  border-radius: 999px;
  background: rgba(245, 245, 245, .82);
  border: 1px solid rgba(17,24,39,.12);
  box-shadow: 0 12px 22px rgba(17,24,39,.18);
  opacity: .92;
}
.hero-polaroid__img{
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(31,41,55,.12);
  filter: saturate(1.05) contrast(1.04);
}
.hero-polaroid__cap{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(31,41,55,.78);
}
.hero-polaroid{
  animation: heroPolaroidFloat 5.6s ease-in-out infinite;
}
@keyframes heroPolaroidFloat{
  0%, 100%{ transform: rotate(7deg) translateY(0); }
  50%{ transform: rotate(7deg) translateY(-6px); }
}
.book-stack{ position: relative; z-index: 3; width: 320px; height: 240px; }
.book{
  position:absolute;
  width: 220px;
  height: 58px;
  left: 40px;
  border-radius: 14px;
  border: 1px solid rgba(31,41,55,.10);
  box-shadow: 0 12px 26px rgba(17,24,39,.10);
}
.book--a{ top: 50px; transform: rotate(-4deg); background: linear-gradient(135deg, rgba(15,118,110,.18), rgba(255,255,255,.75)); }
.book--b{ top: 102px; transform: rotate(3deg); background: linear-gradient(135deg, rgba(194,65,12,.18), rgba(255,255,255,.75)); }
.book--c{ top: 155px; transform: rotate(-2deg); background: linear-gradient(135deg, rgba(31,41,55,.12), rgba(255,255,255,.78)); }

.sign{
  position:absolute;
  width: 90px; height:90px;
  right: 8px;
  top: 18px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  filter: drop-shadow(0 12px 18px rgba(17,24,39,.12));
  opacity: .92;
}
.sign--stop{ background-image: url("../img/sign-stop.svg"); transform: rotate(9deg); }
.sign--speed{ background-image: url("../img/sign-speed.svg"); right: 100px; top: 132px; transform: rotate(-8deg); width: 86px; height:86px; opacity: .85; }

/* Cards / grid */

/* Bookstore-style product cards */
.bookstore-card{
  padding: 14px;
}
.book-top{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.badge-row{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}
.type-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15,118,110,.10);
  border: 1px solid rgba(15,118,110,.18);
  font-weight: 900;
  font-size: 12px;
  color: rgba(15,118,110,1);
}

.stock{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(31,41,55,.10);
  background: rgba(255,255,255,.62);
  font-weight: 900;
  font-size: 12px;
  color: rgba(31,41,55,.84);
  white-space: nowrap;
}
.stock--in_stock{ border-color: rgba(15,118,110,.22); background: rgba(15,118,110,.10); color: rgba(15,118,110,1); }
.stock--limited{ border-color: rgba(194,65,12,.22); background: rgba(194,65,12,.10); color: rgba(194,65,12,1); }
.stock--out{ border-color: rgba(17,24,39,.18); background: rgba(17,24,39,.06); color: rgba(17,24,39,.72); }

/* Cover placeholder (looks like a book cover) */
.cover{
  height: 160px;
  border-radius: 16px;
  border: 1px solid rgba(31,41,55,.12);
  position: relative;
  overflow:hidden;
  box-shadow: 0 14px 26px rgba(17,24,39,.12);
  background:
    radial-gradient(16px 16px at 30% 18%, rgba(255,255,255,.92), transparent 62%),
    linear-gradient(135deg, rgba(15,118,110,.14), rgba(194,65,12,.10));
}
.cover::before{
  content:"";
  position:absolute;
  left: 10px; top: 10px; bottom: 10px;
  width: 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.18);
  filter: blur(.1px);
  opacity: .85;
}
.cover::after{
  content:"";
  position:absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.12), transparent 26%),
    radial-gradient(300px 160px at 90% 20%, rgba(255,255,255,.26), transparent 60%);
  pointer-events:none;
}
.cover-title{
  position:absolute;
  right: 12px;
  top: 10px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 20px rgba(0,0,0,.22);
}
.cover-bar{
  position:absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 36px;
  background: rgba(255,255,255,.70);
  border-top: 1px solid rgba(31,41,55,.10);
}
.cover--orange{ background: radial-gradient(16px 16px at 30% 18%, rgba(255,255,255,.92), transparent 62%), linear-gradient(135deg, rgba(194,65,12,.34), rgba(233,107,54,.12)); }
.cover--teal{ background: radial-gradient(16px 16px at 30% 18%, rgba(255,255,255,.92), transparent 62%), linear-gradient(135deg, rgba(15,118,110,.32), rgba(194,65,12,.10)); }
.cover--navy{ background: radial-gradient(16px 16px at 30% 18%, rgba(255,255,255,.92), transparent 62%), linear-gradient(135deg, rgba(30,58,138,.28), rgba(15,118,110,.10)); }
.cover--gray{ background: radial-gradient(16px 16px at 30% 18%, rgba(255,255,255,.92), transparent 62%), linear-gradient(135deg, rgba(31,41,55,.22), rgba(194,65,12,.08)); }


.sale-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(194,65,12,.12);
  border: 1px solid rgba(194,65,12,.20);
  font-weight: 900;
  font-size: 12px;
  color: rgba(194,65,12,1);
}
.price-stack{
  display:flex;
  align-items:baseline;
  gap: 10px;
}
.price-old{
  color: rgba(31,41,55,.55);
  text-decoration: line-through;
  font-weight: 900;
}
.price-now{
  font-weight: 900;
}
.related-products{
  margin-top: 18px;
}


.product-specs{
  padding: 14px 16px;
  margin: 14px 0;
}
.specs-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.specs-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.spec{
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(31,41,55,.08);
  background: rgba(255,255,255,.60);
  display:flex;
  flex-direction: column;
  gap: 6px;
}
@media (max-width: 980px){
  .specs-grid{ grid-template-columns: 1fr; }
}

/* Product page: gallery + tabs */
.gallery{ display:block; }
.cover--xl{ height: 340px; border-radius: 18px; }
.thumbs{
  display:flex;
  gap: 10px;
  margin-top: 12px;
}
.thumb-mini{
  flex: 1;
  height: 68px;
  border-radius: 16px;
  border: 1px solid rgba(31,41,55,.10);
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.9), transparent 62%),
    repeating-linear-gradient(45deg, rgba(31,41,55,.08), rgba(31,41,55,.08) 1px, transparent 1px, transparent 12px),
    rgba(255,255,255,.55);
}

.buy-row{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 10px;
}
.price{
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 800;
  margin-right: 6px;
}

.tabs{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.tab{
  border: 1px solid rgba(31,41,55,.10);
  background: rgba(255,255,255,.60);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  cursor:pointer;
}
.tab:hover{ background: rgba(15,118,110,.08); }
.tab.is-active{
  background: rgba(194,65,12,.10);
  border-color: rgba(194,65,12,.20);
}
.tabpane{ display:none; }
.tabpane.is-active{ display:block; }

@media (max-width: 980px){
  .cover--xl{ height: 280px; }
}


.card--featured{
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.card--featured::before{
  content:"";
  position:absolute;
  inset: -1px;
  background:
    radial-gradient(260px 160px at 0% 0%, rgba(194,65,12,.10), transparent 55%),
    radial-gradient(260px 160px at 100% 0%, rgba(15,118,110,.12), transparent 55%);
  opacity: .9;
  pointer-events:none;
}
.card--featured > *{ position: relative; }
.feat-top{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}
.feat-icon{
  width: 46px; height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(31,41,55,.10);
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.9), transparent 62%),
    linear-gradient(135deg, rgba(15,118,110,.18), rgba(194,65,12,.16));
}
.feat-sub{
  margin-top: 4px;
  color: rgba(31,41,55,.78);
  font-weight: 800;
  font-size: 13px;
}
.feat-bullets{
  margin: 10px 0 0;
  padding: 0 0 0 18px;
  color: rgba(31,41,55,.80);
}
.feat-bullets li{ margin: 6px 0; }
.feat-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.grid{ display:grid; gap: 14px; }
.grid--4{ grid-template-columns: repeat(4, 1fr); }
    .grid--3{ grid-template-columns: repeat(3, 1fr); }

.card{
  background: rgba(255,253,248,.88);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 1px 0 rgba(17,24,39,.03);
}
.card-title{ font-weight: 900; margin-top: 10px; }
.card--cat{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 14px;
  position: relative;
  overflow:hidden;
}
.card--cat:hover{ box-shadow: 0 14px 26px rgba(17,24,39,.10); transform: translateY(-1px); transition: transform .12s ease, box-shadow .12s ease; }
.cat-ico{ width: 44px; height: 44px; }
.chev{ margin-left:auto; font-size: 22px; opacity: .55; font-weight: 900; }

.card--product .card-top{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 10px;
}
.badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(194,65,12,.10);
  border: 1px solid rgba(194,65,12,.16);
  font-weight: 900;
  font-size: 12px;
}
.thumb{
  width: 64px; height: 64px;
  border-radius: 16px;
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.9), transparent 62%),
    linear-gradient(135deg, rgba(15,118,110,.22), rgba(194,65,12,.18));
  border: 1px solid rgba(31,41,55,.10);
}
.thumb--alt{
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.9), transparent 62%),
    linear-gradient(135deg, rgba(31,41,55,.14), rgba(15,118,110,.18));
}
.card-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

/* Catalog filters */
.filters{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  margin: 14px 0;
  flex-wrap: wrap;
}
.filters-left{ display:flex; gap: 10px; flex-wrap: wrap; }
.chip{
  display:inline-flex;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.58);
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 800;
  font-size: 13px;
}
.chip.is-active{
  background: rgba(15,118,110,.10);
  border-color: rgba(15,118,110,.22);
}

.empty{
  margin-top: 22px;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px dashed rgba(31,41,55,.20);
  text-align:center;
  background: rgba(255,255,255,.55);
}
.empty-ico{ font-size: 32px; }

/* Newsletter */
.newsletter{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, rgba(15,118,110,.10), rgba(255,255,255,.62));
  border: 1px solid rgba(15,118,110,.18);
  border-radius: calc(var(--radius) + 6px);
  padding: 16px;
  box-shadow: 0 12px 26px rgba(15,118,110,.10);
}
.newsletter-form{ display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }
.input{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  padding: 11px 12px;
  border-radius: 14px;
  outline:none;
  min-width: 260px;
}
.input:focus{
  border-color: rgba(15,118,110,.35);
  box-shadow: 0 0 0 4px rgba(15,118,110,.14);
}
.textarea{ min-width: 100%; }

/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  align-items:start;
}
.label{ display:block; font-weight: 900; margin: 10px 0 6px; }
.form{ padding: 16px; }
.contact-card{ padding: 16px; }
.contact-lines{ margin: 12px 0 0; display:grid; gap: 10px; }
.line{ display:flex; gap: 10px; align-items:center; }
.dot{ width:10px; height:10px; border-radius:99px; background: rgba(194,65,12,.75); }
.mini-map{
  height: 160px;
  border-radius: 16px;
  margin-top: 14px;
  border: 1px solid var(--line);
  background:
    linear-gradient(0deg, rgba(255,255,255,.72), rgba(255,255,255,.72)),
    repeating-linear-gradient(90deg, rgba(31,41,55,.14), rgba(31,41,55,.14) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(0deg, rgba(31,41,55,.14), rgba(31,41,55,.14) 1px, transparent 1px, transparent 18px);
  opacity: .9;
}


/* Product page */
.breadcrumb{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  color: rgba(31,41,55,.76);
  font-weight: 800;
  margin: 6px 0 16px;
}
.breadcrumb a:hover{ color: rgba(194,65,12,.96); }
.breadcrumb .sep{ opacity: .55; }

.product-grid{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 14px;
  align-items:start;
}
.product-media{ padding: 16px; }
.product-badge-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.product-image{
  height: 320px;
  border-radius: 18px;
  margin-top: 12px;
  border: 1px solid var(--line);
  background:
    radial-gradient(20px 20px at 30% 22%, rgba(255,255,255,.9), transparent 62%),
    linear-gradient(135deg, rgba(15,118,110,.14), rgba(194,65,12,.10)),
    repeating-linear-gradient(45deg, rgba(31,41,55,.08), rgba(31,41,55,.08) 1px, transparent 1px, transparent 14px);
}
.product-info{ }
.product-card{ padding: 16px; margin-top: 14px; }

@media (max-width: 980px){
  .product-grid{ grid-template-columns: 1fr; }
  .product-image{ height: 260px; }
}


    
/* Catalog layout + filters */
.catalog-layout{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
  align-items:start;
}

.filters-panel{
  position: sticky;
  top: 86px;
  align-self: start;
  background: rgba(255,253,248,.88);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}
.filters-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.filters-close{ display:none; }
.filters-group{ margin: 14px 0; }
.filters-title{
  font-weight: 900;
  margin-bottom: 10px;
}
.filters-list{
  display:grid;
  gap: 8px;
}
.radio{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(31,41,55,.08);
  cursor:pointer;
  user-select:none;
  font-weight: 800;
  color: rgba(31,41,55,.86);
}
.radio:hover{ background: rgba(15,118,110,.08); }
.radio input{ accent-color: var(--brand-2); }
.filters-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  margin-top: 14px;
}
.filters-foot{
  margin-top: 12px;
  font-size: 12.5px;
  color: rgba(31,41,55,.62);
}

.catalog-main{ min-width: 0; }

.sortbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.sortbar-filters{ display:none; }
.sortbar-info{ display:flex; align-items:baseline; gap: 8px; }
.sortbar-right{ display:flex; align-items:center; gap: 10px; margin-left:auto; }
.select{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  padding: 10px 12px;
  border-radius: 14px;
  outline:none;
  font-weight: 800;
}
.select:focus{
  border-color: rgba(15,118,110,.35);
  box-shadow: 0 0 0 4px rgba(15,118,110,.14);
}

.pagination{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}
.pagination-actions{ display:flex; align-items:center; gap: 10px; }

/* Filters drawer on mobile */
.no-scroll{ overflow:hidden; }
@media (max-width: 980px){
  .catalog-layout{ grid-template-columns: 1fr; }
  .filters-panel{
    position: fixed;
    inset: 0 0 0 auto;
    width: min(420px, 92vw);
    height: 100vh;
    overflow:auto;
    box-shadow: 0 30px 80px rgba(17,24,39,.30);
    transform: translateX(110%);
    transition: transform .18s ease;
    z-index: 999;
    border-radius: 0;
    top: 0;
  }
  .filters-panel.is-open{ transform: translateX(0); }
  .filters-close{ display:inline-flex; }
  .sortbar-filters{ display:inline-flex; }
}


    /* Footer */
.footer{
  margin-top: 36px;
  padding: 26px 0;
  position: relative;
  overflow:hidden;
  isolation: isolate;

  color: rgba(255,255,255,.90);
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(194,65,12,.18), transparent 60%),
    radial-gradient(900px 260px at 85% 0%, rgba(15,118,110,.20), transparent 60%),
    linear-gradient(135deg, rgba(17,24,39,.96), rgba(15,118,110,.26));
  border-top: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 -22px 60px rgba(17,24,39,.18);
}
.footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 0;

  /* Same subtle road markings as the topbar */
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 10px),
    linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.06)),
    linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.05)),
    linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.12)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.34) 0 16px, transparent 16px 56px);
  background-size:
    240px 240px,
    100% 1px,
    100% 1px,
    100% 6px,
    72px 6px;
  background-position:
    center,
    0 18px,
    0 calc(100% - 18px),
    0 32px,
    0 32px;
  background-repeat:
    repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    repeat-x;

  opacity: .18;
  mix-blend-mode: overlay;
}
.footer::after{
  content:"";
  position:absolute;
  z-index: 2;
  left:0; right:0; top:-1px;
  height: 3px;
  background: linear-gradient(90deg, rgba(194,65,12,1), rgba(15,118,110,1), rgba(59,130,246,1));
  opacity: .85;
  pointer-events:none;
}
.footer .container{ position: relative; z-index: 1; }
.footer .muted{ color: rgba(255,255,255,.68); }
.footer .footer-brand strong{
  font-family: var(--serif);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .2px;
}
.footer .brand-mark{ box-shadow: 0 12px 26px rgba(0,0,0,.36); }
.footer-trust{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.trust-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-weight: 900;
  color: rgba(255,255,255,.88);
}
.trust-ico{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 26px rgba(0,0,0,.20);
  font-size: 18px;
  flex: 0 0 auto;
}
@media (max-width: 980px){
  .footer-trust{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .footer-trust{ grid-template-columns: 1fr; }
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items:start;
}
.footer-brand{ display:flex; align-items:center; gap: 12px; }
.footer-brand .brand-mark{ width: 38px; height: 38px; border-radius: 12px; }

.footer-links{ display:flex; flex-direction:column; gap: 10px; }
.footer-links a{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.86);
  font-weight: 900;
}
.footer-links a:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,1); }
.footer-note{ display:flex; gap: 10px; flex-wrap: wrap; justify-content:flex-end; }

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(16px);
  background: rgba(31,41,55,.92);
  color: #fff;
  padding: 10px 12px;
  border-radius: 14px;
  opacity: 0;
  pointer-events:none;
  transition: transform .18s ease, opacity .18s ease;
  font-weight: 800;
  z-index: 1000;
}
.toast.is-on{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Responsive */
@media (max-width: 980px){
  .grid--4{ grid-template-columns: repeat(2, 1fr); }
      .grid--3{ grid-template-columns: repeat(2, 1fr); }
  .hero-card{ grid-template-columns: 1fr; }
  .hero-visual{ min-height: 230px; }
  .hero-polaroid{ display:none; }
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-note{ justify-content:flex-start; }
  .contact-grid{ grid-template-columns: 1fr; }
  .nav{ display:none; }
  .nav-toggle{ display:inline-block; }
  .search{ display:none; }
}

@media (max-width: 520px){
  .h1{ font-size: 32px; }
  .grid--4{ grid-template-columns: 1fr; }
      .grid--3{ grid-template-columns: 1fr; }
  .input{ min-width: 100%; }
  .bg-sign{ opacity: .10; }
}


/* Category cards (emoji icons) */
.card--cat{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  text-decoration:none;
}
.card--cat .cat-ico{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  font-size: 22px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(31,41,55,.08);
  box-shadow: 0 10px 20px rgba(17,24,39,.08);
  flex: 0 0 auto;
}
.card--cat .chev{
  font-size: 20px;
  color: rgba(31,41,55,.55);
  flex: 0 0 auto;
}


.query-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,118,110,.20);
  background: rgba(15,118,110,.10);
  font-weight: 900;
  margin-left: 8px;
  font-size: 14px;
}
mark{
  background: rgba(194,65,12,.18);
  border-radius: 8px;
  padding: 0 3px;
}
.btn.is-disabled{
  opacity: .45;
  pointer-events: none;
}


/* Wholesale page */
.wholesale-grid{
  display:grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 14px;
  align-items:start;
}
.wholesale-main{
  display:grid;
  gap: 14px;
}
.wholesale-side{
  display:grid;
  gap: 14px;
}
.wholesale-hero{
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.wholesale-hero .hero-badge{
  position:absolute;
  top: 14px;
  right: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15,118,110,.10);
  border: 1px solid rgba(15,118,110,.20);
  font-weight: 900;
}
.kpi-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.kpi{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(31,41,55,.08);
  border-radius: 18px;
  padding: 12px 14px;
}
.kpi-top{ font-size: 12px; font-weight: 900; color: rgba(31,41,55,.55); text-transform: uppercase; letter-spacing: .02em; }
.kpi-val{ font-size: 20px; font-weight: 1000; margin-top: 6px; }
.kpi-sub{ margin-top: 4px; color: rgba(31,41,55,.60); font-weight: 700; font-size: 13px; }

.wholesale-card{ padding: 16px; }
.list{ margin: 10px 0 0; padding-left: 18px; }
.list li{ margin: 6px 0; }
.note{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(194,65,12,.08);
  border: 1px solid rgba(194,65,12,.16);
}
.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
.btn-row{ margin-top: 12px; display:flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 980px){
  .wholesale-grid{ grid-template-columns: 1fr; }
  .kpi-grid{ grid-template-columns: 1fr; }
  .two-col{ grid-template-columns: 1fr; }
}


/* Cart (mini drawer + page) */
.cart-btn{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(31,41,55,.10);
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 20px rgba(17,24,39,.08);
  cursor:pointer;
}
.cart-badge{
  position:absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-size: 12px;
  font-weight: 1000;
  background: rgba(194,65,12,1);
  color: #fff;
  border: 2px solid rgba(255,255,255,.95);
}
.cart-drawer{
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.cart-overlay{
  position:absolute;
  inset:0;
  background: rgba(17,24,39,.35);
}
.cart-panel{
  position:absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 92vw);
  background: rgba(252,251,247,.98);
  border-left: 1px solid rgba(31,41,55,.10);
  box-shadow: -20px 0 50px rgba(17,24,39,.20);
  display:flex;
  flex-direction: column;
}
.cart-panel-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 14px;
  border-bottom: 1px solid var(--line);
}
.cart-panel-empty{
  padding: 18px;
}
.cart-panel-list{
  padding: 12px 14px;
  display:grid;
  gap: 10px;
  overflow:auto;
  flex: 1 1 auto;
}
.mini-row{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(31,41,55,.08);
  background: rgba(255,255,255,.65);
}
.mini-cover{
  width: 44px;
  height: 56px;
  border-radius: 12px;
  flex: 0 0 auto;
}
.mini-thumb{
  width: 44px;
  height: 56px;
  border-radius: 12px;
  flex: 0 0 auto;
  object-fit: cover;
  border: 1px solid rgba(31,41,55,.10);
  box-shadow: 0 8px 18px rgba(17,24,39,.10);
}
.mini-title{
  font-weight: 900;
  line-height: 1.2;
}
.cart-panel-foot{
  padding: 14px 14px;
  border-top: 1px solid var(--line);
  display:grid;
  gap: 10px;
}

.cart-layout{
  display:grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 14px;
  align-items:start;
}
.cart-headrow{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.cart-list{ padding: 8px; display:grid; gap: 10px; }
.cart-row{
  display:grid;
  grid-template-columns: 70px 1fr 170px;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(31,41,55,.08);
  background: rgba(255,255,255,.65);
  align-items:start;
}
.cart-cover{
  width: 70px;
  height: 90px;
  border-radius: 16px;
}
.cart-title a{ font-weight: 1000; text-decoration:none; color: var(--text); }
.cart-meta{ margin-top: 10px; display:flex; gap: 8px; flex-wrap: wrap; }
.cart-right{ display:grid; gap: 8px; justify-items: end; }
.qty{ width: 100%; max-width: 110px; }
.cart-actions{
  display:flex;
  gap: 10px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--line);
  align-items:center;
  justify-content: space-between;
}
.cart-summary{ padding: 16px; display:grid; gap: 10px; }
.sum-line{ display:flex; justify-content: space-between; align-items:center; }
.sum-total{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px dashed rgba(31,41,55,.18);
  font-size: 16px;
  font-weight: 1000;
}

@media (max-width: 980px){
  .cart-layout{ grid-template-columns: 1fr; }
  .cart-row{ grid-template-columns: 60px 1fr; }
  .cart-right{ grid-column: 1 / -1; justify-items: start; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .qty{ max-width: 100%; }
}

/* Checkout */
.checkout-layout{
  display:grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 14px;
  align-items:start;
}
.checkout-form{ padding: 16px; }
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.label{ display:block; font-weight: 900; margin: 10px 0 6px; }
.field-err{ color: rgba(194,65,12,1); font-weight: 800; font-size: 13px; margin-top: 6px; }
.input.is-invalid{ border-color: rgba(194,65,12,.55); box-shadow: 0 0 0 4px rgba(194,65,12,.12); }
.radio-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}
.card-inline{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(31,41,55,.08);
  background: rgba(255,255,255,.65);
}
.card-inline input{ margin-top: 4px; }
.checkout-actions{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  justify-content: space-between;
  align-items:center;
}

.success-card{
  padding: 18px;
  display:flex;
  gap: 14px;
  align-items:flex-start;
}
.success-ico{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: rgba(15,118,110,.10);
  border: 1px solid rgba(15,118,110,.20);
  font-size: 22px;
  flex: 0 0 auto;
}
.success-line{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; margin-top: 6px; }
.mini-order{ margin-top: 10px; display:grid; gap: 10px; }
@media (max-width: 980px){
  .checkout-layout{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .checkout-actions{ flex-direction: column; align-items: stretch; }
  .success-card{ flex-direction: column; }
}

/* Payment details */
.pay-details{ margin-top: 12px; }
.pay-box{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(31,41,55,.10);
  background: rgba(255,255,255,.65);
}
.pay-box-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.pay-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.iban-card{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(31,41,55,.10);
  background: rgba(252,251,247,.92);
}
.iban-bank{ font-weight: 1000; }
.iban{
  margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 900;
  letter-spacing: .02em;
  word-break: break-word;
}

/* Coupon */
.coupon-box{
  margin: 12px 0;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(31,41,55,.10);
  background: rgba(255,255,255,.55);
}
.small-label{
  display:block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(31,41,55,.75);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.coupon-row{
  display:flex;
  gap: 10px;
  align-items: stretch;
}
.coupon-row .input{
  flex: 1;
  min-width: 0;
}
.link{
  display:inline-block;
  margin-top: 8px;
  color: rgba(31,41,55,.85);
  text-decoration: none;
  font-weight: 800;
}
.link:hover{ text-decoration: underline; }

/* Checkout: document type (receipt/invoice) */
.radio-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.radio{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(31,41,55,.12);
  background: rgba(255,255,255,.55);
  cursor:pointer;
  user-select:none;
}
.radio input{ accent-color: currentColor; }
.invoice-fields{
  padding:12px;
  border-radius:16px;
  border:1px dashed rgba(31,41,55,.18);
  background: rgba(255,255,255,.55);
}

/* Wishlist */
.wish-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(31,41,55,.12);
  background: rgba(255,255,255,.55);
  text-decoration:none;
  font-size:18px;
}
.wish-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:#111827;
  color:#fff;
  font-size:12px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wish-toggle{
  position:absolute;
  top:10px;
  right:10px;
  width:38px;
  height:38px;
  border-radius:14px;
  border:1px solid rgba(31,41,55,.12);
  background: rgba(255,255,255,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.wish-toggle.is-on{
  background: rgba(17,24,39,.92);
  color:#fff;
  border-color: rgba(17,24,39,.92);
}
.bookstore-card{ position:relative; }

/* Admin orders (demo) */
.table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.table th, .table td{
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid rgba(31,41,55,.10);
}
.table th{
  font-weight:900;
  background: rgba(255,255,255,.55);
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(31,41,55,.12);
  background: rgba(255,255,255,.55);
  font-weight:800;
  font-size:12px;
}

.input.is-error{border-color: rgba(220,38,38,.55); box-shadow: 0 0 0 3px rgba(220,38,38,.12);}

/* My Orders icon */
.orders-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(31,41,55,.12);
  background: rgba(255,255,255,.55);
  text-decoration:none;
  font-size:18px;
}
.orders-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:#111827;
  color:#fff;
  font-size:12px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Print view */
.print-body{ background:#f6f7fb; }
.print-actions{
  position:sticky; top:0;
  display:flex; gap:10px; flex-wrap:wrap;
  padding:12px;
  background: rgba(246,247,251,.92);
  border-bottom:1px solid rgba(31,41,55,.10);
  z-index:20;
}
.print-sheet{
  max-width: 920px;
  margin: 16px auto;
  padding: 18px;
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(31,41,55,.10);
}
.print-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(31,41,55,.10);
}
.print-title{ font-weight: 1000; font-size: 20px; letter-spacing:.04em; }
.print-meta{ text-align:right; font-size:14px; }
.print-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.print-box{
  border:1px solid rgba(31,41,55,.10);
  border-radius:12px;
  padding:12px;
  background: rgba(246,247,251,.50);
}
.print-box-title{ font-weight:900; margin-bottom:6px; }
.print-items{ margin-top:14px; }

@media print{
  .print-actions{ display:none !important; }
  .print-body{ background:#fff; }
  .print-sheet{ margin:0; border:none; border-radius:0; }
}

/* Alerts */
.alert{ padding:12px 14px; border-radius:14px; border:1px solid rgba(0,0,0,.10); background:rgba(251,247,239,.9); margin: 0 0 14px; }
.alert--ok{ border-color: rgba(16,185,129,.35); background: rgba(236,253,245,.95); }
.alert--warn{ border-color: rgba(245,158,11,.35); background: rgba(255,251,235,.95); }

/* Form helpers */
.help{ font-size:12px; color: rgba(17,24,39,.62); margin-top:6px; }

/* Product specs (demo) */
.spec-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
@media (max-width: 700px){
  .spec-grid{ grid-template-columns: 1fr; }
}
.spec{
  border:1px solid var(--border);
  background: var(--card);
  border-radius: 12px;
  padding:10px 12px;
}
.spec-k{
  font-size: 12px;
  color: var(--muted);
  margin-bottom:2px;
}
.spec-v{
  font-weight: 700;
}

/* -----------------------------------------------------------
  Legal pages + Cookie consent (GDPR)
----------------------------------------------------------- */
.legal-card{ padding: 16px; }
.legal-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 14px; }
.legal-box{ padding: 12px; border:1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.55); margin-bottom: 10px; }
.legal-k{ font-weight: 900; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; color: rgba(31,41,55,.75); }
.legal-v{ font-weight: 800; }
.legal-links a{ display:block; margin: 6px 0; }
.legal-list{ margin: 10px 0 0; padding-left: 18px; line-height:1.6; }
.legal-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }
.legal-small{ font-size: 13px; }

.cookie-banner{
  position: fixed;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 9999;
}
.cookie-banner__inner{
  max-width: var(--container);
  margin: 0 auto;
  background: rgba(255,253,248,.96);
  border: 1px solid rgba(31,41,55,.12);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 12px 12px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.cookie-banner__actions{ display:flex; gap: 8px; flex-wrap:wrap; justify-content:flex-end; }
.cookie-banner__text strong{ display:block; margin-bottom: 3px; }

.cookie-modal{
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(17,24,39,.45);
  display:flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.cookie-modal__panel{
  width: min(720px, 100%);
  background: rgba(255,253,248,.98);
  border: 1px solid rgba(31,41,55,.12);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.cookie-modal__head,
.cookie-modal__foot{
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(31,41,55,.10);
}
.cookie-modal__foot{ border-bottom: 0; border-top: 1px solid rgba(31,41,55,.10); justify-content:flex-end; }
.cookie-modal__body{ padding: 14px; }
.cookie-row{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px;
  border: 1px solid rgba(31,41,55,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.55);
  margin-bottom: 10px;
}
.cookie-k{ font-weight: 900; margin-bottom: 4px; }
.switch{ position: relative; width: 46px; height: 28px; display:inline-block; }
.switch input{ display:none; }
.switch__ui{
  position:absolute; inset:0;
  border-radius: 999px;
  background: rgba(31,41,55,.20);
  border: 1px solid rgba(31,41,55,.18);
}
.switch__ui:after{
  content:"";
  position:absolute;
  width: 22px; height: 22px;
  left: 3px; top: 2px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(31,41,55,.12);
  transition: transform .18s ease;
}
.switch input:checked + .switch__ui{
  background: rgba(15,118,110,.30);
  border-color: rgba(15,118,110,.35);
}
.switch input:checked + .switch__ui:after{ transform: translateX(18px); }

@media (max-width: 860px){
  .legal-grid{ grid-template-columns: 1fr; }
  .cookie-banner__inner{ flex-direction: column; align-items: stretch; }
  .cookie-banner__actions{ justify-content:flex-start; }
}

/* =============================
   Home: KOK Tests banner
   ============================= */
.kok-banner{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(31,41,55,.10);
  background:
    radial-gradient(900px 300px at 20% 20%, rgba(245,158,11,.22), transparent 60%),
    radial-gradient(900px 300px at 85% 20%, rgba(16,185,129,.18), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.46));
  box-shadow: 0 20px 50px rgba(17,24,39,.08);
}
.kok-banner__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: center;
  padding: 18px;
}
.kok-banner__eyebrow{
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--text);
}
.kok-banner__title{
  margin: 8px 0 6px;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.15;
}
.kok-banner__desc{
  margin: 0;
  color: var(--muted);
}
.kok-banner__list{
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 8px;
  color: var(--text);
}
.kok-banner__actions{ margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; }

.kok-banner__visual{
  position: relative;
  min-height: 220px;
}
.kok-card{
  position:absolute;
  width: 180px;
  height: 120px;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(31,41,55,.10);
  box-shadow: 0 18px 50px rgba(17,24,39,.10);
  transform-origin: center;
  animation: kokFloat 4.2s ease-in-out infinite;
}
.kok-card--a{ --r:-6deg; left: 10px; top: 24px; animation-delay: 0s; }
.kok-card--b{ --r:7deg; left: 70px; top: 68px; animation-delay: .4s; }
.kok-card--c{ --r:-2deg; left: 30px; top: 118px; animation-delay: .8s; }

.kok-sign{
  position:absolute;
  width: 86px;
  height: 86px;
  right: 10px;
  top: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(31,41,55,.10);
  box-shadow: 0 18px 50px rgba(17,24,39,.10);
  animation: kokPop 2.8s ease-in-out infinite;
}
.kok-sign--stop{
  background:
    radial-gradient(circle at 30% 30%, rgba(239,68,68,.28), transparent 55%),
    rgba(255,255,255,.78);
}
.kok-sign--speed{
  right: 62px;
  top: 126px;
  width: 74px;
  height: 74px;
  background:
    radial-gradient(circle at 30% 30%, rgba(59,130,246,.22), transparent 55%),
    rgba(255,255,255,.78);
  animation-delay: .35s;
}

@keyframes kokFloat{
  0%, 100%{ transform: translateY(0) rotate(var(--r, 0deg)); }
  50%{ transform: translateY(-8px) rotate(var(--r, 0deg)); }
}
@keyframes kokPop{
  0%, 100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-6px) scale(1.03); }
}

@media (max-width: 860px){
  .kok-banner__grid{ grid-template-columns: 1fr; }
  .kok-banner__visual{ min-height: 180px; }
}



/* -----------------------------------------------------------
  Guides / Blog (members-only content)
----------------------------------------------------------- */
.grid--3{ grid-template-columns: repeat(3, 1fr); }

.reveal, [data-reveal]{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}
.is-in{
  opacity: 1 !important;
  transform: none !important;
}

.guides-hero{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
  padding: 18px;
  overflow:hidden;
}
.guides-hero__meta{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.guides-hero__visual{
  position: relative;
  min-height: 210px;
  border-radius: var(--radius);
  background:
    radial-gradient(500px 220px at 20% 20%, rgba(194,65,12,.16), transparent 58%),
    radial-gradient(480px 240px at 90% 10%, rgba(15,118,110,.18), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,253,248,.45));
  border: 1px solid var(--line);
}
.guides-card{
  position:absolute; inset: 24px 20px 24px 20px;
  border-radius: calc(var(--radius) + 6px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.35));
  border: 1px solid rgba(31,41,55,.10);
  box-shadow: 0 20px 60px rgba(17,24,39,.12);
}
.guides-sign{
  position:absolute;
  width: 110px; height: 110px;
  opacity: .22;
  background-repeat:no-repeat;
  background-position:center;
  background-size: contain;
  filter: blur(.1px);
}
.guides-sign--a{ left: 10px; top: 12px; transform: rotate(-10deg); background-image: url("../img/sign-stop.svg"); }
.guides-sign--b{ right: 12px; top: 18px; transform: rotate(10deg); background-image: url("../img/sign-speed.svg"); }
.guides-sign--c{ right: 42px; bottom: 10px; transform: rotate(-12deg); background-image: url("../img/sign-yield.svg"); }

.guides-paywall{
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(194,65,12,.20);
  background: linear-gradient(135deg, rgba(194,65,12,.10), rgba(255,255,255,.55));
}

.guide-card{
  padding: 0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 320px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.guide-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(17,24,39,.10);
}
.guide-cover{
  height: 110px;
  background:
    radial-gradient(16px 16px at 18% 30%, rgba(255,255,255,.9), transparent 62%),
    radial-gradient(18px 18px at 80% 20%, rgba(255,255,255,.9), transparent 62%),
    linear-gradient(135deg, rgba(15,118,110,.22), rgba(194,65,12,.20));
  border-bottom: 1px solid rgba(31,41,55,.10);
  position: relative;
}
.guide-cover::after{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.18) 10px, transparent 10px, transparent 20px);
  opacity: .35;
  mix-blend-mode: overlay;
}

/* Guide cover with optional photo */
.guide-cover{ position: relative; }
.guide-cover__badge, .guide-cover__icon{ z-index: 3; }
.guide-cover--photo{ background: rgba(17,24,39,.92); }
.guide-cover__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  opacity: .86;
  filter: saturate(1.05) contrast(1.04);
  transform: scale(1.02);
  z-index: 0;
}
.guide-cover--photo::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(17,24,39,.44), rgba(17,24,39,.10));
}
.guide-cover--photo::after{
  opacity: .26;
}

.guide-cover__badge{
  position:absolute; left: 12px; top: 12px;
  z-index: 2;
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(31,41,55,.12);
  font-weight: 900;
  font-size: 12px;
}

/* Colored category labels */
.guide-cat{
  color: rgba(255,255,255,.96);
  background: rgba(17,24,39,.46);
  border-color: rgba(255,255,255,.16);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
}
.guide-cat--fees{ background: linear-gradient(135deg, rgba(194,65,12,.92), rgba(233,107,54,.82)); border-color: rgba(255,255,255,.18); }
.guide-cat--exams{ background: linear-gradient(135deg, rgba(15,118,110,.92), rgba(45,212,191,.70)); border-color: rgba(255,255,255,.16); }
.guide-cat--process{ background: linear-gradient(135deg, rgba(30,58,138,.84), rgba(59,130,246,.60)); border-color: rgba(255,255,255,.16); }
.guide-cat--conversion{ background: linear-gradient(135deg, rgba(16,185,129,.86), rgba(34,197,94,.62)); border-color: rgba(255,255,255,.16); }
.guide-cat--categories{ background: linear-gradient(135deg, rgba(124,58,237,.86), rgba(194,65,12,.42)); border-color: rgba(255,255,255,.16); }

.guide-cat-pill{
  padding: 7px 10px;
  border-color: rgba(255,255,255,.16);
}
.guide-cover__icon{
  position:absolute; right: 14px; bottom: 10px;
  z-index: 2;
  font-size: 26px;
  opacity: .95;
  filter: drop-shadow(0 10px 14px rgba(17,24,39,.18));
}

.guide-lock{
  position:absolute; inset:0;
  z-index: 3;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(246,242,234,.82));
  backdrop-filter: blur(4px);
}
.guide-lockpill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 900;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(31,41,55,.14);
  box-shadow: 0 10px 18px rgba(17,24,39,.10);
}
.guide-body{ padding: 14px; display:flex; flex-direction:column; gap: 10px; flex:1; }
.guide-title{ font-weight: 950; letter-spacing: .1px; }
.guide-excerpt{ font-size: 14px; line-height: 1.45; }
.guide-foot{ margin-top: auto; display:flex; gap: 10px; flex-wrap: wrap; }

.backlink{
  display:inline-flex;
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.55);
  font-weight: 900;
}

.article-cover{
  height: 240px;
  border-radius: calc(var(--radius) + 2px);
  overflow:hidden;
  border: 1px solid rgba(31,41,55,.12);
  background: rgba(255,255,255,.50);
  position: relative;
  margin: 12px 0 14px;
  box-shadow: 0 18px 40px rgba(17,24,39,.10);
}
.article-cover img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  opacity: .92;
  filter: saturate(1.05) contrast(1.04);
  transform: scale(1.01);
}
.article-cover::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(17,24,39,.05), rgba(17,24,39,.26));
}

.article-head{ margin-bottom: 12px; }
.article-kicker{ display:flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }

.article-grid{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 14px;
  align-items:start;
}
.article-body{ padding: 18px; }
.article-side .card{ padding: 16px; }

.prose h2{ font-family: var(--serif); margin: 18px 0 8px; font-size: 22px; }
.prose h3{ font-family: var(--serif); margin: 14px 0 6px; font-size: 18px; }
.prose p{ margin: 10px 0; color: rgba(31,41,55,.86); }
.prose ul, .prose ol{ margin: 10px 0 12px; padding-left: 18px; color: rgba(31,41,55,.86); }
.prose li{ margin: 6px 0; }

.callout{
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(31,41,55,.12);
  background: rgba(255,255,255,.62);
}
.callout--tip{
  border-color: rgba(15,118,110,.22);
  background: linear-gradient(135deg, rgba(15,118,110,.10), rgba(255,255,255,.60));
}
.callout--note{
  border-color: rgba(194,65,12,.22);
  background: linear-gradient(135deg, rgba(194,65,12,.10), rgba(255,255,255,.60));
}

.side-list{ display:grid; gap: 10px; margin-top: 12px; }
.side-item{ display:flex; gap: 10px; align-items:flex-start; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.55); border: 1px solid var(--line); }
.side-item:hover{ background: rgba(15,118,110,.10); border-color: rgba(15,118,110,.18); }
.side-dot{ width: 10px; height: 10px; border-radius: 99px; margin-top: 5px; background: rgba(194,65,12,.70); }

/* Responsive */
@media (max-width: 980px){
  .guides-hero{ grid-template-columns: 1fr; }
  .article-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .grid--3{ grid-template-columns: 1fr; }
}



/* =============================
   Home: What books you'll find (highlight)
   ============================= */
.books-splash{
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius) + 10px);
  padding: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(1200px 520px at 0% 0%, rgba(194,65,12,.18), transparent 58%),
    radial-gradient(900px 520px at 100% 0%, rgba(15,118,110,.20), transparent 60%),
    linear-gradient(135deg, rgba(17,24,39,.92), rgba(17,24,39,.74));
  color: rgba(255,255,255,.92);
  box-shadow: 0 30px 90px rgba(0,0,0,.22);
  isolation: isolate;
}
.books-splash::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 4px;
  background: linear-gradient(90deg, rgba(194,65,12,1), rgba(15,118,110,1));
  opacity: .95;
  z-index: 1;
  pointer-events:none;
}
.books-splash::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    /* dashed center line */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.00) 0,
      rgba(255,255,255,.00) 16px,
      rgba(255,255,255,.18) 16px,
      rgba(255,255,255,.18) 26px,
      rgba(255,255,255,.00) 26px,
      rgba(255,255,255,.00) 42px
    ),
    /* lane edges */
    linear-gradient(90deg,
      rgba(255,255,255,.10) 0,
      rgba(255,255,255,.10) 6px,
      rgba(255,255,255,.00) 6px,
      rgba(255,255,255,.00) calc(100% - 6px),
      rgba(255,255,255,.10) calc(100% - 6px),
      rgba(255,255,255,.10) 100%
    ),
    /* subtle asphalt grain */
    radial-gradient(2px 2px at 12% 20%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(2px 2px at 28% 68%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(2px 2px at 62% 42%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(2px 2px at 84% 24%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(2px 2px at 76% 82%, rgba(255,255,255,.10), transparent 60%);
  opacity: .20;
  z-index: 0;
  pointer-events:none;
}

.books-splash__head{
  position: relative;
  z-index: 2;
  display:grid;
  gap: 10px;
  max-width: 78ch;
}
.books-eyebrow{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  width: fit-content;
  font-weight: 950;
  letter-spacing: .2px;
}
.books-lead{
  margin: 0;
  color: rgba(255,255,255,.82);
  font-weight: 750;
}
.books-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}

/* Glass button for dark sections */
.btn--glass{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.95);
}
.btn--glass:hover{ background: rgba(255,255,255,.16); }

.books-grid{
  position: relative;
  z-index: 2;
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.booktype{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.booktype:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(0,0,0,.22);
  background: rgba(255,255,255,.10);
}

.booktype__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.booktype__mini{
  font-size: 12px;
  font-weight: 850;
  color: rgba(255,255,255,.78);
  text-align:right;
}
.booktype__tag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  white-space: nowrap;
}
.booktype__tag--orange{ background: rgba(194,65,12,.22); border-color: rgba(194,65,12,.35); }
.booktype__tag--teal{ background: rgba(15,118,110,.22); border-color: rgba(15,118,110,.35); }
.booktype__tag--blue{ background: rgba(59,130,246,.20); border-color: rgba(59,130,246,.32); }
.booktype__tag--gray{ background: rgba(148,163,184,.18); border-color: rgba(148,163,184,.28); }
.booktype__tag--amber{ background: rgba(245,158,11,.20); border-color: rgba(245,158,11,.32); }
.booktype__tag--purple{ background: rgba(147,51,234,.18); border-color: rgba(147,51,234,.30); }

.booktype__title{
  margin: 10px 0 6px;
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: .2px;
}
.booktype__desc{
  margin: 0 0 10px;
  color: rgba(255,255,255,.84);
  font-size: 14px;
  line-height: 1.45;
}
.booktype__list{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,.82);
  line-height: 1.5;
}
.booktype__list li{ margin: 6px 0; }
.booktype__list strong{ color: rgba(255,255,255,.92); }

.booktype__cta{
  margin-top: 12px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 980px){
  .books-grid{ grid-template-columns: 1fr; }
  .booktype__mini{ text-align:left; }
}


/* Newsletter honeypot field (anti-bot) */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }



/* -----------------------------------------------------------
  Cart page polish (no demo)
----------------------------------------------------------- */
.cart-page-head .cart-headline{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.cart-head-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.cart-kpis{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.cart-kpi{
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(31,41,55,.10);
  background: rgba(255,255,255,.62);
  box-shadow: 0 10px 24px rgba(17,24,39,.06);
}
.cart-kpi--strong{
  border-color: rgba(15,118,110,.18);
  background: linear-gradient(135deg, rgba(15,118,110,.10), rgba(255,255,255,.62));
}
.cart-kpi__k{
  font-size: 12px;
  font-weight: 900;
  color: rgba(31,41,55,.60);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cart-kpi__v{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 1000;
}

.cart-card{ padding: 0; overflow:hidden; }
.cart-list{ padding: 12px; display:grid; gap: 12px; }

.cart-item{
  display:grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(31,41,55,.08);
  background: rgba(255,255,255,.66);
  box-shadow: 0 10px 22px rgba(17,24,39,.06);
}
.cart-item__media{ display:flex; align-items:flex-start; }
.cart-thumb{
  width: 92px;
  height: 118px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid rgba(31,41,55,.12);
  box-shadow: 0 14px 28px rgba(17,24,39,.10);
}
.cart-item__body{ min-width: 0; }
.cart-item__top{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items:flex-start;
}
.cart-item__line{
  text-align:right;
  display:flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
}
.cart-line-total{ font-size: 16px; font-weight: 1000; }
.cart-item__summary{ margin-top: 6px; }
.cart-item__meta{ margin-top: 10px; display:flex; gap: 8px; flex-wrap: wrap; }

.cart-item__actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items:flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
}
.qty-group{ display:grid; gap: 6px; }
.qty-label{ font-size: 12px; }
.qty{ max-width: 110px; }

.cart-summary-card{
  position: sticky;
  top: 92px;
  align-self: start;
}

.ship-progress{ margin: 12px 0 2px; }
.ship-progress__bar{
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(31,41,55,.10);
  background: rgba(255,255,255,.60);
  overflow:hidden;
}
.ship-progress__fill{
  display:block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(194,65,12,1), rgba(15,118,110,1));
  width: 0%;
}
.ship-progress__txt{ margin-top: 8px; font-weight: 800; }

.cart-summary__cta{ display:grid; gap: 10px; margin-top: 12px; }
.cart-trust{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

@media (max-width: 980px){
  .cart-kpis{ grid-template-columns: 1fr; }
  .cart-item{ grid-template-columns: 82px 1fr; }
  .cart-summary-card{ position: static; }
  .cart-item__line{ text-align:left; flex-direction: row; gap: 10px; align-items:baseline; }
}


/* -----------------------------------------------------------
  Checkout polish (final, no demo)
----------------------------------------------------------- */
.checkout-page-head .checkout-hero{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.checkout-steps{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items:center;
}
.step{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(31,41,55,.10);
  background: rgba(255,255,255,.55);
  font-weight: 900;
  font-size: 13px;
  color: rgba(31,41,55,.80);
}
.step-dot{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(15,118,110,.10);
  border: 1px solid rgba(15,118,110,.18);
  font-weight: 1000;
}
.step.is-on{
  border-color: rgba(15,118,110,.22);
  background: rgba(15,118,110,.10);
  color: rgba(15,118,110,1);
}
.step.is-on .step-dot{
  background: rgba(15,118,110,.18);
}

.checkout-card{ padding: 16px; }
.checkout-section{ padding: 12px 0; }
.checkout-section + .checkout-section{ border-top: 1px solid rgba(31,41,55,.10); margin-top: 10px; }
.checkout-section__head{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.checkout-ico{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(31,41,55,.10);
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.9), transparent 62%),
    linear-gradient(135deg, rgba(15,118,110,.18), rgba(194,65,12,.16));
  display:grid;
  place-items:center;
  font-size: 20px;
  flex: 0 0 auto;
}

.checkout-summary-card{
  position: sticky;
  top: 92px;
  align-self: start;
}
.checkout-summary__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(31,41,55,.10);
  margin-bottom: 12px;
}
.checkout-mini{
  display:grid;
  gap: 8px;
  margin-bottom: 12px;
}
.checkout-mini__row{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 14px;
  border: 1px solid rgba(31,41,55,.08);
  background: rgba(255,255,255,.55);
}
.checkout-mini__title{ min-width: 0; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.checkout-mini__price{ white-space: nowrap; font-weight: 900; }

.checkout-summary__links{ margin-top: 12px; display:grid; gap: 10px; }

@media (max-width: 980px){
  .checkout-summary-card{ position: static; }
}

/* Success page */
.success-shell{
  padding: 18px;
  position: relative;
  overflow:hidden;
}
.success-shell::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(600px 260px at 0% 0%, rgba(16,185,129,.18), transparent 60%),
    radial-gradient(520px 240px at 100% 0%, rgba(194,65,12,.14), transparent 58%);
  opacity: .9;
  pointer-events:none;
}
.success-shell > *{ position: relative; }

.success-head{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.success-badge{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.20);
  box-shadow: 0 18px 40px rgba(17,24,39,.10);
  font-size: 24px;
  flex: 0 0 auto;
}
.success-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.success-kpi{
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(31,41,55,.10);
  background: rgba(255,255,255,.60);
}
.success-k{
  font-size: 12px;
  font-weight: 900;
  color: rgba(31,41,55,.60);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.success-v{
  margin-top: 6px;
  font-weight: 900;
}
.success-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.success-pay{
  margin-top: 12px;
}
@media (max-width: 760px){
  .success-grid{ grid-template-columns: 1fr; }
}


/* Cookie consent hidden-state fix */
.cookie-banner[hidden],
.cookie-modal[hidden]{
  display: none !important;
}