@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --primary:#14469c;      /* deep blue - main brand color */
  --primary-dark:#0d3373;
  --red:#a91101;           /* accent red - sale badges, urgency */
  --teal:#4fb0c6;          /* secondary accent */
  --yellow:#f8e08f;        /* soft gold accent */
  --powder:#abbcd4;        /* muted blue-gray accent */
  --lightblue:#97bef5;     /* light blue accent */
  --offwhite:#e5eeed;      /* light section background */
  --ink:#122540;           /* dark navy for footer/admin */
  --cream:#ffffff;         /* main page background */
  --cream-deep:#e5eeed;    /* alternate section background */
  --text:#1c2b3d;
}
*{ box-sizing:border-box; }
html, body{ max-width:100%; overflow-x:hidden; }
body{ font-family:'Jost',sans-serif; background:var(--cream); color:var(--text); }
a{ text-decoration:none; color:inherit; }
h1,h2,h3,h4,.font-display{ font-family:'Playfair Display',serif; }

/* Motif border strip */
.motif-strip{
  height:6px;
  background:repeating-linear-gradient(90deg,
    var(--primary) 0 14px, var(--red) 14px 28px, var(--teal) 28px 42px, var(--yellow) 42px 56px);
}

.social-icons a{ display:inline-block; margin-left:14px; font-size:.95rem; }
.social-icons a:hover{ color:var(--yellow); }

.main-header{ background:var(--cream); border-bottom:1px solid rgba(0,0,0,.08); position:sticky; top:0; z-index:100; }
.brand-logo{ font-family:'Playfair Display',serif; font-size:1.9rem; font-weight:800; color:var(--primary); letter-spacing:.02em; white-space:nowrap; }
.brand-logo span{ color:var(--ink); font-weight:600; }
.brand-logo .sub{ display:block; font-family:'Jost',sans-serif; font-size:.6rem; letter-spacing:.25em; color:var(--red); text-transform:uppercase; font-weight:500; }

