@import url("fonts.css");

:root{
  --navy:#16233b;
  --gray-bg:#f3f4f6;
  --border:#e4e7eb;
  --border-2:#d7dbe0;
  --muted:#5b6472;
  --muted-2:#9aa2ac;
  --text:#333c46;
  --accent:#b08968;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Courier New',monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:#fff;font-family:var(--sans);color:#1c2531;min-height:100vh;display:flex;flex-direction:column;}
a{color:var(--navy);text-decoration:none;}
a:hover{color:var(--muted);}
::placeholder{color:var(--muted-2);}
img{max-width:100%;display:block;}
button{font-family:inherit;}

.wrap{max-width:1240px;margin:0 auto;padding:0 24px;}

/* top bar */
.topbar{background:var(--navy);color:#f3f4f6;font-size:13px;text-align:center;padding:9px 16px;letter-spacing:0.02em;}

/* header */
header.site{border-bottom:1px solid var(--border);position:sticky;top:0;background:#ffffffee;backdrop-filter:blur(6px);z-index:40;}
.header-inner{max-width:1240px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.logo{background:none;border:none;cursor:pointer;padding:0;font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:0.04em;color:var(--navy);}
nav.main-nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
nav.main-nav a{background:none;border:none;cursor:pointer;padding:0 0 4px;font-size:14px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;}
nav.main-nav a:hover{color:var(--navy);}
nav.main-nav a.active{font-weight:700;color:var(--navy);border-bottom:2px solid var(--navy);}
.cart-btn{background:var(--navy);color:#fff;border:none;border-radius:2px;padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;}
.cart-badge{background:#fff;color:var(--navy);border-radius:50%;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;}
.menu-toggle{display:none;background:none;border:1px solid var(--border-2);border-radius:2px;padding:8px 10px;cursor:pointer;font-size:16px;}

@media (max-width:900px){
  nav.main-nav{display:none;flex-direction:column;align-items:flex-start;width:100%;padding:16px 0 4px;gap:14px;}
  nav.main-nav.open{display:flex;}
  .header-inner{flex-wrap:wrap;}
  .menu-toggle{display:inline-block;}
}

main{flex:1;}

/* hero */
.hero{background:var(--gray-bg);border-bottom:1px solid var(--border);}
.hero-inner{max-width:1240px;margin:0 auto;padding:70px 24px 80px;display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:0.14em;color:var(--muted);text-transform:uppercase;margin-bottom:18px;}
h1{font-family:var(--serif);font-size:52px;line-height:1.12;font-weight:600;color:var(--navy);margin:0 0 22px;}
.hero-inner p{font-size:17px;line-height:1.7;color:var(--muted);max-width:480px;margin:0 0 32px;}
.hero-photo{aspect-ratio:5/4;border:1px solid var(--border-2);overflow:hidden;}
.hero-photo img{width:100%;height:100%;object-fit:cover;}

.btn{display:inline-block;border:none;padding:14px 28px;font-size:15px;font-weight:600;cursor:pointer;text-align:center;}
.btn-primary{background:var(--navy);color:#fff;}
.btn-outline{background:transparent;color:var(--navy);border:1px solid var(--navy);}
.btn-sm{padding:9px 14px;font-size:13px;}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;}

/* trust strip */
.trust-strip{border-bottom:1px solid var(--border);}
.trust-grid{max-width:1240px;margin:0 auto;padding:34px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.trust-item{display:flex;align-items:center;gap:12px;}
.trust-icon{width:40px;height:40px;border:1px solid var(--navy);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-family:var(--mono);color:var(--navy);flex-shrink:0;}
.trust-item div div{font-size:13px;color:var(--muted);}

/* section */
.section{max-width:1240px;margin:0 auto;padding:72px 24px;}
.section h2{font-family:var(--serif);font-size:30px;color:var(--navy);margin:0 0 8px;}
.section-lead{color:var(--muted);font-size:15px;margin:0 0 36px;}
.section.bg{background:var(--gray-bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:72px 0;}
.section.bg .wrap{max-width:1240px;}

/* category grid on home */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.cat-card{text-align:left;border:1px solid var(--border);background:none;cursor:pointer;padding:0;display:block;color:inherit;}
.cat-card .thumb{aspect-ratio:4/3;overflow:hidden;}
.cat-card .thumb img{width:100%;height:100%;object-fit:cover;}
.cat-card .cap{padding:16px;}
.cat-card .cap .name{font-weight:600;color:var(--navy);font-size:15px;}
.cat-card .cap .desc{color:var(--muted);font-size:13px;margin-top:4px;}

/* product grid */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.product-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.product-card{background:#fff;border:1px solid var(--border);}
.product-photo{position:relative;aspect-ratio:4/3;overflow:hidden;}
.product-photo img{width:100%;height:100%;object-fit:cover;}
.badge{position:absolute;top:10px;left:10px;color:#fff;font-size:10px;padding:4px 8px;letter-spacing:0.05em;}
.badge-new{background:var(--navy);}
.badge-sale{background:var(--accent);}
.product-body{padding:16px;}
.product-body .name{font-size:14px;font-weight:600;color:var(--navy);}
.product-body .desc{font-size:12px;color:var(--muted);margin:4px 0 10px;}
.product-row{display:flex;align-items:center;justify-content:space-between;}
.price{font-weight:700;color:var(--navy);font-size:15px;}
.price-old{text-decoration:line-through;color:var(--muted-2);font-size:12px;margin-left:6px;}
.add-btn{background:var(--navy);color:#fff;border:none;font-size:12px;padding:8px 12px;cursor:pointer;}
.product-grid.cols-3 .product-body .name{font-size:15px;}
.product-grid.cols-3 .product-body .desc{font-size:13px;margin:5px 0 12px;}
.product-grid.cols-3 .price{font-size:16px;}
.product-grid.cols-3 .add-btn{font-size:13px;padding:9px 14px;}

/* advice split section */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.split .photo{aspect-ratio:5/4;border:1px solid var(--border-2);overflow:hidden;}
.split .photo img{width:100%;height:100%;object-fit:cover;}
.split h2{font-family:var(--serif);font-size:30px;color:var(--navy);margin:0 0 16px;}
.split p{color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 24px;}

/* testimonials */
.testimonials{background:var(--navy);padding:56px 0;}
.testimonials .wrap{max-width:1240px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.testimonials p{color:#e4e7eb;font-size:15px;line-height:1.7;font-style:italic;margin:0 0 14px;}
.testimonials .who{color:var(--muted-2);font-size:13px;}

/* category page header */
.page-header{background:var(--gray-bg);border-bottom:1px solid var(--border);padding:48px 24px;}
.page-header .wrap{max-width:1240px;}
.page-header h1{font-family:var(--serif);font-size:36px;color:var(--navy);margin:0 0 12px;}
.page-header p{color:var(--muted);font-size:15px;max-width:640px;margin:0;}

.content-narrow{max-width:900px;margin:0 auto;padding:56px 24px 88px;}
.content-narrow h1{font-family:var(--serif);font-size:34px;color:var(--navy);margin:0 0 32px;line-height:1.25;}
.content-narrow h2{font-size:17px;color:var(--navy);margin:32px 0 12px;}
.content-narrow p{font-size:15px;line-height:1.8;color:var(--text);margin:0 0 16px;}
.content-narrow .updated{font-size:14px;color:var(--muted-2);margin:0 0 32px;}

/* blog list */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.blog-card{text-align:left;background:#fff;border:1px solid var(--border);cursor:pointer;padding:0;display:flex;flex-direction:column;color:inherit;}
.blog-card .thumb{aspect-ratio:16/10;overflow:hidden;}
.blog-card .thumb img{width:100%;height:100%;object-fit:cover;}
.blog-card .cap{padding:20px;}
.blog-card .date{font-family:var(--mono);font-size:11px;color:var(--muted-2);margin-bottom:8px;}
.blog-card .title{font-family:var(--serif);font-size:18px;color:var(--navy);font-weight:600;margin-bottom:8px;line-height:1.3;}
.blog-card .excerpt{font-size:13px;color:var(--muted);line-height:1.6;}

/* blog article */
.article{max-width:760px;margin:0 auto;padding:56px 24px 88px;}
.back-link{background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;padding:0;margin-bottom:24px;display:inline-block;}
.article .date{font-family:var(--mono);font-size:11px;color:var(--muted-2);margin-bottom:10px;}
.article h1{font-family:var(--serif);font-size:34px;color:var(--navy);margin:0 0 24px;line-height:1.25;}
.article .cover{aspect-ratio:16/9;overflow:hidden;border:1px solid var(--border-2);margin-bottom:32px;}
.article .cover img{width:100%;height:100%;object-fit:cover;}
.article p{font-size:16px;line-height:1.8;color:var(--text);margin:0 0 20px;}

/* about stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:48px;}
.stat{border-top:2px solid var(--navy);padding-top:14px;}
.stat .num{font-family:var(--serif);font-size:32px;color:var(--navy);}
.stat .label{font-size:13px;color:var(--muted);}
.about-photo{aspect-ratio:16/7;overflow:hidden;border:1px solid var(--border-2);}
.about-photo img{width:100%;height:100%;object-fit:cover;}

/* contact */
.contact-grid{max-width:1240px;margin:0 auto;padding:56px 24px;display:grid;grid-template-columns:1fr 1fr;gap:56px;}
.contact-grid h3{font-size:15px;font-weight:700;color:var(--navy);margin:0 0 14px;}
.contact-grid p{font-size:14px;color:var(--muted);line-height:1.8;margin:0 0 24px;}
.store-photo{aspect-ratio:16/9;overflow:hidden;border:1px solid var(--border-2);}
.store-photo img{width:100%;height:100%;object-fit:cover;}

form.stack{display:flex;flex-direction:column;gap:14px;}
form.stack input,form.stack textarea,form.stack select{padding:12px 14px;border:1px solid var(--border-2);font-size:14px;font-family:var(--sans);width:100%;}
form.stack textarea{resize:vertical;}
form.stack label{font-size:13px;color:var(--muted);margin-bottom:-8px;}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.thankyou{background:var(--gray-bg);border:1px solid var(--border);padding:32px;text-align:center;}
.thankyou .title{font-family:var(--serif);font-size:20px;color:var(--navy);margin-bottom:10px;}
.thankyou .desc{font-size:14px;color:var(--muted);}

/* delivery table */
.info-table{border:1px solid var(--border);margin-bottom:36px;width:100%;border-collapse:collapse;}
.info-table .head-row{display:grid;grid-template-columns:2fr 1fr 1fr;padding:14px 18px;background:var(--gray-bg);font-size:13px;font-weight:700;color:var(--navy);}
.info-table .row{display:grid;grid-template-columns:2fr 1fr 1fr;padding:14px 18px;font-size:14px;color:var(--text);border-top:1px solid var(--border);}
.info-table .row.strong{color:var(--navy);font-weight:600;}
.info-table.cookies .head-row{grid-template-columns:1fr 2fr;}
.info-table.cookies .row{grid-template-columns:1fr 2fr;}

/* cart */
.cart-wrap{max-width:1000px;margin:0 auto;padding:56px 24px 88px;}
.cart-line{display:grid;grid-template-columns:90px 1fr auto auto auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--border);}
.cart-line .thumb{width:90px;aspect-ratio:1;overflow:hidden;border:1px solid var(--border-2);}
.cart-line .thumb img{width:100%;height:100%;object-fit:cover;}
.cart-line .name{font-size:14px;font-weight:600;color:var(--navy);}
.cart-line .unit{font-size:12px;color:var(--muted-2);}
.qty-ctrl{display:flex;align-items:center;gap:8px;}
.qty-ctrl button{width:28px;height:28px;border:1px solid var(--border-2);background:#fff;cursor:pointer;font-size:14px;}
.qty-ctrl span{font-size:14px;min-width:20px;text-align:center;}
.line-total{font-size:14px;font-weight:700;color:var(--navy);}
.remove-btn{background:none;border:none;color:var(--muted-2);font-size:13px;cursor:pointer;}
.cart-summary{display:flex;justify-content:flex-end;margin-top:32px;}
.cart-summary-box{width:320px;}
.summary-line{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-bottom:8px;}
.summary-total{display:flex;justify-content:space-between;font-size:17px;font-weight:700;color:var(--navy);padding-top:12px;border-top:1px solid var(--border);margin-bottom:20px;}
.empty-box,.center-box{border:1px solid var(--border);padding:48px;text-align:center;}

/* checkout form panel */
.checkout-panel{border-top:1px solid var(--border);margin-top:40px;padding-top:40px;}
.checkout-panel h2{font-family:var(--serif);font-size:24px;color:var(--navy);margin:0 0 20px;}

/* footer */
footer.site{background:var(--navy);color:#c8cdd4;margin-top:auto;}
.footer-grid{max-width:1240px;margin:0 auto;padding:64px 24px 32px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;}
.footer-grid .brand{font-family:var(--serif);font-size:22px;color:#fff;font-weight:600;margin-bottom:14px;}
.footer-grid .about{font-size:13px;line-height:1.7;color:#9aa8b8;max-width:280px;}
.footer-col-title{font-size:13px;font-weight:700;color:#fff;margin-bottom:14px;text-transform:uppercase;letter-spacing:0.06em;}
.footer-links{display:flex;flex-direction:column;gap:10px;}
.footer-links a{background:none;border:none;color:#c8cdd4;font-size:13px;text-align:left;cursor:pointer;padding:0;}
.footer-links a:hover{color:#fff;}
.footer-bottom{max-width:1240px;margin:0 auto;padding:0 24px 40px;border-top:1px solid #2b3852;padding-top:24px;font-size:12px;color:#7c8798;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}

/* cookie banner */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:#ffffff;border-top:1px solid var(--border-2);box-shadow:0 -4px 24px rgba(0,0,0,0.08);padding:20px 24px;z-index:100;}
.cookie-banner .wrap{max-width:1240px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.cookie-banner .msg{font-size:13px;color:var(--text);max-width:640px;line-height:1.6;}
.cookie-banner .msg a{text-decoration:underline;}
.cookie-actions{display:flex;gap:10px;flex-shrink:0;}
.cookie-reject{background:transparent;border:1px solid var(--border-2);color:var(--navy);padding:10px 18px;font-size:13px;cursor:pointer;}
.cookie-accept{background:var(--navy);border:none;color:#fff;padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;}
.hidden{display:none !important;}

@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;padding:40px 24px 48px;}
  h1{font-size:36px;}
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .product-grid.cols-3{grid-template-columns:repeat(2,1fr);}
  .split{grid-template-columns:1fr;}
  .testimonials .wrap{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;padding:40px 24px;}
  .blog-grid{grid-template-columns:1fr;}
  .row-2{grid-template-columns:1fr;}
  .cart-line{grid-template-columns:60px 1fr;grid-template-areas:"thumb name" "thumb qty" "thumb total-remove";row-gap:8px;}
}
@media (max-width:560px){
  .product-grid,.product-grid.cols-3,.cat-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr;}
  h1{font-size:30px;}
}