/* =====================================================================
   OCEAN — front-end template overlay
   Calm deep-sea storefront: teal-navy depths, aqua accents, rounded
   Quicksand headings, rising bubbles in the hero. Loaded after the base
   stack and scoped to body.tmpl-ocean, so the admin area is untouched.
   Content cards stay light for readability; the canvas, accents, and
   headings go dark / aqua.
   ===================================================================== */

/* ---- Page canvas ---------------------------------------------------- */
body.tmpl-ocean {
    background-color: #06283d;
    background-image: linear-gradient(160deg, #06283d 0%, #0a3d5c 55%, #04202f 100%);
    font-family: 'Nunito', sans-serif;
}

/* ---- Display headings ----------------------------------------------- */
.tmpl-ocean .slider-content h2,
.tmpl-ocean .section-title h2,
.tmpl-ocean .page-title h2 {
    font-family: 'Quicksand', 'Nunito', sans-serif;
    font-weight: 700;
}
.tmpl-ocean .section-title h2 { color: #e8fbfc; }

/* ---- Accent tokens -------------------------------------------------- */
.tmpl-ocean .theme-bg { background: #21c0c7 !important; }
.tmpl-ocean .theme-color { color: #21c0c7 !important; }
.tmpl-ocean .theme-border { border-color: #21c0c7 !important; }
.tmpl-ocean .border-theme02 { border-color: #21c0c7 !important; }
.tmpl-ocean a.c-theme,
.tmpl-ocean .c-theme { color: #21c0c7 !important; }
.tmpl-ocean .s-count { color: #04202f !important; }
.tmpl-ocean .web-btn.theme-bg { box-shadow: 0 8px 22px rgba(33, 192, 199, .28); }

.tmpl-ocean .product-area.pb-70 {
    background: rgba(255, 255, 255, .04);
    box-shadow: 0 2px 16px rgba(0, 0, 0, .25);
}

/* ---- custom-bridge accents → aqua ----------------------------------- */
.tmpl-ocean .site-category-box::before { background: #21c0c7; }
.tmpl-ocean .site-category-link:hover .site-category-box,
.tmpl-ocean .site-category-link:focus .site-category-box {
    border-color: #21c0c7;
    box-shadow: 0 12px 36px rgba(33, 192, 199, .18);
}
.tmpl-ocean .site-category-link:hover .site-category-box h4,
.tmpl-ocean .site-category-link:focus .site-category-box h4 { color: #0d7b80; }
.tmpl-ocean .site-category-link .site-category-box b.primary-color { color: #21c0c7; }
.tmpl-ocean .main-menu nav ul li a.site-nav-active,
.tmpl-ocean .main-menu nav ul li a.site-nav-active:hover { color: #21c0c7 !important; }
.tmpl-ocean .main-menu nav ul li a.site-nav-active::after { background: #21c0c7; }
.tmpl-ocean .s-p-wrapper .single-product .single-product-info h6 a:hover { color: #0d7b80 !important; }
.tmpl-ocean .site-page-btn:hover,
.tmpl-ocean .site-page-active { background: #21c0c7; border-color: #21c0c7; color: #04202f !important; }
.tmpl-ocean .shop-mini-category { color: #7fe3e8; }

/* ---- Header nav + icons: lighten for the dark hero ------------------ */
.tmpl-ocean .main-menu nav > ul > li > a { color: #cfeef0 !important; }
.tmpl-ocean .main-menu nav > ul > li:hover > a { color: #21c0c7 !important; }
.tmpl-ocean .main-menu ul li > a::before { background: #21c0c7; }
.tmpl-ocean header .dark-black-color,
.tmpl-ocean header .site-cart-toggle span,
.tmpl-ocean header .header-account span { color: #cfeef0 !important; }
.tmpl-ocean header .dark-black-color:hover,
.tmpl-ocean header .site-cart-toggle:hover span,
.tmpl-ocean header .header-account span:hover { color: #21c0c7 !important; }

/* ---- Hero: deep sea + rising bubbles + caustic glow + sun orb ------- */
.tmpl-ocean .single-slider {
    position: relative;
    background-color: #06283d !important;
    background-image:
        radial-gradient(120% 90% at 70% 5%, rgba(33,192,199,.12) 0%, rgba(33,192,199,0) 55%),
        linear-gradient(160deg, #06283d 0%, #0a3d5c 50%, #04202f 100%) !important;
}
.tmpl-ocean .single-slider::before,
.tmpl-ocean .single-slider::after {
    content: "";
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    z-index: -1; pointer-events: none;
}
/* Rising bubbles */
.tmpl-ocean .single-slider::before {
    background-image:
        radial-gradient(3px 3px at 12% 90%, rgba(180,245,248,.55), transparent),
        radial-gradient(2px 2px at 32% 95%, rgba(127,227,232,.5), transparent),
        radial-gradient(4px 4px at 58% 92%, rgba(180,245,248,.45), transparent),
        radial-gradient(2.5px 2.5px at 78% 96%, rgba(127,227,232,.5), transparent),
        radial-gradient(3px 3px at 90% 90%, rgba(180,245,248,.4), transparent);
    background-size: 340px 340px;
    animation: tmplBubbleRise 13s linear infinite;
}
/* Slow caustic light */
.tmpl-ocean .single-slider::after {
    background:
        radial-gradient(50% 40% at 25% 25%, rgba(33,192,199,.10), transparent 70%),
        radial-gradient(45% 35% at 75% 35%, rgba(127,227,232,.08), transparent 70%);
    animation: tmplCausticDrift 18s ease-in-out infinite alternate;
}
@keyframes tmplBubbleRise { from { background-position: 0 0; } to { background-position: 20px -340px; } }
@keyframes tmplCausticDrift { from { transform: translateX(-3%); opacity: .8; } to { transform: translateX(3%); opacity: 1; } }

.tmpl-ocean .slider-content h2 { color: #eafafb !important; text-shadow: 0 2px 16px rgba(0,0,0,.55); }
.tmpl-ocean .slider-content p  { color: rgba(225,244,246,.88) !important; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.tmpl-ocean .slider-shape .slider-bg-round {
    background: radial-gradient(circle at 38% 36%, rgba(224,252,253,.5) 0%, rgba(127,227,232,.28) 40%, rgba(33,192,199,.12) 72%, rgba(33,192,199,0) 100%) !important;
    box-shadow: 0 0 90px 24px rgba(33,192,199,.14);
    opacity: .68;
}

/* Inner-page title hero matches the template */
.tmpl-ocean .page-height {
    background-color: #06283d !important;
    background-image: linear-gradient(160deg, #06283d 0%, #0a3d5c 50%, #04202f 100%) !important;
}

/* Respect reduced-motion: keep the look, drop the motion */
@media (prefers-reduced-motion: reduce) {
    .tmpl-ocean .single-slider::before,
    .tmpl-ocean .single-slider::after,
    .tmpl-ocean .slider-shape { animation: none !important; }
}