:root{
  --paper:#faf7f0;
  --paper-raised:#ffffff;
  --ink:#1c1b17;
  --ink-dim:#6b6559;
  --forest:#4a6b3a;
  --leaf:#5fa233;
  --leaf-bright:#73bd43;
  --rust:#c1592b;
  --marigold:#c9860f;
  --hairline:rgba(28,27,23,0.12);
  --radius:14px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:'Poppins',sans-serif; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{font-family:'Playfair Display',serif; font-weight:600; margin:0 0 10px;}

/* ---------- auth screens (login/register) ---------- */
.auth-wrap{min-height:70vh; display:flex; align-items:center; justify-content:center; padding:60px 20px;}
.auth-card{background:var(--paper-raised); border:1px solid var(--hairline); border-radius:20px; padding:44px 40px; width:100%; max-width:420px; box-shadow:0 12px 40px rgba(28,27,23,0.06);}
.auth-brand{display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:28px;}
.auth-brand img{height:44px; margin-bottom:14px;}
.auth-brand h1{font-size:1.5rem; margin-bottom:2px;}
.auth-brand p{color:var(--ink-dim); font-size:0.85rem; margin:0;}
.auth-switch{text-align:center; margin-top:20px; font-size:0.9rem; color:var(--ink-dim);}
.auth-switch a{color:var(--forest); font-weight:600; text-decoration:underline;}

/* ---------- global form styling (login, register, checkout, contact, account) ---------- */
label{display:block; font-size:0.85rem; font-weight:600; margin-bottom:18px; color:var(--ink);}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],
input[type=tel],input[type=url],input[type=date],select,textarea{
  width:100%; margin-top:7px; padding:13px 15px; border:1.5px solid var(--hairline); border-radius:10px;
  font-family:inherit; font-size:0.94rem; background:var(--paper-raised); color:var(--ink);
  transition:border-color 0.15s ease;
}
textarea{resize:vertical; min-height:120px;}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--leaf-bright); box-shadow:0 0 0 3px rgba(95,162,51,0.12);}
input::placeholder,textarea::placeholder{color:#a8a296;}
img{max-width:100%; display:block;}
.wrap{max-width:1240px; margin:0 auto; padding:0 24px;}
button{font-family:inherit; cursor:pointer;}

/* ---------- animated leaf mark (brand) ---------- */
.leaf-spin{width:20px;height:20px;border-radius:50%;border:2px dashed var(--leaf-bright); display:inline-block; animation:spin 10s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- top announce bar ---------- */
.announce{background:var(--forest); color:#fff; text-align:center; font-size:0.78rem; letter-spacing:0.03em; padding:8px 12px;}

/* ---------- floating animated icon particles (admin-controlled) ---------- */
.icon-particles{position:fixed; inset:0; z-index:5; overflow:hidden; pointer-events:none;}
.icon-particle{
  position:absolute; bottom:-60px; opacity:0;
  animation-name:iconRise; animation-timing-function:ease-in; animation-iteration-count:infinite;
  filter:drop-shadow(0 2px 4px rgba(28,27,23,0.08));
}
@keyframes iconRise{
  0%{ transform:translate(0,0) rotate(0deg); opacity:0; }
  8%{ opacity:0.5; }
  92%{ opacity:0.3; }
  100%{ transform:translate(var(--drift), -115vh) rotate(var(--rot)); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .icon-particle{animation:none; display:none;}
}

/* ---------- header / nav ---------- */
.site-header{background:var(--paper-raised); border-bottom:1px solid var(--hairline); position:sticky; top:0; z-index:100;}
.nav-inner{display:flex; align-items:center; gap:26px; padding:16px 0;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Pacifico',cursive; font-style:normal; font-size:1.5rem;}
.brand img{height:32px;}
.main-nav{display:flex; gap:22px; flex:1;}
.main-nav a{font-size:0.92rem; font-weight:500; color:var(--ink-dim); transition:color 0.15s ease; position:relative;}
.main-nav a:hover{color:var(--forest);}
.main-nav a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:1.5px;background:var(--leaf-bright);transition:width 0.2s ease;}
.main-nav a:hover::after{width:100%;}
.nav-actions{display:flex; align-items:center; gap:16px;}
.icon-btn{position:relative; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:background 0.15s ease, transform 0.15s ease;}
.icon-btn:hover{background:rgba(95,162,51,0.1); transform:translateY(-1px);}
.icon-btn svg{width:20px; height:20px; stroke:var(--ink); fill:none; stroke-width:1.8;}
.cart-count{position:absolute; top:-2px; right:-2px; background:var(--rust); color:#fff; font-size:0.65rem; font-weight:700; min-width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 3px; animation:pop 0.3s ease;}
@keyframes pop{0%{transform:scale(0);}70%{transform:scale(1.3);}100%{transform:scale(1);}}
.mobile-toggle{display:none; background:none; border:none; font-size:1.4rem;}

/* ---------- hero slider ---------- */
.hero-slider{position:relative; overflow:hidden; height:82vh; min-height:460px; background:var(--forest);}
.slide{position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; display:flex; align-items:center; justify-content:flex-start;}
.slide.active{opacity:1; z-index:1;}
.slide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;}
.slide::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(20,19,15,0.72) 0%, rgba(20,19,15,0.45) 34%, rgba(20,19,15,0.08) 62%, rgba(20,19,15,0) 78%);}
.slide-content{position:relative; z-index:2; color:#fff; padding:0 5%; max-width:560px;}
.slide-content h2{font-size:clamp(2rem,4.4vw,3.2rem); font-weight:700; font-style:normal; line-height:1.12; color:#fff;}
.slide-content p{font-size:1.05rem; opacity:0.95; margin:14px 0 24px; max-width:44ch; line-height:1.6;}
.slide-dots{position:absolute; bottom:26px; left:5%; display:flex; gap:8px; z-index:3;}
.slide-dots button{width:9px; height:9px; border-radius:50%; border:1.5px solid #fff; background:transparent; opacity:0.6; padding:0;}
.slide-dots button.active{background:#fff; opacity:1;}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:999px; border:1.5px solid var(--ink); background:transparent; color:var(--ink); font-weight:600; font-size:0.88rem; transition:all 0.2s ease;}
.btn:hover{background:var(--ink); color:#fff; transform:translateY(-1px);}
.btn-solid{background:var(--leaf); border-color:var(--leaf); color:#fff;}
.btn-solid:hover{background:var(--forest); border-color:var(--forest);}
.btn-block{width:100%; justify-content:center;}
.btn[disabled]{opacity:0.5; cursor:not-allowed;}

/* ---------- section headings ---------- */
.section{padding:64px 0;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:30px;}
.section-head h2{font-style:italic; font-size:1.8rem;}
.eyebrow{font-size:0.75rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--leaf); display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.eyebrow::before{content:'';width:30px;height:1px;background:var(--leaf);}

/* ---------- category tiles ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.cat-tile{position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:3/4; background:#eee;}
.cat-tile img{width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease;}
.cat-tile:hover img{transform:scale(1.06);}
.cat-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg, rgba(28,27,23,0.6), transparent 55%);}
.cat-tile span{position:absolute; left:16px; bottom:16px; color:#fff; font-family:'Playfair Display',serif; font-style:italic; font-size:1.2rem; z-index:2;}

/* ---------- shop sidebar filters ---------- */
.shop-layout{display:grid; grid-template-columns:250px 1fr; gap:36px; align-items:start;}
.shop-sidebar{background:var(--paper-raised); border:1px solid var(--hairline); border-radius:var(--radius); padding:22px; position:sticky; top:100px;}
.filter-block{padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--hairline);}
.filter-block:last-of-type{border-bottom:none; margin-bottom:8px;}
.filter-title{font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:12px; color:var(--ink);}
.filter-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px;}
.filter-list a{display:block; padding:6px 0; font-size:0.88rem; color:var(--ink-dim); transition:color 0.15s ease;}
.filter-list a:hover{color:var(--forest);}
.filter-list a.active{color:var(--forest); font-weight:600;}
.filter-check{display:flex; align-items:center; gap:9px; font-size:0.88rem; color:var(--ink-dim); padding:6px 0; cursor:pointer;}
.filter-check input{width:auto; margin:0;}
.filter-swatch{width:16px; height:16px; border-radius:50%; border:1px solid var(--hairline); display:inline-block;}

/* ---------- product grid & cards ---------- */
.product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
.product-card{position:relative; background:var(--paper-raised); border-radius:var(--radius); overflow:hidden; border:1px solid var(--hairline); transition:box-shadow 0.2s ease, transform 0.2s ease;}
.product-card:hover{box-shadow:0 10px 30px rgba(28,27,23,0.08); transform:translateY(-3px);}
.product-thumb{position:relative; aspect-ratio:3/4; overflow:hidden; background:#f1efe8;}
.product-thumb img{width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease;}
.product-card:hover .product-thumb img{transform:scale(1.05);}
.product-badge{position:absolute; top:10px; left:10px; background:var(--rust); color:#fff; font-size:0.68rem; font-weight:700; padding:4px 10px; border-radius:999px; z-index:2;}
.quick-add{position:absolute; right:10px; bottom:10px; width:38px; height:38px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; border:1px solid var(--hairline); opacity:0; transform:translateY(6px); transition:all 0.2s ease; z-index:2;}
.product-card:hover .quick-add{opacity:1; transform:translateY(0);}
.quick-add svg{width:17px;height:17px;stroke:var(--forest);fill:none;stroke-width:2;}
.quick-add:hover{background:var(--leaf);}
.quick-add:hover svg{stroke:#fff;}
.product-info{padding:16px 16px 18px;}
.product-info .cat{font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-dim);}
.product-info h4{font-size:0.98rem; font-style:italic; margin:4px 0 6px;}
.price-row{display:flex; align-items:center; gap:8px; font-size:0.95rem;}
.price-row .old{text-decoration:line-through; color:var(--ink-dim); font-size:0.85rem;}
.price-row .now{font-weight:600; color:var(--forest);}

/* ---------- product detail ---------- */
.product-detail{display:grid; grid-template-columns:1fr 1fr; gap:50px; padding:44px 0;}
.gallery-main{border-radius:var(--radius); overflow:hidden; aspect-ratio:1/1.1; background:#f1efe8; margin-bottom:14px;}
.gallery-main img{width:100%; height:100%; object-fit:cover;}
.gallery-thumbs{display:flex; gap:10px; flex-wrap:wrap;}
.gallery-thumbs img{width:70px; height:70px; object-fit:cover; border-radius:9px; border:1.5px solid transparent; cursor:pointer; opacity:0.75; transition:all 0.15s ease;}
.gallery-thumbs img:hover, .gallery-thumbs img.active{opacity:1; border-color:var(--leaf-bright);}
.pd-cat{font-size:0.8rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--leaf);}
.pd-title{font-size:2rem; font-style:italic; margin:6px 0 12px;}
.pd-price{font-size:1.4rem; font-weight:600; color:var(--forest); margin-bottom:16px;}
.pd-price .old{text-decoration:line-through; color:var(--ink-dim); font-size:1rem; margin-right:8px; font-weight:400;}
.pd-short{color:var(--ink-dim); line-height:1.7; margin-bottom:22px;}
.option-group{margin-bottom:22px;}
.option-label{font-size:0.82rem; font-weight:600; margin-bottom:10px; text-transform:uppercase; letter-spacing:0.03em;}
.swatches{display:flex; gap:10px; flex-wrap:wrap;}
.swatch{width:34px; height:34px; border-radius:50%; border:2px solid var(--hairline); cursor:pointer; position:relative; transition:transform 0.15s ease;}
.swatch:hover{transform:scale(1.1);}
.swatch.selected{border-color:var(--ink); box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink);}
.size-pill{padding:9px 16px; border-radius:999px; border:1.5px solid var(--hairline); font-size:0.85rem; font-weight:600; cursor:pointer; transition:all 0.15s ease;}
.size-pill:hover{border-color:var(--leaf);}
.size-pill.selected{background:var(--ink); border-color:var(--ink); color:#fff;}
.size-pill.disabled{opacity:0.35; cursor:not-allowed; text-decoration:line-through;}
.qty-stepper{display:inline-flex; align-items:center; border:1.5px solid var(--hairline); border-radius:999px; overflow:hidden;}
.qty-stepper button{width:38px; height:42px; background:none; border:none; font-size:1.1rem;}
.qty-stepper input{
  width:44px;
  height:42px;
  margin:0;
  padding:0;
  border:none;
  text-align:center;
  font-size:0.95rem;
  background:transparent;
  line-height:42px;
}
.pd-actions{display:flex; gap:12px; margin-top:24px; align-items:center;}
.stock-note{font-size:0.82rem; margin-top:10px;}
.stock-in{color:var(--forest);}
.stock-out{color:var(--rust);}
.pd-tabs{margin-top:50px; border-top:1px solid var(--hairline); padding-top:30px;}
.pd-tabs table{width:100%; border-collapse:collapse; margin:14px 0;}
.pd-tabs table td, .pd-tabs table th{border:1px solid var(--hairline); padding:8px 12px; font-size:0.9rem;}

/* ---------- mini cart popup ---------- */
.mini-cart-overlay{position:fixed; inset:0; background:rgba(28,27,23,0.4); z-index:200; opacity:0; pointer-events:none; transition:opacity 0.2s ease;}
.mini-cart-overlay.open{opacity:1; pointer-events:auto;}
.mini-cart{position:fixed; top:0; right:0; width:400px; max-width:92vw; height:100vh; background:var(--paper-raised); z-index:201; transform:translateX(100%); transition:transform 0.3s cubic-bezier(.2,.8,.2,1); display:flex; flex-direction:column;}
.mini-cart.open{transform:translateX(0);}
.mc-head{display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--hairline);}
.mc-close{background:none; border:none; font-size:1.3rem;}
.mc-body{flex:1; overflow-y:auto; padding:16px 22px;}
.mc-item{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--hairline);}
.mc-item img{width:64px; height:76px; object-fit:cover; border-radius:8px;}
.mc-item .name{font-size:0.9rem; font-weight:600;}
.mc-item .variant{font-size:0.78rem; color:var(--ink-dim);}
.mc-item .remove-item{font-size:0.78rem; color:var(--rust); margin-top:6px; display:inline-block;}
.mc-foot{padding:18px 22px; border-top:1px solid var(--hairline);}
.mc-added-note{background:rgba(95,162,51,0.12); color:var(--forest); padding:12px 16px; border-radius:9px; font-size:0.88rem; margin-bottom:14px; display:flex; align-items:center; gap:8px;}

/* ---------- cart & checkout pages ---------- */
.cart-table{width:100%; border-collapse:collapse;}
.cart-table td{padding:16px 8px; border-bottom:1px solid var(--hairline); vertical-align:middle;}
.cart-table img{width:70px; height:82px; object-fit:cover; border-radius:8px;}
.checkout-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:44px; align-items:start;}
.summary-box{background:var(--paper-raised); border:1px solid var(--hairline); border-radius:var(--radius); padding:24px; position:sticky; top:100px;}
.summary-row{display:flex; justify-content:space-between; font-size:0.92rem; padding:8px 0;}
.summary-row.total{font-size:1.15rem; font-weight:700; border-top:1px solid var(--hairline); margin-top:8px; padding-top:14px;}
.pay-option{display:flex; align-items:center; gap:12px; border:1.5px solid var(--hairline); border-radius:11px; padding:14px 16px; margin-bottom:10px; cursor:pointer; transition:border 0.15s ease;}
.pay-option:hover{border-color:var(--leaf);}
.pay-option.selected{border-color:var(--leaf); background:rgba(95,162,51,0.06);}

/* ---------- footer ---------- */
.site-footer{background:#231f18; color:#e9e5d8; padding:60px 0 24px; margin-top:70px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.1);}
.footer-grid h4{color:#fff; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.05em; font-family:'Poppins',sans-serif; font-weight:600;}
.footer-grid a{display:block; font-size:0.87rem; color:#c9c4b4; padding:5px 0; transition:color 0.15s ease;}
.footer-grid a:hover{color:var(--leaf-bright);}
.footer-bottom{display:flex; justify-content:space-between; padding-top:20px; font-size:0.78rem; color:#9a9686; flex-wrap:wrap; gap:10px;}

/* ---------- install app button ---------- */
.install-app-btn{
  position:fixed; left:20px; bottom:20px; z-index:150;
  display:flex; align-items:center; gap:8px;
  background:var(--leaf); color:#fff; border:none; padding:13px 20px; border-radius:999px;
  font-size:0.85rem; font-weight:600; box-shadow:0 8px 24px rgba(28,27,23,0.18);
  animation:installPulse 2.4s ease-in-out infinite;
}
@keyframes installPulse{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
.ios-install-sheet{position:fixed; inset:0; z-index:250; background:rgba(28,27,23,0.45); display:none; align-items:flex-end; justify-content:center;}
.ios-install-sheet.open{display:flex;}
.ios-install-card{background:var(--paper-raised); border-radius:20px 20px 0 0; padding:28px 26px 36px; width:100%; max-width:480px; position:relative; text-align:center;}
.ios-install-card h3{margin-bottom:10px;}
.ios-install-card p{color:var(--ink-dim); line-height:1.6;}
.ios-install-card .mc-close{position:absolute; top:14px; right:16px;}

/* ---------- toast ---------- */
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:12px 22px; border-radius:999px; font-size:0.85rem; opacity:0; pointer-events:none; transition:all 0.25s ease; z-index:300;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .product-detail{grid-template-columns:1fr; gap:26px;}
  .checkout-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .shop-layout{grid-template-columns:1fr;}
  .shop-sidebar{position:static;}
}
@media (max-width:760px){
  .main-nav{display:none; position:fixed; top:64px; left:0; right:0; background:var(--paper-raised); flex-direction:column; padding:16px 24px; border-bottom:1px solid var(--hairline); gap:4px;}
  .main-nav.open{display:flex;}
  .mobile-toggle{display:block;}
  .hero-slider{height:60vh;}
  .section{padding:44px 0;}
}