/* ============================================================
   Book Shop Pakistan — naiin-inspired storefront
   ============================================================ */

:root{
	--bg: #f4f7f2;
	--surface: #ffffff;
	--accent: #15703a;        /* primary green */
	--accent-h: #0f5a2e;      /* darker green (hover) */
	--accent-dark: #0e3d22;   /* footer green */
	--soft: #e8f4ec;          /* light green tint */
	--soft-2: #d9eddf;
	--gold: #c79a2e;
	--sale: #e53935;
	--cart: #2596d6;          /* logo sky-blue — buttons / accents */
	--cart-h: #1c7cb8;        /* darker logo-blue (hover) */
	--cart-dark: #0f3a63;     /* deep logo-blue — footer / large surfaces */
	--muted: #6b7c70;
	--border: #d7e6db;
	--text: #1a2a1f;
	--radius: 10px;
	--shadow: 0 1px 3px rgba(14,61,34,.10);
	--font-en: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-ur: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html, body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:var(--font-en); -webkit-font-smoothing:antialiased; }

body.is-rtl{ font-family: var(--font-ur), var(--font-en); }
body.is-rtl{ line-height: 1.9; }
body.is-ltr{ line-height: 1.5; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }

.container{ max-width:1280px; margin:0 auto; padding:0 16px; }

