/* =========================================================
   Pro-Nutrition — Design tokens
   Palette drawn directly from the brand logo & Prestige catalogue:
   navy (brand background), cream (brand ink-on-navy), the tricolour
   stripe under the logo, and the category colours already used
   across the Prestige range (mini/medium/maxi/specialities).
   Type: Oswald (condensed, matches the PRO-NUTRITION wordmark) for
   display, Nunito Sans for body copy.
   ========================================================= */
:root{
    --navy: #0d3049;
    --navy-deep: #082133;
    --navy-light: #164468;
    --cream: #f3ead5;
    --cream-soft: #faf6ec;
    --coral: #e2704f;
    --coral-dark: #c8583a;
    --blue-flag: #6ba3c5;
    --red-flag: #e2384d;

    --cat-mini: #8bc53f;
    --cat-medium: #e2384d;
    --cat-maxi: #7a4fa3;
    --cat-light: #a7b8e8;
    --cat-special: #f2b134;
    --cat-kitten: #e8628c;
    --cat-sterilised: #a7b8e8;
    --cat-largebreed: #f2764a;

    --ink: #1c2b34;
    --ink-soft: #5a6b74;
    --border: #e4d9c0;

    --font-display: 'Oswald', 'Arial Narrow', sans-serif;
    --font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    --radius: 10px;
    --shadow: 0 10px 30px rgba(13,48,73,0.10);
    --shadow-sm: 0 4px 12px rgba(13,48,73,0.08);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
    margin:0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--cream-soft);
    line-height:1.6;
    -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
.container{ max-width: 1180px; margin:0 auto; padding: 0 24px; }
h1,h2,h3,h4{ font-family: var(--font-display); text-transform: uppercase; letter-spacing:0.02em; color: var(--navy); margin: 0 0 12px; line-height:1.15; }
h1{ font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight:700; }
h2{ font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight:600; }
h3{ font-size: 1.2rem; font-weight:600; }
p{ margin:0 0 14px; }
:focus-visible{ outline: 3px solid var(--coral); outline-offset: 2px; }

/* Signature tricolour stripe — echoes the mark under the Pro-Nutrition logo,
   used as a recurring divider that ties every section back to the brand. */
