/* ==========================================================
   LAYLEE.STORE — Storefront Styles
   v2.0 — Pop / scrapbook redesign
   ----------------------------------------------------------
   CHANGELOG (this file)
   v2.0  Full visual overhaul per feedback ("make it creative and
         popping"). Replaced the maroon/gold heritage look with a
         bold festival palette (rani pink, marigold, peacock teal)
         and a hand-cut "sticker" treatment — thick ink borders,
         hard offset shadows, alternating tilt on cards that
         straightens on hover. Swapped Cormorant/Jost for
         Fraunces (display) + Space Grotesk (UI/body).
   v1.1  Removed fabric-label text from cards (photo-first).
   v1.0  Initial build.
   ----------------------------------------------------------
   Palette:
     --pop-magenta        #E31C79   primary (rani pink)
     --pop-magenta-deep   #A80F55   pressed/hover state
     --pop-marigold       #FFB627  accent (festival marigold)
     --pop-teal           #10767D  secondary (peacock)
     --pop-ink            #1B0E17  borders, shadows, text
     --pop-cream          #FFF6EC  page canvas
     --pop-lime           #D9F04B  tiny highlight / "new" sticker
   Type:
     Display — 'Fraunces' (bold/black, a little irreverent)
     Body/UI — 'Space Grotesk' (crisp, modern, has personality)
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,900;1,9..144,500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
	--pop-magenta:#E31C79;
	--pop-magenta-deep:#A80F55;
	--pop-marigold:#FFB627;
	--pop-teal:#10767D;
	--pop-ink:#1B0E17;
	--pop-cream:#FFF6EC;
	--pop-lime:#D9F04B;
}

.laylee-grid, .laylee-product, .laylee-cart-wrap, .laylee-checkout-wrap, .laylee-category-strip{
	font-family:'Space Grotesk', sans-serif;
	color:var(--pop-ink);
	box-sizing:border-box;
}
.laylee-grid *, .laylee-product *, .laylee-cart-wrap *, .laylee-checkout-wrap *{ box-sizing:border-box; }

/* ---------- Signature: scalloped divider (echoes a saree pallu edge) ---------- */
.laylee-border-strip{
	height:22px;
	background-image: radial-gradient(circle at 10px 0, transparent 10px, var(--pop-magenta) 10.5px);
	background-size: 20px 20px;
	background-position: center top;
}

/* ---------- Category pills (kept for internal use; bold pop styling) ---------- */
.laylee-category-strip{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	justify-content:center;
	margin:28px 0;
}
.laylee-category-pill{
	font-family:'Space Grotesk', sans-serif;
	font-weight:600;
	font-size:14px;
	text-transform:uppercase;
	letter-spacing:.03em;
	padding:10px 22px;
	background:var(--pop-cream);
	border:2.5px solid var(--pop-ink);
	color:var(--pop-ink);
	border-radius:999px;
	text-decoration:none;
	box-shadow:3px 3px 0 var(--pop-ink);
	transition:all .18s ease;
}
.laylee-category-pill:hover{
	background:var(--pop-marigold);
	transform:translate(-2px,-2px);
	box-shadow:5px 5px 0 var(--pop-ink);
}

/* ---------- Shop grid ---------- */
.laylee-grid{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:44px 30px;
	max-width:1240px;
	margin:0 auto;
	padding:30px 16px 70px;
}
.laylee-cols-3{ grid-template-columns:repeat(3,1fr); }
.laylee-cols-2{ grid-template-columns:repeat(2,1fr); }

