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

:root{
	--bg: #eaf2fa;
	--surface: #ffffff;
	--accent: #0d2a44;
	--accent-h: #163b5e;
	--sale: #e53935;
	--muted: #6b7a8c;
	--border: #d9e3ee;
	--text: #1a1a1a;
	--radius: 10px;
	--shadow: 0 1px 3px rgba(13,42,68,.08);
	--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:var(--accent); color:#fff; box-shadow:var(--shadow); position:sticky; top:0; z-index:50; }
.site-header__row{ display:flex; align-items:center; gap:16px; padding:10px 16px; }
.site-header__logo{ display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:700; font-size:18px; }
.site-header__logo-mark{ font-size:22px; }
.site-header__search{ flex:1; max-width:560px; display:flex; background:#fff; border-radius:30px; overflow:hidden; }
.site-header__search input{ flex:1; border:0; padding:9px 14px; font-size:14px; outline:none; }
.site-header__search button{ background:#fff; border:0; padding:0 12px; color:var(--accent); cursor:pointer; }
.site-header__nav{ display:flex; align-items:center; gap:14px; }
.site-header__nav a{ color:#fff; opacity:.9; font-weight:500; }
.site-header__nav a:hover{ opacity:1; }
.site-header__cart{ position:relative; display:inline-flex; align-items:center; }
.site-header__cart-count{
	position:absolute; top:-6px; inset-inline-end:-8px;
	background:var(--sale); color:#fff; font-size:11px; font-weight:700;
	min-width:18px; height:18px; border-radius:9px; padding:0 5px;
	display:inline-flex; align-items:center; justify-content:center;
}
.site-header__lang{
	background:#fff; color:var(--accent); padding:4px 10px; border-radius:14px;
	font-weight:600; font-size:13px;
}

/* ---- 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; }

/* ---- Quick links --------------------------------------------- */
.quicklinks{
	display:grid; grid-template-columns:repeat(8,1fr); gap:8px; margin:14px 0 20px;
}
@media (max-width:900px){ .quicklinks{ grid-template-columns:repeat(4,1fr); } }
.quicklinks__item{ display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--accent); font-size:13px; }
.quicklinks__circle{
	width:64px; height:64px; border-radius:50%; background:#dfeaf4;
	display:inline-flex; align-items:center; justify-content:center; font-size:26px;
	transition:background .15s;
}
.quicklinks__item:hover .quicklinks__circle{ background:#cfe0f0; }

/* ---- 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;
}
.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{
	display:block; background:#fafafa; height:200px;
	display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.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; align-items:center; justify-content:space-between;
	padding:8px 10px 10px;
}
.card__price{ font-weight:700; font-size:14px; }
.card__add{
	background:var(--accent); color:#fff; border:0; border-radius:50%; cursor:pointer;
	width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
	transition:background .15s;
}
.card__add:hover{ background:var(--accent-h); }
.card__add.is-added{ background:#2e7d32; }

/* ---- 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:1.1fr 1.1fr 1fr; gap:24px;
	background:#fff; border:1px solid var(--border); border-radius:var(--radius);
	padding:24px; margin:8px 0; box-shadow:var(--shadow);
}
@media (max-width:1000px){ .product{ grid-template-columns:1fr 1fr; } .product__buy{ grid-column:1/-1; } }
@media (max-width:700px){  .product{ grid-template-columns:1fr; } }
.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__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(--accent); 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(--accent-h); }
.product__add.is-added{ background:#2e7d32; }

/* ---- 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:#fff; border-top:1px solid var(--border); margin-top:40px; color:var(--text); }
.site-footer__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:24px 16px; }
@media (max-width:700px){ .site-footer__row{ grid-template-columns:1fr; } }
.site-footer ul{ list-style:none; padding:0; margin:8px 0 0; }
.site-footer li{ padding:3px 0; }
.site-footer a{ color:var(--accent); }
.site-footer a:hover{ text-decoration:underline; }
.site-footer__copy{ padding:12px 16px; border-top:1px solid var(--border); font-size:12px; color:var(--muted); text-align:center; }

/* ---- 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; } }

/* ---- 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; }