/*
 * OzVet Theme – Main Stylesheet
 * Design inspired by ahnursing.com.au (Wellson theme layout)
 * Adapted for OzVet veterinary surgical supplies.
 *
 * Colour Palette:
 *   Primary Blue   : #005998
 *   Primary Dark   : #003f6e
 *   Accent Teal    : #00a99d
 *   Accent Orange  : #f47920
 *   Text Dark      : #1e2332
 *   Text Grey      : #6b7280
 *   BG Light Grey  : #f5f7fa
 *   White          : #ffffff
 */

/* ============================================================
   CSS CUSTOM PROPERTIES
============================================================ */
:root {
    --oz-primary       : #005998;
    --oz-primary-dark  : #003f6e;
    --oz-primary-light : #e8f0fb;
    --oz-accent        : #00a99d;
    --oz-accent-dark   : #007c73;
    --oz-orange        : #f47920;
    --oz-orange-dark   : #d4651a;
    --oz-text          : #1e2332;
    --oz-text-mid      : #4a5568;
    --oz-text-light    : #6b7280;
    --oz-border        : #e2e8f0;
    --oz-bg-light      : #f5f7fa;
    --oz-white         : #ffffff;
    --oz-black         : #000000;

    /* Typography */
    --font-heading : 'Poppins', sans-serif;
    --font-body    : 'Nunito Sans', sans-serif;

    /* Spacing */
    --section-padding : 90px;

    /* Border radius */
    --radius-sm  : 6px;
    --radius-md  : 12px;
    --radius-lg  : 20px;
    --radius-xl  : 30px;

    /* Shadows */
    --shadow-sm  : 0 2px 8px rgba(0,0,0,.08);
    --shadow-md  : 0 8px 30px rgba(0,0,0,.12);
    --shadow-lg  : 0 16px 48px rgba(0,0,0,.15);
    --shadow-blue: 0 8px 30px rgba(0, 89, 152, .25);

    /* Transitions */
    --transition : all .3s ease;
}

/* ============================================================
   RESET / BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family  : var(--font-body);
    font-size    : 15px;
    line-height  : 1.75;
    color        : var(--oz-text-mid);
    background   : var(--oz-white);
    overflow-x   : hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family : var(--font-heading);
    font-weight : 700;
    color       : var(--oz-text);
    line-height : 1.25;
    margin-top  : 0;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.75rem); }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: .9rem; }

a {
    color           : var(--oz-primary);
    text-decoration : none;
    transition      : var(--transition);
}
a:hover { color: var(--oz-accent); }

img {
    max-width  : 100%;
    height     : auto;
    display    : block;
}

ul { list-style: none; padding: 0; margin: 0; }

.section-padding { padding: var(--section-padding) 0; }
.bg-light-grey   { background-color: var(--oz-bg-light); }

/* ============================================================
   BUTTONS
============================================================ */
.btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : 6px;
    font-family     : var(--font-heading);
    font-weight     : 600;
    font-size       : .92rem;
    border-radius   : var(--radius-xl);
    padding         : 12px 28px;
    transition      : var(--transition);
    border          : 2px solid transparent;
    cursor          : pointer;
    text-decoration : none;
    letter-spacing  : .3px;
}

.btn-primary-ozvet {
    background  : var(--oz-primary);
    color       : var(--oz-white);
    border-color: var(--oz-primary);
}
.btn-primary-ozvet:hover {
    background  : var(--oz-primary-dark);
    border-color: var(--oz-primary-dark);
    color       : var(--oz-white);
    transform   : translateY(-2px);
    box-shadow  : var(--shadow-blue);
}

.btn-outline-ozvet {
    background  : transparent;
    color       : var(--oz-primary);
    border-color: var(--oz-primary);
}
.btn-outline-ozvet:hover {
    background  : var(--oz-primary);
    color       : var(--oz-white);
    transform   : translateY(-2px);
}

.btn-hero-primary {
    background  : var(--oz-orange);
    color       : var(--oz-white);
    border-color: var(--oz-orange);
    padding     : 14px 36px;
    font-size   : 1rem;
}
.btn-hero-primary:hover {
    background  : var(--oz-orange-dark);
    border-color: var(--oz-orange-dark);
    color       : var(--oz-white);
    transform   : translateY(-3px);
    box-shadow  : 0 8px 25px rgba(244, 121, 32, .35);
}

.btn-hero-outline {
    background  : transparent;
    color       : var(--oz-white);
    border-color: var(--oz-white);
    padding     : 14px 36px;
    font-size   : 1rem;
}
.btn-hero-outline:hover {
    background  : var(--oz-white);
    color       : var(--oz-primary);
    transform   : translateY(-3px);
}

.btn-topbar {
    background  : var(--oz-orange);
    color       : var(--oz-white);
    border-color: var(--oz-orange);
    padding     : 7px 18px;
    font-size   : .82rem;
    border-radius: var(--radius-xl);
}
.btn-topbar:hover {
    background  : var(--oz-orange-dark);
    border-color: var(--oz-orange-dark);
    color       : var(--oz-white);
}

.btn-shop {
    background  : var(--oz-accent);
    color       : var(--oz-white);
    border-color: var(--oz-accent);
    padding     : 10px 22px;
    font-size   : .88rem;
    border-radius: var(--radius-xl);
}
.btn-shop:hover {
    background  : var(--oz-accent-dark);
    border-color: var(--oz-accent-dark);
    color       : var(--oz-white);
}

.btn-cta-footer {
    background  : var(--oz-white);
    color       : var(--oz-primary);
    border-color: var(--oz-white);
    padding     : 14px 36px;
    font-size   : 1rem;
    font-weight : 700;
}
.btn-cta-footer:hover {
    background  : var(--oz-bg-light);
    color       : var(--oz-primary-dark);
    transform   : translateY(-3px);
}

.btn-cta-white {
    background  : var(--oz-white);
    color       : var(--oz-primary);
    border-color: var(--oz-white);
    padding     : 14px 36px;
    font-size   : 1rem;
    font-weight : 700;
}
.btn-cta-white:hover {
    background  : var(--oz-bg-light);
    color       : var(--oz-primary-dark);
}