.laylee-card{
	display:block;
	text-decoration:none;
	color:inherit;
	background:#fff;
	border:3px solid var(--pop-ink);
	border-radius:20px;
	box-shadow:7px 7px 0 var(--pop-ink);
	transition:transform .22s ease, box-shadow .22s ease;
	transform:rotate(-1.4deg);
}
.laylee-grid .laylee-card:nth-child(even){ transform:rotate(1.4deg); }
.laylee-grid .laylee-card:nth-child(3n){ transform:rotate(-0.8deg); }
.laylee-card:hover{
	transform:rotate(0deg) translate(-3px,-5px);
	box-shadow:10px 10px 0 var(--pop-magenta);
}
.laylee-card-img{
	position:relative;
	aspect-ratio:3/4;
	overflow:hidden;
	background:#F1E4D3;
	border-radius:16px 16px 0 0;
	border-bottom:3px solid var(--pop-ink);
}
.laylee-card-img img{
	width:100%; height:100%; object-fit:cover;
	transition:transform .4s ease;
}
.laylee-card:hover .laylee-card-img img{ transform:scale(1.06) rotate(1deg); }
.laylee-badge-sold{
	position:absolute; top:12px; left:12px;
	background:var(--pop-ink);
	color:#fff;
	font-family:'Space Grotesk';
	font-weight:700;
	letter-spacing:.04em;
	font-size:12px;
	padding:5px 12px;
	border-radius:999px;
	text-transform:uppercase;
}
.laylee-card-body{ padding:18px 18px 22px; text-align:center; }
.laylee-card-title{
	font-family:'Fraunces', serif;
	font-weight:600;
	font-size:21px;
	line-height:1.25;
	margin:0 0 10px;
	color:var(--pop-ink);
}
.laylee-card-price{ margin:0; font-size:16px; }
.laylee-price-old{ text-decoration:line-through; opacity:.45; margin-right:8px; font-size:13px; }
.laylee-price-now{
	display:inline-block;
	background:var(--pop-marigold);
	border:2px solid var(--pop-ink);
	border-radius:999px;
	padding:3px 14px;
	font-weight:700;
	color:var(--pop-ink);
}
.laylee-empty{ text-align:center; grid-column:1/-1; padding:60px 20px; font-style:italic; opacity:.7; }

/* ---------- Single product ---------- */
.laylee-product{
	display:grid;
	grid-template-columns:1.1fr 1fr;
	gap:56px;
	max-width:1180px;
	margin:0 auto;
	padding:40px 20px 80px;
}
.laylee-main-image{
	background:#F1E4D3; aspect-ratio:3/4; overflow:hidden;
	border-radius:22px; border:3px solid var(--pop-ink); box-shadow:9px 9px 0 var(--pop-teal);
}
.laylee-main-image img{ width:100%; height:100%; object-fit:cover; }
.laylee-thumb-strip{ display:flex; gap:10px; margin-top:16px; }
.laylee-thumb{ width:70px; height:92px; object-fit:cover; border:2.5px solid var(--pop-ink); border-radius:10px; cursor:pointer; }

.laylee-eyebrow{
	font-family:'Space Grotesk', sans-serif;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--pop-magenta);
	font-weight:700;
	font-size:13px;
	margin:0 0 8px;
}
.laylee-product-title{
	font-family:'Fraunces', serif;
	font-weight:900;
	font-style:italic;
	font-size:46px;
	line-height:1.08;
	margin:0 0 18px;
	color:var(--pop-ink);
}
.laylee-product-price{ font-size:22px; margin:0 0 20px; }
.laylee-product-price .laylee-price-now{ font-size:22px; padding:6px 20px; }
.laylee-product-desc{ font-size:16px; line-height:1.7; opacity:.85; margin-bottom:18px; }
.laylee-spec-list{ list-style:none; padding:0; margin:0 0 18px; font-size:14px; line-height:2; }
.laylee-care{ font-size:13px; opacity:.6; margin-bottom:24px; }

