/*
Theme Name: Books by Isabella
Theme URI: https://trulifebooks.com/
Author: TruLife Books LLC
Author URI: https://trulifebooks.com/
Description: A refined, responsive bookstore theme designed for Books by Isabella and the Ecwid Ecommerce Shopping Cart plugin.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: books-by-isabella
Tags: e-commerce, bookstore, custom-logo, custom-menu, featured-images, full-width-template, responsive-layout
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
  --bbi-navy: #08295b;
  --bbi-navy-dark: #041a3a;
  --bbi-mauve: #8d477e;
  --bbi-mauve-dark: #6f3563;
  --bbi-lilac: #f4edf3;
  --bbi-cream: #fbfaf7;
  --bbi-ink: #202331;
  --bbi-muted: #6a6f7a;
  --bbi-border: #e5dce4;
  --bbi-white: #ffffff;
  --bbi-shadow: 0 18px 55px rgba(8, 41, 91, .12);
  --bbi-radius: 18px;
  --bbi-container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--bbi-ink);
  background: var(--bbi-white);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.7;
}
a { color: var(--bbi-navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bbi-mauve); }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
.bbi-container { width: min(calc(100% - 40px), var(--bbi-container)); margin-inline: auto; }
.screen-reader-text { position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* Announcement */
.bbi-announcement { background: var(--bbi-navy); color: #fff; text-align:center; padding: 8px 20px; font-family: Arial, sans-serif; font-size: .82rem; letter-spacing:.08em; text-transform:uppercase; }
.bbi-announcement a { color:#fff; font-weight:700; }

/* Header */
.site-header { position: sticky; top:0; z-index:1000; background:rgba(255,255,255,.96); border-bottom:1px solid rgba(141,71,126,.15); backdrop-filter: blur(12px); }
.bbi-header-inner { min-height: 92px; display:grid; grid-template-columns: minmax(210px, 390px) 1fr auto; align-items:center; gap:28px; }
.site-branding img { display:block; max-height:72px; width:auto; }
.site-title { margin:0; font-size:1.6rem; }
.site-title a { text-decoration:none; }
.site-description { margin:2px 0 0; color:var(--bbi-muted); font-size:.85rem; }
.main-navigation ul { list-style:none; display:flex; justify-content:center; gap:26px; padding:0; margin:0; }
.main-navigation a { color:var(--bbi-navy); text-decoration:none; font-family:Arial,sans-serif; font-weight:700; font-size:.83rem; letter-spacing:.08em; text-transform:uppercase; }
.main-navigation a:hover, .main-navigation .current-menu-item > a { color:var(--bbi-mauve); }
.bbi-header-actions { display:flex; align-items:center; gap:12px; }
.bbi-shop-link { display:inline-flex; align-items:center; gap:8px; padding:11px 17px; background:var(--bbi-mauve); color:#fff; border-radius:999px; text-decoration:none; font-family:Arial,sans-serif; font-size:.82rem; font-weight:700; }
.bbi-shop-link:hover { color:#fff; background:var(--bbi-navy); }
.menu-toggle { display:none; border:0; background:transparent; color:var(--bbi-navy); font-size:1.5rem; }

/* Hero */
.bbi-hero { position:relative; overflow:hidden; background:linear-gradient(120deg, var(--bbi-cream) 0%, #fff 56%, var(--bbi-lilac) 100%); border-bottom:1px solid var(--bbi-border); }
.bbi-hero::before { content:''; position:absolute; width:420px; height:420px; border:1px solid rgba(141,71,126,.18); border-radius:50%; right:-120px; top:-160px; box-shadow:0 0 0 50px rgba(141,71,126,.035),0 0 0 100px rgba(8,41,91,.025); }
.bbi-hero-grid { position:relative; min-height:620px; display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center; padding:72px 0; }
.bbi-eyebrow { display:flex; align-items:center; gap:12px; color:var(--bbi-mauve); font-family:Arial,sans-serif; font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.bbi-eyebrow::before { content:''; width:38px; height:2px; background:var(--bbi-mauve); }
.bbi-hero h1 { color:var(--bbi-navy); font-size:clamp(3rem,6vw,5.7rem); line-height:.98; letter-spacing:-.045em; margin:18px 0 24px; font-weight:500; }
.bbi-hero h1 em { color:var(--bbi-mauve); font-weight:400; }
.bbi-hero-copy > p { max-width:630px; font-size:1.18rem; color:#4f5360; }
.bbi-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.bbi-button { display:inline-flex; justify-content:center; align-items:center; min-height:50px; padding:12px 24px; border-radius:999px; text-decoration:none; border:2px solid var(--bbi-navy); background:var(--bbi-navy); color:#fff; font-family:Arial,sans-serif; font-size:.86rem; font-weight:800; letter-spacing:.04em; }
.bbi-button:hover { background:var(--bbi-mauve); border-color:var(--bbi-mauve); color:#fff; transform:translateY(-1px); }
.bbi-button--ghost { background:transparent; color:var(--bbi-navy); }
.bbi-button--ghost:hover { color:#fff; }
.bbi-hero-art { position:relative; min-height:440px; }
.bbi-book-stack { position:absolute; inset:0; display:flex; justify-content:center; align-items:center; }
.bbi-book { position:absolute; width:245px; aspect-ratio:2/3; border-radius:4px 12px 12px 4px; box-shadow:var(--bbi-shadow); overflow:hidden; background:linear-gradient(135deg,var(--bbi-navy),#194b87); border-left:10px solid rgba(255,255,255,.16); }
.bbi-book::after { content:''; position:absolute; inset:15px; border:1px solid rgba(255,255,255,.45); }
.bbi-book span { position:absolute; inset:0; display:grid; place-items:center; padding:45px; text-align:center; color:#fff; font-size:1.6rem; line-height:1.2; z-index:1; }
.bbi-book--one { transform:translate(-90px,18px) rotate(-9deg); background:linear-gradient(135deg,#763c69,var(--bbi-mauve)); }
.bbi-book--two { transform:translate(75px,2px) rotate(8deg); background:linear-gradient(135deg,#0a2856,#1c4f8c); }
.bbi-book--three { z-index:3; transform:translateY(-18px); background:linear-gradient(145deg,#faf6f9 0%,#e8d8e5 100%); border-left-color:var(--bbi-mauve); }
.bbi-book--three span { color:var(--bbi-navy); }

/* Sections */
.bbi-section { padding:88px 0; }
.bbi-section--soft { background:var(--bbi-cream); }
.bbi-section--lilac { background:var(--bbi-lilac); }
.bbi-section-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:38px; }
.bbi-section-heading h2 { margin:0; color:var(--bbi-navy); font-size:clamp(2rem,4vw,3.4rem); line-height:1.05; font-weight:500; }
.bbi-section-heading p { max-width:580px; margin:0; color:var(--bbi-muted); }
.bbi-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.bbi-card { background:#fff; border:1px solid var(--bbi-border); border-radius:var(--bbi-radius); padding:30px; box-shadow:0 12px 35px rgba(8,41,91,.06); }
.bbi-card-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:var(--bbi-lilac); color:var(--bbi-mauve); font-size:1.5rem; }
.bbi-card h3 { color:var(--bbi-navy); font-size:1.45rem; margin:18px 0 8px; }
.bbi-card p { margin:0; color:var(--bbi-muted); }
.bbi-category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.bbi-category { min-height:190px; display:flex; flex-direction:column; justify-content:end; padding:24px; border-radius:var(--bbi-radius); color:#fff; text-decoration:none; background:linear-gradient(145deg,var(--bbi-navy),#16487f); position:relative; overflow:hidden; }
.bbi-category:nth-child(even) { background:linear-gradient(145deg,var(--bbi-mauve-dark),var(--bbi-mauve)); }
.bbi-category::before { content:'✦'; position:absolute; right:18px; top:12px; opacity:.18; font-size:5rem; }
.bbi-category strong { font-size:1.35rem; }
.bbi-category span { font-family:Arial,sans-serif; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; opacity:.8; }
.bbi-category:hover { color:#fff; transform:translateY(-4px); box-shadow:var(--bbi-shadow); }
.bbi-quote { max-width:850px; margin:auto; text-align:center; }
.bbi-quote blockquote { margin:0; color:var(--bbi-navy); font-size:clamp(1.7rem,3.6vw,3rem); line-height:1.3; }
.bbi-quote cite { display:block; margin-top:24px; color:var(--bbi-mauve); font-family:Arial,sans-serif; font-weight:700; font-style:normal; }

/* Ecwid */
.bbi-store-shell { padding:48px 0 86px; }
.bbi-store-intro { text-align:center; max-width:760px; margin:0 auto 38px; }
.bbi-store-intro h1 { color:var(--bbi-navy); font-size:clamp(2.6rem,5vw,4.5rem); margin:.2em 0; }
.ec-size .ec-store .form-control__button, .ec-size .ec-store .grid-product__button, .ec-size .ec-store .details-product-purchase__add-buttons .form-control__button { background:var(--bbi-mauve)!important; border-radius:999px!important; }
.ec-size .ec-store .form-control__button:hover { background:var(--bbi-navy)!important; }
.ec-size .ec-store .grid-product__title-inner, .ec-size .ec-store .product-details__product-title { color:var(--bbi-navy)!important; font-family:Georgia,'Times New Roman',serif!important; }
.ec-size .ec-store .grid-product__price-amount, .ec-size .ec-store .product-details__product-price { color:var(--bbi-mauve)!important; }
.ec-size .ec-store .grid-product__wrap-inner { border-radius:14px; overflow:hidden; }
.ec-size .ec-store .ec-cart-step__icon, .ec-size .ec-store .ec-header-h6 { color:var(--bbi-navy)!important; }

/* Content */
.site-main { min-height:55vh; }
.entry-header, .entry-content, .entry-footer { width:min(calc(100% - 40px), 900px); margin-inline:auto; }
.entry-header { padding-top:64px; }
.entry-title { color:var(--bbi-navy); font-size:clamp(2.3rem,5vw,4.2rem); line-height:1.1; margin:.2em 0 .5em; }
.entry-content { padding-bottom:70px; }
.entry-content h2, .entry-content h3 { color:var(--bbi-navy); }
.entry-content blockquote { border-left:4px solid var(--bbi-mauve); padding-left:24px; color:var(--bbi-navy); font-size:1.3rem; }
.wp-block-button__link { background:var(--bbi-mauve); border-radius:999px; }

/* Footer */
.site-footer { background:var(--bbi-navy-dark); color:rgba(255,255,255,.78); padding:64px 0 24px; }
.bbi-footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:52px; }
.site-footer h3, .site-footer h4 { color:#fff; margin-top:0; }
.site-footer a { color:#fff; }
.bbi-footer-logo { width:min(100%,330px); filter:brightness(0) invert(1); opacity:.95; }
.bbi-footer-menu { list-style:none; margin:0; padding:0; }
.bbi-footer-menu li { margin:7px 0; }
.bbi-footer-bottom { margin-top:48px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); display:flex; justify-content:space-between; gap:20px; font-family:Arial,sans-serif; font-size:.78rem; }

@media (max-width: 980px) {
  .bbi-header-inner { grid-template-columns:1fr auto; }
  .main-navigation { display:none; grid-column:1/-1; padding-bottom:18px; }
  .main-navigation.is-open { display:block; }
  .main-navigation ul { flex-direction:column; gap:12px; }
  .menu-toggle { display:block; }
  .bbi-header-actions .bbi-shop-link { display:none; }
  .bbi-hero-grid { grid-template-columns:1fr; min-height:auto; text-align:center; }
  .bbi-eyebrow, .bbi-actions { justify-content:center; }
  .bbi-hero-copy > p { margin-inline:auto; }
  .bbi-hero-art { min-height:390px; }
  .bbi-grid-3 { grid-template-columns:1fr; }
  .bbi-category-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px) {
  .bbi-container { width:min(calc(100% - 28px), var(--bbi-container)); }
  .bbi-header-inner { min-height:76px; gap:12px; }
  .site-branding img { max-height:54px; }
  .bbi-hero-grid { padding:56px 0; gap:22px; }
  .bbi-hero h1 { font-size:3.15rem; }
  .bbi-hero-art { min-height:315px; transform:scale(.78); margin:-30px -40px; }
  .bbi-section { padding:64px 0; }
  .bbi-section-heading { display:block; }
  .bbi-section-heading p { margin-top:12px; }
  .bbi-category-grid { grid-template-columns:1fr; }
  .bbi-footer-grid { grid-template-columns:1fr; gap:28px; }
  .bbi-footer-bottom { display:block; }
}