.btn-cta-outline {
    background  : transparent;
    color       : var(--oz-white);
    border-color: rgba(255,255,255,.7);
    padding     : 14px 36px;
    font-size   : 1rem;
}
.btn-cta-outline:hover {
    background  : rgba(255,255,255,.15);
    color       : var(--oz-white);
    border-color: var(--oz-white);
}

.btn-add-cart {
    background   : var(--oz-primary);
    color        : var(--oz-white);
    border-color : var(--oz-primary);
    padding      : 10px 20px;
    font-size    : .85rem;
    border-radius: var(--radius-xl);
    white-space  : nowrap;
}
.btn-add-cart:hover {
    background  : var(--oz-primary-dark);
    border-color: var(--oz-primary-dark);
    color       : var(--oz-white);
}

/* ============================================================
   SECTION HEADERS
============================================================ */
.section-header { margin-bottom: 50px; }
.section-header.text-center { text-align: center; }

.section-tag {
    display         : inline-block;
    background      : var(--oz-primary-light);
    color           : var(--oz-primary);
    font-family     : var(--font-heading);
    font-weight     : 700;
    font-size       : .78rem;
    letter-spacing  : 2px;
    text-transform  : uppercase;
    padding         : 6px 18px;
    border-radius   : var(--radius-xl);
    margin-bottom   : 16px;
}

.section-title {
    margin-bottom   : 16px;
    position        : relative;
}

.section-title::after {
    content         : '';
    display         : block;
    width           : 60px;
    height          : 4px;
    background      : linear-gradient(90deg, var(--oz-primary), var(--oz-accent));
    border-radius   : 2px;
    margin-top      : 14px;
}

.section-header.text-center .section-title::after {
    margin-left  : auto;
    margin-right : auto;
}

.section-desc {
    font-size   : 1.05rem;
    color       : var(--oz-text-light);
    max-width   : 640px;
    margin      : 0 auto;
}

/* ============================================================
   TOP BAR
============================================================ */
.topbar {
    background  : var(--oz-primary-dark);
    color       : rgba(255,255,255,.85);
    font-size   : .83rem;
    padding     : 9px 0;
    position    : relative;
    z-index     : 1001;
}

.topbar-inner {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 16px;
    flex-wrap       : wrap;
}

.topbar-left {
    display     : flex;
    align-items : center;
    gap         : 22px;
}

.topbar-phone,
.topbar-email {
    color           : rgba(255,255,255,.85);
    display         : flex;
    align-items     : center;
    gap             : 7px;
    font-weight     : 500;
    text-decoration : none;
}
.topbar-phone:hover,
.topbar-email:hover { color: var(--oz-white); }

.topbar-right {
    display     : flex;
    align-items : center;
    gap         : 16px;
}

.topbar-social {
    display     : flex;
    align-items : center;
    gap         : 10px;
}

.topbar-social a {
    color           : rgba(255,255,255,.7);
    width           : 28px;
    height          : 28px;
    border-radius   : 50%;
    border          : 1px solid rgba(255,255,255,.25);
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : .72rem;
    transition      : var(--transition);
    text-decoration : none;
}
.topbar-social a:hover {
    background  : var(--oz-accent);
    border-color: var(--oz-accent);
    color       : var(--oz-white);
}

/* ============================================================
   HEADER
============================================================ */
.site-header {
    background  : var(--oz-white);
    position    : sticky;
    top         : 0;
    z-index     : 1000;
    box-shadow  : var(--shadow-sm);
    transition  : var(--transition);
}

.site-header.scrolled {
    box-shadow  : var(--shadow-md);
    background  : rgba(255,255,255,.97);
    backdrop-filter: blur(10px);
}

.header-inner {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 24px;
    padding         : 18px 0;
}

/* Logo */
.site-logo a { text-decoration: none; }
.site-logo img { max-height: 70px; width: auto; }

.logo-text {
    font-family     : var(--font-heading);
    font-size       : 1.8rem;
    font-weight     : 800;
    text-decoration : none;
    letter-spacing  : -1px;
}
.logo-oz  { color: var(--oz-primary); }
.logo-vet { color: var(--oz-accent);  }

/* Primary Nav */
.primary-nav { flex: 1; display: flex; justify-content: center; }

.primary-nav .nav {
    display     : flex;
    align-items : center;
    gap         : 4px;
    flex-wrap   : nowrap;
}

.primary-nav .nav-item { position: relative; }

.primary-nav .nav-link {
    font-family     : var(--font-heading);
    font-weight     : 600;
    font-size       : .9rem;
    color           : var(--oz-text);
    padding         : 10px 14px;
    border-radius   : var(--radius-sm);
    transition      : var(--transition);
    text-decoration : none;
    white-space     : nowrap;
}

.primary-nav .nav-link:hover,
.primary-nav .nav-item.active > .nav-link {
    color       : var(--oz-primary);
    background  : var(--oz-primary-light);
}

/* Dropdown */
.primary-nav .dropdown-menu {
    position        : absolute;
    top             : calc(100% + 8px);
    left            : 0;
    background      : var(--oz-white);
    border          : 1px solid var(--oz-border);
    border-radius   : var(--radius-md);
    box-shadow      : var(--shadow-md);
    min-width       : 240px;
    padding         : 10px 0;
    opacity         : 0;
    visibility      : hidden;
    transform       : translateY(10px);
    transition      : var(--transition);
    z-index         : 999;
}

.primary-nav .dropdown:hover .dropdown-menu,
.primary-nav .dropdown:focus-within .dropdown-menu {
    opacity     : 1;
    visibility  : visible;
    transform   : translateY(0);
}

.primary-nav .dropdown-item {
    display         : block;
    padding         : 9px 20px;
    font-family     : var(--font-heading);
    font-weight     : 500;
    font-size       : .88rem;
    color           : var(--oz-text-mid);
    text-decoration : none;
    transition      : var(--transition);
}
.primary-nav .dropdown-item:hover {
    color       : var(--oz-primary);
    background  : var(--oz-primary-light);
    padding-left: 26px;
}

