/* Bibbity’s Baubles — forest/amanita theme */
/* Drop-in replacement for static/site.css */

:root{
  /* forest + amanita vibes */
  --bg:#0a0f0a;           /* deep forest */
  --card:#11150f;         /* damp soil */
  --text:#eae6d9;         /* warm parchment */
  --muted:#b9b3a6;        /* lichen */
  --accent:#d94a4a;       /* amanita cap red */
  --accent-2:#7fb069;     /* moss green */
  --border:#26301e;       /* dark moss */
}

* { box-sizing: border-box; }
html, body { height: 100%; }

/* Base forest gradient lives on <html> so it shows through as a fallback
   while the per-page photo layer loads (or if it fails to). */
html{
  background:
    radial-gradient(1100px 600px at 15% -10%, rgba(190, 32, 32, .12) 0, transparent 60%),
    radial-gradient(1000px 600px at 110% 0%, rgba(25, 80, 45, .14) 0, transparent 55%),
    linear-gradient(180deg, #070a07, var(--bg) 45%, #0e1510);
  background-attachment: fixed;
}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--text);
  background: transparent;
}

/* Per-page photographic background. A real element rather than
   background-attachment:fixed, which iOS Safari refuses to scroll smoothly. */
.page-bg{
  --scrim:.40;
  position:fixed; inset:0; z-index:-1;
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
/* Scrim: keeps the parchment body text legible over the photo. Tuned per image
   rather than globally - these scenes range from very dark (the archway) to a
   bright fog sky (the graveyard), and a single value either washes the bright
   one out or crushes the dark ones to black. Only applied when a page actually
   sets a background class, so plain pages keep the undimmed gradient. */
body[class*="bg-"] .page-bg::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg,
    rgba(8,11,8, calc(var(--scrim) + .08)) 0%,
    rgba(8,11,8, var(--scrim)) 38%,
    rgba(8,11,8, calc(var(--scrim) + .12)) 100%);
}

body.bg-home     .page-bg{ background-image:url('img/bg/home.webp');      --scrim:.33; }
body.bg-cart     .page-bg{ background-image:url('img/bg/cart.webp');      --scrim:.20; }
body.bg-cat-cement    .page-bg{ background-image:url('img/bg/cement.webp');    --scrim:.60; }
body.bg-cat-resin     .page-bg{ background-image:url('img/bg/resin.webp');     --scrim:.30; }
body.bg-cat-paintings .page-bg{ background-image:url('img/bg/paintings.webp'); --scrim:.28; }
body.bg-cat-replica   .page-bg{ background-image:url('img/bg/replica.webp');   --scrim:.44; }
/* Portrait source (no 2x variant): bias the crop up so wide screens keep the raven in frame. */
body.bg-reviews  .page-bg{ background-image:url('img/bg/reviews.webp');   --scrim:.45; background-position:center 22%; }

@media (min-width: 1600px){
  body.bg-home     .page-bg{ background-image:url('img/bg/home-2x.webp'); }
  body.bg-cart     .page-bg{ background-image:url('img/bg/cart-2x.webp'); }
  body.bg-cat-cement    .page-bg{ background-image:url('img/bg/cement-2x.webp'); }
  body.bg-cat-resin     .page-bg{ background-image:url('img/bg/resin-2x.webp'); }
  body.bg-cat-paintings .page-bg{ background-image:url('img/bg/paintings-2x.webp'); }
  body.bg-cat-replica   .page-bg{ background-image:url('img/bg/replica-2x.webp'); }
}

/* Floating “spores” – super subtle */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.06), transparent 40%),
    radial-gradient(2px 2px at 60% 70%, rgba(255,255,255,.05), transparent 40%),
    radial-gradient(1.5px 1.5px at 80% 20%, rgba(255,255,255,.04), transparent 40%),
    radial-gradient(1.5px 1.5px at 35% 80%, rgba(255,255,255,.04), transparent 40%);
  mix-blend-mode: soft-light;
  opacity:.5;
  z-index:0;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, .btn:focus-visible, .input:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
  border-radius: 8px;
}

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

/* Banner logo masthead — full-bleed, edge to edge. Scrolls away; the slim
   nav below it stays stuck. */
.masthead{ width:100%; }
.masthead-title{ margin:0; line-height:0; }
.masthead picture{ display:block; }
.masthead-logo{
  display:block; width:100%; height:auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.55));
}