.laylee-add-to-cart{ display:flex; gap:14px; align-items:center; margin-top:10px; }
.laylee-qty{ display:flex; align-items:center; border:2.5px solid var(--pop-ink); border-radius:999px; overflow:hidden; }
.laylee-qty button{
	background:var(--pop-cream); border:none; width:38px; height:46px;
	font-size:18px; font-weight:700; color:var(--pop-ink); cursor:pointer;
}
.laylee-qty-input{
	width:44px; text-align:center; border:none; border-left:2px solid var(--pop-ink); border-right:2px solid var(--pop-ink);
	height:46px; font-family:'Space Grotesk'; font-size:15px; font-weight:600;
}
.laylee-btn-add, .laylee-btn-checkout, .laylee-btn-place-order{
	background:var(--pop-magenta);
	color:#fff;
	border:2.5px solid var(--pop-ink);
	padding:0 30px;
	height:48px;
	border-radius:999px;
	font-family:'Space Grotesk', sans-serif;
	font-weight:700;
	letter-spacing:.02em;
	text-transform:uppercase;
	font-size:14px;
	cursor:pointer;
	text-decoration:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	box-shadow:4px 4px 0 var(--pop-ink);
	transition:all .18s ease;
}
.laylee-btn-add:hover, .laylee-btn-checkout:hover, .laylee-btn-place-order:hover{
	background:var(--pop-magenta-deep);
	transform:translate(-2px,-2px);
	box-shadow:6px 6px 0 var(--pop-ink);
}
.laylee-cod-note{
	margin-top:18px; display:inline-block; font-size:13px; font-weight:700;
	color:var(--pop-ink); background:var(--pop-lime);
	border:2px solid var(--pop-ink); border-radius:999px; padding:6px 16px;
}
.laylee-out-of-stock{ color:#b3261e; font-weight:700; }

/* ---------- Cart ---------- */
.laylee-cart-wrap{ max-width:900px; margin:0 auto; padding:40px 20px 80px; }
.laylee-cart-table{ width:100%; border-collapse:separate; border-spacing:0; margin-bottom:24px; }
.laylee-cart-table th{
	font-family:'Space Grotesk', sans-serif; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
	font-size:12px; text-align:left; border-bottom:3px solid var(--pop-ink); padding:10px 8px; color:var(--pop-ink);
}
.laylee-cart-table td{ padding:14px 8px; border-bottom:2px solid #F1E4D3; font-size:14px; }
.laylee-cart-item{ display:flex; align-items:center; gap:12px; }
.laylee-cart-item img{ width:48px; height:64px; object-fit:cover; border:2px solid var(--pop-ink); border-radius:8px; }
.laylee-cart-qty{ width:56px; padding:6px; border:2px solid var(--pop-ink); border-radius:8px; }
.laylee-cart-remove{ background:none; border:none; color:var(--pop-magenta-deep); text-decoration:underline; cursor:pointer; font-size:13px; font-weight:600; }
.laylee-cart-summary{ display:flex; justify-content:space-between; align-items:center; font-size:20px; padding:16px 18px; border:3px solid var(--pop-ink); border-radius:16px; background:var(--pop-cream); box-shadow:5px 5px 0 var(--pop-ink); }
.laylee-cart-summary strong{ color:var(--pop-magenta-deep); }

/* ---------- Checkout ---------- */
.laylee-checkout-wrap{ max-width:960px; margin:0 auto; padding:40px 20px 80px; display:grid; grid-template-columns:1fr 1.2fr; gap:50px; }
.laylee-checkout-summary{ background:var(--pop-cream); border:3px solid var(--pop-ink); border-radius:18px; padding:26px; align-self:start; box-shadow:6px 6px 0 var(--pop-teal); }
.laylee-checkout-summary h3{ font-family:'Fraunces', serif; font-weight:700; font-size:24px; margin-top:0; color:var(--pop-ink); }
.laylee-checkout-summary ul{ list-style:none; padding:0; font-size:14px; line-height:2; }
.laylee-checkout-total{ font-size:19px; font-weight:700; border-top:2px solid var(--pop-ink); margin-top:10px; padding-top:12px; color:var(--pop-magenta-deep); }
.laylee-checkout-form{ display:flex; flex-direction:column; gap:16px; }
.laylee-checkout-form label{ font-size:13px; font-weight:700; display:flex; flex-direction:column; gap:6px; }
.laylee-checkout-form input, .laylee-checkout-form textarea{
	font-family:'Space Grotesk'; font-size:15px; padding:12px 14px; border:2.5px solid var(--pop-ink); border-radius:12px; background:#fff;
}
.laylee-checkout-form input:focus, .laylee-checkout-form textarea:focus{ outline:none; border-color:var(--pop-magenta); box-shadow:3px 3px 0 var(--pop-marigold); }
.laylee-form-message{ font-size:14px; font-weight:600; }
.laylee-form-message.success{ color:var(--pop-teal); }
.laylee-form-message.error{ color:#b3261e; }

/* ---------- Cart bubble ---------- */
.laylee-cart-count{
	display:inline-flex; align-items:center; justify-content:center;
	background:var(--pop-marigold); color:var(--pop-ink); border:2px solid var(--pop-ink);
	width:20px; height:20px; border-radius:50%; font-size:11px; font-weight:800;
}

/* ---------- Lightbox modal (click a photo, browse left/right, order) ---------- */
.laylee-modal{
	position:fixed; inset:0; z-index:9999;
	display:none; align-items:center; justify-content:center;
	padding:24px;
}
.laylee-modal.is-open{ display:flex; }
.laylee-modal-backdrop{
	position:absolute; inset:0; background:rgba(27,14,23,.82);
}
.laylee-modal-panel{
	position:relative; z-index:2;
	background:#fff; border:3px solid var(--pop-ink); border-radius:22px;
	box-shadow:10px 10px 0 var(--pop-marigold);
	max-width:920px; width:100%; max-height:88vh; overflow:auto;
	display:grid; grid-template-columns:1.1fr 1fr;
}
.laylee-modal-image-wrap{ background:#F1E4D3; position:relative; }
.laylee-modal-image{ width:100%; height:100%; max-height:88vh; object-fit:cover; display:block; }
.laylee-modal-dots{ position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center; gap:8px; }
.laylee-modal-dot{
	width:11px; height:11px; border-radius:50%; border:2px solid var(--pop-ink); background:#fff; cursor:pointer; padding:0;
}
.laylee-modal-dot.active{ background:var(--pop-magenta); }
.laylee-modal-info{ padding:34px 30px; display:flex; flex-direction:column; }
.laylee-modal-title{ font-family:'Fraunces',serif; font-weight:700; font-size:24px; margin:0 0 10px; color:var(--pop-ink); }
.laylee-modal-price{ font-size:19px; margin:0 0 22px; }
.laylee-modal-add{ display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.laylee-modal-stock-note{
	display:inline-block; width:fit-content; font-size:13px; font-weight:700; color:var(--pop-ink);
	background:var(--pop-lime); border:2px solid var(--pop-ink); border-radius:999px; padding:6px 16px; margin-bottom:18px;
}
.laylee-modal-full-link{ font-size:13px; font-weight:700; color:var(--pop-magenta); margin-top:auto; }
.laylee-modal-full-link:hover{ text-decoration:underline; }

.laylee-modal-close{
	position:absolute; top:18px; right:18px; z-index:3;
	width:44px; height:44px; border-radius:50%; border:2.5px solid var(--pop-ink); background:#fff;
	font-size:22px; line-height:1; cursor:pointer; box-shadow:3px 3px 0 var(--pop-ink);
}
.laylee-modal-nav{
	position:absolute; top:50%; transform:translateY(-50%); z-index:3;
	width:52px; height:52px; border-radius:50%; border:2.5px solid var(--pop-ink); background:var(--pop-marigold);
	font-size:26px; line-height:1; cursor:pointer; box-shadow:3px 3px 0 var(--pop-ink);
}
.laylee-modal-prev{ left:24px; }
.laylee-modal-next{ right:24px; }

@media (max-width: 760px){
	.laylee-modal-panel{ grid-template-columns:1fr; max-height:92vh; }
	.laylee-modal-image{ max-height:50vh; }
	.laylee-modal-nav{ width:44px; height:44px; font-size:20px; }
	.laylee-modal-prev{ left:8px; }
	.laylee-modal-next{ right:8px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
	.laylee-product, .laylee-checkout-wrap{ grid-template-columns:1fr; }
	.laylee-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 480px){
	.laylee-grid, .laylee-cols-3, .laylee-cols-2{ grid-template-columns:1fr 1fr; gap:24px 14px; }
	.laylee-product-title{ font-size:34px; }
	.laylee-card{ transform:none !important; }
}