.search-form .form-control{ border-radius:2px 0 0 2px; border:1.5px solid var(--primary); background:#fff; }
.search-form .form-control:focus{ box-shadow:none; border-color:var(--primary); }
.btn-search{ background:var(--primary); color:#fff; border-radius:0 2px 2px 0; border:1.5px solid var(--primary); }
.btn-search:hover{ background:var(--primary-dark); color:#fff; }

.header-icon-link{ color:var(--ink); font-size:.95rem; }
.header-icon-link:hover{ color:var(--primary); }
.cart-badge{ background:var(--red); color:#fff; font-size:.65rem; border-radius:50%; padding:1px 6px; position:relative; top:-8px; left:-4px; }

.category-nav{ background:var(--primary); overflow-x:auto; }
.category-nav a{ color:#eaf1fb; font-size:.82rem; padding:11px 0; display:inline-block; white-space:nowrap; letter-spacing:.03em; text-transform:uppercase; }
.category-nav a:hover{ color:var(--yellow); }

/* Hero — small, compact banner that fits every screen without dominating the page */
.hero-slider-carousel{ width:100%; max-width:100%; overflow:hidden; }
.hero-slider-carousel .carousel-inner{ width:100%; max-width:100%; }
.hero-slider-carousel .carousel-item{ width:100%; max-width:100%; }
.hero-slider-carousel .hero-slide{ position:relative; width:100%; max-width:100%; height:clamp(220px, 26vw, 440px); background:var(--ink); overflow:hidden; }
.hero-slider-carousel .hero-slide img{ display:block; width:100%; height:100%; object-fit:cover; }
.hero-slider-carousel .hero-slide-video{ width:100%; height:100%; }
.hero-slider-carousel .hero-slide-video iframe, .hero-slider-carousel .hero-slide-video video{ width:100%; height:100%; object-fit:cover; border:0; }
.hero-slide-caption{ position:absolute; left:0; right:0; bottom:0; padding:clamp(10px, 2.5vw, 24px); background:linear-gradient(0deg, rgba(18,37,64,.82) 0%, transparent 100%); color:#fff; text-align:center; }
.hero-slide-caption h2{ font-weight:800; font-size:clamp(.95rem, 2.4vw, 1.5rem); margin-bottom:2px; line-height:1.2; }
.hero-slide-caption p{ font-size:clamp(.65rem, 1.1vw, .85rem); margin-bottom:0; }
.hero-slider-carousel .carousel-indicators{ margin-bottom:.5rem; }
.hero-slider-carousel .carousel-indicators [data-bs-target]{ background-color:var(--yellow); width:8px; height:8px; border-radius:50%; }
.hero-slider-carousel .carousel-control-prev, .hero-slider-carousel .carousel-control-next{ width:6%; }
.hero-slider-carousel .carousel-control-prev-icon, .hero-slider-carousel .carousel-control-next-icon{ width:1.4rem; height:1.4rem; }

.hero-banner{
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 55%,var(--ink) 100%);
  color:#f5f9ff; padding:70px 0 60px; margin-bottom:0; position:relative; overflow:hidden;
}
.hero-banner::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, rgba(248,224,143,.06) 0 12px, transparent 12px 24px);
  pointer-events:none;
}
.hero-banner .eyebrow{ letter-spacing:.3em; text-transform:uppercase; font-size:.75rem; color:var(--yellow); margin-bottom:14px; }
.hero-banner h1{ font-weight:800; font-size:2.6rem; line-height:1.25; max-width:640px; }
.hero-banner p.lead-text{ color:#dbe8fb; max-width:560px; font-size:1.05rem; }

/* Why choose us */
.why-us-section{ background:var(--cream-deep); padding:50px 0; }
.why-us-item{ text-align:center; padding:0 15px; }
.why-us-item i{ font-size:1.9rem; color:var(--primary); margin-bottom:12px; }
.why-us-item h6{ font-family:'Playfair Display',serif; font-weight:700; }

/* Instagram / featured feed section */
.feed-section{ background:#fff; padding:50px 0; }
.feed-card{ position:relative; overflow:hidden; border-radius:8px; aspect-ratio:1/1; background:var(--cream-deep); }
.feed-card img{ width:100%; height:100%; object-fit:cover; transition:.3s; }
.feed-card:hover img{ transform:scale(1.06); }
.feed-card .feed-overlay{ position:absolute; inset:0; background:rgba(20,70,156,.0); display:flex; align-items:center; justify-content:center; transition:.25s; }
.feed-card:hover .feed-overlay{ background:rgba(20,70,156,.35); }
.feed-card .feed-overlay i{ opacity:0; color:#fff; font-size:1.6rem; transition:.25s; }
.feed-card:hover .feed-overlay i{ opacity:1; }

/* Video slider */
.video-slider-section{ background:var(--ink); padding:50px 0; color:#fff; }
.video-slider-section .section-title, .video-slider-section .section-sub{ color:#fff; }
.video-slide{ border-radius:8px; overflow:hidden; background:#000; aspect-ratio:9/16; max-height:420px; margin:0 auto; }
.video-slide video, .video-slide iframe{ width:100%; height:100%; object-fit:cover; border:0; }

/* Category pills */
.cat-card{ background:#fff; border:1px solid rgba(0,0,0,.06); text-align:center; padding:22px 10px; transition:.25s; height:100%; }
.cat-card:hover{ border-color:var(--teal); transform:translateY(-4px); box-shadow:0 10px 20px rgba(20,70,156,.1); }
.cat-card .cat-img{ width:64px; height:64px; object-fit:cover; border-radius:50%; margin-bottom:10px; border:2px solid var(--teal); }
.cat-card i{ font-size:1.7rem; color:var(--primary); margin-bottom:8px; }
.cat-card .cat-name{ font-family:'Playfair Display',serif; font-weight:700; font-size:.92rem; }

/* Product cards */
.product-card{ background:#fff; overflow:hidden; height:100%; display:flex; flex-direction:column; transition:.25s; border:1px solid rgba(0,0,0,.06); }
.product-card:hover{ box-shadow:0 14px 28px rgba(18,37,64,.14); transform:translateY(-4px); }
.product-card .img-wrap{ height:280px; background:var(--cream-deep); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.product-card .img-wrap img{ width:100%; height:100%; object-fit:cover; }
.product-card .p-body{ padding:16px; flex-grow:1; display:flex; flex-direction:column; }
.product-card .p-cat{ font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--red); font-weight:600; margin-bottom:4px; }
.product-card .p-title{ font-family:'Playfair Display',serif; font-weight:700; font-size:1rem; height:2.6em; overflow:hidden; margin-bottom:8px; }
.product-card .price{ color:var(--primary); font-weight:700; font-size:1.05rem; }
.product-card .old-price{ text-decoration:line-through; color:#999; font-size:.82rem; margin-left:6px; }
.badge-discount{ background:var(--red); color:#fff; font-size:.7rem; padding:3px 8px; border-radius:2px; letter-spacing:.03em; }
.badge-outofstock{ background:var(--ink); color:#fff; font-size:.7rem; padding:3px 8px; border-radius:2px; }
.badge-custom{ background:var(--teal); color:#fff; font-size:.68rem; padding:3px 8px; border-radius:2px; }

.section-title{ font-family:'Playfair Display',serif; font-weight:700; text-align:center; margin:50px 0 8px; font-size:1.8rem; }
.section-sub{ text-align:center; color:#6c7d92; margin-bottom:30px; font-size:.92rem; }
.section-divider{ width:70px; height:3px; background:var(--teal); margin:0 auto 30px; }

.btn-primary-custom{ background:var(--primary); border-color:var(--primary); color:#fff; border-radius:2px; letter-spacing:.03em; }
.btn-primary-custom:hover{ background:var(--primary-dark); border-color:var(--primary-dark); color:#fff; }
.btn-outline-custom{ border:1.5px solid var(--primary); color:var(--primary); border-radius:2px; background:transparent; }
.btn-outline-custom:hover{ background:var(--primary); color:#fff; }

/* Product detail page */
.product-gallery-main{ background:var(--cream-deep); height:480px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.product-gallery-main img{ width:100%; height:100%; object-fit:cover; }
.craft-note{ background:var(--cream-deep); border-left:3px solid var(--teal); padding:14px 16px; font-size:.88rem; }
.size-swatch, .color-swatch{ border:1.5px solid var(--ink); padding:6px 16px; border-radius:2px; font-size:.85rem; cursor:pointer; background:#fff; }
.size-swatch.active, .color-swatch.active{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* Cart */
.cart-item-row img{ width:80px; height:80px; object-fit:cover; border-radius:2px; }

/* Footer */
.site-footer{ background:var(--ink); color:#c9d6e6; margin-top:0; }
.site-footer h6{ color:#fff; margin-bottom:16px; font-family:'Playfair Display',serif; }
.site-footer a{ color:#c9d6e6; }
.site-footer a:hover{ color:var(--yellow); }
.footer-brand{ font-family:'Playfair Display',serif; font-weight:800; color:var(--yellow); font-size:1.4rem; }
.footer-brand span{ color:#fff; font-weight:600; }
.footer-social a{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid #33475e; border-radius:50%; margin-right:8px; font-size:1rem; }
.footer-social a:hover{ background:var(--primary); border-color:var(--primary); color:#fff; }
.footer-topbar-line{ font-size:.8rem; color:#9fb2c7; border-bottom:1px solid #23374d; padding-bottom:16px; margin-bottom:24px; }

/* Auth pages */
.auth-card{ max-width:440px; margin:60px auto; background:#fff; padding:36px; box-shadow:0 4px 24px rgba(18,37,64,.08); border-top:3px solid var(--primary); }

/* Admin panel */
.admin-wrapper{ display:flex; min-height:100vh; font-family:'Jost',sans-serif; }
.admin-sidebar{ width:230px; background:var(--ink); color:#fff; flex-shrink:0; }
.admin-sidebar a{ display:block; padding:12px 20px; color:#c9d6e6; font-size:.92rem; border-left:3px solid transparent; }
.admin-sidebar a:hover, .admin-sidebar a.active{ background:rgba(255,255,255,.06); color:#fff; border-left-color:var(--teal); }
.admin-sidebar .brand{ padding:18px 20px; font-family:'Playfair Display',serif; font-weight:800; font-size:1.2rem; color:var(--yellow); border-bottom:1px solid rgba(255,255,255,.1); }
.admin-content{ flex-grow:1; padding:24px; background:#f4f7fa; }
.stat-card{ background:#fff; border-radius:6px; padding:20px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.stat-card .num{ font-size:1.8rem; font-weight:800; font-family:'Playfair Display',serif; }
.stat-card.profit .num{ color:var(--primary); }
.stat-card.cost .num{ color:var(--red); }
.table-responsive{ background:#fff; border-radius:6px; }
.table-responsive thead th{ white-space:normal; vertical-align:bottom; font-size:.78rem; line-height:1.2; }

@media (max-width: 768px){
  .admin-sidebar{ position:fixed; left:-230px; top:0; bottom:0; z-index:200; transition:.3s; }
  .admin-sidebar.open{ left:0; }
  .hero-banner h1{ font-size:1.9rem; }
}