/* Header Actions */
.header-actions {
    display     : flex;
    align-items : center;
    gap         : 12px;
}

/* Mobile Toggle */
.mobile-menu-toggle {
    display         : none;
    flex-direction  : column;
    justify-content : space-between;
    width           : 30px;
    height          : 22px;
    background      : none;
    border          : none;
    cursor          : pointer;
    padding         : 0;
}

.hamburger-line {
    display       : block;
    width         : 100%;
    height        : 3px;
    background    : var(--oz-text);
    border-radius : 2px;
    transition    : var(--transition);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: translateY(9.5px) rotate(45deg);
}
.mobile-menu-toggle.active .hamburger-line:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: translateY(-9.5px) rotate(-45deg);
}

/* Mobile Nav */
.mobile-nav {
    background  : var(--oz-white);
    border-top  : 2px solid var(--oz-primary);
    box-shadow  : var(--shadow-md);
    max-height  : 0;
    overflow    : hidden;
    transition  : max-height .4s ease, padding .3s ease;
}

.mobile-nav.open {
    max-height  : 80vh;
    overflow-y  : auto;
    padding     : 20px 0;
}

.mobile-menu-list .menu-item a {
    display         : block;
    padding         : 12px 0;
    font-family     : var(--font-heading);
    font-weight     : 600;
    font-size       : .95rem;
    color           : var(--oz-text);
    border-bottom   : 1px solid var(--oz-border);
    text-decoration : none;
}
.mobile-menu-list .menu-item a:hover { color: var(--oz-primary); }

.mobile-menu-list .sub-menu { padding-left: 20px; }
.mobile-menu-list .sub-menu a {
    font-weight : 500;
    font-size   : .88rem;
    color       : var(--oz-text-mid);
}

.mobile-nav-footer { padding-top: 20px; }

/* ============================================================
   HERO SLIDER
============================================================ */
.hero-section { position: relative; }

.hero-swiper {
    width  : 100%;
    height : 680px;
}

.hero-slide {
    position            : relative;
    background-size     : cover;
    background-position : center;
    background-repeat   : no-repeat;
    display             : flex;
    align-items         : center;
}

.hero-overlay {
    position   : absolute;
    inset      : 0;
    background : linear-gradient(
        105deg,
        rgba(0, 63, 110, .88) 0%,
        rgba(0, 89, 152, .65) 50%,
        rgba(0, 169, 157, .3) 100%
    );
}

.hero-content {
    position   : relative;
    z-index    : 2;
    height     : 100%;
    display    : flex;
    align-items: center;
}

.hero-text {
    max-width    : 680px;
    padding      : 40px 0;
    animation    : fadeInUp .8s ease forwards;
}

.hero-tag {
    display         : inline-block;
    background      : rgba(255,255,255,.15);
    color           : var(--oz-white);
    font-family     : var(--font-heading);
    font-weight     : 600;
    font-size       : .78rem;
    letter-spacing  : 2px;
    text-transform  : uppercase;
    padding         : 6px 18px;
    border-radius   : var(--radius-xl);
    border          : 1px solid rgba(255,255,255,.3);
    margin-bottom   : 18px;
}

.hero-title {
    font-size   : clamp(2rem, 4vw, 3rem);
    color       : var(--oz-white);
    font-weight : 800;
    margin-bottom: 18px;
    line-height : 1.2;
    text-shadow : 0 2px 12px rgba(0,0,0,.2);
}

.hero-subtitle {
    font-size    : 1.05rem;
    color        : rgba(255,255,255,.88);
    margin-bottom: 32px;
    max-width    : 520px;
    line-height  : 1.7;
}

.hero-btns {
    display   : flex;
    flex-wrap : wrap;
    gap       : 14px;
}

/* Hero Nav Buttons */
.hero-prev,
.hero-next {
    width       : 50px;
    height      : 50px;
    background  : rgba(255,255,255,.15);
    border      : 1px solid rgba(255,255,255,.4);
    border-radius: 50%;
    color       : var(--oz-white);
    font-size   : 1rem;
    transition  : var(--transition);
    display     : flex;
    align-items : center;
    justify-content: center;
}
.hero-prev::after,
.hero-next::after { display: none; }
.hero-prev:hover,
.hero-next:hover {
    background  : var(--oz-accent);
    border-color: var(--oz-accent);
    color       : var(--oz-white);
}

.hero-pagination {
    bottom : 24px !important;
}
.hero-pagination .swiper-pagination-bullet {
    width       : 10px;
    height      : 10px;
    background  : rgba(255,255,255,.5);
    opacity     : 1;
    transition  : var(--transition);
}
.hero-pagination .swiper-pagination-bullet-active {
    background  : var(--oz-white);
    width       : 28px;
    border-radius: 5px;
}

/* ============================================================
   STATS BAR
============================================================ */
.stats-bar {
    background  : var(--oz-primary);
    padding     : 0;
}

.stat-item {
    border-right : 1px solid rgba(255,255,255,.15);
}
.stat-item:last-child { border-right: none; }

.stat-inner {
    display         : flex;
    align-items     : center;
    gap             : 14px;
    padding         : 26px 20px;
}

.stat-icon {
    font-size   : 2rem;
    color       : rgba(255,255,255,.6);
    flex-shrink : 0;
}

.stat-number {
    display     : block;
    font-family : var(--font-heading);
    font-weight : 800;
    font-size   : 1.4rem;
    color       : var(--oz-white);
    line-height : 1;
}

.stat-label {
    display     : block;
    font-size   : .82rem;
    color       : rgba(255,255,255,.75);
    margin-top  : 2px;
}

/* ============================================================
   ABOUT SECTION
============================================================ */
.about-image-wrap {
    position : relative;
    display  : inline-block;
    width    : 100%;
}

.about-image-main {
    border-radius : var(--radius-lg);
    overflow      : hidden;
    box-shadow    : var(--shadow-lg);
}

