/* ==========================================================================
   PHERAN — OUT OF CLOSET  ·  base stylesheet (Phase 1)
   Append-only from Phase 2 onward.
   ========================================================================== */
:root{
  --parchment:#F0E6CE;
  --parchment-light:#FAF5E9;
  --maroon:#5E2129;
  --gold:#B08D57;
  --gold-dark:#8A6D3B;
  --walnut:#6E4B2A;
  --charcoal:#3A2E22;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'DM Sans',system-ui,sans-serif;
  color:var(--charcoal);
  background:var(--parchment);
  line-height:1.6;
}
h1,h2,h3,h4,.brand-fallback{font-family:'Playfair Display',Georgia,serif;color:var(--charcoal);}
a{color:var(--maroon);text-decoration:none;}

/* ---- Buttons ---- */
.btn-gold{
  display:inline-block;background:var(--gold);color:#fff;
  padding:12px 28px;border:none;border-radius:4px;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-weight:500;letter-spacing:.03em;
  text-transform:uppercase;font-size:14px;transition:background .2s;
}
.btn-gold:hover{background:var(--gold-dark);color:#fff;}
.btn-block{width:100%;}

/* ---- Header ---- */
.site-header{background:var(--maroon);}
.header-inner{
  max-width:1200px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-logo{height:64px;width:64px;border-radius:50%;border:2px solid var(--gold);object-fit:cover;background:var(--parchment);}
.brand-fallback{color:var(--parchment);font-size:22px;letter-spacing:.06em;}
.main-nav{display:flex;gap:26px;flex-wrap:wrap;}
.main-nav a{color:var(--parchment);text-transform:uppercase;font-size:13px;letter-spacing:.08em;font-weight:500;}
.main-nav a:hover{color:var(--gold);}

/* ---- Hero ---- */
.hero{background:var(--parchment-light);padding:90px 24px;text-align:center;}
.hero-content{max-width:800px;margin:0 auto;}
.eyebrow{color:var(--gold-dark);text-transform:uppercase;letter-spacing:.22em;font-size:12px;margin-bottom:14px;}
.hero h1{font-size:52px;line-height:1.15;color:var(--maroon);margin:0 0 28px;}

/* ---- Categories ---- */
.categories{max-width:1200px;margin:0 auto;padding:70px 24px;}
.section-title{text-align:center;font-size:32px;color:var(--maroon);margin:0 0 40px;}
.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.category-tile{
  display:flex;align-items:flex-end;justify-content:center;
  min-height:220px;background:var(--parchment-light);
  border:1px solid var(--walnut);border-radius:6px;
  box-shadow:inset 0 0 0 4px rgba(176,141,87,.25);
  padding:22px;transition:transform .2s,box-shadow .2s;
}
.category-tile:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 4px rgba(176,141,87,.55);}
.category-tile span{font-family:'Playfair Display',serif;font-size:20px;color:var(--charcoal);text-align:center;}

/* ---- WhatsApp band ---- */
.whatsapp-band{
  background:var(--maroon);color:var(--parchment);
  padding:34px 24px;display:flex;align-items:center;justify-content:center;
  gap:26px;flex-wrap:wrap;text-align:center;
}
.whatsapp-band p{margin:0;max-width:520px;}

/* ---- Footer ---- */
.site-footer{background:var(--maroon);color:var(--parchment);}
.footer-inner{
  max-width:1200px;margin:0 auto;padding:48px 24px;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;
}
.footer-col h4{color:var(--gold);font-size:15px;letter-spacing:.06em;margin:0 0 14px;text-transform:uppercase;}
.footer-col a{display:block;color:var(--parchment);font-size:14px;margin-bottom:8px;opacity:.9;}
.footer-col a:hover{color:var(--gold);}
.footer-col p{font-size:14px;opacity:.9;margin:0;}
.footer-tag p{font-family:'Playfair Display',serif;color:var(--gold);font-size:18px;line-height:1.5;}
.footer-bottom{border-top:1px solid rgba(240,230,206,.2);text-align:center;padding:16px;font-size:13px;opacity:.85;}

/* ---- 404 ---- */
.notfound{max-width:700px;margin:0 auto;padding:100px 24px;text-align:center;}
.notfound h1{font-size:80px;color:var(--gold);margin:0;}

/* ---- Admin login ---- */
.admin-login-body{background:var(--maroon);display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;}
.login-card{background:var(--parchment-light);border-radius:10px;padding:40px;width:100%;max-width:380px;border-top:5px solid var(--gold);}
.login-title{text-align:center;color:var(--maroon);margin:0 0 26px;font-size:28px;}
.login-card label{display:block;font-size:13px;color:var(--charcoal);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.06em;}
.login-card input{width:100%;padding:11px 12px;border:1px solid var(--walnut);border-radius:4px;background:#fff;font-family:'DM Sans',sans-serif;font-size:15px;}
.login-card input:focus{outline:none;border-color:var(--gold);}
.login-card .btn-block{margin-top:24px;}
.login-error{background:#f6dede;color:#7a2020;border:1px solid #d9a5a5;border-radius:4px;padding:10px 12px;font-size:14px;margin-bottom:6px;}

/* ---- Admin shell ---- */
.admin-body{display:flex;min-height:100vh;margin:0;background:var(--parchment);}
.admin-sidebar{width:230px;background:var(--maroon);color:var(--parchment);flex-shrink:0;}
.admin-brand{font-family:'Playfair Display',serif;font-size:22px;color:var(--gold);padding:24px 22px;border-bottom:1px solid rgba(240,230,206,.15);}
.admin-sidebar nav{display:flex;flex-direction:column;padding:12px 0;}
.admin-sidebar nav a{color:var(--parchment);padding:12px 22px;font-size:14px;letter-spacing:.03em;}
.admin-sidebar nav a:hover{background:rgba(0,0,0,.15);color:var(--gold);}
.admin-sidebar nav a.active{background:rgba(0,0,0,.22);color:var(--gold);border-left:3px solid var(--gold);}
.admin-main{flex:1;padding:40px;}
.admin-main h1{color:var(--maroon);margin-top:0;}
.admin-note{color:var(--gold-dark);}

/* ---- Responsive ---- */
@media(max-width:820px){
  .category-grid{grid-template-columns:repeat(2,1fr);}
  .footer-inner{grid-template-columns:1fr 1fr;}
  .hero h1{font-size:38px;}
  .main-nav{gap:16px;}
}
@media(max-width:520px){
  .category-grid{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr;}
  .admin-sidebar{width:100%;}
  .admin-body{flex-direction:column;}
}

/* ===================== PHASE 2 ===================== */
.announce-bar{background:var(--gold);color:#fff;text-align:center;padding:8px;font-size:13px;letter-spacing:.04em;}
.nav-cart{position:relative;}
.cart-count{background:var(--gold);color:#fff;border-radius:10px;font-size:11px;padding:1px 7px;margin-left:6px;}
.nav-drop{position:relative;display:inline-block;}
.nav-menu{position:absolute;top:100%;left:0;background:var(--maroon);min-width:220px;padding:8px 0;display:none;z-index:40;box-shadow:0 8px 20px rgba(0,0,0,.25);}
.nav-drop:hover .nav-menu{display:block;}
.nav-menu a{display:block;padding:9px 18px;color:var(--parchment);text-transform:none;letter-spacing:normal;font-size:14px;}
.nav-menu a:hover{color:var(--gold);background:rgba(0,0,0,.15);}

.page-head{background:var(--parchment-light);text-align:center;padding:56px 24px 30px;}
.page-head h1{color:var(--maroon);font-size:40px;margin:6px 0 0;}
.subtabs{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;background:var(--parchment-light);padding:0 24px 26px;}
.subtabs a{color:var(--charcoal);font-size:15px;padding-bottom:6px;border-bottom:2px solid transparent;}
.subtabs a.active,.subtabs a:hover{color:var(--maroon);border-color:var(--gold);}

.product-grid-wrap{max-width:1200px;margin:0 auto;padding:48px 24px;}
.home-row{padding-top:20px;}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.product-card{display:block;background:var(--parchment-light);border:1px solid var(--walnut);border-radius:6px;overflow:hidden;transition:transform .2s;}
.product-card:hover{transform:translateY(-3px);}
.pc-image{position:relative;aspect-ratio:3/4;background:#e8ddc2;overflow:hidden;}
.pc-image img{width:100%;height:100%;object-fit:cover;display:block;}
.pc-noimg{display:flex;align-items:center;justify-content:center;height:100%;font-family:'Playfair Display',serif;color:var(--walnut);font-size:22px;background:#e8ddc2;}
.pc-badge{position:absolute;top:10px;left:10px;font-size:12px;padding:3px 10px;border-radius:3px;color:#fff;}
.pc-badge-low{background:var(--gold);}
.pc-badge-soldout{background:var(--charcoal);}
.pc-ribbon{position:absolute;top:10px;right:10px;background:var(--maroon);color:#fff;font-size:11px;padding:3px 9px;border-radius:3px;text-transform:uppercase;letter-spacing:.05em;}
.pc-body{padding:14px 16px;}
.pc-name{font-size:17px;margin:0 0 4px;color:var(--charcoal);}
.pc-fabric{font-size:13px;color:var(--walnut);margin:0 0 6px;}
.pc-price{color:var(--gold-dark);font-weight:500;font-size:16px;margin:0;}
.empty-note{text-align:center;color:var(--walnut);padding:40px;font-size:16px;}

.pdp{max-width:1200px;margin:0 auto;padding:48px 24px;display:grid;grid-template-columns:1fr 1fr;gap:48px;}
.pdp-main{width:100%;border-radius:8px;border:1px solid var(--walnut);object-fit:cover;aspect-ratio:3/4;}
.pdp-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.pdp-thumbs img{width:72px;height:88px;object-fit:cover;border:1px solid var(--walnut);border-radius:4px;cursor:pointer;}
.pdp-info h1{color:var(--maroon);font-size:34px;margin:6px 0 12px;}
.pdp-priceline{display:flex;align-items:center;gap:14px;margin-bottom:10px;}
.pdp-price{color:var(--gold-dark);font-size:26px;font-weight:500;}
.pdp-fabric{color:var(--walnut);margin:0 0 20px;}
.pdp-sizes{margin:18px 0;}
.pdp-sizes label{display:block;text-transform:uppercase;font-size:13px;letter-spacing:.06em;margin-bottom:8px;color:var(--charcoal);}
.size-options{display:flex;gap:10px;flex-wrap:wrap;}
.size-btn{min-width:48px;padding:10px;border:1px solid var(--walnut);background:#fff;border-radius:4px;cursor:pointer;font-family:'DM Sans',sans-serif;}
.size-btn.selected{border-color:var(--gold);background:var(--gold);color:#fff;}
.pdp-desc{margin-top:26px;border-top:1px solid var(--walnut);padding-top:18px;}
.pdp-desc h4{color:var(--maroon);margin:0 0 8px;}

.cart-wrap{max-width:820px;margin:0 auto;padding:40px 24px;}
.cart-row{display:grid;grid-template-columns:70px 1fr auto auto;gap:16px;align-items:center;border-bottom:1px solid var(--walnut);padding:14px 0;}
.cart-row img{width:70px;height:88px;object-fit:cover;border-radius:4px;}
.cart-noimg{width:70px;height:88px;font-size:14px;}
.cart-name{font-family:'Playfair Display',serif;font-size:17px;}
.cart-size{font-size:13px;color:var(--walnut);}
.cart-price{color:var(--gold-dark);}
.cart-qty{display:flex;align-items:center;gap:10px;}
.cart-qty button{width:28px;height:28px;border:1px solid var(--walnut);background:#fff;border-radius:4px;cursor:pointer;font-size:16px;}
.cart-remove{background:none;border:none;color:var(--maroon);cursor:pointer;font-size:13px;text-decoration:underline;}
.cart-summary{margin-top:24px;text-align:right;}
.cart-total{font-size:22px;color:var(--maroon);margin-bottom:16px;}
.cart-note{font-size:13px;color:var(--walnut);margin-top:10px;}

/* admin */
.admin-head-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.admin-flash{background:#e4efdd;color:#3b6d11;border:1px solid #bcd8a5;padding:10px 14px;border-radius:4px;margin-bottom:18px;}
.admin-error{background:#f6dede;color:#7a2020;border:1px solid #d9a5a5;padding:10px 14px;border-radius:4px;margin-bottom:18px;}
.admin-form{max-width:640px;}
.admin-form label{display:block;margin:16px 0 6px;font-size:14px;color:var(--charcoal);font-weight:500;}
.admin-form .hint{font-weight:400;color:var(--walnut);font-size:12px;}
.admin-form input[type=text],.admin-form input[type=number],.admin-form select,.admin-form textarea{width:100%;padding:10px 12px;border:1px solid var(--walnut);border-radius:4px;background:#fff;font-family:'DM Sans',sans-serif;font-size:15px;}
.admin-form input:focus,.admin-form select:focus,.admin-form textarea:focus{outline:none;border-color:var(--gold);}
.form-row{display:flex;gap:16px;}
.form-row>div{flex:1;}
.form-checks{display:flex;gap:24px;margin:16px 0;}
.form-checks .chk{display:flex;align-items:center;gap:8px;font-weight:400;}
.existing-imgs{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;}
.existing-imgs img{width:64px;height:80px;object-fit:cover;border:1px solid var(--walnut);border-radius:4px;}
.admin-form .btn-gold{margin-top:22px;}
.btn-cancel{margin-left:14px;color:var(--walnut);}
.table-wrap{overflow-x:auto;}
.admin-table{width:100%;border-collapse:collapse;margin-top:18px;background:#fff;border:1px solid var(--walnut);}
.admin-table th,.admin-table td{padding:10px 12px;text-align:left;border-bottom:1px solid #e5dcc4;font-size:14px;}
.admin-table th{background:var(--parchment-light);color:var(--maroon);}
.admin-thumb{width:44px;height:56px;object-fit:cover;border-radius:3px;}
.admin-actions a{margin-right:12px;}
.link-danger{background:none;border:none;color:#a32d2d;cursor:pointer;text-decoration:underline;font-size:14px;padding:0;}
.pill{font-size:12px;padding:3px 10px;border-radius:10px;}
.pill-active{background:#e4efdd;color:#3b6d11;}
.pill-draft{background:#eee;color:#666;}
.pill-sold_out{background:#f6dede;color:#7a2020;}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0 26px;max-width:640px;}
.stat-card{background:var(--parchment-light);border:1px solid var(--walnut);border-radius:8px;padding:20px;text-align:center;}
.stat-num{font-size:32px;color:var(--maroon);font-family:'Playfair Display',serif;}
.stat-label{font-size:13px;color:var(--walnut);}

@media(max-width:820px){
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .pdp{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:520px){
  .product-grid{grid-template-columns:1fr 1fr;}
  .cart-row{grid-template-columns:56px 1fr;}
  .cart-qty,.cart-remove{grid-column:2;}
}

/* ===================== PHASE 3 ===================== */
/* slimmer header + logo beside name */
.site-header.slim .header-inner{padding:10px 24px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand .brand-logo{height:48px;width:48px;border-radius:50%;border:2px solid var(--gold);object-fit:cover;background:var(--parchment);display:inline-block;}
.brand .brand-name{font-family:'Playfair Display',serif;color:var(--parchment);font-size:22px;letter-spacing:.02em;}
.site-header.slim .main-nav a,.site-header.slim .nav-drop-trigger{font-size:12px;}

/* hero with background image */
.hero.hero-image{position:relative;background-size:cover;background-position:center;padding:120px 24px;}
.hero.hero-image .hero-overlay{position:absolute;inset:0;background:rgba(94,33,41,.55);}
.hero.hero-image .hero-content{position:relative;z-index:2;}
.hero.hero-image h1{color:#fff;}
.hero.hero-image .eyebrow{color:var(--gold);}

/* category banner carousel */
.cat-carousel{position:relative;height:340px;overflow:hidden;}
.cat-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .8s ease;display:flex;align-items:flex-end;}
.cat-slide.active{opacity:1;}
.cat-caption{background:rgba(94,33,41,.75);color:#fff;padding:10px 20px;margin:24px;font-family:'Playfair Display',serif;font-size:20px;border-radius:4px;}

/* product accordions */
.accordion{margin-top:26px;border-top:1px solid var(--walnut);}
.acc{border-bottom:1px solid var(--walnut);}
.acc-head{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:16px 4px;font-family:'Playfair Display',serif;font-size:17px;color:var(--maroon);display:flex;justify-content:space-between;align-items:center;}
.acc-icon{color:var(--gold);font-size:20px;}
.acc-body{display:none;padding:0 4px 18px;color:var(--charcoal);line-height:1.7;}
.acc.open .acc-body{display:block;}
.acc.open .acc-icon{transform:rotate(45deg);display:inline-block;}

/* appearance admin */
.admin-sub{color:var(--maroon);border-bottom:1px solid #e5dcc4;padding-bottom:6px;margin:26px 0 10px;}
.appearance-preview{margin:8px 0 4px;}
.cat-img-block{background:var(--parchment-light);border:1px solid var(--walnut);border-radius:6px;padding:16px;margin-bottom:16px;max-width:760px;}
.cat-img-block h4{color:var(--maroon);margin:0 0 10px;}
.cat-img-item{display:inline-flex;flex-direction:column;align-items:center;gap:4px;}
.cat-img-item img{width:120px;height:80px;object-fit:cover;border:1px solid var(--walnut);border-radius:4px;}
.cat-img-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;}
.cat-img-form input[type=text]{flex:1;min-width:160px;padding:9px 11px;border:1px solid var(--walnut);border-radius:4px;}

@media(max-width:820px){
  .cat-carousel{height:220px;}
  .brand .brand-name{font-size:18px;}
}

/* ===================== PHASE 3.1 POLISH ===================== */
/* Header a bit taller; logo + name breathe */
.site-header.slim .header-inner{padding:16px 24px;}
.brand .brand-logo{height:62px;width:62px;}
.brand .brand-name{font-size:25px;}

/* Nav: align every item on one line (fixes "Shop" sitting lower) */
.main-nav{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.nav-drop{display:inline-flex;align-items:center;position:relative;}
.nav-drop-trigger{display:inline-flex;align-items:center;}
.site-header.slim .main-nav a,.site-header.slim .nav-drop-trigger{font-size:13px;}
.nav-menu a{align-items:flex-start;}

/* Clean full-width banner mode (no overlay, whole image shown, clickable) */
.hero-banner{display:block;width:100%;aspect-ratio:12/5;background-size:cover;background-position:center center;}
@media(max-width:820px){.hero-banner{aspect-ratio:16/11;}}

/* Lighter overlay for the text-on hero (when NOT using banner mode) */
.hero.hero-image .hero-overlay{background:rgba(94,33,41,.32);}

/* Bigger Shop-by-Category tiles with image backgrounds */
.category-tile{min-height:280px;}
.category-tile.has-bg{background-size:cover;background-position:center;box-shadow:none;border:1px solid var(--walnut);}
.category-tile.has-bg span{background:rgba(94,33,41,.72);color:#fff;padding:10px 20px;border-radius:4px;font-size:21px;}
@media(max-width:520px){.category-tile{min-height:200px;}}

/* ===================== PHASE 3.2 ===================== */
/* Clean banner shows the FULL image with no crop; Shop by Category sits below it */
.hero-banner{display:block;width:100%;line-height:0;}
.hero-banner img{display:block;width:100%;height:auto;}

/* ===================== PHASE 4a — homepage collection rows ===================== */
.home-collection{max-width:1240px;margin:0 auto;padding:30px 24px;}
.collection-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;}
.collection-head h2{font-family:'Playfair Display',serif;color:var(--maroon);font-size:28px;margin:0;}
.view-all{color:var(--gold-dark);font-size:14px;letter-spacing:.04em;white-space:nowrap;}
.collection-row{display:flex;gap:20px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory;}
.collection-row::-webkit-scrollbar{height:6px;}
.collection-row::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px;}
.collection-row .product-card{flex:0 0 240px;scroll-snap-align:start;}
@media(max-width:520px){.collection-row .product-card{flex:0 0 200px;}}

/* ===================== Category video tiles ===================== */
.cat-video-row{display:flex;gap:20px;overflow-x:auto;padding:8px 24px 18px;max-width:1240px;margin:0 auto;scroll-snap-type:x mandatory;justify-content:flex-start;}
.cat-video-row::-webkit-scrollbar{height:6px;}
.cat-video-row::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px;}
.cat-vtile{flex:0 0 230px;text-decoration:none;scroll-snap-align:start;transition:transform .2s;}
.cat-vtile:hover{transform:translateY(-4px);}
.cat-vmedia{width:230px;height:320px;border-radius:8px;overflow:hidden;border:1px solid var(--walnut);background:#e8ddc2;}
.cat-vmedia video,.cat-vmedia img{width:100%;height:100%;object-fit:cover;display:block;}
.cat-vplaceholder{display:flex;align-items:center;justify-content:center;height:100%;font-family:'Playfair Display',serif;color:var(--walnut);font-size:22px;}
.cat-vlabel{display:block;text-align:center;margin-top:12px;font-family:'Playfair Display',serif;color:var(--maroon);font-size:19px;}
@media(max-width:520px){
  .cat-video-row{gap:14px;padding:8px 16px 16px;}
  .cat-vtile{flex:0 0 160px;}
  .cat-vmedia{width:160px;height:224px;}
  .cat-vlabel{font-size:16px;}
}

/* ===================== PHASE 4b — mission + reviews ===================== */
.mission{max-width:1200px;margin:20px auto;padding:40px 24px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
.mission-img img{width:100%;border-radius:8px;display:block;object-fit:cover;}
.mission-text h2{font-family:'Playfair Display',serif;color:var(--maroon);font-size:32px;margin:0 0 16px;}
.mission-text p{color:var(--charcoal);line-height:1.85;margin:0 0 24px;}
.reviews{background:var(--parchment-light);padding:52px 24px;}
.reviews .section-title{margin-bottom:34px;}
.reviews-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.review-card{background:#fff;border:1px solid var(--walnut);border-radius:8px;padding:26px;}
.review-stars{color:var(--gold);font-size:18px;letter-spacing:2px;margin-bottom:14px;}
.review-quote{color:var(--charcoal);font-style:italic;line-height:1.7;margin:0 0 20px;}
.review-author{display:flex;align-items:center;gap:12px;}
.review-author img{width:46px;height:46px;border-radius:50%;object-fit:cover;}
.review-name{font-family:'Playfair Display',serif;color:var(--maroon);font-size:16px;}
.review-city{font-size:13px;color:var(--walnut);}
.linklike{background:none;border:none;color:var(--maroon);cursor:pointer;text-decoration:underline;font-size:14px;padding:0;margin-right:12px;}
@media(max-width:820px){
  .mission{grid-template-columns:1fr;gap:26px;}
  .reviews-grid{grid-template-columns:1fr;}
}

/* ===================== PHASE 4c — Shop the Look ===================== */
.shop-the-look{max-width:1240px;margin:0 auto;padding:34px 24px;}
.look-row{display:flex;gap:20px;overflow-x:auto;padding:4px 0 12px;scroll-snap-type:x mandatory;}
.look-row::-webkit-scrollbar{height:6px;}
.look-row::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px;}
.look-tile{flex:0 0 270px;aspect-ratio:9/13;border-radius:8px;overflow:hidden;border:1px solid var(--walnut);background:#e8ddc2;scroll-snap-align:start;}
.look-tile video{width:100%;height:100%;object-fit:cover;display:block;}
/* tidy category label wrapping */
.cat-vlabel{word-break:normal;overflow-wrap:break-word;line-height:1.3;padding:0 6px;}
@media(max-width:520px){.look-tile{flex:0 0 200px;}}

/* ===================== PHASE 4d — collection toggle buttons ===================== */
.btn-toggle{background:#fff;border:1px solid var(--walnut);color:var(--maroon);padding:6px 14px;border-radius:4px;cursor:pointer;font-size:13px;white-space:nowrap;}
.btn-toggle:hover{border-color:var(--gold);}
.btn-toggle.on{background:var(--gold);border-color:var(--gold);color:#fff;}

/* ===================== PHASE 5 — checkout ===================== */
.checkout-wrap{max-width:1000px;margin:0 auto;padding:30px 24px 60px;}
.checkout-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start;}
.checkout-form h3,.checkout-side h3{font-family:'Playfair Display',serif;color:var(--maroon);margin:0 0 16px;}
.checkout-form label{display:block;margin:14px 0 6px;font-size:14px;color:var(--charcoal);}
.checkout-form input,.checkout-form textarea{width:100%;padding:11px 12px;border:1px solid var(--walnut);border-radius:4px;background:#fff;font-family:'DM Sans',sans-serif;font-size:15px;}
.checkout-form input:focus,.checkout-form textarea:focus{outline:none;border-color:var(--gold);}
.checkout-form .btn-block{margin-top:22px;}
.checkout-side{background:var(--parchment-light);border:1px solid var(--walnut);border-radius:8px;padding:24px;}
.co-line{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #e5dcc4;font-size:14px;gap:12px;}
.co-total{display:flex;justify-content:space-between;padding-top:14px;font-size:18px;color:var(--maroon);font-weight:500;}
.confirm-wrap{max-width:560px;margin:0 auto;padding:60px 24px;text-align:center;}
.confirm-card{background:var(--parchment-light);border:1px solid var(--walnut);border-radius:10px;padding:40px;}
.confirm-card h1{color:var(--maroon);margin:0 0 12px;}
.confirm-num{font-size:18px;margin-bottom:20px;}
.confirm-home{display:inline-block;margin-top:20px;color:var(--maroon);}
.order-meta{background:var(--parchment-light);border:1px solid var(--walnut);border-radius:8px;padding:18px;line-height:1.9;max-width:640px;}
.pill-status-new{background:#e4efdd;color:#3b6d11;}
.pill-status-contacted{background:#fdf0d5;color:#8a6d1b;}
.pill-status-closed{background:#e3e3e3;color:#555;}
.pill-status-cancelled{background:#f6dede;color:#7a2020;}
@media(max-width:820px){.checkout-grid{grid-template-columns:1fr;}}

/* ===================== PHASE 6 — reviews + notify ===================== */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;}
.pdp-rating{margin:2px 0 12px;}
.pdp-rating .stars{color:var(--gold);letter-spacing:2px;}
.pdp-rating .rating-count{color:var(--walnut);font-size:14px;margin-left:6px;}
.pdp-flash{background:#e4efdd;color:#3b6d11;border:1px solid #bcd8a5;padding:10px 14px;border-radius:4px;margin:12px 0;}
.notify-form{margin:8px 0;}
.notify-label{color:var(--walnut);margin:0 0 8px;}
.notify-form input[type=text]{width:100%;padding:11px 12px;border:1px solid var(--walnut);border-radius:4px;margin-bottom:10px;background:#fff;font-family:'DM Sans',sans-serif;}
.pdp-reviews{max-width:1000px;margin:0 auto;padding:10px 24px 50px;}
.pdp-reviews-list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:34px;}
.pdp-reviews-list .review-card{background:var(--parchment-light);}
.review-photo{max-width:120px;border-radius:6px;margin:8px 0;display:block;}
.review-form-wrap{background:var(--parchment-light);border:1px solid var(--walnut);border-radius:8px;padding:26px;max-width:560px;}
.review-form-wrap h3{font-family:'Playfair Display',serif;color:var(--maroon);margin:0 0 8px;}
.review-form label{display:block;margin:12px 0 6px;font-size:14px;}
.review-form input[type=text],.review-form textarea,.review-form select{width:100%;padding:10px 12px;border:1px solid var(--walnut);border-radius:4px;background:#fff;font-family:'DM Sans',sans-serif;font-size:15px;}
.review-form .btn-gold{margin-top:16px;}
@media(max-width:640px){.pdp-reviews-list{grid-template-columns:1fr;}}

/* ===================== PHASE 7 — dashboard links + clear category banners ===================== */
a.stat-card{text-decoration:none;transition:transform .15s,box-shadow .15s;}
a.stat-card:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(94,33,41,.12);}
a.stat-card .stat-label{color:var(--walnut);}

/* Category-page cover banner: show the FULL image (no cropping) */
.cat-slide{background-size:contain;background-repeat:no-repeat;background-color:var(--parchment-light);}

/* Rich-text description rendering on the product page */
.acc-body ul{margin:0 0 10px 20px;list-style:disc;}
.acc-body ol{margin:0 0 10px 20px;list-style:decimal;}
.acc-body p{margin:0 0 10px;}

/* ===================== PHASE 8 — category cover + product image manager ===================== */
.cat-cover{width:100%;height:380px;background-size:cover;background-position:center;}
@media(max-width:820px){.cat-cover{height:220px;}}
.cat-cover-admin{background:#fff;border:1px solid var(--walnut);border-radius:6px;padding:12px;margin-bottom:8px;}
.img-manage-grid{display:flex;flex-wrap:wrap;gap:16px;}
.img-manage-card{background:var(--parchment-light);border:1px solid var(--walnut);border-radius:6px;padding:10px;text-align:center;width:132px;}
.img-manage-card img{width:112px;height:142px;object-fit:cover;border-radius:4px;display:block;margin-bottom:8px;}
.img-manage-row{display:flex;align-items:center;gap:6px;justify-content:center;margin-bottom:6px;}
.img-manage-row label{font-size:13px;margin:0;}
.img-manage-row input{width:64px;padding:5px;border:1px solid var(--walnut);border-radius:4px;}
.chk-del{font-size:13px;color:#a32d2d;display:flex;gap:5px;align-items:center;justify-content:center;}

/* ===================== PHASE 10 — product page cleanup ===================== */
/* Long descriptions/policies scroll inside the accordion instead of stretching the page */
.acc.open .acc-body{max-height:360px;overflow-y:auto;padding-right:10px;}
.acc.open .acc-body::-webkit-scrollbar{width:6px;}
.acc.open .acc-body::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px;}

/* Tidy product info spacing */
.pdp-info h1{margin-top:2px;}
.pdp .accordion{margin-top:22px;}

/* Reviews section: centred and balanced */
.pdp-reviews{text-align:center;}
.pdp-reviews .section-title{margin-bottom:24px;}
.pdp-reviews-list{max-width:900px;margin:0 auto 30px;text-align:left;}
.pdp-reviews .review-form-wrap{margin:0 auto;text-align:left;}
.pdp-reviews .empty-note{margin-bottom:24px;}

/* Gallery: keep the main image from getting overly tall */
.pdp-main{max-height:620px;object-fit:cover;}
@media(min-width:821px){
  .pdp-gallery{position:sticky;top:16px;align-self:start;}
}

/* ===================== PHASE 11 — full images + lightbox ===================== */
/* Product main image: show the WHOLE photo (face visible), click to zoom */
.pdp-main{aspect-ratio:auto;height:auto;max-height:80vh;object-fit:contain;background:#efe7d8;cursor:zoom-in;}
/* Thumbnails, category tiles and product cards: crop from the bottom so the face stays */
.pdp-thumbs img{object-position:top center;}
.cat-vmedia img{object-position:top center;}
.pc-image img{object-position:top center;}

/* Lightbox overlay */
.lightbox{display:none;position:fixed;inset:0;background:rgba(30,20,15,.93);z-index:1000;align-items:center;justify-content:center;}
.lightbox.open{display:flex;}
.lb-img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:6px;box-shadow:0 12px 44px rgba(0,0,0,.55);}
.lb-close{position:absolute;top:16px;right:22px;background:none;border:none;color:#fff;font-size:40px;line-height:1;cursor:pointer;}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:none;color:#fff;font-size:44px;width:56px;height:56px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.lb-prev{left:20px;}
.lb-next{right:20px;}
.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.32);}
@media(max-width:520px){
  .lb-prev,.lb-next{width:44px;height:44px;font-size:32px;}
  .lb-prev{left:10px;}.lb-next{right:10px;}
}

/* ===================== PHASE 9 — content + videos + tile grid ===================== */
.content-page{max-width:820px;margin:0 auto;padding:30px 24px 60px;line-height:1.9;color:var(--charcoal);}
.content-page h2,.content-page h3{font-family:'Playfair Display',serif;color:var(--maroon);margin:24px 0 10px;}
.content-page p{margin:0 0 14px;}
.content-page ul,.content-page ol{margin:0 0 14px 22px;}

.videos-wrap{max-width:1120px;margin:0 auto;padding:30px 24px;}
.videos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;}
.video-card{background:var(--parchment-light);border:1px solid var(--walnut);border-radius:8px;overflow:hidden;}
.video-frame{position:relative;padding-top:56.25%;}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-link{display:block;padding:48px 20px;text-align:center;color:var(--maroon);font-size:16px;background:#efe6d0;}
.video-title{padding:12px 16px;font-family:'Playfair Display',serif;color:var(--charcoal);}

/* Shop by Category: responsive grid — every tile fully visible, no half-cut, no scroll */
.cat-video-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;overflow:visible;scroll-snap-type:none;}
.cat-vtile{flex:none;}
.cat-vmedia{width:100%;height:auto;aspect-ratio:3/4;}

/* ===================== PHASE 12 — 2-column gallery + left thumbnails ===================== */
.pdp-gallery{display:flex;gap:12px;align-items:flex-start;}
.pdp-thumb-col{display:flex;flex-direction:column;gap:10px;flex:0 0 66px;}
.pdp-thumb-col .pdp-thumb{width:66px;height:86px;object-fit:cover;object-position:top center;border:1px solid var(--walnut);border-radius:4px;cursor:pointer;transition:border-color .15s;}
.pdp-thumb-col .pdp-thumb:hover{border-color:var(--gold);}
.pdp-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pdp-grid-img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top center;border-radius:6px;cursor:zoom-in;border:1px solid #e3d8bc;background:#efe7d8;}
@media(min-width:821px){
  .pdp-gallery{position:static;}
  .pdp-info{position:sticky;top:16px;align-self:start;}
}
@media(max-width:820px){
  .pdp-thumb-col{display:none;}
}
@media(max-width:520px){
  .pdp-grid{grid-template-columns:1fr;}
}

/* ===================== PHASE 13 — bigger gallery tiles + lightbox on top ===================== */
/* Give the image column more width so the 2-column tiles are large (like the reference) */
@media(min-width:821px){
  .pdp{grid-template-columns:1.55fr 1fr;}
}
/* Make each grid tile taller/larger and keep faces */
.pdp-grid{gap:12px;}
.pdp-grid-img{aspect-ratio:3/4;}
.pdp-thumb-col{flex:0 0 72px;}
.pdp-thumb-col .pdp-thumb{width:72px;height:94px;}
/* Ensure the lightbox always sits above the header and everything else */
.lightbox{z-index:9999;}

/* ===================== PHASE 14 — responsive (laptop / tablet / mobile) ===================== */
/* Hamburger button — hidden on desktop, shown on tablet/phone */
.nav-toggle{display:none;background:none;border:none;color:var(--parchment);font-size:30px;line-height:1;cursor:pointer;padding:2px 6px;}

/* ---------- Tablet landscape (≤1024px) ---------- */
@media(max-width:1024px){
  .pdp{grid-template-columns:1fr;}
  .pdp-info{position:static;}
  .mission{grid-template-columns:1fr;gap:24px;}
  .videos-grid{grid-template-columns:1fr 1fr;}
}

/* ---------- Tablet portrait + phone (≤820px) ---------- */
@media(max-width:820px){
  /* Header → hamburger dropdown */
  .header-inner{flex-wrap:wrap;align-items:center;padding:12px 16px;}
  .nav-toggle{display:block;margin-left:auto;}
  .brand .brand-name{font-size:19px;}
  .brand .brand-logo{height:46px;width:46px;}
  .main-nav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;margin-top:8px;}
  .main-nav.open{display:flex;}
  .main-nav > a,.main-nav .nav-drop{width:100%;}
  .main-nav > a,.main-nav .nav-drop-trigger{padding:13px 4px;border-top:1px solid rgba(240,230,206,.18);font-size:15px;}
  .nav-menu{display:none !important;}

  /* Headings smaller */
  .section-title{font-size:26px;}
  .hero h1{font-size:30px;}
  .mission-text h2{font-size:26px;}
  .collection-head h2{font-size:22px;}
  .page-head h1{font-size:30px;}
  .hero{padding:40px 20px;}

  /* Shop by Category → 3 per row */
  .cat-video-row{grid-template-columns:repeat(3,1fr);gap:14px;padding:6px 16px 14px;}
  .cat-vlabel{font-size:15px;margin-top:8px;}

  /* Product rows → smaller cards */
  .home-collection{padding:22px 16px;}
  .collection-row{gap:14px;}
  .collection-row .product-card{flex:0 0 168px;}

  /* Category/shop grids → 2 per row */
  .product-grid{grid-template-columns:1fr 1fr;gap:14px;}

  /* Shop the Look → smaller tiles */
  .look-row{gap:14px;}
  .look-tile{flex:0 0 190px;}

  /* Reviews / mission / bands spacing */
  .reviews{padding:34px 16px;}
  .reviews-grid{grid-template-columns:1fr;}
  .mission{padding:26px 16px;}
  .whatsapp-band{padding:32px 18px;}

  /* Footer tighter */
  .site-footer{padding:34px 18px 20px;}
  .footer-inner{gap:26px;}
}

/* ---------- Phone (≤520px) ---------- */
@media(max-width:520px){
  /* Shop by Category → 2 per row (as requested) */
  .cat-video-row{grid-template-columns:1fr 1fr;}
  .section-title{font-size:23px;}
  .hero h1{font-size:26px;}
  .page-head h1{font-size:26px;}
  .collection-row .product-card{flex:0 0 152px;}
  .look-tile{flex:0 0 165px;}
  .pc-name{font-size:14px;line-height:1.3;}
  .pc-fabric{font-size:12px;}
  .pc-price{font-size:14px;}
}

/* ===================== PHASE 15 — compact footer (mobile/tablet) ===================== */
@media(max-width:820px){
  /* Footer columns 2-across, tighter */
  .footer-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px 20px;
    padding:28px 18px 18px;
  }
  /* "About" text block spans both columns (it is wider) */
  .footer-col:first-child{grid-column:1 / -1;}
  /* Tagline block spans both columns */
  .footer-tag{grid-column:1 / -1;margin-top:4px;}
  /* Headings + links smaller and tighter */
  .footer-col h4{font-size:15px;margin-bottom:8px;}
  .footer-inner a{font-size:14px;line-height:1.7;}
  .footer-inner p{font-size:14px;line-height:1.6;}
  /* Copyright row */
  .footer-bottom{padding:14px 16px;font-size:13px;}
}

/* Phones: keep 2 columns but even tighter */
@media(max-width:520px){
  .footer-inner{gap:18px 16px;padding:24px 16px 14px;}
  .footer-col h4{font-size:14px;}
  .footer-inner a,.footer-inner p{font-size:13px;}
}

/* ===================== PHASE 16 — floating WhatsApp button ===================== */
.wa-float{position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.28);z-index:900;transition:transform .15s;}
.wa-float:hover{transform:scale(1.06);}
.wa-float svg{width:32px;height:32px;fill:#fff;}
@media(max-width:520px){.wa-float{right:14px;bottom:14px;width:52px;height:52px;}.wa-float svg{width:30px;height:30px;}}

/* ===================== PHASE 17 — hero slideshow + video popup ===================== */
.hero-slideshow{position:relative;width:100%;aspect-ratio:12/5;overflow:hidden;}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease;display:block;}
.hero-slide.active{opacity:1;}
@media(max-width:820px){.hero-slideshow{aspect-ratio:16/10;}}

.video-lightbox{display:none;position:fixed;inset:0;background:rgba(30,20,15,.93);z-index:9999;align-items:center;justify-content:center;}
.video-lightbox.open{display:flex;}
.vlb-video{max-width:92vw;max-height:88vh;border-radius:8px;box-shadow:0 12px 44px rgba(0,0,0,.55);background:#000;}
.vlb-close{position:absolute;top:16px;right:22px;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:32px;width:52px;height:52px;border-radius:50%;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.vlb-prev,.vlb-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:none;color:#fff;font-size:44px;width:56px;height:56px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.vlb-prev{left:20px;}
.vlb-next{right:20px;}
.vlb-prev:hover,.vlb-next:hover,.vlb-close:hover{background:rgba(255,255,255,.32);}
.look-tile{cursor:pointer;}
@media(max-width:520px){.vlb-prev,.vlb-next{width:44px;height:44px;font-size:32px;}.vlb-prev{left:10px;}.vlb-next{right:10px;}}

/* ===================== PHASE 18 — premium tiles + mobile spacing ===================== */

/* ---------- Premium product cards (New Arrivals / Best Sellers / Pheran Luxe / shop / related) ---------- */
.product-card{
  border-radius:14px;
  overflow:hidden;
  border:1px solid #ece2ca;
  box-shadow:0 2px 12px rgba(94,33,41,.06);
  transition:transform .25s ease, box-shadow .25s ease;
  background:#fff;
}
.product-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 36px rgba(94,33,41,.17);
}
.product-card img{transition:transform .6s ease;display:block;}
.product-card:hover img{transform:scale(1.06);}

/* ---------- Premium category tiles ---------- */
.cat-vtile{text-decoration:none;transition:transform .25s ease;}
.cat-vmedia{
  overflow:hidden;
  border:1px solid #e6dcc0;
  box-shadow:0 2px 12px rgba(94,33,41,.06);
  transition:box-shadow .25s ease;
}
.cat-vtile:hover{transform:translateY(-6px);}
.cat-vtile:hover .cat-vmedia{box-shadow:0 18px 36px rgba(94,33,41,.17);}
.cat-vmedia img{transition:transform .6s ease;}
.cat-vtile:hover .cat-vmedia img{transform:scale(1.06);}
/* subtle gold accent under each category label */
.cat-vlabel::after{
  content:"";
  display:block;
  width:30px;height:2px;
  background:var(--gold);
  border-radius:2px;
  margin:7px auto 0;
  opacity:.7;
}

/* ---------- Mobile spacing: tighten hero → Shop by Category → New Arrivals ---------- */
@media(max-width:820px){
  .categories{padding:14px 16px 6px;}
  .categories .section-title{margin:6px 0 16px;}
  .home-collection{padding:16px 16px 22px;}
  .cat-video-row{padding-top:2px;padding-bottom:6px;}
  /* let the hero sit flush under the header */
  .hero-banner,.hero-slideshow{margin-top:0;}
}

/* ===================== PHASE 18.1 — close mobile hero→category gap ===================== */
@media(max-width:820px){
  /* ROOT CAUSE: .hero-banner had aspect-ratio:16/11 (line 297) while its <img> is height:auto.
     For a wide banner the image only fills the top of that box, so the aspect-ratio forced the
     <a> taller than the image — leaving an empty parchment band below it. Let the anchor hug the image. */
  .hero-banner{aspect-ratio:auto !important;}
  /* Safe spacing tighteners (belt-and-braces) */
  .categories{padding-top:6px !important; margin-top:0 !important;}
  .categories .section-title,
  .section-title{margin-top:8px !important;}
  .hero,.hero-banner,.hero-slideshow{margin-bottom:0 !important;}
}