.stripe{
    display:flex; height:5px; width:64px; border-radius:3px; overflow:hidden; margin: 6px 0 22px;
}
.stripe span{ flex:1; }
.stripe span:nth-child(1){ background: var(--blue-flag); }
.stripe span:nth-child(2){ background: #fff; }
.stripe span:nth-child(3){ background: var(--coral); }
.stripe--center{ margin-left:auto; margin-right:auto; }

.eyebrow{
    display:inline-block; font-family: var(--font-display); text-transform:uppercase;
    letter-spacing:0.14em; font-size:0.78rem; color: var(--coral-dark); font-weight:600; margin-bottom:8px;
}

/* Buttons */
.btn{
    display:inline-block; padding: 12px 26px; border-radius: 999px; font-family: var(--font-display);
    text-transform:uppercase; letter-spacing:0.04em; font-weight:600; font-size:0.9rem; cursor:pointer; border:2px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn--accent{ background: var(--coral); color:#fff; }
.btn--accent:hover{ background: var(--coral-dark); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn--outline{ background: transparent; border-color: var(--cream); color: var(--cream); }
.btn--outline:hover{ background: rgba(255,255,255,0.1); }
.btn--navy{ background: var(--navy); color:#fff; }
.btn--navy:hover{ background: var(--navy-light); }
.btn--sm{ padding: 8px 18px; font-size: 0.78rem; }

/* Topbar */
.topbar{ background: var(--navy-deep); color: var(--cream); font-size:0.82rem; }
.topbar__inner{ display:flex; justify-content:space-between; align-items:center; padding: 7px 24px; flex-wrap:wrap; gap:6px;}
.topbar__contact{ opacity:0.85; }

/* Header */
.site-header{ background: var(--navy); position:sticky; top:0; z-index:50; box-shadow: var(--shadow-sm); }
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; padding: 12px 24px; }
.brand__logo{ height:52px; width:auto; }
.main-nav{ display:flex; align-items:center; gap: 26px; }
.main-nav > a, .main-nav .dropdown > a{ color: var(--cream); font-family: var(--font-display); text-transform:uppercase; font-size:0.86rem; letter-spacing:0.03em; padding: 8px 2px; border-bottom:2px solid transparent; display:inline-block; }
.main-nav > a:hover, .main-nav > a.active, .main-nav .dropdown > a:hover, .main-nav .dropdown > a.active{ border-bottom-color: var(--coral); }
.main-nav > a.btn{ border-bottom:none; }
.dropdown{ position:relative; }
.dropdown__menu{
    position:absolute; top: 100%; left:0; background:#fff; min-width:190px; border-radius: 8px; overflow:hidden;
    box-shadow: var(--shadow); opacity:0; visibility:hidden; transform: translateY(6px); transition: all .18s ease; z-index: 60;
}
.dropdown:hover .dropdown__menu, .dropdown:focus-within .dropdown__menu{ opacity:1; visibility:visible; transform:none; }
.dropdown__menu a{ display:block; padding: 11px 16px; color: var(--navy); font-family: var(--font-body); text-transform:none; font-size:0.92rem; border-bottom: 1px solid var(--border); }
.dropdown__menu a:last-child{ border-bottom:none; }
.dropdown__menu a:hover{ background: var(--cream-soft); color: var(--coral-dark); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ width:26px; height:3px; background: var(--cream); border-radius:2px; }

/* Hero */
.hero{ background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); color: var(--cream); position:relative; overflow:hidden; }
.hero__inner{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap:40px; align-items:center; padding: 70px 24px 60px; }
.hero h1{ color:#fff; }
.hero__lede{ font-size:1.1rem; color: rgba(243,234,213,0.88); max-width: 480px; }
.hero__ctas{ display:flex; gap:14px; margin-top: 22px; flex-wrap:wrap; }
.hero__badges{ display:flex; gap: 26px; margin-top: 36px; flex-wrap:wrap; }
.hero__badge{ font-family: var(--font-display); text-transform:uppercase; font-size:0.78rem; letter-spacing:0.04em; color: var(--cream); opacity:0.85; border-left: 2px solid var(--coral); padding-left:10px; }
.hero__visual{ position:relative; }
.hero__visual .placeholder-frame{ aspect-ratio: 4/5; border-radius: 18px; }

/* Placeholder art (used wherever a real photo hasn't been dropped in yet) */
.placeholder-frame{
    background: linear-gradient(135deg, var(--navy-light), var(--navy));
    border-radius: var(--radius);
    display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px;
    color: var(--cream); text-align:center; padding: 20px; position:relative; overflow:hidden;
    border: 1px solid rgba(243,234,213,0.15);
}
.placeholder-frame::before{
    content:""; position:absolute; inset:0;
    background-image: radial-gradient(circle at 20% 20%, rgba(243,234,213,0.09) 0, transparent 40%),
                       radial-gradient(circle at 80% 80%, rgba(226,112,79,0.15) 0, transparent 45%);
}
.placeholder-frame svg{ width:56px; height:56px; opacity:0.9; position:relative; }
.placeholder-frame span{ font-family: var(--font-display); text-transform:uppercase; font-size:0.72rem; letter-spacing:0.08em; opacity:0.75; position:relative; }

/* Sections */
.section{ padding: 64px 0; }
.section--tight{ padding: 40px 0; }
.section--navy{ background: var(--navy); color: var(--cream); }
.section--navy h2{ color:#fff; }
.section--cream{ background: var(--cream-soft); }
.section-head{ max-width: 640px; margin-bottom: 36px; }
.section-head--center{ margin-left:auto; margin-right:auto; text-align:center; }

/* Feature grid (icons + text, used for "40 essential nutrients", star ingredients etc.) */
.feature-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 26px; }
.feature{ background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.feature--dark{ background: rgba(255,255,255,0.05); border-color: rgba(243,234,213,0.18); }
.feature__icon{ width:40px; height:40px; margin-bottom:12px; color: var(--coral); }
.feature h3{ margin-bottom:6px; }
.feature--dark h3{ color:#fff; }
.feature p{ color: var(--ink-soft); font-size:0.94rem; margin:0; }
.feature--dark p{ color: rgba(243,234,213,0.8); }

/* Product cards */
.category-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 30px; }
.category-tabs a{
    font-family: var(--font-display); text-transform:uppercase; font-size:0.8rem; letter-spacing:0.03em;
    padding: 9px 18px; border-radius: 999px; background:#fff; border: 1px solid var(--border); color: var(--navy);
}
.category-tabs a:hover{ border-color: var(--coral); color: var(--coral-dark); }
.category-tabs--on-dark a{ background:transparent; border:1px solid rgba(243,234,213,.4); color:#fff; }
.category-tabs--on-dark a:hover{ background: rgba(255,255,255,0.12); border-color:#fff; color:#fff; }

.product-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(255px,1fr)); gap: 26px; }
.product-card{ background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); border:1px solid var(--border); transition: transform .15s ease, box-shadow .15s ease; display:flex; flex-direction:column; }
.product-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.product-card__media{ aspect-ratio: 2/4; }
.product-card__media--photo{ overflow:hidden; background: var(--navy); }
.product-card__media--photo img{ width:100%; height:100%; object-fit:cover; object-position: top center; transition: transform .4s ease; }
.product-card:hover .product-card__media--photo img{ transform: scale(1.06); }
.product-card__body{ padding: 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product-card__badge{ align-self:flex-start; font-family: var(--font-display); font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color:#fff; padding: 4px 10px; border-radius:999px; }
.product-card__title{ font-family: var(--font-display); text-transform:uppercase; font-size:1.05rem; color: var(--navy); margin:0; }
.product-card__tagline{ font-size:0.88rem; color: var(--ink-soft); margin:0; flex:1; }
.product-card__sizes{ font-size:0.78rem; color: var(--ink-soft); font-weight:700; }
.product-card__link{ margin-top:6px; font-family: var(--font-display); text-transform:uppercase; font-size:0.8rem; color: var(--coral-dark); letter-spacing:0.03em; }
.product-card__link:hover{ text-decoration: underline; }

/* Product detail */
.product-detail{ display:grid; grid-template-columns: 1fr 1.15fr; gap: 46px; align-items:flex-start; }
.product-detail__media{ aspect-ratio: 3/5; }
.product-detail__sizes{ display:flex; gap:10px; margin: 16px 0; flex-wrap:wrap; }
.size-pill{ background: var(--navy); color:#fff; font-family: var(--font-display); font-size:0.85rem; padding: 8px 16px; border-radius:999px; }
.ingredients-box{ background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding:20px; font-size:0.92rem; color: var(--ink-soft); margin-top: 20px; }
.ingredients-box h4{ margin-bottom:8px; }
.breadcrumb{ font-size:0.85rem; color: var(--ink-soft); margin-bottom: 20px; }
.breadcrumb a:hover{ color: var(--coral-dark); }

/* Blog */
.blog-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 28px; }
.blog-card{ background:#fff; border-radius: var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow: var(--shadow-sm); display:flex; flex-direction:column; transition: transform .15s ease; }
.blog-card:hover{ transform: translateY(-4px); }
.blog-card__media{ aspect-ratio: 16/10; }
.blog-card__body{ padding:20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.blog-card__meta{ font-size:0.78rem; color: var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; font-family: var(--font-display); }
.blog-card__title{ font-family: var(--font-display); text-transform:none; font-size:1.15rem; color: var(--navy); margin:0; letter-spacing:0; }
.blog-card__excerpt{ color: var(--ink-soft); font-size:0.92rem; flex:1; }
.blog-post{ max-width: 760px; margin: 0 auto; }
.blog-post__cover{ aspect-ratio: 16/8; border-radius: var(--radius); margin-bottom: 26px; }
.blog-post__meta{ font-family: var(--font-display); text-transform:uppercase; font-size:0.8rem; color: var(--coral-dark); letter-spacing:0.04em; margin-bottom:6px; }
.blog-post__content p{ margin-bottom: 18px; font-size:1.02rem; }

/* Forms */
.form-card{ background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); border:1px solid var(--border); padding: 32px; }
.form-row{ margin-bottom: 18px; }
.form-row label{ display:block; font-family: var(--font-display); text-transform:uppercase; font-size:0.78rem; letter-spacing:0.04em; color: var(--navy); margin-bottom:6px; }
.form-row input, .form-row select, .form-row textarea{
    width:100%; padding: 12px 14px; border-radius: 8px; border: 1.5px solid var(--border); font-family: var(--font-body); font-size:0.95rem; background: var(--cream-soft);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ border-color: var(--coral); outline:none; background:#fff; }
.form-grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.split-grid{ display:grid; gap:40px; align-items:flex-start; }
.split-grid--wide-left{ grid-template-columns: 1.1fr 0.9fr; }
.split-grid--wide-right{ grid-template-columns: 0.9fr 1.1fr; }

.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; }
.faq-item summary{ cursor:pointer; font-family:var(--font-display); font-size:1.02rem; color:var(--navy); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-size:1.4rem; color: var(--coral-dark); flex-shrink:0; }
.faq-item[open] summary::after{ content:'−'; }
.faq-item p{ margin-top:12px; color: var(--ink-soft); font-size:0.95rem; }

.faq-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
.faq-tab{ font-family:var(--font-display); text-transform:uppercase; font-size:0.78rem; letter-spacing:.02em; background:#fff; border:1px solid var(--border); color: var(--ink-soft); padding:10px 18px; border-radius:999px; cursor:pointer; transition: all .15s ease; }
.faq-tab:hover{ border-color: var(--coral); color: var(--coral-dark); }
.faq-tab.is-active{ background: var(--navy); border-color: var(--navy); color:#fff; }
.faq-panel{ display:none; }
.faq-panel.is-active{ display:block; }
.faq-panel__note{ font-size:0.85rem; color: var(--ink-soft); font-style:italic; margin-bottom:16px; }

/* Social media icon links */
.social-links{ display:flex; align-items:center; gap:10px; }
.social-links__icon{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background: rgba(255,255,255,0.08); color: inherit; transition: background .15s ease, transform .15s ease, color .15s ease; }
.social-links__icon svg{ width:16px; height:16px; }
.social-links__icon:hover{ background: var(--coral); color:#fff; transform: translateY(-2px); }
.topbar .social-links{ margin-left:14px; }
.topbar .social-links__icon{ width:24px; height:24px; background:rgba(255,255,255,0.1); }
.topbar .social-links__icon svg{ width:13px; height:13px; }
.site-footer .social-links__icon{ background: rgba(255,255,255,0.08); color: var(--cream); }
.site-footer .social-links__icon:hover{ background: var(--coral); color:#fff; }
.footer__brand .social-links{ margin-top:16px; }
.social-links--contact .social-links__icon{ background: var(--cream-soft); color: var(--navy); border:1px solid var(--border); }
.social-links--contact .social-links__icon:hover{ background: var(--coral); color:#fff; border-color: var(--coral); }
@media (max-width:760px){ .topbar .social-links{ display:none; } }

/* History Timeline — tree style with connecting spine */
.timeline{ position:relative; }
.timeline::before{ content:''; position:absolute; top:8px; bottom:8px; left:106px; width:2px; background: linear-gradient(to bottom, var(--border), var(--border) 92%, transparent); }
.timeline__item{ position:relative; display:grid; grid-template-columns: 90px 32px 1fr; column-gap:0; padding-bottom:46px; opacity:0; transform:translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.timeline__item:last-child{ padding-bottom:0; }
.timeline__item.is-visible{ opacity:1; transform:translateY(0); }
.timeline__year{ font-family:var(--font-display); font-weight:700; font-size:1.45rem; color:var(--coral-dark); text-align:right; padding-right:14px; padding-top:2px; }
.timeline__marker{ display:flex; justify-content:center; }
.timeline__dot{ width:16px; height:16px; border-radius:50%; background: var(--navy); border:3px solid var(--cream-soft); box-shadow: 0 0 0 2px var(--border); position:relative; z-index:2; margin-top:6px; transition: background .3s ease, transform .3s ease; }
.timeline__item.is-visible .timeline__dot{ background: var(--coral); transform: scale(1.15); }
.timeline__content{ padding-left:20px; }
.timeline__content h3{ margin:0 0 6px; }
.timeline__content p{ color: var(--ink-soft); max-width:680px; margin:0; }
.timeline__images{ display:flex; gap:14px; flex-wrap:wrap; margin-top:14px; }
.timeline__image{ width:140px; height:140px; border-radius: var(--radius); overflow:hidden; background: var(--cream-soft); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; }
.timeline__image img{ width:100%; height:100%; object-fit:contain; }
@media (max-width:640px){
    .timeline::before{ left:22px; }
    .timeline__item{ grid-template-columns: 32px 1fr; }
    .timeline__year{ grid-column: 1 / -1; text-align:left; padding:0 0 6px 0; }
    .timeline__content{ padding-left:16px; }
    .timeline__image{ width:110px; height:110px; }
}

/* South India distribution map */
.india-map-card{ position:relative; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); background: var(--cream-soft); aspect-ratio: 1/1; opacity:0; transform:translateY(28px); transition: opacity .7s ease, transform .7s ease; border:1px solid var(--border); }
.india-map-card.is-visible{ opacity:1; transform:translateY(0); }
.india-map-card__inner{ position:absolute; inset:0; }
.india-map-card__inner::before{
    content:""; position:absolute; inset:0;
    background-image: radial-gradient(circle at 75% 15%, rgba(226,112,79,0.10) 0, transparent 45%);
}
.india-map-shape{ position:absolute; inset:0; width:100%; height:100%; }
.india-map-shape path{ fill: var(--navy); stroke: var(--navy-light); stroke-width:0.6; filter: drop-shadow(0 6px 14px rgba(13,48,73,0.25)); }
.india-map-pin{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; cursor:default; }
.india-map-pin__dot{ width:14px; height:14px; border-radius:50%; background: var(--coral); border:3px solid rgba(243,234,213,.9); box-shadow: 0 0 0 0 rgba(226,112,79,.6); animation: india-pulse 2.4s ease-out infinite; display:block; }
.india-map-pin:nth-child(2) .india-map-pin__dot{ animation-delay: .3s; }
.india-map-pin:nth-child(3) .india-map-pin__dot{ animation-delay: .6s; }
.india-map-pin:nth-child(4) .india-map-pin__dot{ animation-delay: .9s; }
.india-map-pin:nth-child(5) .india-map-pin__dot{ animation-delay: 1.2s; }
.india-map-pin:nth-child(6) .india-map-pin__dot{ animation-delay: 1.5s; }
.india-map-pin__label{ margin-top:6px; font-family: var(--font-display); font-size:0.7rem; text-transform:uppercase; letter-spacing:.03em; color:#fff; background: rgba(10,32,48,.55); padding:3px 9px; border-radius:999px; white-space:nowrap; opacity:0; transform:translateY(-4px); transition: opacity .2s ease, transform .2s ease; pointer-events:none; }
.india-map-pin:hover .india-map-pin__label{ opacity:1; transform:translateY(0); }
.india-map-pin:hover .india-map-pin__dot{ transform:scale(1.3); }
@keyframes india-pulse{
    0%   { box-shadow: 0 0 0 0 rgba(226,112,79,.55); }
    70%  { box-shadow: 0 0 0 12px rgba(226,112,79,0); }
    100% { box-shadow: 0 0 0 0 rgba(226,112,79,0); }
}
.india-state-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.india-state-list span{ font-family: var(--font-display); font-size:0.78rem; text-transform:uppercase; letter-spacing:.02em; background:#fff; border:1px solid var(--border); color: var(--navy); padding:6px 14px; border-radius:999px; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.india-state-list span:hover{ background: var(--coral); border-color: var(--coral); color:#fff; }
@media (max-width:760px){ .india-map-card{ aspect-ratio: 1/1; margin-bottom:8px; } }

/* Hero slider variant — compact, no side padding, rounded like the old hero photo frame */
.slider--hero{ max-width:none; margin:0; padding:0; }
.slider--hero .slider__track{ border-radius:18px; border:1px solid rgba(243,234,213,0.15); box-shadow: var(--shadow); }
.slider--hero .slider__arrow{ width:38px; height:38px; }
@media (max-width:900px){ .slider--hero .slider__track{ padding-top:100%; } }

/* Homepage image slider / carousel */
.slider{ position:relative; max-width:1180px; margin: 0 auto; padding: 0 24px; }
.slider__track{ position:relative; width:100%; height:0; padding-top: 43.75%; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); background: var(--navy); }
.slider__slide{ position:absolute; top:0; left:0; right:0; bottom:0; opacity:0; visibility:hidden; transition: opacity .6s ease; background-size:cover; background-position:center; }
.slider__slide.is-active{ opacity:1; visibility:visible; }
.slider__slide img{ position:absolute; top:0; left:-9999px; width:1px; height:1px; opacity:0; }
.slider__caption{     position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 18px 14px;
    background: linear-gradient(to top, rgba(10, 32, 48, .82), rgb(228 231 234)); }
.slider__caption h3{ color:#fff; margin:2px 0 0; font-size:1.3rem; }
.slider__arrow{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:none; background:rgba(255,255,255,.85); color:var(--navy); font-size:1.6rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-sm); transition: background .15s ease; z-index:2; }
.slider__arrow:hover{ background:#fff; color: var(--coral-dark); }
.slider__arrow--prev{ left:14px; }
.slider__arrow--next{ right:14px; }
.slider__dots{ display:flex; justify-content:center; gap:9px; margin-top:16px; }
.slider__dot{ width:9px; height:9px; border-radius:50%; border:none; background: var(--border); cursor:pointer; padding:0; transition: background .15s ease, transform .15s ease; }
.slider__dot.is-active{ background: var(--coral-dark); transform:scale(1.25); }
@media (max-width:760px){
    .slider{ padding: 0 16px; }
    .slider__track{ padding-top: 125%; }
    .slider__caption h3{ font-size:1.05rem; }
    .slider__arrow{ width:36px; height:36px; font-size:1.3rem; }
}

/* Homepage banner slider reverted to default cover-fit wide photos */

/* Responsive photo gallery grid, reused across pages */
.photo-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
.photo-grid__item{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); aspect-ratio: 3/4; background: var(--navy); }
.photo-grid__item img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .35s ease; }
.photo-grid__item:hover img{ transform: scale(1.05); }
@media (max-width:900px){ .photo-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:520px){ .photo-grid{ grid-template-columns: 1fr 1fr; gap:10px; } }
.alert{ padding: 14px 18px; border-radius: 8px; margin-bottom: 20px; font-size:0.92rem; }
.alert--success{ background: #e7f6e6; color:#286b2a; border:1px solid #bfe3bd; }
.alert--error{ background: #fbe7e5; color:#a3271a; border:1px solid #f0c0ba; }

/* Where to buy */
.store-list{ display:flex; flex-direction:column; gap:14px; margin-top:20px; }
.store-item{ background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding:16px 20px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.store-item h4{ margin-bottom:4px; }
.store-item p{ margin:0; color: var(--ink-soft); font-size:0.9rem; }

/* Stats strip */
.stats{ display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:20px; text-align:center; }
.stat b{ display:block; font-family: var(--font-display); font-size: 2.2rem; color: var(--coral); }
.stat span{ font-size:0.85rem; color: rgba(243,234,213,0.8); text-transform:uppercase; letter-spacing:0.04em; }

/* Footer */
.site-footer{ background: var(--navy-deep); color: rgba(243,234,213,0.85); padding-top: 56px; }
.footer__grid{ display:grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 30px; padding-bottom: 40px; }
.footer__logo{ height:44px; margin-bottom: 14px; }
.footer__brand p{ font-size:0.88rem; }
.footer__flag{ color: var(--coral); font-weight:700; }
.footer__col h4{ color: var(--cream); font-size:0.9rem; margin-bottom:14px; }
.footer__col a{ display:block; margin-bottom:9px; font-size:0.9rem; color: rgba(243,234,213,0.8); }
.footer__col a:hover{ color: var(--coral); }
.footer__col p{ font-size:0.88rem; }
.footer__bottom{ border-top:1px solid rgba(243,234,213,0.12); padding: 16px 0; }
.footer__bottom-inner{ display:flex; justify-content:space-between; align-items:center; font-size:0.82rem; flex-wrap:wrap; gap:10px;}
.footer__stripe{ display:flex; width:56px; height:6px; border-radius:3px; overflow:hidden; }
.footer__stripe::before, .footer__stripe::after{ content:""; flex:1; }
.footer__stripe{ background: linear-gradient(to right, var(--blue-flag) 0 33%, #fff 33% 66%, var(--coral) 66% 100%); }

/* Admin */
.admin-shell{ max-width: 960px; margin: 40px auto; padding: 0 24px; }
.admin-card{ background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 30px; border:1px solid var(--border); }
table.admin-table{ width:100%; border-collapse: collapse; }
table.admin-table th, table.admin-table td{ text-align:left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size:0.9rem; }
table.admin-table th{ font-family: var(--font-display); text-transform:uppercase; font-size:0.75rem; color: var(--ink-soft); }

/* Responsive */
@media (max-width: 900px){
    .hero__inner{ grid-template-columns: 1fr; padding-top: 44px; }
    .footer__grid{ grid-template-columns: 1fr 1fr; }
    .product-detail{ grid-template-columns: 1fr; }
    .form-grid-2{ grid-template-columns: 1fr; }
    .split-grid{ grid-template-columns: 1fr !important; gap:28px; }
}
@media (max-width: 760px){
    .main-nav{
        position:absolute; top:100%; left:0; right:0; background: var(--navy); flex-direction:column; align-items:flex-start;
        padding: 14px 24px 24px; gap:14px; display:none; box-shadow: var(--shadow);
    }
    .main-nav.open{ display:flex; }
    .nav-toggle{ display:flex; }
    .dropdown__menu{ position:static; box-shadow:none; opacity:1; visibility:visible; transform:none; display:none; background: var(--navy-light); border-radius:8px; margin-top:6px; }
    .dropdown.open .dropdown__menu{ display:block; }
    .dropdown__menu a{ color: var(--cream); border-bottom-color: rgba(243,234,213,.15); }
    .dropdown__menu a:hover{ background: rgba(255,255,255,0.08); color: var(--coral); }
    .footer__grid{ grid-template-columns: 1fr; }
    .topbar__inner{ font-size:0.72rem; }
}