/* ---- Header --------------------------------------------------- */
.site-header{ background:#fff; color:var(--text); box-shadow:var(--shadow); position:sticky; top:0; z-index:50; border-bottom:1px solid var(--border); }
.site-header__row{ display:flex; align-items:center; gap:18px; padding:10px 16px; }

.site-header__logo{ display:inline-flex; align-items:center; gap:10px; color:var(--accent); }
.site-header__logo-mark{
	width:46px; height:46px; border-radius:50%; background:var(--soft); color:var(--accent);
	display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
	border:2px solid var(--accent);
}
.site-header__logo-img{ height:52px; width:auto; flex:0 0 auto; object-fit:contain; display:block; }
/* Keep the logo readable on the dark-theme header (it has dark artwork on a transparent bg). */
html[data-theme="dark"] .site-header__logo-img{ background:#fff; border-radius:8px; padding:4px 7px; box-shadow:0 0 0 1px rgba(255,255,255,.15); }
.site-header__logo-text{ display:flex; flex-direction:column; gap:5px; line-height:1.45; }
.site-header__logo-name{ font-weight:700; font-size:18px; line-height:1.6; color:var(--accent); }
.site-header__logo-tag{ font-size:11px; line-height:1.5; color:var(--muted); font-weight:500; }
body.is-rtl .site-header__logo-text{ gap:14px; }

.site-header__search{ flex:1; max-width:560px; display:flex; background:#fff; border:1.5px solid var(--accent); border-radius:8px; overflow:hidden; }
.site-header__search input{ flex:1; border:0; padding:10px 14px; font-size:14px; outline:none; font-family:inherit; background:transparent; }
.site-header__search button{ background:var(--cart); border:0; padding:0 20px; color:#fff; cursor:pointer; font-weight:600; font-size:14px; font-family:inherit; white-space:nowrap; }
.site-header__search button:hover{ background:var(--cart-h); }

.site-header__actions{ display:flex; align-items:center; gap:14px; }
.site-header__act{ display:inline-flex; flex-direction:column; align-items:center; gap:2px; color:var(--text); font-size:11px; font-weight:500; }
.site-header__act:hover{ color:var(--accent); }
.site-header__act-ic{ font-size:19px; line-height:1; position:relative; }
.site-header__cart-count{
	position:absolute; top:-7px; inset-inline-end:-10px;
	background:var(--sale); color:#fff; font-size:10px; font-weight:700;
	min-width:17px; height:17px; border-radius:9px; padding:0 4px;
	display:inline-flex; align-items:center; justify-content:center;
}
.site-header__wa{
	display:inline-flex; align-items:center; gap:6px; background:#25D366; color:#fff;
	padding:8px 14px; border-radius:8px; font-weight:600; font-size:13px; white-space:nowrap;
}
.site-header__wa:hover{ background:#1eb457; }

@media (max-width:900px){
	.site-header__logo-tag{ display:none; }
	.site-header__act-lbl, .site-header__wa-lbl{ display:none; }
	.site-header__wa{ padding:8px 12px; }
}
@media (max-width:640px){
	.site-header__row{ flex-wrap:wrap; gap:10px; }
	.site-header__search{ order:3; flex-basis:100%; max-width:none; }
}

/* ---- Main ----------------------------------------------------- */
.site-main{ padding:18px 16px 40px; }

/* ---- Hero ----------------------------------------------------- */
.hero{ margin:0 0 18px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#fff; }
.hero img{ width:100%; max-height:380px; object-fit:cover; display:block; }

/* ---- Hero carousel ------------------------------------------- */
.hero--carousel{ position:relative; }
.hero__track{ display:flex; direction:ltr; transition:transform .5s ease; }
.hero__slide{ flex:0 0 100%; min-width:100%; }
.hero__slide a{ display:block; }
.hero__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2;
	width:40px; height:40px; border:0; border-radius:50%; cursor:pointer;
	background:rgba(0,0,0,.35); color:#fff; font-size:22px; line-height:38px; text-align:center; }
.hero__nav:hover{ background:rgba(0,0,0,.55); }
.hero__nav--prev{ left:12px; }
.hero__nav--next{ right:12px; }
.hero__dots{ position:absolute; left:0; right:0; bottom:12px; z-index:2;
	display:flex; gap:8px; justify-content:center; }
.hero__dot{ width:10px; height:10px; padding:0; border:0; border-radius:50%; cursor:pointer;
	background:rgba(255,255,255,.55); }
.hero__dot.is-active{ background:#fff; }

/* ---- Section title helper ------------------------------------ */
.section-title{ color:var(--accent); font-size:20px; font-weight:700; margin:0 0 14px; }
.section-title--center{ text-align:center; position:relative; }
.section-title--center::after{
	content:""; display:block; width:60px; height:3px; background:var(--accent);
	border-radius:2px; margin:8px auto 0;
}

/* ---- Choose department --------------------------------------- */
.depts{
	position:relative; overflow:hidden;
	background:linear-gradient(180deg,#e8f4ec,#f4f7f2);
	border:1px solid var(--border); border-radius:var(--radius);
	padding:20px 18px 24px; margin:14px 0;
}
.depts > *{ position:relative; z-index:1; }
.depts__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
@media (max-width:900px){ .depts__grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .depts__grid{ grid-template-columns:repeat(2,1fr); } }

/* Department card — coloured theme + subtle full-card institute-logo watermark. */
.dept-card{
	--dc:#15703a; --dc-soft:rgba(21,112,58,.10);
	position:relative; overflow:hidden;
	background:#fff; border:1px solid var(--border); border-top:3px solid var(--dc);
	border-radius:14px; padding:20px 12px 18px; text-align:center;
	display:flex; flex-direction:column; align-items:center; gap:12px;
	box-shadow:0 2px 8px rgba(14,61,34,.06);
	transition:transform .16s, box-shadow .16s, border-color .16s;
}
.dept-card:hover{ transform:translateY(-4px); box-shadow:0 12px 24px rgba(14,61,34,.16); border-color:var(--dc); }
/* Logo watermark covering the whole card, kept faint so the title stays readable. */
.dept-card__wm{
	position:absolute; inset:0; z-index:0; pointer-events:none;
	background:url("../images/logo.png") no-repeat center 58%;
	background-size:86% auto; opacity:.08;
}
.dept-card > :not(.dept-card__wm){ position:relative; z-index:1; }
.dept-card__icon{
	width:58px; height:58px; border-radius:50%;
	background:var(--dc-soft); color:var(--dc);
	display:inline-flex; align-items:center; justify-content:center; font-size:27px;
	box-shadow:inset 0 0 0 2px rgba(255,255,255,.65);
}
.dept-card__label{
	font-size:13px; font-weight:700; color:var(--text); line-height:1.5;
	min-height:2.7em; display:flex; align-items:center; justify-content:center;
}
.dept-card__go{
	width:30px; height:30px; border-radius:50%; background:var(--dc); color:#fff;
	display:inline-flex; align-items:center; justify-content:center;
	box-shadow:0 3px 8px var(--dc-soft); transition:transform .16s;
}
.dept-card:hover .dept-card__go{ transform:translateX(3px); }
body.is-rtl .dept-card__go svg{ transform:scaleX(-1); }
body.is-rtl .dept-card:hover .dept-card__go{ transform:translateX(-3px); }

/* Per-card colour themes (cycle of 6, matches the sample layout). */
.dept-card--c0{ --dc:#1a7d43; --dc-soft:rgba(26,125,67,.12); }   /* green  */
.dept-card--c1{ --dc:#0f8a8a; --dc-soft:rgba(15,138,138,.12); }  /* teal   */
.dept-card--c2{ --dc:#c1871a; --dc-soft:rgba(193,135,26,.15); }  /* gold   */
.dept-card--c3{ --dc:#2b6cb0; --dc-soft:rgba(43,108,176,.12); }  /* blue   */
.dept-card--c4{ --dc:#c2497a; --dc-soft:rgba(194,73,122,.12); }  /* pink   */
.dept-card--c5{ --dc:#7a4fb0; --dc-soft:rgba(122,79,176,.12); }  /* purple */

html[data-theme="dark"] .depts{ background:linear-gradient(180deg,#17211b,#0f1512); }
html[data-theme="dark"] .dept-card{ background:var(--surface); }
html[data-theme="dark"] .dept-card__wm{ opacity:.10; }
html[data-theme="dark"] .dept-card__icon{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.10); }

/* ---- Three-column feature row -------------------------------- */
.feature-row{ display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:14px; margin:14px 0; }
@media (max-width:900px){ .feature-row{ grid-template-columns:1fr; } }
.panel{
	background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
	padding:16px; box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.panel__title{
	margin:0 0 12px; color:var(--accent); font-size:16px; font-weight:700;
	padding-bottom:8px; border-bottom:2px solid var(--soft-2);
}
.panel__btn{
	margin-top:auto; align-self:flex-start; background:var(--cart); color:#fff;
	padding:8px 18px; border-radius:6px; font-size:13px; font-weight:600;
}
.panel__btn:hover{ background:var(--cart-h); }
.panel__btn--ghost{ background:#fff; color:var(--cart); border:1px solid var(--cart); }
.panel__btn--ghost:hover{ background:var(--soft); }

.featured-list{ list-style:none; margin:0 0 14px; padding:0; }
.featured-list li{ padding:7px 0; border-bottom:1px dashed var(--border); }
.featured-list li::before{ content:"📕"; margin-inline-end:8px; font-size:13px; }
.featured-list a{ font-size:13px; color:var(--text); }
.featured-list a:hover{ color:var(--accent); }

/* ---- Dealer list (homepage panel + dealers page) ------------- */
.dealer-list{ list-style:none; margin:0 0 14px; padding:0; }
.dealer-list__item{ padding:8px 0; border-bottom:1px dashed var(--border); display:flex; flex-direction:column; gap:2px; }
.dealer-list__item::before{ content:"🏬"; margin-inline-end:8px; font-size:13px; }
.dealer-list__name{ font-size:13px; font-weight:600; color:var(--text); }
.dealer-list__area{ font-size:12px; color:var(--muted); }
.dealer-list__phone{ font-size:12px; color:var(--accent); font-weight:600; direction:ltr; }
.dealer-list__phone:hover{ text-decoration:underline; }
.dealers-table{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-top:14px; }
.dealers-table th, .dealers-table td{ padding:10px 12px; border-bottom:1px solid var(--border); text-align:start; }
.dealers-table th{ background:var(--soft); color:var(--accent); font-size:13px; }
.dealers-table td{ font-size:14px; }
.dealers-table td a{ color:var(--accent); direction:ltr; unicode-bidi:embed; }

.other-products{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.other-products__item{
	background:var(--soft); border:1px solid var(--border); border-radius:10px;
	padding:14px 6px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;
	transition:background .15s;
}
.other-products__item:hover{ background:var(--soft-2); }
.other-products__ic{ font-size:26px; }
.other-products__lbl{ font-size:12px; font-weight:600; color:var(--text); }

.panel--services{ background:linear-gradient(180deg,#f1f9f3,#fff); }
.svc-list{ list-style:none; margin:0; padding:0; }
.svc-list li{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px dashed var(--border); font-size:13px; }
.svc-list li:last-child{ border-bottom:0; }
.svc-list__tick{
	flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--cart); color:#fff;
	display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
}

/* ---- Trust badges -------------------------------------------- */
.trust{
	display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:14px 0;
	background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
	padding:18px 16px; box-shadow:var(--shadow);
}
@media (max-width:900px){ .trust{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .trust{ grid-template-columns:1fr; } }
.trust__item{ display:flex; align-items:center; gap:10px; }
.trust__ic{
	flex:0 0 auto; width:44px; height:44px; border-radius:10px; background:var(--soft); color:var(--accent);
	display:inline-flex; align-items:center; justify-content:center; font-size:22px;
}
.trust__text{ display:flex; flex-direction:column; line-height:1.35; }
.trust__text strong{ font-size:13px; color:var(--text); }
.trust__text span{ font-size:11px; color:var(--muted); }

/* ---- Promo cards --------------------------------------------- */
.promos{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:14px 0; }
@media (max-width:900px){ .promos{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .promos{ grid-template-columns:1fr; } }
.promo{
	border-radius:var(--radius); padding:20px 18px; min-height:150px; color:#fff;
	display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow);
	transition:transform .15s, box-shadow .15s;
}
.promo:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.18); }
.promo__ic{ font-size:30px; }
.promo__title{ font-size:16px; font-weight:700; line-height:1.4; }
.promo__sub{ font-size:12px; opacity:.9; }
.promo__btn{
	margin-top:auto; align-self:flex-start; background:rgba(255,255,255,.22);
	border:1px solid rgba(255,255,255,.55); color:#fff; padding:6px 16px;
	border-radius:20px; font-size:13px; font-weight:600;
}
.promo--green{ background:linear-gradient(135deg,#15703a,#0f5a2e); }
.promo--gold{ background:linear-gradient(135deg,#c79a2e,#a67c1c); }
.promo--sale{ background:linear-gradient(135deg,#e53935,#b71c1c); }
.promo--app{ background:linear-gradient(135deg,#1f8a4c,#0e3d22); }

/* ---- Category section / slider ------------------------------- */
.category-section{
	background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
	padding:14px 14px 22px; margin:14px 0; box-shadow:var(--shadow);
}
.category-section__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.category-section__title{ margin:0; color:var(--accent); font-size:20px; font-weight:700; }
.category-section__see-all{ color:var(--accent); font-weight:600; font-size:14px; }
.category-section__see-all:hover{ text-decoration:underline; }

.slider{ position:relative; }
.slider__track{
	display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
	scroll-behavior:smooth; padding-bottom:8px;
	-webkit-overflow-scrolling:touch;
	justify-content:safe center;
}
.slider__track::-webkit-scrollbar{ height:6px; }
.slider__track::-webkit-scrollbar-thumb{ background:#cdd9e6; border-radius:3px; }
.slider__track > .card{
	flex:0 0 160px; max-width:160px; scroll-snap-align:start;
}
@media (min-width:600px){ .slider__track > .card{ flex-basis:170px; max-width:170px; } }
.slider__nav{
	position:absolute; top:40%; transform:translateY(-50%);
	width:36px; height:36px; border-radius:50%; background:#fff; color:var(--accent);
	border:1px solid var(--border); box-shadow:var(--shadow); font-size:22px; cursor:pointer;
	display:inline-flex; align-items:center; justify-content:center; z-index:2;
}
.slider__nav--prev{ inset-inline-start:-8px; }
.slider__nav--next{ inset-inline-end:-8px; }
.slider__nav:hover{ background:#f3f7fb; }

/* ---- Product card -------------------------------------------- */
.card{
	background:#fff; border:1px solid var(--border); border-radius:8px;
	display:flex; flex-direction:column; overflow:hidden; transition:box-shadow .15s, transform .15s;
}
.card:hover{ box-shadow:0 6px 16px rgba(13,42,68,.12); transform:translateY(-2px); }
.card__image{
	position:relative;
	display:block; background:#fafafa; height:200px;
	display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.card__badge{
	position:absolute; top:8px; inset-inline-start:8px; z-index:1;
	background:var(--sale); color:#fff; font-size:11px; font-weight:700;
	padding:2px 7px; border-radius:12px; line-height:1.4;
}
.card__image img{ max-height:100%; max-width:100%; width:auto; height:auto; }
.card__title{
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
	font-size:13px; font-weight:600; color:var(--text); padding:8px 10px 0; min-height:38px;
}
.card__title:hover{ color:var(--accent); }
.card__meta{ font-size:11px; color:var(--muted); padding:2px 10px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card__footer{
	margin-top:auto; display:flex; flex-direction:column; align-items:stretch; gap:8px;
	padding:8px 10px 10px;
}
.card__price{ font-weight:700; font-size:14px; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.card__price-sale{ color:var(--sale); }
.card__price-old{ color:var(--muted); font-weight:500; font-size:12px; text-decoration:line-through; }
.card__add{
	background:var(--cart); color:#fff; border:0; border-radius:8px; cursor:pointer;
	width:100%; min-height:36px; padding:0 12px; text-decoration:none;
	display:inline-flex; align-items:center; justify-content:center; gap:7px;
	font-size:13px; font-weight:600; line-height:1;
	transition:background .15s, box-shadow .15s;
}
.card__add svg{ flex:0 0 auto; }
.card__add-lbl{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card__add:hover{ background:var(--cart-h); box-shadow:0 3px 10px rgba(31,124,196,.28); }
.card__add.is-added{ background:#2e7d32; }
.card__add--options{ background:var(--gold); color:#3a2c05; }
.card__add--options:hover{ background:#c99f30; }

/* ---- Grid (shop / category) ---------------------------------- */
.grid{
	display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
}
@media (max-width:1100px){ .grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:760px){  .grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){  .grid{ grid-template-columns:repeat(2,1fr); } }

.loadmore-wrap{ text-align:center; margin:24px 0; }
.loadmore{
	background:var(--accent); color:#fff; border:0; border-radius:30px;
	padding:12px 36px; font-size:15px; cursor:pointer;
}
.loadmore:disabled{ opacity:.6; cursor:not-allowed; }
.loadmore:hover:not(:disabled){ background:var(--accent-h); }

/* ---- Page title / breadcrumb --------------------------------- */
.page-title{ font-size:22px; color:var(--accent); margin:8px 0 16px; }
.breadcrumb{ font-size:13px; color:var(--muted); margin:4px 0 8px; }
.breadcrumb a{ color:var(--accent); }
.breadcrumb a:hover{ text-decoration:underline; }

/* ---- Product page -------------------------------------------- */
.product{
	display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:32px;
	background:#fff; border:1px solid var(--border); border-radius:var(--radius);
	padding:24px; margin:8px 0; box-shadow:var(--shadow);
}
@media (max-width:820px){ .product{ grid-template-columns:1fr; gap:20px; } }
.product__gallery{ background:#fafafa; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:16px; min-height:320px; }
.product__gallery img{ max-height:420px; width:auto; }
.product__title{ font-size:22px; color:var(--text); margin:0 0 12px; }
.product__meta{ margin:0; }
.product__meta div{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed #eef2f7; gap:12px; }
.product__meta dt{ color:var(--muted); margin:0; }
.product__meta dd{ margin:0; text-align:end; }

.product__section{ margin-top:16px; }
.product__section h3{ margin:0 0 6px; color:var(--accent); font-size:15px; }
.product__section p{ margin:0; color:var(--text); font-size:14px; line-height:1.8; }

.product-samples{ margin:16px 0; }
.product-samples__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px; }
.product-samples__item{
	border:1px solid var(--border); border-radius:8px; overflow:hidden; background:#fafafa;
	display:flex; align-items:center; justify-content:center; aspect-ratio:3/4;
}
.product-samples__item:hover{ box-shadow:0 6px 16px rgba(14,61,34,.12); }
.product-samples__item img{ width:100%; height:100%; object-fit:cover; }

.product__buy{
	background:#f7fbff; border:1px solid var(--border); border-radius:var(--radius);
	padding:18px; align-self:start;
}
.product__price{ font-size:24px; font-weight:700; color:var(--accent); }
.product__qty{
	display:flex; align-items:center; border:1px solid var(--border); border-radius:6px;
	overflow:hidden; width:120px; margin:14px 0;
}
.product__qty button{ background:#fff; border:0; padding:8px 12px; font-size:18px; color:var(--accent); cursor:pointer; }
.product__qty input{ width:100%; border:0; text-align:center; padding:8px 0; font-size:16px; outline:none; }
.product__add{
	width:100%; background:var(--cart); color:#fff; border:0; border-radius:8px;
	padding:14px; font-size:16px; font-weight:600; cursor:pointer;
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.product__add:hover{ background:var(--cart-h); }
.product__add.is-added{ background:#2e7d32; }

/* ---- Product detail: availability / rating / stock / wishlist / share / tags ---- */
.product__info{ display:flex; flex-direction:column; }
.product__avail{ display:flex; align-items:center; gap:10px; margin:0 0 10px; font-size:14px; color:var(--muted); }
.avail-badge{ font-weight:700; font-size:13px; padding:4px 12px; border-radius:20px; }
.avail-badge--in{ background:#e6f4ea; color:#1b8a3d; }
.avail-badge--out{ background:#f0e3e3; color:#b23b3b; }

.product__title{ font-size:26px; font-weight:700; margin:0 0 8px; }
.product__byline{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.product__author{ color:var(--muted); font-size:15px; }
.product__author b{ color:var(--sale); font-weight:600; }
.product__rating{ display:inline-flex; align-items:center; gap:6px; }
.product__rating-count{ color:var(--muted); font-size:13px; }

.stars{ display:inline-flex; letter-spacing:1px; font-size:16px; line-height:1; }
.stars .star{ color:#d9dee3; }
.stars .star.is-on{ color:var(--gold); }

.product__price{ font-size:28px; font-weight:800; color:var(--text); margin:6px 0 4px; display:flex; align-items:baseline; gap:10px; }
.product__price-old{ font-size:16px; font-weight:500; color:var(--muted); text-decoration:line-through; }
.product__price-na{ font-size:18px; color:var(--sale); font-weight:600; }

.product__stock{ display:flex; align-items:center; gap:12px; margin:14px 0 4px; }
.product__stock-bar{ flex:0 0 130px; height:8px; background:#eef2f0; border-radius:6px; overflow:hidden; }
.product__stock-bar span{ display:block; height:100%; background:#1b8a3d; border-radius:6px; }
.product__stock-lbl{ color:#1b8a3d; font-weight:600; font-size:14px; }

.product__actions{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:18px 0 6px; }
.product__actions .product__qty{ margin:0; }
.product__actions .product__add{ width:auto; padding:12px 28px; }
.product__wish{
	display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--sale);
	border:1px solid var(--border); border-radius:8px; padding:11px 18px; font-size:15px; font-weight:600; cursor:pointer;
}
.product__wish:hover{ border-color:var(--sale); background:#fff5f5; }
.product__wish.is-on{ background:#fff0f0; border-color:var(--sale); }
.product__wish-ic{ font-size:18px; line-height:1; }

.product__share{ display:flex; align-items:center; gap:10px; margin:10px 0 4px; }
.share-btn{
	width:38px; height:38px; border-radius:50%; border:0; cursor:pointer; color:#fff;
	display:inline-flex; align-items:center; justify-content:center;
}
.share-btn--wa{ background:#25d366; }
.share-btn--link{ background:#e94f8a; }
.share-btn:hover{ filter:brightness(.94); }

.product__tags{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.product__tags-lbl{ color:var(--muted); font-size:14px; }
.tag{ display:inline-block; background:#f2f5f3; color:var(--sale); border-radius:6px; padding:6px 12px; font-size:13px; }
.tag:hover{ background:#e8eeeb; }
.tag--isbn{ color:var(--muted); }

.product__details{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:20px 24px; margin:16px 0; box-shadow:var(--shadow); }
.product__details .product__meta{ margin:0 0 6px; }

/* ---- Customer reviews ---------------------------------------- */
.reviews{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:20px 24px; margin:16px 0; box-shadow:var(--shadow); }
.reviews__summary{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.reviews__avg{ display:flex; align-items:center; gap:8px; }
.reviews__avg-num{ font-size:32px; font-weight:800; color:var(--text); }
.reviews__avg .stars{ font-size:20px; }
.reviews__count{ color:var(--muted); font-size:14px; }
.reviews__thanks{ background:#e6f4ea; color:#1b8a3d; border-radius:8px; padding:10px 14px; margin:0 0 14px; font-weight:600; }
.reviews__list{ display:flex; flex-direction:column; gap:14px; }
.review{ border:1px solid var(--border); border-radius:8px; padding:12px 16px; background:#fafcfb; }
.review__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.review__name{ font-weight:700; }
.review__date{ color:var(--muted); font-size:12px; }
.review__body{ margin:0; color:var(--text); font-size:14px; line-height:1.7; }

.review-form{ margin-top:22px; padding-top:18px; border-top:1px solid var(--border); max-width:560px; }
.review-form h3{ margin:0 0 12px; color:var(--accent); font-size:16px; }
.review-form label{ display:block; margin:10px 0; font-weight:600; font-size:14px; }
.review-form input[type=text], .review-form textarea{
	width:100%; padding:9px 10px; border:1px solid var(--border); border-radius:6px; font-size:14px; font-family:inherit; margin-top:4px;
}
.review-form__error{ background:#f0e3e3; color:#b23b3b; border-radius:8px; padding:9px 13px; margin:0 0 12px; }
/* CSS-only interactive star picker (radios laid out right-to-left) */
.star-input{ display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; gap:2px; margin-top:6px; }
.star-input input{ position:absolute; opacity:0; width:0; height:0; }
.star-input label{ display:inline; margin:0; font-size:28px; line-height:1; color:#d9dee3; cursor:pointer; transition:color .1s; }
.star-input label:hover, .star-input label:hover ~ label,
.star-input input:checked ~ label{ color:var(--gold); }

/* ---- Account wishlist ---------------------------------------- */
.account-wishlist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; margin-top:8px; }
.account-wishlist__item{ display:flex; flex-direction:column; }
.account-wishlist__remove{ margin-top:6px; text-align:center; }
.account-wishlist__remove button{ background:#fff; border:1px solid var(--border); color:var(--sale); border-radius:6px; padding:6px 10px; font-size:12px; cursor:pointer; }
.account-wishlist__remove button:hover{ border-color:var(--sale); background:#fff5f5; }

/* ---- Cart ----------------------------------------------------- */
.cart__table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.cart__table th, .cart__table td{ padding:10px; border-bottom:1px solid var(--border); text-align:start; vertical-align:middle; }
.cart__table tfoot th{ background:#f7fbff; color:var(--accent); }
.cart__actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.btn{ background:var(--accent); color:#fff; padding:10px 22px; border:0; border-radius:6px; font-weight:600; cursor:pointer; display:inline-block; }
.btn:hover{ background:var(--accent-h); }
.btn--secondary{ background:#fff; color:var(--accent); border:1px solid var(--border); }
.btn--secondary:hover{ background:#f3f7fb; }
.btn-link{ background:transparent; border:0; color:var(--sale); cursor:pointer; text-decoration:underline; }
.empty{ background:#fff; padding:30px; text-align:center; border-radius:var(--radius); color:var(--muted); }

/* ---- Footer --------------------------------------------------- */
.site-footer{ background:var(--cart-dark); margin-top:40px; color:#d7e2ec; font-size:13px; }
.site-footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1.4fr; gap:28px; padding:36px 16px 28px; }
@media (max-width:900px){ .site-footer__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .site-footer__grid{ grid-template-columns:1fr; } }

.site-footer__brand{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.site-footer__brand-mark{
	width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff;
	display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.site-footer__brand strong{ color:#fff; font-size:16px; }
.site-footer__about{ margin:0 0 12px; line-height:1.9; color:#bcccdb; }
.site-footer__more{ color:#7ec4ef; font-weight:600; }
.site-footer__more:hover{ text-decoration:underline; }

.site-footer__head{ display:block; color:#fff; font-size:15px; margin-bottom:12px; }
.site-footer__head--news{ margin-top:20px; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li{ padding:5px 0; color:#c3d0dc; }
.site-footer a{ color:#c3d0dc; }
.site-footer a:hover{ color:#fff; text-decoration:underline; }
.site-footer__contact li{ display:flex; align-items:flex-start; gap:8px; line-height:1.7; }

.site-footer__social{ display:flex; gap:10px; }
.site-footer__social a{
	width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff;
	display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:15px;
	transition:background .15s;
}
.site-footer__social a:hover{ background:var(--cart); }
.site-footer__news-pitch{ margin:0 0 10px; color:#bcccdb; line-height:1.8; }
.site-footer__news{ display:flex; background:#fff; border-radius:8px; overflow:hidden; }
.site-footer__news input{ flex:1; border:0; padding:9px 12px; font-size:13px; outline:none; font-family:inherit; min-width:0; }
.site-footer__news button{ background:var(--cart); border:0; color:#fff; padding:0 14px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap; }
.site-footer__news button:hover{ background:var(--cart-h); }

.site-footer__bar{ border-top:1px solid rgba(255,255,255,.12); }
.site-footer__bar-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 16px; font-size:12px; color:#a9b8c8; }
.site-footer__policies{ display:flex; gap:16px; flex-wrap:wrap; }
.site-footer__admin{ opacity:.7; }

/* ---- Forms (login / register / account / checkout) ---------- */
.form-box{
	background:#fff; border:1px solid var(--border); border-radius:var(--radius);
	padding:24px; max-width:520px; margin:16px auto; box-shadow:var(--shadow);
}
.form-box h1{ margin-top:0; color:var(--accent); }
.form-box label{ display:block; margin:10px 0; font-size:13px; font-weight:600; color:var(--accent); }
.form-box input, .form-box textarea, .form-box select{
	width:100%; padding:10px; border:1px solid var(--border); border-radius:6px; font-size:14px;
	font-family:inherit; margin-top:4px;
}
.form-box .btn{ margin-top:10px; }
.form-err{ background:#ffeaea; color:#b00; padding:8px 12px; border-radius:6px; }
.checkout-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:18px; }
@media (max-width:800px){ .checkout-grid{ grid-template-columns:1fr; } }

/* ---- Order tracking ------------------------------------------ */
.track{ display:grid; grid-template-columns:360px 1fr; gap:18px; align-items:start; }
@media (max-width:760px){ .track{ grid-template-columns:1fr; } }
.track__form label{ display:block; margin:10px 0; font-size:13px; font-weight:600; color:var(--accent); }
.track__form input{ width:100%; padding:10px; border:1px solid var(--border); border-radius:6px; font-size:14px; margin-top:4px; }
.track__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; border-bottom:1px solid var(--border); padding-bottom:12px; margin-bottom:12px; }
.track__result h3{ color:var(--accent); font-size:15px; margin:16px 0 8px; }
.track__timeline{ list-style:none; margin:0; padding:0; }
.track__timeline li{ position:relative; padding:0 0 14px 18px; border-inline-start:2px solid var(--border); }
.track__timeline li:last-child{ border-inline-start-color:transparent; }
.track__timeline li::before{ content:''; position:absolute; inset-inline-start:-6px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--accent); }
.track__date{ font-size:12px; color:var(--muted); margin-inline-start:8px; }
.track__note{ font-size:12px; color:var(--text); margin-top:2px; }

/* ---- Toast --------------------------------------------------- */
.toast{
	position:fixed; bottom:20px; inset-inline-end:20px;
	background:#2e7d32; color:#fff; padding:12px 18px; border-radius:8px;
	box-shadow:0 4px 12px rgba(0,0,0,.2); z-index:100;
	transform:translateY(120px); opacity:0; transition:transform .25s, opacity .25s;
}
.toast.is-visible{ transform:translateY(0); opacity:1; }

/* ---- Dark-mode toggle switch --------------------------------- */
.theme-toggle{
	background:none; border:0; padding:0; margin:0; cursor:pointer;
	display:inline-flex; flex-direction:column; align-items:center; gap:2px;
	color:var(--text); font-size:11px; font-weight:500;
}
.theme-toggle__track{
	width:42px; height:22px; border-radius:11px; position:relative;
	background:var(--soft-2); border:1px solid var(--border);
	transition:background .2s ease;
}
.theme-toggle__thumb{
	position:absolute; top:1px; left:1px; width:18px; height:18px; border-radius:50%;
	background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.35);
	display:flex; align-items:center; justify-content:center; font-size:11px; line-height:1;
	transition:transform .2s ease, background .2s ease;
}
.theme-toggle__thumb::before{ content:'☀️'; }
.theme-toggle[aria-checked="true"] .theme-toggle__track{ background:var(--accent); }
.theme-toggle[aria-checked="true"] .theme-toggle__thumb{ transform:translateX(20px); }
.theme-toggle[aria-checked="true"] .theme-toggle__thumb::before{ content:'🌙'; }

/* ---- Dark theme palette -------------------------------------- */
html[data-theme="dark"]{
	--bg:#0f1512;
	--surface:#17211b;
	--accent:#3aa864;
	--accent-h:#46bb73;
	--accent-dark:#0b120e;
	--soft:#1b2a22;
	--soft-2:#213329;
	--gold:#d8b24e;
	--sale:#f0655f;
	--cart:#3aa6e0;           /* logo sky-blue (brighter for dark bg) */
	--cart-h:#59b7ea;
	--muted:#9db0a4;
	--border:#28382f;
	--text:#e7efe9;
	--shadow:0 1px 3px rgba(0,0,0,.45);
}
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .site-header__search,
html[data-theme="dark"] .site-header__search input,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel__btn--ghost,
html[data-theme="dark"] .product__details,
html[data-theme="dark"] .product__qty button,
html[data-theme="dark"] .reviews,
html[data-theme="dark"] .cart__table,
html[data-theme="dark"] .btn--secondary,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .form-box,
html[data-theme="dark"] .form-box input,
html[data-theme="dark"] .form-box textarea,
html[data-theme="dark"] .form-box select{
	background:var(--surface); color:var(--text);
}
html[data-theme="dark"] .site-header__search input::placeholder,
html[data-theme="dark"] .form-box input::placeholder,
html[data-theme="dark"] .form-box textarea::placeholder{ color:var(--muted); }
html[data-theme="dark"] .form-err{ background:#3a1d1d; color:#ffb4b4; }