.about-image-main img {
    width  : 100%;
    height : 460px;
    object-fit: cover;
}

.about-badge {
    position      : absolute;
    bottom        : -20px;
    right         : -20px;
    width         : 120px;
    height        : 120px;
    background    : var(--oz-accent);
    border-radius : 50%;
    display       : flex;
    align-items   : center;
    justify-content: center;
    box-shadow    : 0 8px 24px rgba(0,169,157,.35);
    animation     : float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

.about-badge-inner { text-align: center; }

.badge-number {
    display     : block;
    font-family : var(--font-heading);
    font-weight : 800;
    font-size   : 1.5rem;
    color       : var(--oz-white);
    line-height : 1;
}

.badge-text {
    display     : block;
    font-size   : .7rem;
    font-weight : 600;
    color       : rgba(255,255,255,.85);
    line-height : 1.2;
    margin-top  : 3px;
}

.about-sub-heading {
    color       : var(--oz-primary);
    font-size   : 1rem;
    font-weight : 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.about-highlights {
    display        : flex;
    flex-direction : column;
    gap            : 12px;
    margin-top     : 24px;
}

.highlight-item {
    display     : flex;
    align-items : flex-start;
    gap         : 12px;
    font-size   : .92rem;
    color       : var(--oz-text-mid);
}

.highlight-item i {
    color      : var(--oz-accent);
    font-size  : 1rem;
    margin-top : 2px;
    flex-shrink: 0;
}

/* ============================================================
   PROMISE & MISSION
============================================================ */
.promise-section {
    padding     : 0;
    margin      : 0;
}

.promise-card {
    display         : flex;
    gap             : 28px;
    padding         : 50px 40px;
    height          : 100%;
    position        : relative;
    overflow        : hidden;
}

.promise-card--primary { background: var(--oz-primary); }
.promise-card--accent  { background: var(--oz-accent);  }

.promise-icon {
    width           : 70px;
    height          : 70px;
    background      : rgba(255,255,255,.15);
    border-radius   : var(--radius-md);
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 1.8rem;
    color           : var(--oz-white);
    flex-shrink     : 0;
}

.promise-tag {
    display         : inline-block;
    background      : rgba(255,255,255,.15);
    color           : rgba(255,255,255,.9);
    font-size       : .75rem;
    font-weight     : 700;
    letter-spacing  : 2px;
    text-transform  : uppercase;
    padding         : 4px 14px;
    border-radius   : var(--radius-xl);
    margin-bottom   : 12px;
}

.promise-body h3 {
    color        : var(--oz-white);
    font-size    : 1.3rem;
    margin-bottom: 12px;
}

.promise-body p {
    color       : rgba(255,255,255,.82);
    font-size   : .92rem;
    line-height : 1.7;
    margin-bottom: 0;
}

.promise-link {
    display         : inline-flex;
    align-items     : center;
    gap             : 8px;
    color           : var(--oz-white);
    font-family     : var(--font-heading);
    font-weight     : 600;
    font-size       : .9rem;
    margin-top      : 20px;
    text-decoration : none;
    transition      : var(--transition);
}
.promise-link:hover {
    color  : rgba(255,255,255,.75);
    gap    : 14px;
}
.promise-link i { transition: var(--transition); }

/* ============================================================
   PRODUCTS GRID
============================================================ */
.product-card {
    background    : var(--oz-white);
    border-radius : var(--radius-md);
    overflow      : hidden;
    box-shadow    : var(--shadow-sm);
    transition    : var(--transition);
    height        : 100%;
    display       : flex;
    flex-direction: column;
}

.product-card:hover {
    box-shadow : var(--shadow-md);
    transform  : translateY(-6px);
}

.product-image-wrap {
    position   : relative;
    overflow   : hidden;
    background : var(--oz-bg-light);
}

.product-image {
    width      : 100%;
    height     : 220px;
    object-fit : contain;
    padding    : 20px;
    transition : transform .4s ease;
}

.product-card:hover .product-image { transform: scale(1.06); }

.product-overlay {
    position        : absolute;
    inset           : 0;
    background      : rgba(0, 89, 152, .75);
    display         : flex;
    align-items     : center;
    justify-content : center;
    opacity         : 0;
    transition      : var(--transition);
}

.product-card:hover .product-overlay { opacity: 1; }

.product-info {
    padding : 18px;
    flex    : 1;
    display : flex;
    flex-direction: column;
    gap     : 6px;
}

.product-sku {
    font-family  : var(--font-heading);
    font-size    : .75rem;
    font-weight  : 700;
    color        : var(--oz-accent);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.product-title {
    font-size   : .88rem;
    font-weight : 600;
    line-height : 1.4;
    color       : var(--oz-text);
    flex        : 1;
    margin      : 0;
}

.product-title a {
    color           : var(--oz-text);
    text-decoration : none;
}
.product-title a:hover { color: var(--oz-primary); }

.product-price {
    font-family : var(--font-heading);
    font-weight : 700;
    font-size   : 1rem;
    color       : var(--oz-primary);
}

/* ============================================================
   WHY CHOOSE US
============================================================ */
.why-card {
    background    : var(--oz-white);
    border-radius : var(--radius-md);
    padding       : 36px 28px;
    text-align    : center;
    box-shadow    : var(--shadow-sm);
    transition    : var(--transition);
    border-bottom : 3px solid transparent;
    height        : 100%;
}

.why-card:hover {
    box-shadow   : var(--shadow-md);
    transform    : translateY(-6px);
    border-color : var(--oz-primary);
}

.why-icon {
    width           : 70px;
    height          : 70px;
    background      : var(--oz-primary-light);
    border-radius   : var(--radius-md);
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 1.8rem;
    color           : var(--oz-primary);
    margin          : 0 auto 20px;
    transition      : var(--transition);
}

.why-card:hover .why-icon {
    background  : var(--oz-primary);
    color       : var(--oz-white);
}

.why-card h4 {
    font-size    : 1.05rem;
    margin-bottom: 10px;
}

.why-card p {
    font-size   : .9rem;
    color       : var(--oz-text-light);
    margin      : 0;
}

/* ============================================================
   CTA SECTION
============================================================ */
.cta-section {
    background  : linear-gradient(135deg, var(--oz-primary-dark) 0%, var(--oz-primary) 60%, var(--oz-accent) 100%);
    padding     : 80px 0;
    position    : relative;
    overflow    : hidden;
}

.cta-section::before {
    content     : '';
    position    : absolute;
    top         : -80px;
    right       : -80px;
    width       : 300px;
    height      : 300px;
    background  : rgba(255,255,255,.05);
    border-radius: 50%;
}
.cta-section::after {
    content     : '';
    position    : absolute;
    bottom      : -100px;
    left        : -60px;
    width       : 250px;
    height      : 250px;
    background  : rgba(255,255,255,.04);
    border-radius: 50%;
}

.cta-inner {
    position    : relative;
    z-index     : 2;
}

.cta-inner h2 {
    color       : var(--oz-white);
    font-size   : clamp(1.8rem, 4vw, 2.5rem);
    margin-bottom: 16px;
}

.cta-inner p {
    color       : rgba(255,255,255,.85);
    font-size   : 1.05rem;
    max-width   : 600px;
    margin      : 0 auto 36px;
}

.cta-buttons {
    display         : flex;
    justify-content : center;
    flex-wrap       : wrap;
    gap             : 16px;
}

/* ============================================================
   BLOG CARDS
============================================================ */
.blog-card {
    background    : var(--oz-white);
    border-radius : var(--radius-md);
    overflow      : hidden;
    box-shadow    : var(--shadow-sm);
    transition    : var(--transition);
    height        : 100%;
    display       : flex;
    flex-direction: column;
}

.blog-card:hover {
    box-shadow : var(--shadow-md);
    transform  : translateY(-6px);
}

.blog-image {
    overflow   : hidden;
    height     : 220px;
}

.blog-image img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transition : transform .5s ease;
}

.blog-card:hover .blog-image img { transform: scale(1.06); }

.blog-body {
    padding : 24px;
    flex    : 1;
    display : flex;
    flex-direction: column;
}

.blog-meta {
    font-size    : .8rem;
    color        : var(--oz-text-light);
    margin-bottom: 10px;
    display      : flex;
    gap          : 12px;
}

.blog-meta i { color: var(--oz-accent); }

.blog-title {
    font-size    : 1.05rem;
    margin-bottom: 10px;
    flex         : 1;
}

.blog-title a { color: var(--oz-text); }
.blog-title a:hover { color: var(--oz-primary); }

.blog-excerpt {
    font-size   : .88rem;
    color       : var(--oz-text-light);
    margin-bottom: 16px;
}

.blog-read-more {
    display         : inline-flex;
    align-items     : center;
    gap             : 8px;
    color           : var(--oz-primary);
    font-family     : var(--font-heading);
    font-weight     : 600;
    font-size       : .88rem;
    text-decoration : none;
    transition      : var(--transition);
    margin-top      : auto;
}
.blog-read-more:hover { gap: 14px; color: var(--oz-accent); }

/* ============================================================
   FOOTER
============================================================ */
.footer-cta {
    background  : var(--oz-primary);
    padding     : 40px 0;
}

.footer-cta-title {
    font-size   : 1.4rem;
    color       : var(--oz-white);
    margin-bottom: 8px;
}

.footer-cta-sub {
    color   : rgba(255,255,255,.8);
    margin  : 0;
    font-size: .92rem;
}

.footer-main {
    background  : var(--oz-text);
    padding     : 70px 0 50px;
    color       : rgba(255,255,255,.75);
}

.footer-brand img { max-height: 60px; }

.footer-logo-text {
    font-family     : var(--font-heading);
    font-size       : 2rem;
    font-weight     : 800;
    text-decoration : none;
    letter-spacing  : -1px;
}
.footer-logo-text .logo-oz  { color: #64b5f6; }
.footer-logo-text .logo-vet { color: var(--oz-accent); }

.footer-about {
    font-size   : .88rem;
    line-height : 1.75;
    color       : rgba(255,255,255,.65);
}

.footer-social {
    display     : flex;
    gap         : 10px;
    margin-top  : 20px;
}

.footer-social a {
    width           : 38px;
    height          : 38px;
    background      : rgba(255,255,255,.1);
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    color           : rgba(255,255,255,.7);
    font-size       : .85rem;
    transition      : var(--transition);
    text-decoration : none;
}
.footer-social a:hover {
    background  : var(--oz-accent);
    color       : var(--oz-white);
    transform   : translateY(-3px);
}

.footer-heading {
    color           : var(--oz-white);
    font-size       : .95rem;
    font-weight     : 700;
    letter-spacing  : .5px;
    margin-bottom   : 22px;
    padding-bottom  : 12px;
    border-bottom   : 1px solid rgba(255,255,255,.12);
    position        : relative;
}

.footer-heading::after {
    content     : '';
    position    : absolute;
    bottom      : -1px;
    left        : 0;
    width       : 40px;
    height      : 2px;
    background  : var(--oz-accent);
}

.footer-links {
    display        : flex;
    flex-direction : column;
    gap            : 10px;
}

.footer-links li a {
    color           : rgba(255,255,255,.65);
    font-size       : .88rem;
    text-decoration : none;
    display         : flex;
    align-items     : center;
    gap             : 8px;
    transition      : var(--transition);
}

.footer-links li a::before {
    content     : '›';
    color       : var(--oz-accent);
    font-size   : 1.1rem;
    font-weight : 700;
    transition  : var(--transition);
}

.footer-links li a:hover {
    color       : var(--oz-white);
    padding-left: 6px;
}

.footer-contact-list {
    display        : flex;
    flex-direction : column;
    gap            : 14px;
}

.footer-contact-list li {
    display     : flex;
    align-items : flex-start;
    gap         : 14px;
    font-size   : .88rem;
    color       : rgba(255,255,255,.65);
}

.footer-contact-list li i {
    color      : var(--oz-accent);
    font-size  : .95rem;
    margin-top : 2px;
    flex-shrink: 0;
    width      : 16px;
}

.footer-contact-list li a {
    color           : rgba(255,255,255,.65);
    text-decoration : none;
}
.footer-contact-list li a:hover { color: var(--oz-white); }

/* Footer Bottom */
.footer-bottom {
    background  : rgba(0,0,0,.25);
    padding     : 18px 0;
}

.footer-copy {
    color   : rgba(255,255,255,.5);
    font-size: .83rem;
    margin  : 0;
}

.footer-copy a {
    color           : rgba(255,255,255,.65);
    text-decoration : none;
}
.footer-copy a:hover { color: var(--oz-white); }

.footer-bottom-links {
    display         : flex;
    gap             : 22px;
    justify-content : flex-end;
    flex-wrap       : wrap;
}

.footer-bottom-links li a {
    color           : rgba(255,255,255,.5);
    font-size       : .83rem;
    text-decoration : none;
    transition      : var(--transition);
}
.footer-bottom-links li a:hover { color: var(--oz-white); }

/* ============================================================
   PAGE BANNER (inner pages)
============================================================ */
.page-banner {
    background    : linear-gradient(135deg, var(--oz-primary-dark), var(--oz-primary));
    padding       : 70px 0 60px;
    position      : relative;
    overflow      : hidden;
}

.page-banner::after {
    content         : '';
    position        : absolute;
    right           : -100px;
    top             : -100px;
    width           : 400px;
    height          : 400px;
    background      : rgba(255,255,255,.04);
    border-radius   : 50%;
}

.page-banner-title {
    color       : var(--oz-white);
    font-size   : clamp(1.8rem, 4vw, 2.5rem);
    margin      : 0 0 12px;
    position    : relative;
    z-index     : 2;
}

.page-banner .ozvet-breadcrumb {
    position    : relative;
    z-index     : 2;
}

/* ============================================================
   BREADCRUMB
============================================================ */
.ozvet-breadcrumb .breadcrumb {
    background  : transparent;
    padding     : 0;
    margin      : 0;
    display     : flex;
    flex-wrap   : wrap;
    gap         : 6px;
    align-items : center;
}

.ozvet-breadcrumb .breadcrumb-item {
    font-size   : .85rem;
    color       : rgba(255,255,255,.65);
    display     : flex;
    align-items : center;
    gap         : 6px;
}

.ozvet-breadcrumb .breadcrumb-item a {
    color           : rgba(255,255,255,.75);
    text-decoration : none;
}
.ozvet-breadcrumb .breadcrumb-item a:hover { color: var(--oz-white); }

.ozvet-breadcrumb .breadcrumb-item.active { color: var(--oz-white); }

.ozvet-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content : '›';
    color   : rgba(255,255,255,.4);
    padding : 0;
}

/* ============================================================
   BACK TO TOP
============================================================ */
.back-to-top {
    position        : fixed;
    bottom          : 30px;
    right           : 30px;
    width           : 46px;
    height          : 46px;
    background      : var(--oz-primary);
    color           : var(--oz-white);
    border          : none;
    border-radius   : 50%;
    font-size       : .95rem;
    cursor          : pointer;
    transition      : var(--transition);
    box-shadow      : var(--shadow-blue);
    opacity         : 0;
    visibility      : hidden;
    transform       : translateY(20px);
    z-index         : 999;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.back-to-top.visible {
    opacity     : 1;
    visibility  : visible;
    transform   : translateY(0);
}

.back-to-top:hover {
    background  : var(--oz-accent);
    transform   : translateY(-4px);
}

/* ============================================================
   PAGE LAYOUT (inner pages)
============================================================ */
.page-layout {
    padding : 70px 0;
}

.page-content { font-size: .95rem; }
.page-content p { margin-bottom: 18px; }

/* ============================================================
   SIDEBAR
============================================================ */
.sidebar .widget {
    background    : var(--oz-white);
    border-radius : var(--radius-md);
    padding       : 28px;
    margin-bottom : 28px;
    box-shadow    : var(--shadow-sm);
}

.sidebar .widget-title {
    font-size       : 1rem;
    font-weight     : 700;
    color           : var(--oz-text);
    padding-bottom  : 12px;
    border-bottom   : 2px solid var(--oz-primary-light);
    margin-bottom   : 20px;
    position        : relative;
}

.sidebar .widget-title::after {
    content     : '';
    position    : absolute;
    bottom      : -2px;
    left        : 0;
    width       : 40px;
    height      : 2px;
    background  : var(--oz-primary);
}

/* ============================================================
   BLOG (single + archive)
============================================================ */
.post-card {
    background    : var(--oz-white);
    border-radius : var(--radius-md);
    overflow      : hidden;
    box-shadow    : var(--shadow-sm);
    margin-bottom : 36px;
    transition    : var(--transition);
}

.post-card:hover { box-shadow: var(--shadow-md); }

.post-card-image img {
    width       : 100%;
    height      : 280px;
    object-fit  : cover;
}

.post-card-body { padding: 30px; }

.post-card-meta {
    display     : flex;
    gap         : 18px;
    font-size   : .82rem;
    color       : var(--oz-text-light);
    margin-bottom: 12px;
}
.post-card-meta a { color: var(--oz-text-light); }
.post-card-meta a:hover { color: var(--oz-primary); }
.post-card-meta i { color: var(--oz-accent); }

.post-card-title { margin-bottom: 12px; }
.post-card-title a { color: var(--oz-text); }
.post-card-title a:hover { color: var(--oz-primary); }

.post-card-excerpt { font-size: .92rem; color: var(--oz-text-light); }

/* Pagination */
.pagination-wrap {
    display         : flex;
    justify-content : center;
    margin-top      : 40px;
}

.page-numbers {
    display         : inline-flex;
    flex-wrap       : wrap;
    gap             : 6px;
}

.page-numbers a,
.page-numbers span {
    width           : 40px;
    height          : 40px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    border-radius   : var(--radius-sm);
    font-family     : var(--font-heading);
    font-weight     : 600;
    font-size       : .88rem;
    color           : var(--oz-text-mid);
    border          : 1px solid var(--oz-border);
    background      : var(--oz-white);
    transition      : var(--transition);
    text-decoration : none;
}

.page-numbers a:hover,
.page-numbers .current {
    background  : var(--oz-primary);
    color       : var(--oz-white);
    border-color: var(--oz-primary);
}

/* ============================================================
   404 PAGE
============================================================ */
.error-404-section {
    padding     : 100px 0;
    text-align  : center;
}

.error-code {
    font-family : var(--font-heading);
    font-size   : clamp(6rem, 15vw, 12rem);
    font-weight : 800;
    color       : var(--oz-primary-light);
    line-height : 1;
    margin-bottom: 20px;
}

.error-404-section h2 {
    font-size    : 1.8rem;
    margin-bottom: 16px;
}

.error-404-section p {
    font-size    : 1rem;
    color        : var(--oz-text-light);
    margin-bottom: 32px;
}

/* ============================================================
   ANIMATIONS
============================================================ */
@keyframes fadeInUp {
    from {
        opacity   : 0;
        transform : translateY(30px);
    }
    to {
        opacity   : 1;
        transform : translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity   : 0;
        transform : translateX(-30px);
    }
    to {
        opacity   : 1;
        transform : translateX(0);
    }
}

/* ============================================================
   RESPONSIVE – TABLET (≤ 991px)
============================================================ */
@media ( max-width: 991px ) {
    :root { --section-padding: 65px; }

    .hero-swiper { height: 540px; }
    .hero-title  { font-size: clamp(1.6rem, 4vw, 2.4rem); }

    .primary-nav { display: none; }
    .btn-shop    { display: none; }
    .mobile-menu-toggle { display: flex; }

    .about-image-main img { height: 360px; }
    .about-badge { bottom: -10px; right: -10px; width: 100px; height: 100px; }

    .promise-card { padding: 36px 28px; }
}

/* ============================================================
   RESPONSIVE – MOBILE (≤ 767px)
============================================================ */
@media ( max-width: 767px ) {
    :root { --section-padding: 50px; }

    .topbar { display: none; }

    .header-inner { padding: 14px 0; }

    .hero-swiper { height: 460px; }
    .hero-title  { font-size: 1.6rem; }
    .hero-subtitle { font-size: .92rem; }
    .hero-btns   { flex-direction: column; }
    .btn-hero-primary,
    .btn-hero-outline { width: 100%; max-width: 280px; justify-content: center; }
    .hero-prev, .hero-next { display: none; }

    .stat-inner  { padding: 16px 12px; }
    .stat-number { font-size: 1.1rem; }

    .about-image-main img { height: 280px; }
    .about-badge { display: none; }

    .promise-card {
        flex-direction: column;
        gap           : 18px;
        padding       : 32px 24px;
    }

    .footer-cta { text-align: center; }
    .footer-cta .text-md-end { text-align: center !important; }

    .footer-main { padding: 50px 0 36px; }

    .footer-bottom-links { justify-content: center; }

    .back-to-top { bottom: 20px; right: 20px; }
}

/* ============================================================
   CONTACT PAGE
============================================================ */
.contact-info-cards {
    display        : flex;
    flex-direction : column;
    gap            : 18px;
    margin-top     : 30px;
}

.contact-info-card {
    display         : flex;
    align-items     : flex-start;
    gap             : 16px;
    padding         : 20px;
    background      : var(--oz-white);
    border-radius   : var(--radius-md);
    box-shadow      : var(--shadow-sm);
    border-left     : 4px solid var(--oz-primary);
    transition      : var(--transition);
}

.contact-info-card:hover {
    box-shadow  : var(--shadow-md);
    border-color: var(--oz-accent);
    transform   : translateX(4px);
}

.contact-info-icon {
    width           : 48px;
    height          : 48px;
    background      : var(--oz-primary-light);
    border-radius   : var(--radius-sm);
    display         : flex;
    align-items     : center;
    justify-content : center;
    color           : var(--oz-primary);
    font-size       : 1.1rem;
    flex-shrink     : 0;
}

.contact-info-body h5 {
    font-size    : .9rem;
    font-weight  : 700;
    color        : var(--oz-text);
    margin-bottom: 4px;
}

.contact-info-body a {
    display         : block;
    color           : var(--oz-primary);
    font-weight     : 600;
    font-size       : .95rem;
    text-decoration : none;
}
.contact-info-body a:hover { color: var(--oz-accent); }

.contact-info-body p {
    font-size   : .78rem;
    color       : var(--oz-text-light);
    margin      : 4px 0 0;
}

/* Contact Form */
.contact-form-wrap {
    background    : var(--oz-white);
    border-radius : var(--radius-lg);
    padding       : 40px;
    box-shadow    : var(--shadow-sm);
    border        : 1px solid var(--oz-border);
}

.ozvet-input {
    border        : 1.5px solid var(--oz-border);
    border-radius : var(--radius-sm);
    padding       : 12px 16px;
    font-family   : var(--font-body);
    font-size     : .9rem;
    color         : var(--oz-text);
    transition    : var(--transition);
    width         : 100%;
}
.ozvet-input:focus {
    outline      : none;
    border-color : var(--oz-primary);
    box-shadow   : 0 0 0 3px rgba(0, 89, 152, .12);
}

.form-label {
    font-family  : var(--font-heading);
    font-weight  : 600;
    font-size    : .85rem;
    color        : var(--oz-text);
    margin-bottom: 6px;
    display      : block;
}

.required { color: var(--oz-orange); margin-left: 2px; }

.form-note {
    font-size   : .78rem;
    color       : var(--oz-text-light);
    margin      : 0;
}

.alert-success-ozvet,
.alert-error-ozvet {
    display         : flex;
    align-items     : center;
    gap             : 12px;
    padding         : 16px 20px;
    border-radius   : var(--radius-md);
    font-weight     : 600;
    font-size       : .92rem;
}

.alert-success-ozvet {
    background  : #ecfdf5;
    color       : #065f46;
    border      : 1px solid #6ee7b7;
}

.alert-error-ozvet {
    background  : #fef2f2;
    color       : #991b1b;
    border      : 1px solid #fca5a5;
}

/* ============================================================
   PRODUCTS PAGE
============================================================ */
.product-cat-card {
    display         : flex;
    flex-direction  : column;
    align-items     : flex-start;
    gap             : 12px;
    padding         : 32px 28px;
    background      : var(--oz-white);
    border-radius   : var(--radius-md);
    box-shadow      : var(--shadow-sm);
    border-bottom   : 4px solid transparent;
    transition      : var(--transition);
    text-decoration : none;
    height          : 100%;
    color           : var(--oz-text);
}

.product-cat-card:hover {
    box-shadow   : var(--shadow-md);
    border-color : var(--oz-primary);
    transform    : translateY(-6px);
    color        : var(--oz-text);
}

.product-cat-card--accent:hover { border-color: var(--oz-accent); }

.product-cat-icon {
    width           : 58px;
    height          : 58px;
    background      : var(--oz-primary-light);
    border-radius   : var(--radius-sm);
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 1.5rem;
    color           : var(--oz-primary);
    transition      : var(--transition);
}

.product-cat-card:hover .product-cat-icon {
    background  : var(--oz-primary);
    color       : var(--oz-white);
}

.product-cat-card--accent .product-cat-icon { background: rgba(0,169,157,.1); color: var(--oz-accent); }
.product-cat-card--accent:hover .product-cat-icon { background: var(--oz-accent); color: var(--oz-white); }

.product-cat-card h4 {
    font-size   : 1rem;
    margin      : 0;
    color       : var(--oz-text);
}

.product-cat-card p {
    font-size   : .87rem;
    color       : var(--oz-text-light);
    margin      : 0;
    flex        : 1;
}

.cat-link {
    display     : inline-flex;
    align-items : center;
    gap         : 6px;
    font-family : var(--font-heading);
    font-weight : 700;
    font-size   : .85rem;
    color       : var(--oz-primary);
    transition  : var(--transition);
}

.product-cat-card:hover .cat-link { gap: 10px; }
.product-cat-card--accent .cat-link { color: var(--oz-accent); }

/* Quality Badges */
.quality-badge-card {
    background    : var(--oz-white);
    border-radius : var(--radius-md);
    padding       : 28px 20px;
    text-align    : center;
    box-shadow    : var(--shadow-sm);
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 8px;
    transition    : var(--transition);
}

.quality-badge-card:hover {
    box-shadow : var(--shadow-md);
    transform  : translateY(-4px);
}

.quality-badge-card i {
    font-size   : 2rem;
    color       : var(--oz-primary);
}

.quality-badge-card strong {
    font-family : var(--font-heading);
    font-size   : 1rem;
    color       : var(--oz-text);
    display     : block;
}

.quality-badge-card span {
    font-size   : .8rem;
    color       : var(--oz-text-light);
}

/* ============================================================
   SINGLE POST EXTRAS
============================================================ */
.post-meta {
    display     : flex;
    flex-wrap   : wrap;
    gap         : 18px;
    font-size   : .85rem;
    color       : var(--oz-text-light);
}

.post-meta-item {
    display     : flex;
    align-items : center;
    gap         : 7px;
}

.post-meta-item a {
    color           : var(--oz-text-light);
    text-decoration : none;
}
.post-meta-item a:hover { color: var(--oz-primary); }

.text-primary { color: var(--oz-primary) !important; }

.post-tags {
    display     : flex;
    flex-wrap   : wrap;
    align-items : center;
    gap         : 8px;
    font-size   : .85rem;
    color       : var(--oz-text-light);
}

.tag-link {
    background      : var(--oz-primary-light);
    color           : var(--oz-primary);
    padding         : 4px 12px;
    border-radius   : var(--radius-xl);
    font-size       : .8rem;
    font-weight     : 600;
    text-decoration : none;
    transition      : var(--transition);
}
.tag-link:hover {
    background  : var(--oz-primary);
    color       : var(--oz-white);
}

.post-nav-link {
    display         : flex;
    flex-direction  : column;
    gap             : 6px;
    padding         : 18px;
    background      : var(--oz-bg-light);
    border-radius   : var(--radius-md);
    text-decoration : none;
    transition      : var(--transition);
    border          : 1px solid var(--oz-border);
}
.post-nav-link:hover {
    background   : var(--oz-primary-light);
    border-color : var(--oz-primary);
}

.nav-label {
    font-size   : .78rem;
    font-weight : 700;
    color       : var(--oz-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-title {
    font-size   : .9rem;
    font-weight : 600;
    color       : var(--oz-text);
    line-height : 1.4;
    display     : -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow    : hidden;
}

/* Comments area */
.comments-area .comment-list { list-style: none; padding: 0; }
.comments-area .comment { margin-bottom: 28px; }

.page-links {
    display     : flex;
    flex-wrap   : wrap;
    gap         : 8px;
    align-items : center;
    margin-top  : 24px;
    font-family : var(--font-heading);
    font-weight : 600;
    font-size   : .88rem;
}
.page-links a {
    padding         : 6px 14px;
    border          : 1px solid var(--oz-border);
    border-radius   : var(--radius-sm);
    color           : var(--oz-primary);
    text-decoration : none;
}
.page-links a:hover { background: var(--oz-primary); color: var(--oz-white); }

/* Search result page */
.search-results .post-card { margin-bottom: 28px; }

/* ============================================================
   RESPONSIVE – SMALL MOBILE (≤ 480px)
============================================================ */
@media ( max-width: 480px ) {
    .hero-swiper { height: 400px; }

    .cta-buttons { flex-direction: column; align-items: center; }
    .btn-cta-white,
    .btn-cta-outline { width: 100%; max-width: 280px; }
}