header{
  border-bottom:1px solid var(--border);
  background:rgba(11,12,16,.6);
  backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 5;
}
.header-inner{ display:flex; align-items:center; gap:16px; justify-content:space-between; padding:14px 0; position:relative; z-index:1; }
.badge{
  font-size:.72rem; padding:.15rem .45rem; border:1px solid #2f3a25;
  border-radius:999px; color:var(--muted); background: rgba(20,24,17,.5); display:inline-block;
  margin-top:4px;
}
.nav a{ opacity:.9; margin-left:14px; }
.nav a:hover{ opacity:1; text-decoration:underline; }

main{ padding:18px 0; }
footer{ border-top:1px solid var(--border); color:var(--muted); margin-top:28px; padding:16px 0; }

/* Grid of product cards */
.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-top:18px;
}
.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.card::before{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:24px;
  background: radial-gradient(ellipse at center, rgba(127,176,105,.4), rgba(217,74,74,.2) 50%, transparent 75%);
  opacity:0;
  transition: opacity .35s ease;
  z-index:-1;
  filter: blur(22px);
}
.card:hover::before{
  opacity:1;
}
.card:hover{
  transform: translateY(-8px) scale(1.03);
  border-color:#5a6e48;
  box-shadow:
    0 18px 44px rgba(9, 12, 10, .55),
    0 0 30px rgba(127,176,105,.25),
    0 0 60px rgba(127,176,105,.12),
    0 0 0 1px rgba(127,176,105,.2) inset;
}
.card-img{ display:block; width:100%; height:180px; object-fit:cover; background:#0f1115; }
.card-body{ padding:12px 14px; text-align:center; }
.card-title{ font-weight:600; margin:0 0 6px 0; }
.card-price{ color: var(--accent-2); font-weight:700; }

/* Buttons & inputs */
.btn{
  display:inline-block; border:1px solid var(--border); background:#1a1d24; color:var(--text);
  padding:.55rem .9rem; border-radius:10px; text-decoration:none; cursor:pointer; font-weight:600;
  transition: filter .12s ease, border-color .12s ease, transform .04s ease;
}
.btn:hover{ border-color:#2e3139; }
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background:linear-gradient(135deg, var(--accent), #7c2a2a);
  border-color:#7c2a2a;
}
.btn-primary:hover{ filter:brightness(1.05); }
.btn-danger{ border-color:#3a1d1d; background:#201416; color:#ffb4b4; }
.input{
  background:#111318; border:1px solid var(--border); color:var(--text);
  padding:.45rem .6rem; border-radius:8px;
}

/* Tables (cart) */
.table{ width:100%; border-collapse:collapse; margin-top:10px; }
.table th,.table td{ border-bottom:1px solid var(--border); padding:10px 8px; text-align:left; vertical-align: top; }
.table th{ color:var(--muted); font-weight:600; }
.total{ font-size:1.1rem; margin-top:10px; }

/* Category filters */
.category-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.cat-btn{
  display:inline-block; padding:.4rem .85rem; border:1px solid var(--border);
  border-radius:999px; font-size:.85rem; font-weight:600; color:var(--muted);
  background:rgba(17,21,15,.5); transition: border-color .12s, color .12s, background .12s;
}
.cat-btn:hover{ border-color:#3a4630; color:var(--text); text-decoration:none; }
.cat-btn.active{
  background:linear-gradient(135deg, var(--accent), #7c2a2a);
  border-color:#7c2a2a; color:#fff;
}

/* Home — Hero */
.hero{
  text-align:center;
  padding:60px 20px 50px;
  position:relative;
  overflow:hidden;
}
.hero-glow{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:600px; height:400px;
  background: radial-gradient(ellipse, rgba(127,176,105,.18) 0%, rgba(217,74,74,.1) 40%, transparent 70%);
  filter:blur(60px);
  pointer-events:none;
}
.hero-title{
  font-size:2.6rem;
  font-weight:800;
  line-height:1.15;
  margin:0 0 16px 0;
  background: linear-gradient(135deg, var(--text) 0%, #fff 40%, var(--accent-2) 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  position:relative;
}
.hero-sub{
  color:var(--muted);
  font-size:1.1rem;
  max-width:500px;
  margin:0 auto 28px;
  line-height:1.5;
  position:relative;
}
.btn-lg{ padding:.75rem 1.6rem; font-size:1rem; border-radius:12px; position:relative; }

/* Home — Sections */
.home-section{ margin-top:50px; }
.section-title{
  font-size:1.3rem;
  font-weight:700;
  margin:0 0 18px 0;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.section-cta{ text-align:center; margin-top:22px; }

/* Home — Category Grid */
.cat-grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.cat-card{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  position:relative;
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:20px;
  background: radial-gradient(ellipse at center, rgba(127,176,105,.3), rgba(217,74,74,.15) 50%, transparent 75%);
  opacity:0;
  transition: opacity .35s ease;
  z-index:0;
  filter:blur(18px);
}
.cat-card:hover::before{ opacity:1; }
.cat-card:hover{
  transform:translateY(-4px);
  border-color:#5a6e48;
  box-shadow: 0 12px 30px rgba(9,12,10,.5), 0 0 24px rgba(127,176,105,.18);
  text-decoration:none;
}
.cat-card-name{
  font-size:1.1rem;
  font-weight:700;
  color:var(--text);
  position:relative;
  z-index:1;
}

/* Home — About */
.about-section{
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  margin-bottom:20px;
}
.about-inner{ padding:30px; }
.about-section .section-title{ border-bottom:none; padding-bottom:0; margin-bottom:12px; }
.about-text{
  color:var(--muted);
  line-height:1.7;
  max-width:600px;
  font-size:.95rem;
}

/* Home — Merch */
.merch-section{
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
}
.merch-link{
  display:flex; align-items:center; gap:24px;
  padding:24px 30px; color:inherit;
}
.merch-link:hover{ text-decoration:none; }
.merch-link:hover .section-title{ color:var(--accent-2); }
.merch-icon{ flex:none; width:120px; height:120px; transition:transform .2s; }
.merch-link:hover .merch-icon{ transform:rotate(-6deg) scale(1.05); }
.merch-section .section-title{ border-bottom:none; padding-bottom:0; margin-bottom:8px; }
@media (max-width:560px){
  .merch-link{ flex-direction:column; text-align:center; padding:22px 16px; }
}

/* Product image carousel */
.carousel{
  position:relative;
  margin:0 0 18px;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:#0f1115;
}
.carousel-track{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 3;
  background:#0f1115;
}
.carousel-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:0;
  opacity:0;
  transition: opacity .25s ease;
  pointer-events:none;
}
.carousel-slide.active{ opacity:1; pointer-events:auto; }
.carousel-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(11,12,16,.55);
  color:var(--text);
  border:1px solid var(--border);
  width:38px; height:38px;
  border-radius:50%;
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .15s, border-color .15s;
}
.carousel-arrow:hover{ background:rgba(11,12,16,.85); border-color:#5a6e48; }
.carousel-prev{ left:10px; }
.carousel-next{ right:10px; }
.carousel-dots{
  position:absolute;
  bottom:10px; left:0; right:0;
  display:flex; justify-content:center; gap:8px;
  z-index:1;
}
.carousel-dot{
  width:10px; height:10px;
  border-radius:50%;
  border:1px solid rgba(234,230,217,.6);
  background:rgba(11,12,16,.55);
  padding:0;
  cursor:pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.carousel-dot:hover{ transform:scale(1.15); }
.carousel-dot.active{
  background:var(--accent-2);
  border-color:var(--accent-2);
}

/* Flash messages */
.messages{ display:grid; gap:8px; margin-bottom:16px; }
.message{
  padding:.7rem 1rem; border:1px solid var(--border); border-radius:10px;
  background:rgba(17,21,15,.88); color:var(--text);
}
.message-success{ border-color:#3f5a32; }
.message-error, .message-warning{ border-color:#5a2a2a; color:#ffb4b4; }

/* Forms (reviews + account pages) */
.form-field{ margin:0 0 16px; padding:0; border:0; }
.form-field > label, .form-field > legend{
  display:block; margin-bottom:6px; color:var(--muted); font-weight:600; font-size:.92rem; padding:0;
}
.form-field .input{ width:100%; font:inherit; }
.form-field textarea.input{ resize:vertical; }
.help-text, .helptext{ display:block; margin-top:4px; color:var(--muted); font-size:.82rem; }
.errorlist{ list-style:none; margin:6px 0 0; padding:0; color:#ffb4b4; font-size:.88rem; }

/* Product custom options */
.product-option{ max-width:360px; }
.item-options{ font-size:.85rem; margin-top:2px; }

/* Reviews */
.hero-compact{ padding:36px 20px 20px; }
.stars{ color:#d9b45a; letter-spacing:2px; }
.rating-choices{ display:flex; flex-wrap:wrap; gap:8px; }
.rating-option{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:.35rem .7rem; border:1px solid var(--border); border-radius:999px;
  background:rgba(17,21,15,.6);
}
.rating-option:has(input:checked){ border-color:#d9b45a; }
.review-list{ display:grid; gap:14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.review-card{
  border:1px solid var(--border); border-radius:14px; background:var(--card);
  padding:18px 20px; display:flex; flex-direction:column; gap:6px;
}
.review-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.review-name{ font-weight:700; }
.review-product{ color:var(--muted); font-size:.88rem; }
.review-product a{ text-decoration:underline; }
.review-body{ margin:6px 0; line-height:1.6; }
.review-date{ color:var(--muted); font-size:.8rem; margin-top:auto; }

/* Account pages (allauth renders plain form.as_p markup, so style by element) */
.auth-page main .container{
  max-width:480px; margin-top:24px;
  background:rgba(17,21,15,.9); border:1px solid var(--border); border-radius:14px;
}
.auth-page main h1{ font-size:1.5rem; margin:0 0 12px; }
.auth-page main h2{ font-size:1.05rem; color:var(--muted); margin:18px 0 10px; }
.auth-page main p{ line-height:1.6; }
.auth-page main a:not(.btn){ text-decoration:underline; }
.auth-page main form label{ display:block; margin-bottom:6px; color:var(--muted); font-weight:600; font-size:.92rem; }
.auth-page main form p:has(> input[type="checkbox"]) label{ display:inline; margin-right:8px; }
.auth-page main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.auth-page main select, .auth-page main textarea{
  width:100%; font:inherit; background:#111318; border:1px solid var(--border); color:var(--text);
  padding:.55rem .7rem; border-radius:8px;
}
.auth-page main button{
  font:inherit; font-weight:600; color:#fff; cursor:pointer; margin-top:6px;
  padding:.6rem 1.1rem; border-radius:10px; border:1px solid #7c2a2a;
  background:linear-gradient(135deg, var(--accent), #7c2a2a);
}
.auth-page main button:hover{ filter:brightness(1.05); }
.auth-page main ul:has(a[title]){ list-style:none; padding:0; margin:0; }
.auth-page main a[title]{
  display:block; text-align:center; text-decoration:none; font-weight:600;
  padding:.6rem 1rem; border:1px solid var(--border); border-radius:10px; background:#1a1d24;
}
.auth-page main hr{ border:0; border-top:1px solid var(--border); margin:22px 0 4px; }

/* Privacy policy */
.policy{ max-width:820px; margin:10px auto 20px; background:rgba(17,21,15,.92); }
.policy h3{ font-size:1.05rem; margin:26px 0 8px; }
.policy p, .policy li{ line-height:1.7; }
.policy ul{ padding-left:20px; }
.policy li{ margin-bottom:8px; }
.policy a{ text-decoration:underline; }
footer a{ text-decoration:underline; }

/* Utilities */
img{ max-width:100%; height:auto; border-radius:10px; }
.center{ display:flex; align-items:center; justify-content:center; }
.muted{ color: var(--muted); }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Horizontally scrollable wrapper for tables on narrow screens */
.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ===== Mobile (≤700px) ===== */
@media (max-width: 700px){
  .container{ padding:16px; }


  .header-inner{ gap:10px; padding:10px 0; }
  .badge{ font-size:.65rem; }
  .nav{ display:flex; flex-wrap:wrap; justify-content:flex-end; row-gap:4px; }
  .nav a{ margin-left:10px; font-size:.92rem; }

  main{ padding:12px 0; }

  .hero{ padding:36px 8px 28px; }
  .hero-title{ font-size:1.85rem; }
  .hero-sub{ font-size:1rem; margin-bottom:22px; }
  .btn-lg{ padding:.65rem 1.3rem; font-size:.95rem; }

  .home-section{ margin-top:32px; }
  .section-title{ font-size:1.15rem; margin-bottom:14px; }

  .grid{ gap:12px; margin-top:12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .card-img{ height:150px; }
  .card-body{ padding:10px 12px; }

  .cat-grid{ gap:10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .cat-card{ padding:20px 12px; }
  .cat-card-name{ font-size:1rem; }

  .table{ font-size:.92rem; }
  .table th, .table td{ padding:8px 6px; }

  .about-inner{ padding:20px; }
  .about-text{ font-size:.9rem; }
}


.env-banner{
  position:relative; z-index:10;
  padding:8px 16px; text-align:center;
  background:#f5c518; color:#111; font-weight:700;
}
.env-banner a{ color:#111; text-decoration:underline; }