/* Global Styles & Theme Variables */
:root {
	--color-bg: #fff8e6;
	--color-bg-alt: #fff3d1;
	--color-primary: #ff9100; /* marigold/saffron blend */
	--color-primary-dark: #d97706;
	--color-accent: #b45309;
	--color-text: #3a2d16;
	--color-text-light: #5c4a28;
	--color-border: #e2cda2;
	--color-success: #2e7d32;
	--color-danger: #b91c1c;
	--color-focus: #ffb347;
	--shadow-soft: 0 4px 10px rgba(0,0,0,0.08);
	--shadow-card: 0 6px 16px rgba(0,0,0,0.12);
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--transition-base: 0.3s ease;
	--font-stack: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
	--max-width: 1200px;
}

/* Dark Mode */
.dark {
	--color-bg: #1c1a17;
	--color-bg-alt: #26221d;
	--color-primary: #ffb347;
	--color-primary-dark: #ff9100;
	--color-accent: #ffc766;
	--color-text: #f2e5c9;
	--color-text-light: #d5c6aa;
	--color-border: #554732;
	--shadow-soft: 0 4px 14px rgba(0,0,0,0.5);
	--shadow-card: 0 6px 20px rgba(0,0,0,0.6);
}

* { box-sizing: border-box; }
html { font-size: 18px; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-stack);
	background: var(--color-bg);
	color: var(--color-text);
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--color-primary-dark); text-decoration: none; }
a:hover { color: var(--color-primary); }

button {
	font-family: inherit;
	font-size: 1rem;
	cursor: pointer;
	border: none;
	padding: 0.75rem 1.25rem;
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: #fff;
	transition: var(--transition-base);
}
button:hover, button:focus { background: var(--color-primary-dark); outline: none; }
button:focus-visible { box-shadow: 0 0 0 3px var(--color-focus); }

.btn-outline { background: transparent; color: var(--color-primary-dark); border: 2px solid var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color:#fff; }

/* Layout */
.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 1rem; }
.grid { display: grid; gap: 1.2rem; }

/* Headings */
h1,h2,h3,h4 { font-weight:600; letter-spacing: .5px; }
h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }

/* Card */
.card { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1rem; box-shadow: var(--shadow-soft); position: relative; overflow: hidden; }
.card:hover { box-shadow: var(--shadow-card); }
.card img { border-radius: var(--radius-md); }

/* Trust Badges */
.trust-badges { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; margin-top:1rem; }
.badge { background: var(--color-primary); color:#fff; padding:.35rem .7rem; border-radius: var(--radius-sm); font-size:.75rem; letter-spacing:.5px; box-shadow: var(--shadow-soft); }

/* Navigation */
.site-header { position: sticky; top:0; z-index:1000; background: var(--color-bg-alt); box-shadow: var(--shadow-soft); }
.nav-row { display:flex; align-items:center; justify-content:space-between; padding:.6rem 1rem; }
.logo { display:flex; align-items:center; gap:.5rem; font-size:1.1rem; font-weight:600; }
.logo img { height:42px; width:auto; }
.primary-nav { display:flex; gap:1rem; }
.primary-nav a { padding:.5rem .75rem; border-radius: var(--radius-sm); font-weight:500; }
.primary-nav a:hover, .primary-nav a:focus { background: var(--color-primary); color:#fff; }
/* Mobile nav toggle */
.nav-toggle { display:none; font-size:1.2rem; }
.nav-open .primary-nav { display:flex !important; flex-direction:column; position:absolute; top:100%; right:0; background: var(--color-bg-alt); padding:.8rem 1rem; box-shadow: var(--shadow-card); border:1px solid var(--color-border); }
.skip-link { position:absolute; top:-40px; left:0; background:#000; color:#fff; padding:.5rem .8rem; z-index:2000; text-decoration:none; }
.skip-link:focus { top:0; }

/* Icons / Buttons */
.icon-btn { background: var(--color-bg-alt); border:1px solid var(--color-border); padding:.55rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition: var(--transition-base); }
.icon-btn:hover { background: var(--color-primary); color:#fff; }

/* Floating Cart */
.floating-cart { position: fixed; right: 1rem; bottom: 1rem; background: var(--color-primary); color:#fff; border-radius: 50%; width:60px; height:60px; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:600; box-shadow: var(--shadow-card); text-decoration:none; }
.floating-cart .count { position:absolute; top:6px; right:8px; background:#fff; color:var(--color-primary-dark); padding:2px 6px; border-radius:12px; font-size:.65rem; font-weight:700; }
.floating-cart:hover { background: var(--color-primary-dark); }

/* Footer */
footer { margin-top:3rem; background: var(--color-bg-alt); border-top:1px solid var(--color-border); padding:2rem 1rem; }
footer .cols { display:grid; gap:1.5rem; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); }
footer a { font-size:.85rem; }
footer .socials { display:flex; gap:.75rem; margin-top:.5rem; }
footer .socials a { background: var(--color-primary); color:#fff; padding:.5rem .7rem; border-radius: var(--radius-sm); font-size:.75rem; }
footer .socials a:hover { background: var(--color-primary-dark); }

/* Creators / Ownership Avatars */
.creator-list { display:flex; flex-direction:column; gap:.9rem; margin:0; padding:0; list-style:none; }
.creator-item { display:flex; align-items:center; gap:.7rem; font-size:.78rem; line-height:1.25; }
.avatar-circle { width:54px; height:54px; border-radius:50%; object-fit:cover; border:2px solid var(--color-primary); box-shadow:0 4px 10px rgba(0,0,0,.18); background:#fff; }
@media (min-width:600px){
	.avatar-circle { width:60px; height:60px; }
	.creator-item { font-size:.8rem; }
}

/* Accessibility helpers */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }

/* Bottom Navigation (App-like) */
body.has-bottom-nav { padding-bottom: 72px; }
.bottom-nav { position: fixed; left:0; right:0; bottom:0; height:60px; background: var(--color-bg-alt); border-top:1px solid var(--color-border); box-shadow: 0 -4px 10px rgba(0,0,0,0.06); display:grid; grid-template-columns: repeat(4, 1fr); z-index: 1100; }
.bottom-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color: var(--color-text); font-size:.75rem; text-decoration:none; position:relative; }
.bottom-nav a .icon { font-size:1.15rem; line-height:1; }
.bottom-nav a.active { color: var(--color-primary-dark); font-weight:600; }
.bottom-nav .badge { position:absolute; top:6px; right:24px; background: var(--color-primary); color:#fff; padding:0 6px; border-radius:10px; font-size:.65rem; font-weight:700; }

/* Hide top header quick-action buttons (menu, account, wishlist, language) */
.site-header #navToggle,
.site-header a[aria-label="User account"],
.site-header a[aria-label="Wishlist"][data-wishlist-count],
#langToggle { display:none !important; }

/* Responsive */
@media (max-width: 900px) {
	html { font-size: 17px; }
	.primary-nav { display:none; }
	.nav-toggle { display:inline-flex; }
}
@media (max-width: 600px) {
	html { font-size: 16px; }
	.floating-cart { width:54px; height:54px; }
}

/* Wider usage on landscape: reduce side gaps to thin margins */
@media (orientation: landscape) and (min-width: 1100px) {
    :root { --max-width: 96vw; } /* almost full width, ~2vw margin each side */
    .container { padding: 0 1.2rem; }
}