/* ========================================
   TABLE OF CONTENTS
   ======================================== 
   1. ━━━ RESET ━━━
   2. ━━━ ANNOUNCEMENT BAR ━━━
   3. Using your Brand Red
   4. Black (#1A1A2A)
   5. Force single line
   6. Space for scrollbar
   7. Center products
   8. Hide scrollbar Firefox
   9. Hide scrollbar Chrome/Safari
   10. Slider Wrapper and Arrows
   11. Hidden at start
   12. Shop Archive Wrap Override
   13. Fixed minimum width for flex items
   14. Ensure they don't stretch
   15. Increased from 80%
   16. Center the smaller stack
   17. Reduced from 34px for better fit
   18. Rating Stars
   19. Ginger Pop / Gold
   20. Twin Stack Layout
   21. Fix for flex layout sizing
   22. Triple Stack Layout for Ultimate Pack
   23. Scaling icons to match "No Preservatives" scale
   24. Gut Friendly
   25. Low Calorie
   26. Naturally Fermented
   27. Gluten Free
   28. Live Cultures
   29. Finetuning specific icons if needed
   30. No Preservatives base scale
   31. â” â” â”  REMEDY STYLE BLOGS SECTION â” â” â”
   32. Light Peach/Pink like Remedy
   33. Left Header Styles
   34. Right Slider Styles
   35. Important for flex child slider
   36. Navigation & Progress
   37. Shared banner base
   38. Featured — warm morning tea mood
   39. Jamun — bold desi berry purple
   40. Health — fresh sage & life
   41. Noise overlay for texture
   42. Decorative ring behind icon
   43. Inner content
   44. btnreadmore
   45. pixel perfect
   46. Disable old wave code (no longer used)
   47. SOCIAL  Zero top space
   48. top 100px
   49. Shop title jaisa
   50. 0 rakho kyunki socialsection me already top padding hai
   51. NEW: White button with black arrow
   52. white background
   53. shopnow jaisa smooth
   54. black arrow
   55. Hover: shopnow style (red bg + white arrow)
   56. red like shopnow
   57. white arrow on hover
   58. red background
   59. ━━━ Mobile Nav ━━━
   60. ━━━ Misc ━━━
   61. ━━━ LARGE DESKTOPS (1200px and below) ━━━
   62. ━━━ TABLETS & SMALL LAPTOPS (991px and below) ━━━
   63. ━━━ MOBILE PORTRAIT & TABLET MINI (768px and below) ━━━
   64. ━━━ SMALL PHONES (480px and below) ━━━
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Yellowtail&family=Montserrat:wght@400;500;600;700&display=block');

/* ===================================================================
   CLIENT WEBSITE — "HEALTH-ADE MEETS OLIPOP" PREMIUM REDESIGN
   =================================================================== */

:root {
    --deep-green: #1B3A2D;
    --leaf-green: #4D7C5B;
    --fresh-green: #7FB069;
    --pale-sage: #D5E3D0;
    --oat-milk: #FAF7EE;
    --tanned-linen: #F0E8D8;
    --honey-cream: #E8DCC4;
    --cranberry-pop: #D23647;
    --peach-pop: #F28C5E;
    --jamun-pop: #7B439A;
    --ginger-pop: #F0A830;
    --ink: #1A1A1A;
    --charcoal: #3D3D3D;
    --stone: #787878;
    --chalk: #F5F1EA;
    --card-white: #FFFFFF;
    --border-soft: rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 16px 40px rgba(27, 58, 45, 0.15);
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.05);
    --radius: 20px;
    --heading: 'Bebas Neue', cursive;
    --body: 'Montserrat', sans-serif;
    --handwrite: 'Yellowtail', cursive;
    --max-w: 1440px;
    --nav-h: 200px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ========================================
   ━━━ RESET ━━━
   ======================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--body);
    font-size: 18px;
    line-height: 1.75;
    color: var(--ink);
    background: var(--oat-milk);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 28px;
}

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

a {
    text-decoration: none;
    color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading);
    color: var(--ink);
    letter-spacing: -0.03em;
}

/* ========================================
   ━━━ ANNOUNCEMENT BAR ━━━
   ======================================== */
.announcement-bar {
    background: #F28C5E;
    /* ========================================
   Using your Brand Red
   ======================================== */
    color: #FFFFFF;
    padding: 12px 0;
    text-align: center;
    font-family: var(--heading);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    z-index: 1001;
}

.announcement-bar p {
    margin: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HEADER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 142px;
    background: var(--oat-milk);
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: none;
    z-index: 1000;
    transition: all 0.4s var(--ease);
}

.header-inner {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 40px;
}

.header.scrolled {
    height: 72px;
    background: var(--oat-milk);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.header-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    z-index: 10;
}

.header.scrolled .header-center {
    top: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
}

.header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 24px;
}

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

.nav-link {
    font-family: var(--heading);
    font-size: 24px;
    font-weight: 500;
    color: #2D2D2D;
    letter-spacing: 0px;
    text-transform: uppercase;
    padding: 6px 8px;
    transition: all 0.25s ease;
    text-decoration: none !important;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.header.scrolled .nav-link {
    font-size: 18px;
}

.nav-link svg {
    margin-top: 3px;
    /* Pushes the dropdown arrow down slightly */
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 8px;
    right: 8px;
    height: 1px;
    background: #F28C5E;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.nav-link:hover {
    color: #F28C5E;
    background: transparent;
}

.nav-link:hover::after {
    transform: scaleX(1);
}

.nav-link-accent {
    color: var(--ink) !important;
    /* ========================================
   Black (#1A1A2A)
   ======================================== */
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.nav-link-accent::after {
    background: var(--leaf-green);
}

.nav-link-accent svg {
    width: 14px;
    height: 14px;
}

.nav-link-accent:hover {
    background: transparent !important;
    color: #F28C5E !important;
}

.nav-link-accent:hover::after {
    background: #F28C5E;
}

.logo-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 140px;
    height: 140px;
    position: relative;
    top: 0;
    transition: all 0.45s var(--ease);
}

.logo-reset img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo-reset:hover {
    transform: scale(1.04);
}

.header.scrolled .logo-reset {
    font-size: 20px;
    width: 70px;
    height: 70px;
    top: 0;
    box-shadow: none;
    border: none;
    background: transparent;
    letter-spacing: -0.3px;
}

.logo-lets {
    font-family: var(--body);
    font-size: 6.5px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--fresh-green);
    margin-bottom: 2px;
    transition: all 0.45s var(--ease);
}

.header.scrolled .logo-lets {
    font-size: 4.5px;
    letter-spacing: 2px;
    margin-bottom: 0;
}

.header-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--charcoal);
    transition: all 0.25s ease;
}

.header.scrolled .header-icon {
    width: 40px;
    height: 40px;
}

.header-icon:hover {
    background: #F5EAE4;
    color: #F28C5E;
}

.header-icon svg {
    width: 26px;
    height: 26px;
    transition: all 0.25s ease;
}

.header.scrolled .header-icon svg {
    width: 20px;
    height: 20px;
}

.cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #F28C5E;
    color: #FFF;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(123, 67, 154, 0.4);
    transition: all 0.25s ease;
}

.header.scrolled .cart-count {
    width: 20px;
    height: 20px;
    font-size: 11px;
    top: 0;
    right: 0;
}

.nav-item.has-dropdown {
    height: 100%;
    display: flex;
    align-items: center;
}

.dropdown-menu {
    position: absolute;
    /* Relative to nav-item.has-dropdown */
    top: 100%;
    /* Sits exactly below the header border */
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    /* Full viewport width to mimic fixed width */
    max-width: 1520px;
    background: var(--card-white);
    border-radius: 0 0 var(--radius) var(--radius);
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s var(--ease);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-top: none;
    display: flex;
    justify-content: center;
    z-index: 999;
}

.nav-item.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.dropdown-inner {
    display: grid;
    grid-template-columns: 240px 1fr 340px;
    width: 100%;
}

.testimonials-highlight {
    background: var(--jamun-pop);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.dropdown-col {
    background: var(--card-white);
    padding: 60px 80px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.dropdown-inner:has(.kombucha-item:hover) .dropdown-col,
.dropdown-col:hover {
    opacity: 1;
    visibility: visible;
}

.dropdown-sidebar {
    background: var(--card-white);
    padding: 60px 40px;
    border-right: 1px solid rgba(0, 0, 0, 0.04);
}

.dropdown-category-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dropdown-category-list a {
    font-family: var(--heading);
    font-size: 13px;
    font-weight: 500;
    color: var(--charcoal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color 0.2s ease;
}

.dropdown-category-list a i {
    width: 14px;
    height: 14px;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.dropdown-category-list a:hover i,
.dropdown-category-list a.active i {
    opacity: 1;
    transform: translateX(4px);
}

.dropdown-category-list a:hover,
.dropdown-category-list a.active {
    color: var(--peach-pop);
    font-weight: 700;
}

.dropdown-category-list a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.dropdown-title {
    font-family: var(--heading);
    font-size: 12px;
    font-weight: 800;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shop-all-link {
    font-size: 11px;
    font-weight: 600;
    text-decoration: underline;
    color: var(--stone);
    text-transform: capitalize;
    letter-spacing: 0;
}

.shop-all-link:hover {
    color: var(--peach-pop);
}

.dropdown-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 32px;
    list-style: none;
}

.dropdown-links li a {
    font-family: var(--body);
    font-size: 14px;
    font-weight: 500;
    color: var(--charcoal);
    transition: all 0.2s ease;
}

.dropdown-links a:hover {
    color: var(--peach-pop);
    transform: translateX(4px);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.dropdown-image-col {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--pale-sage);
    overflow: hidden;
}

.dropdown-image-col img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transform: scale(1.1);
    transition: transform 0.4s var(--ease);
}

.dropdown-menu:hover .dropdown-image-col img {
    transform: scale(1);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero-reference {
    width: 100%;
    position: relative;
    margin-top: 0;
}

.hero-ref-container {
    width: 100%;
    height: 569px;
}

.hero-banner-fullbleed {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 80px;
    image-rendering: -webkit-optimize-contrast;
}

@keyframes heroZoom {
    0% {
        background-size: 100% auto;
    }

    100% {
        background-size: 110% auto;
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 3;
    width: 45%;
    max-width: 500px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    padding-bottom: 20px;
}

.hero-content.hero-left {
    text-align: left;
    align-items: flex-start;
    max-width: 560px;
}

.hero-accent {
    font-family: var(--handwrite);
    font-size: 28px;
    color: var(--fresh-green);
    display: block;
}

.hero-headline {
    font-family: var(--heading);
    font-size: clamp(48px, 7vw, 86px);
    font-weight: 800;
    color: var(--charcoal);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.text-accent {
    color: #F28C5E;
}

.hero-subheadline {
    font-family: var(--body);
    font-size: 21px;
    font-weight: 500;
    color: var(--charcoal);
    max-width: 600px;
    line-height: 1.6;
}

.hero-ctas {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--heading);
    font-weight: 700;
    font-size: 15px;
    color: var(--deep-green);
    background: #FFFFFF;
    padding: 16px 36px;
    border-radius: 100px;
    transition: all 0.35s var(--ease);
    letter-spacing: 0.02em;
}

.btn-hero-primary i {
    transform: translateY(1px);
    /* Pushes the arrow down slightly */
}

.btn-hero-primary:hover {
    background: #F28C5E;
    color: #FFF;
    transform: translateY(-3px);
}

.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--heading);
    font-weight: 600;
    font-size: 15px;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 16px 32px;
    border-radius: 100px;
    transition: all 0.35s var(--ease);
    backdrop-filter: blur(8px);
}

.btn-hero-secondary:hover {
    background: #F28C5E;
    border-color: #F28C5E;
    color: #FFF;
    transform: translateY(-3px);
}

.hero-trust-badges {
    display: flex;
    gap: 20px;
    margin-top: 16px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--body);
    font-size: 12px;
    font-weight: 600;
    color: var(--charcoal);
    letter-spacing: 0.03em;
}

.trust-badge svg {
    width: 14px;
    height: 14px;
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.4);
    z-index: 3;
    animation: float 2.5s ease-in-out infinite;
}

.hero-scroll-indicator span {
    font-family: var(--body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

.hero-scroll-indicator svg {
    width: 18px;
    height: 18px;
}

@keyframes float {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(8px);
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PRODUCT SHOWCASE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.product-showcase {
    background: var(--oat-milk);
    padding: 48px 0;
}

.product-showcase .section-header {
    text-align: center;
    margin-bottom: 32px;
}

.product-showcase .header-accent {
    font-family: var(--handwrite);
    display: block;
    font-size: 28px;
    color: var(--leaf-green);
    margin-bottom: 8px;
}

.product-showcase .header-title {
    font-size: 56px;
    font-weight: 800;
    color: var(--charcoal);
    margin-bottom: 24px;
    letter-spacing: normal;
    text-transform: uppercase;
}

.shop-tabs {
    display: inline-flex;
    background: var(--card-white);
    border-radius: 13px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.shop-tab {
    font-family: var(--heading);
    font-size: 22px;
    font-weight: 500;
    color: var(--stone);
    background: transparent;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s var(--ease);
}

.shop-tab.active {
    background: #F28C5E;
    color: #FFFFFF;
}

.shop-tab:hover:not(.active) {
    color: var(--ink);
}

.product-grid {
    display: flex;
    flex-wrap: nowrap;
    /* ========================================
   Force single line
   ======================================== */
    overflow-x: auto;
    gap: 40px;
    padding-bottom: 24px;
    /* ========================================
   Space for scrollbar
   ======================================== */
    scroll-behavior: smooth;
    justify-content: center;
    /* ========================================
   Center products
   ======================================== */
    scrollbar-width: none;
    /* ========================================
   Hide scrollbar Firefox
   ======================================== */
}

.product-grid::-webkit-scrollbar {
    display: none;
    /* ========================================
   Hide scrollbar Chrome/Safari
   ======================================== */
}

/* ========================================
   Slider Wrapper and Arrows
   ======================================== */
.product-slider-wrapper {
    position: relative;
    width: 100%;
}

.grid-arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--brand-red);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s var(--ease);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.grid-arrow:hover {
    background-color: var(--deep-green);
    transform: translateY(-50%) scale(1.1);
}

.grid-arrow.prev-arrow {
    left: -20px;
    opacity: 0;
    pointer-events: none;
    /* ========================================
   Hidden at start
   ======================================== */
}

.grid-arrow.next-arrow {
    right: -20px;
}

/* ========================================
   Shop Archive Wrap Override
   ======================================== */
.shop-archive-grid {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    justify-content: flex-start !important;
    padding-bottom: 40px;
}

.product-card {
    text-decoration: none !important;
    color: inherit;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.5s var(--ease);
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 20px 0;
    min-width: 320px;
    /* ========================================
   Fixed minimum width for flex items
   ======================================== */
    max-width: 320px;
    /* ========================================
   Ensure they don't stretch
   ======================================== */
    flex: 0 0 auto;
}

.product-card:hover {
    transform: translateY(-8px);
}

.image-stack {
    position: relative;
    width: 90%;
    /* ========================================
   Increased from 80%
   ======================================== */
    margin: 0 auto 12px auto;
    /* ========================================
   Center the smaller stack
   ======================================== */
    aspect-ratio: 1 / 1.15;
    background: transparent !important;
}

.image-stack img.img-default {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto !important;
    height: 100% !important;
    object-fit: contain;
    transition: all 0.6s var(--ease);
}

.image-stack img.img-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    opacity: 0;
    transition: all 0.4s var(--ease);
    z-index: 2;
}

.product-card:hover .img-default {
    opacity: 0;
    transform: translate(-50%, -55%) scale(0.95);
}

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

.card-info {
    padding: 0 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-name {
    font-family: var(--heading);
    font-size: 28px;
    /* ========================================
   Increased for better visibility
   ======================================== */
    font-weight: 800;
    margin-bottom: 4px;
    color: var(--ink);
    letter-spacing: normal;
    text-transform: uppercase;
}

/* ========================================
   Rating Stars
   ======================================== */
.product-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.stars {
    display: flex;
    gap: 2px;
    color: #F0A830;
    /* ========================================
   Ginger Pop / Gold
   ======================================== */
}

.stars i {
    width: 14px;
    height: 14px;
}

.review-count {
    font-size: 13px;
    color: var(--stone);
    font-family: var(--body);
}

/* ========================================
   Twin Stack Layout
   ======================================== */
.twin-stack {
    position: absolute;
    /* Fix normal-flow blowout */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.twin-stack .can {
    position: relative;
    height: 100% !important;
    /* EXACT match with single cans */
    max-width: none;
    /* Let height dictate size entirely */
    width: auto !important;
    object-fit: contain;
    transition: transform 0.4s var(--ease);
    flex-shrink: 0;
    margin: 0 -15px;
    /* Pull them close together like Remedy */
}

.product-card:hover .twin-stack .can {
    transform: translateY(-8px);
}

/* ========================================
   Triple Stack Layout for Ultimate Pack
   ======================================== */
.triple-stack {
    position: absolute;
    /* Fix normal-flow blowout */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.triple-stack .can {
    position: relative;
    height: 100% !important;
    /* EXACT match with single & twin cans */
    max-width: none;
    width: auto !important;
    object-fit: contain;
    transition: transform 0.4s var(--ease);
    z-index: 1;
    flex-shrink: 0;
    /* Let width expand to 480px parent without shrinking */
    margin: 0 -35px;
    /* Heavy overlap to fit 3 full size cans in a 320px box */
}

/* Ensuring correct visual order regardless of HTML structural order */
.triple-stack .can-left {
    order: 1;
}

.triple-stack .can-center {
    order: 2;
}

.triple-stack .can-right {
    order: 3;
}

.product-card:hover .triple-stack .can {
    transform: translateY(-8px);
}

.price-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0px;
}

.product-price {
    font-family: var(--body);
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
}

.old-price {
    display: none;
}

.product-size {
    font-family: var(--body);
    font-size: 18px;
    color: var(--stone);
    margin-bottom: 12px;
}

.btn-add-basket {
    background: #F28C5E;
    color: #FFFFFF;
    font-family: var(--heading);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 14px 28px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(123, 67, 154, 0.3);
    transition: all 0.3s ease;
}

.btn-add-basket:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(123, 67, 154, 0.4);
    background: #F28C5E;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BRAND PHILOSOPHY
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.brand-philosophy {
    padding: 120px 0;
    background: var(--oat-milk);
    text-align: center;
    color: var(--charcoal);
}

.philosophy-header {
    margin-bottom: 80px;
}

.phil-title {
    font-family: var(--heading);
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 30px;
    color: var(--charcoal);
}

.phil-subtitle p {
    font-family: var(--body);
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 5px;
    font-weight: 500;
}

.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 40px 60px;
    max-width: 1000px;
    margin: 0 auto 80px;
    padding: 0 40px;
}

.phil-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.phil-icon-container {
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: transform 0.4s var(--ease);
    position: relative;
}

.phil-item:hover .phil-icon-container {
    transform: scale(1.05);
}

.phil-icon-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
}

/* ========================================
   All icons same size (matching Gut Friendly / Low Calorie)
   ======================================== */
.philosophy-grid .phil-item img {
    transform: scale(1.35);
}

.philosophy-footer {
    margin-top: 50px;
    text-align: center;
}

.phil-footer-tagline {
    font-family: var(--body);
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 25px;
    color: var(--charcoal);
    letter-spacing: -0.01em;
}

.btn-phil-link {
    font-family: var(--heading);
    font-weight: 700;
    font-size: 16px;
    color: var(--charcoal);
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 8px;
    transition: all 0.3s ease;
}

.btn-phil-link:hover {
    color: #F28C5E;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TESTIMONIALS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.testimonials-highlight {
    padding: 60px 0;
    /* Premium dark background inspired by Jamun */
    background: var(--jamun-pop);
    color: #FFF;
}

.testimonials-highlight .section-header {
    text-align: center;
    margin-bottom: 48px;
}

.testimonials-highlight .header-accent {
    color: var(--pale-sage);
}

.testimonials-highlight .header-title {
    color: #FFF;
    font-size: 48px;
    font-family: var(--heading);
    letter-spacing: 1px;
}

.testimonial-carousel {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quote-icon-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 240px;
    color: rgba(255, 255, 255, 0.05);
    z-index: 0;
    pointer-events: none;
}

.testimonial-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transition: all 0.8s var(--ease);
}

.testimonial-slide.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.testimonial-content-wrap {
    z-index: 10;
    padding: 0 40px;
}

.testimonial-content-wrap .stars {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 30px;
    color: var(--ginger-pop);
}

.testimonial-content-wrap .stars i {
    width: 20px;
    height: 20px;
}

.testimonial-text {
    font-family: var(--body);
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.3;
    font-weight: 400;
    color: #FFF;
    margin-bottom: 40px;
    letter-spacing: -0.01em;
}

.testimonial-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.user-name {
    font-family: var(--heading);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pale-sage);
}

.user-meta {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--body);
}

.testimonial-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.testimonial-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.testimonial-dots .dot.active {
    background: var(--peach-pop);
    transform: scale(1.4);
}

/* ========================================
   â” â” â”  REMEDY STYLE BLOGS SECTION â” â” â”
   ======================================== */
.blogs-section {
    background: var(--warm-beige);
    /* Match main website background instead of pink */
    /* ========================================
   Light Peach/Pink removed based on user feedback
   ======================================== */
    padding: 100px 0;
    overflow: hidden;
    position: relative;
}

.blogs-flex-container {
    max-width: none;
    /* Let container stretch to screen edge */
    margin: 0;
    padding-left: 5%;
    /* Very small padding, practically flush left */
    padding-right: 0;
    /* Bleeding right edge */
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
}

/* ========================================
   Left Header Styles
   ======================================== */
.blogs-header-left {
    flex: 0 0 320px;
    /* Compress the column slightly so text breaks nicely */
    text-align: center;
    /* Center-align text relative to the column like Remedy */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.blogs-label {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center the ornaments and text */
    gap: 16px;
    margin-bottom: 24px;
}

.blogs-label .ornament {
    width: 25px;
    height: 20px;
    background: repeating-linear-gradient(110deg, var(--charcoal), var(--charcoal) 2px, transparent 2px, transparent 6px);
    opacity: 0.8;
}

.blogs-label .label-text {
    font-family: var(--heading);
    font-size: 64px;
    /* Massive font size matching remedy */
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--charcoal);
    text-transform: uppercase;
}

.blogs-sub-intro {
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--charcoal);
    margin-bottom: 32px;
    opacity: 0.9;
}

.blogs-explore-btn {
    font-family: var(--heading);
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 6px;
    color: var(--charcoal);
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
}

.blogs-explore-btn:hover {
    color: #F28C5E;
}

/* ========================================
   Right Slider Styles
   ======================================== */
.blogs-slider-right {
    flex: 1;
    min-width: 0;
    /* ========================================
   Important for flex child slider
   ======================================== */
    position: relative;
}

.blogs-slider-container {
    position: relative;
    padding-bottom: 40px;
}

.blogs-slider {
    display: flex;
    gap: 40px;
    /* Matched the new flex container gap */
    overflow-x: auto;
    scrollbar-width: none;
    /* Firefox */
    scroll-behavior: smooth;
}

.blogs-slider::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.blog-entry-card {
    flex: 0 0 450px;
    /* Much larger card, matches Remedy */
    background: #FFF;
    border-radius: 20px;
    /* Sharper corners like Remedy */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    min-height: 550px;
}

.blog-card-image {
    width: 100%;
    height: 420px;
    /* Huge flush image matching Remedy ratio */
    overflow: hidden;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease);
}

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

.blog-card-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: center;
}

.blog-entry-title {
    font-family: var(--heading);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
    color: var(--charcoal);
}

.blog-entry-desc {
    font-family: var(--body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--stone);
    margin-bottom: 24px;
    flex: 1;
}

.blog-card-footer {
    margin-top: auto;
}

.blog-entry-link {
    font-family: var(--heading);
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--charcoal);
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
}

.blog-entry-link:hover {
    color: #F28C5E;
}

/* ========================================
   Navigation & Progress
   ======================================== */
.blog-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: #FFF;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 10;
    color: var(--charcoal);
    transition: all 0.3s ease;
}

.blog-nav-arrow:hover {
    background: #F28C5E;
    color: #FFF;
}

.blog-nav-arrow.prev {
    left: -20px;
}

.blog-nav-arrow.next {
    right: 20px;
    /* INSET arrow so it's visible ON TOP of the bleeding edge cards */
}

.blog-slider-progress {
    width: 100%;
    max-width: 940px;
    /* Constrain it to roughly the width of two cards + gap (450+40+450) */
    height: 3px;
    /* Slightly thicker */
    background: rgba(0, 0, 0, 0.1);
    /* Darker track */
    margin: 40px auto 0;
    /* Centering the bar horizontally inside the slide container area */
    position: relative;
    border-radius: 4px;
}

.progress-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
    background: var(--charcoal);
    border-radius: 4px;
    transition: left 0.6s var(--ease), width 0.6s var(--ease);
}

@media (max-width: 1024px) {
    .blogs-flex-container {
        flex-direction: column;
        gap: 50px;
    }

    .blogs-header-left {
        flex: none;
        width: 100%;
        text-align: center;
    }

    .blogs-label {
        justify-content: center;
    }

    .blog-entry-card {
        flex: 0 0 320px;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BLOG BANNERS — CSS Placeholder Tiles
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ========================================
   Shared banner base
   ======================================== */
.blog-banner-featured,
.blog-banner-jamun,
.blog-banner-health {
    width: 100%;
    height: 100%;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.8s var(--ease);
}

.blog-card:hover .blog-banner-featured,
.blog-card:hover .blog-banner-jamun,
.blog-card:hover .blog-banner-health {
    transform: scale(1.04);
}

/* ========================================
   Featured — warm morning tea mood
   ======================================== */
.blog-banner-featured {
    background:
        radial-gradient(ellipse at 30% 60%, rgba(240, 168, 48, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(27, 58, 45, 0.12) 0%, transparent 50%),
        linear-gradient(135deg, #1B3A2D 0%, #2E5C44 40%, #3A7057 70%, #4D7C5B 100%);
}

/* ========================================
   Jamun — bold desi berry purple
   ======================================== */
.blog-banner-jamun {
    background:
        radial-gradient(ellipse at 20% 70%, rgba(123, 67, 154, 0.3) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 25%, rgba(210, 54, 71, 0.15) 0%, transparent 50%),
        linear-gradient(135deg, #2D1B3D 0%, #4A2260 40%, #F28C5E 75%, #9B65BA 100%);
}

/* ========================================
   Health — fresh sage & life
   ======================================== */
.blog-banner-health {
    background:
        radial-gradient(ellipse at 40% 30%, rgba(127, 176, 105, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 80%, rgba(27, 58, 45, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #1B3A2D 0%, #2D6A4F 45%, #52B788 75%, #74C69D 100%);
}

/* ========================================
   Noise overlay for texture
   ======================================== */
.blog-banner-featured::before,
.blog-banner-jamun::before,
.blog-banner-health::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: 0.35;
    pointer-events: none;
}

/* ========================================
   Decorative ring behind icon
   ======================================== */
.blog-banner-featured::after,
.blog-banner-jamun::after,
.blog-banner-health::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

/* ========================================
   Inner content
   ======================================== */
.banner-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.banner-icon {
    font-size: 48px;
    line-height: 1;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
    animation: bannerFloat 3.5s ease-in-out infinite;
}

.banner-label {
    font-family: var(--heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

@keyframes bannerFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* ========================================
   btnreadmore
   ======================================== */
.btn-read-more {
    font-family: var(--heading);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--deep-green);
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 5px;
    margin-top: auto;
    transition: color 0.25s ease;
    display: inline-block;
}

.btn-read-more:hover {
    color: #F28C5E;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ✅ REMEDY-STYLE WAVE TRANSITION
   Peach (blogs) → Cream (social) exact match
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wave-transition-bottom {
    width: 100%;
    height: 80px !important;
    line-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    top: -2px;
    /* ========================================
   pixel perfect
   ======================================== */
    pointer-events: none;
    overflow: hidden;
}

.wave-transition-bottom svg {
    width: 100%;
    height: 100% !important;
    display: block;
    position: absolute;
    bottom: 0;
}

/* ========================================
   Disable old wave code (no longer used)
   ======================================== */
.wave-separator {
    display: none;
}

.social-section .wave-separator.remedy-design {
    display: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SOCIAL SECTION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ========================================
   SOCIAL  Zero top space
   ======================================== */
.social-section {
    padding: 100px 0 80px;
    /* ========================================
   top 100px
   ======================================== */
    background: var(--oat-milk);
    text-align: center;
    position: relative;
}



.social-title {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--charcoal) !important;
    /* ========================================
   Shop title jaisa
   ======================================== */
    letter-spacing: -0.02em;
    text-transform: uppercase;
}



.social-handle {
    font-family: var(--body);
    font-weight: 600;
    font-size: 15px;
    color: #F28C5E;
    letter-spacing: 0.05em;
}

.social-header {
    margin-bottom: 40px;
    padding-top: 0;
    /* ========================================
   0 rakho kyunki socialsection me already top padding hai
   ======================================== */
}


.social-header .header-main {
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-header .ornament {
    display: none;
}

.social-slider-wrap {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 56px;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--card-white);
    border: none;
    color: var(--deep-green);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.slider-arrow.prev {
    left: 0;
}

.slider-arrow.next {
    right: 0;
}

.slider-arrow:hover {
    background: #F28C5E;
    color: #FFF;
    transform: translateY(-50%) scale(1.1);
}

.social-slider {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.social-slider.single-video-center {
    justify-content: center;
}

.social-slider::-webkit-scrollbar {
    display: none;
}

.social-card {
    flex: 0 0 calc(25% - 12px);
    min-width: 200px;
    aspect-ratio: 9/16;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--deep-green);
    position: relative;
    transition: all 0.4s var(--ease);
}

.social-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: var(--shadow-hover);
}

.social-image {
    width: 100%;
    height: 100%;
    position: relative;
}

.social-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.social-demo-banner {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    z-index: 5;
    pointer-events: none;
}

.social-chip {
    background: #FFF;
    color: var(--charcoal);
    font-family: var(--heading);
    font-size: 10px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 100px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.social-meta {
    color: #FFF;
    font-size: 12px;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    font-family: var(--body);
}

.fallback-thumb {
    background: linear-gradient(135deg, #1C362A 0%, #0F1D16 100%);
    /* Premium brand dark green gradient */
    display: flex;
    align-items: center;
    justify-content: center;
}

.fallback-thumb img {
    width: 60% !important;
    height: auto !important;
    opacity: 0.9;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--deep-green);
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.social-card:hover .play-overlay {
    transform: translate(-50%, -50%) scale(1.15);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.footer {
    background: var(--oat-milk);
    padding: 32px 0 40px;
    color: var(--charcoal);
    border-radius: 0;
}

.footer .container {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 64px;
}

.footer-main {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 2.5fr;
    gap: 32px;
    margin-bottom: 64px;
}

.footer-logo-circle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-logo-circle .logo-reset {
    color: var(--ink);
    font-size: 26px;
}

.footer-logo-circle .logo-lets {
    color: var(--charcoal);
}

.footer-col h4 {
    font-family: var(--heading);
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
}

.footer-col ul li a {
    font-size: 15px;
    color: var(--charcoal);
    transition: all 0.25s ease;
}

.footer-col ul li a:hover {
    color: var(--peach-pop);
    transform: translateX(4px);
}

.newsletter-box h4 {
    font-family: var(--heading);
    font-size: 24px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 10px;
}

.newsletter-box p {
    font-size: 14px;
    color: var(--charcoal);
    margin-bottom: 24px;
}

.newsletter-form {
    display: flex;
    border-radius: 100px;
    overflow: hidden;
    background: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
}


.newsletter-form input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--charcoal);
    font-size: 15px;
    padding: 16px 24px;
    font-family: var(--body);
}

.newsletter-form input:focus {
    outline: none;
}

.newsletter-form input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

/* ========================================
   NEW: White button with black arrow
   ======================================== */
.btn-newsletter-submit {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    background: var(--ink) !important;
    /* ========================================
   white background
   ======================================== */
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.35s var(--ease);
    /* ========================================
   shopnow jaisa smooth
   ======================================== */
    margin: 4px;
}

.btn-newsletter-submit i,
.btn-newsletter-submit svg {
    color: #FFF !important;
    width: 20px;
    height: 20px;
}

/* ========================================
   Hover: shopnow style (red bg + white arrow)
   ======================================== */
.btn-newsletter-submit:hover {
    background: var(--peach-pop) !important;
    /* ========================================
   red like shopnow
   ======================================== */
    transform: translateY(-3px);
}

.btn-newsletter-submit:hover i,
.btn-newsletter-submit:hover svg {
    color: #FFF !important;
    /* ========================================
   white arrow on hover
   ======================================== */
}

.footer-bottom {
    padding-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-socials {
    display: flex;
    gap: 12px;
}

.footer-socials a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.04);
    color: var(--ink);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.footer-socials a:hover {
    background: var(--peach-pop) !important;
    /* ========================================
   red background
   ======================================== */
    color: #FFF !important;
    transform: translateY(-3px);
}

.footer-contact {
    text-align: right;
}

.footer-contact h5 {
    display: none;
}

.footer-contact p {
    font-size: 12px;
    color: var(--stone);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-contact a {
    font-family: var(--heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
}

.footer-legal {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 24px;
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-legal p {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.4);
}

.legal-links {
    display: flex;
    gap: 24px;
}

.legal-links a {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.4);
    transition: color 0.2s ease;
}

.legal-links a:hover {
    color: #F28C5E;
}

/* ========================================
   ━━━ Mobile Nav ━━━
   ======================================== */
/* ========================================
   VIDEO LIGHTBOX (SLIDE-IN)
   ======================================== */
.video-lightbox {
    position: fixed;
    bottom: -100%;
    right: 40px;
    width: 400px;
    aspect-ratio: 9/16;
    max-height: 80vh;
    z-index: 2000;
    transition: bottom 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s ease;
    pointer-events: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.video-lightbox.active {
    bottom: 40px;
    pointer-events: auto;
}

.lightbox-content {
    width: 100%;
    height: 100%;
    position: relative;
    background: #000;
}

.close-lightbox {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    backdrop-filter: blur(4px);
    transition: background 0.2s;
}

.close-lightbox:hover {
    background: rgba(0, 0, 0, 0.8);
}

.video-container {
    width: 100%;
    height: 100%;
}

.video-container iframe,
.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
}

@media (max-width: 768px) {
    .video-lightbox {
        width: 100%;
        max-height: 100vh;
        bottom: 0;
        right: 0;
        border-radius: 0;
        transform: translateY(100%);
    }

    .video-lightbox.active {
        bottom: 0;
        transform: translateY(0);
    }
}

/* ========================================
   CUSTOM VIDEO LIGHTBOX (Bottom Right Popup)
   ======================================== */
.custom-video-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    /* Remove flex centering so we can place it bottom-right freely */
    pointer-events: none;
    /* Let clicks pass through the invisible background */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.custom-video-lightbox.active {
    opacity: 1;
}

/* Remove the dark overlay completely so user can scroll the site */
.lightbox-overlay {
    display: none;
}

.lightbox-content {
    position: absolute;
    /* Absolute within the fixed 100vw container */
    bottom: 30px;
    right: 30px;
    z-index: 2;
    width: 320px;
    /* Smaller, PIP-like width */
    height: 500px;
    /* Smaller height */
    background: #000;
    border-radius: 16px;
    /* Rounded corners */
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    /* Softer floating shadow */
    transform: translateY(120%);
    /* Start hidden below the screen */
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    /* Enable clicks inside the video box */
    border: 3px solid #fff;
    /* White border for premium feel */
}

.custom-video-lightbox.active .lightbox-content {
    transform: translateY(0);
    /* Slide up into view */
}

.lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.6);
    /* Slightly darker for contrast */
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #FFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    backdrop-filter: blur(4px);
    transition: all 0.2s;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}

.lightbox-iframe-container {
    flex-grow: 1;
    width: 100%;
}

.lightbox-iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Ensure JS cursor pointer works on triggers */
.js-video-modal-trigger {
    cursor: pointer;
}


.mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--deep-green);
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s var(--ease);
}

.mobile-nav.active {
    opacity: 1;
    visibility: visible;
}

.mobile-nav-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: center;
}

.mobile-link {
    font-family: var(--heading);
    font-size: 40px;
    font-weight: 800;
    color: #FFF;
    text-decoration: none;
    transition: all 0.25s ease;
}

.mobile-link:hover {
    color: var(--fresh-green);
}

/* ========================================
   ━━━ Misc ━━━
   ======================================== */
.tab-link.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    position: relative;
}

.tab-link.disabled::after {
    content: 'SOON';
    position: absolute;
    top: -8px;
    right: -4px;
    font-size: 8px;
    font-weight: 700;
    color: var(--cranberry-pop);
    letter-spacing: 1px;
}

.testimonial-card .stars svg {
    fill: var(--ginger-pop);
    stroke: var(--ginger-pop);
    width: 18px;
    height: 18px;
}

.image-placeholder {
    width: 100%;
    height: 100%;
    aspect-ratio: 4/3;
    background: var(--pale-sage);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
}

.usp-icon-wrap svg {
    width: 32px;
    height: 32px;
}

/* ━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
   ━━━━━━━━━━━━━━━━━━━ */
/* ===================================================================
   CONSOLIDATED RESPONSIVE DESIGN
   =================================================================== */

/* ========================================
   ━━━ LARGE DESKTOPS (1200px and below) ━━━
   ======================================== */
@media (max-width: 1200px) {
    .container {
        max-width: 1100px;
    }

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

    .hero-content {
        width: 50%;
    }

    .product-grid {
        gap: 30px;
    }

    .footer-main {
        grid-template-columns: repeat(3, 1fr);
        gap: 48px;
    }

    .blogs-grid-container {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 40px;
    }

    .blogs-editorial-bg {
        display: none;
    }

    .blog-card.featured {
        grid-column: 1;
        grid-template-columns: 1fr;
    }

    .blog-card.compact {
        grid-column: 1 !important;
    }
}

/* ========================================
   ━━━ TABLETS & SMALL LAPTOPS (991px and below) ━━━
   ======================================== */
@media (max-width: 991px) {
    .header-left {
        display: none;
    }

    .header {
        height: 72px;
    }

    .header-center {
        left: 40px;
        transform: none;
    }

    .logo-reset {
        width: 120px;
        height: 120px;
    }

    .hamburger {
        display: flex !important;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        padding: 10px;
    }

    .hamburger span {
        display: block;
        width: 25px;
        height: 2px;
        background: var(--charcoal);
        transition: 0.3s;
    }

    .hamburger.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .hamburger.open span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .hero-ref-container {
        height: 500px;
    }

    .hero-banner-fullbleed {
        padding: 0 40px;
        background-position: center;
    }

    .hero-content {
        width: 70%;
        max-width: none;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .footer-main {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   ━━━ MOBILE PORTRAIT & TABLET MINI (768px and below) ━━━
   ======================================== */
@media (max-width: 768px) {
    :root {
        --nav-h: 120px;
    }

    .container {
        padding: 0 20px;
    }

    .header {
        height: 64px;
    }

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

    .header-center {
        left: 20px;
    }

    .logo-reset {
        width: 90px;
        height: 90px;
    }

    .header.scrolled .logo-reset {
        width: 70px;
        height: 70px;
        top: -10px;
    }

    .hero-reference {
        margin-top: 64px;
    }

    .hero-ref-container {
        height: auto;
        min-height: 480px;
    }

    .hero-banner-fullbleed {
        padding: 60px 20px;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .hero-overlay {
        background: rgba(255, 255, 255, 0.4);
    }

    .hero-content {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .hero-headline {
        font-size: 42px;
    }

    .hero-subheadline {
        font-size: 16px;
    }

    .hero-ctas {
        flex-direction: column;
        width: 100%;
    }

    .hero-trust-badges {
        justify-content: center;
    }

    .product-showcase .header-title {
        font-size: 36px;
    }

    .product-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .philosophy-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-main {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .footer-brand,
    .footer-logo-circle {
        justify-content: center;
        margin: 0 auto;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }

    .footer-legal {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .newsletter-form {
        max-width: 400px;
        margin: 0 auto;
    }
}

/* ========================================
   ━━━ SMALL PHONES (480px and below) ━━━
   ======================================== */
@media (max-width: 480px) {
    .header-actions {
        gap: 8px;
    }

    .header-icon {
        width: 32px;
        height: 32px;
    }

    .hero-headline {
        font-size: 32px;
    }

    .hero-subheadline {
        font-size: 15px;
    }

    .product-showcase .header-title {
        font-size: 28px;
    }

    .philosophy-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .phil-item {
        padding: 15px;
    }

    .testimonial-text {
        font-size: 16px;
    }

    .social-title {
        font-size: 24px;
    }

    .footer-col h4 {
        font-size: 14px;
    }

    .footer-legal p,
    .legal-links a {
        font-size: 12px;
    }
}

/* ========================================
   SINGLE BLOG POST PAGE
   ======================================== */
.single-post-page {
    background: var(--oat-milk);
}

.single-post-hero {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
}

.single-post-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-post-hero-fallback {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2D1B3D 0%, #7B439A 100%);
}

.single-post-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
}

.single-post-container {
    max-width: 800px;
    margin: -60px auto 80px;
    padding: 60px 48px;
    background: var(--card-white);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 2;
}

.single-post-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-family: var(--body);
    font-size: 13px;
    color: var(--stone);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.post-divider {
    color: var(--stone);
}

.single-post-title {
    font-family: var(--heading);
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 900;
    color: var(--charcoal);
    line-height: 1.1;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.single-post-body {
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.85;
    color: var(--charcoal);
}

.single-post-body p {
    margin-bottom: 20px;
}

.single-post-body h2,
.single-post-body h3 {
    font-family: var(--heading);
    color: var(--ink);
    margin: 40px 0 16px;
    text-transform: uppercase;
}

.single-post-body h2 {
    font-size: 28px;
}

.single-post-body h3 {
    font-size: 22px;
}

.single-post-body ul,
.single-post-body ol {
    margin: 16px 0 24px 24px;
}

.single-post-body li {
    margin-bottom: 8px;
}

.single-post-body blockquote {
    border-left: 4px solid #7B439A;
    padding: 16px 24px;
    margin: 24px 0;
    background: rgba(123, 67, 154, 0.05);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: var(--charcoal);
}

.single-post-body img {
    border-radius: 12px;
    margin: 24px 0;
}

.single-post-back {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.btn-back-blog {
    font-family: var(--heading);
    font-size: 14px;
    font-weight: 700;
    color: var(--charcoal);
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.btn-back-blog:hover {
    color: #7B439A;
}

@media (max-width: 768px) {
    .single-post-hero {
        height: 300px;
    }

    .single-post-container {
        margin: -40px 16px 60px;
        padding: 40px 24px;
    }

    .single-post-title {
        font-size: 28px;
    }
}

/* ========================================
   RESET JOURNAL (REMEDY STYLE ARCHIVE)
   ======================================== */
.journal-main-content {
    background: var(--oat-milk);
}

/* Hero Section */
.remedy-style-hero {
    position: relative;
    width: 100%;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Align Content to the right like Remedy */
    overflow: hidden;
    background: var(--warm-beige);
    padding: 60px 5%;
}

.journal-hero-banner {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.journal-hero-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    /* Push image focus appropriately */
}

.journal-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(245, 239, 237, 0) 0%, rgba(221, 192, 168, 0.7) 100%);
    /* Subtle fade so text is readable */
}

.journal-hero-content-right {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 450px;
    margin-right: 10%;
    /* Spacing from right edge */
}

.remedy-blog-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

.remedy-blog-title {
    font-family: var(--heading-condensed), var(--heading);
    /* If condensed exists, use it */
    font-size: clamp(50px, 8vw, 84px);
    /* Much larger, like Remedy */
    font-weight: 900;
    color: var(--charcoal);
    line-height: 0.85;
    /* Very tight line height */
    letter-spacing: -0.04em;
    text-transform: uppercase;
    transform: scaleY(1.1);
    /* Slight vertical stretch if true condensed not available */
}

.remedy-blog-subtitle {
    font-family: var(--body);
    font-size: 16px;
    /* Larger subtitle */
    color: var(--charcoal);
    font-weight: 500;
    line-height: 1.5;
    margin-top: 15px;
}

/* ============================
   Remedy-Style Split Hero Banner
   ============================ */
.journal-hero-split {
    display: flex;
    width: 100%;
    min-height: 420px;
    overflow: hidden;
    background: #d9c4a8;
}

.journal-hero-image-side {
    flex: 0 0 60%;
    position: relative;
    overflow: hidden;
}

.journal-hero-image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    display: block;
}

.journal-hero-text-side {
    flex: 0 0 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 50px;
    background: linear-gradient(135deg, #d9c4a8 0%, #c9b49a 100%);
}

.journal-hero-text-inner {
    text-align: center;
    max-width: 380px;
}

.journal-ornaments {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 8px 0;
}

.ornament-dot {
    color: var(--peach-pop, #F28C5E);
    font-size: 14px;
    letter-spacing: 8px;
}

.journal-hero-title {
    font-family: var(--heading), 'Bebas Neue', cursive;
    font-size: clamp(38px, 5vw, 56px);
    font-weight: 900;
    color: var(--charcoal, #3D3D3D);
    line-height: 0.9;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}

.journal-hero-desc {
    font-family: var(--body), 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--charcoal, #3D3D3D);
    font-weight: 400;
    line-height: 1.65;
    margin-top: 18px;
    opacity: 0.85;
}

@media (max-width: 768px) {
    .journal-hero-split {
        flex-direction: column;
        min-height: auto;
    }

    .journal-hero-image-side {
        flex: none;
        height: 280px;
    }

    .journal-hero-text-side {
        flex: none;
        padding: 30px 20px;
    }

    .journal-hero-title {
        font-size: 32px;
    }

    .journal-hero-desc {
        font-size: 13px;
    }
}

/* Categories Bar */
.journal-categories-bar {
    background: var(--card-white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 0 5%;
}

.journal-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    height: 60px;
}

.journal-category-list a {
    text-decoration: none;
    font-family: var(--heading-condensed), var(--heading);
    font-size: 14px;
    /* Slightly increased size based on feedback */
    font-weight: 900;
    color: var(--charcoal);
    text-transform: uppercase;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    transition: color 0.3s ease;
    letter-spacing: -0.01em;
    transform: scaleY(1.1);
}

.journal-category-list a:hover {
    color: #7B439A;
}

.journal-category-list a.active::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--charcoal);
}

/* Toolbar / Sort Bar */
.journal-toolbar-bar {
    padding: 30px 5%;
}

.journal-sort {
    display: flex;
    align-items: center;
}

.sort-dropdown-box {
    position: relative;
    user-select: none;
    z-index: 10;
}

.sort-dropdown-current {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    background: var(--card-white);
    border: 1px solid rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    /* Smooth rounded corners */
    padding: 12px 20px;
    cursor: pointer;
    min-width: 250px;
    transition: border-radius 0.2s ease;
}

.sort-dropdown-box.active .sort-dropdown-current {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

.sort-label {
    font-family: var(--heading-condensed), var(--heading);
    font-size: 13px;
    font-weight: 900;
    color: var(--charcoal);
    transform: scaleY(1.1);
}

.current-sort {
    font-family: var(--heading-condensed), var(--heading);
    font-size: 13px;
    font-weight: 900;
    color: var(--charcoal);
    transform: scaleY(1.1);
    margin-left: auto;
}

.sort-pipe {
    font-family: var(--body);
    font-size: 14px;
    color: var(--charcoal);
    opacity: 0.5;
}

.sort-dropdown-current svg {
    transition: transform 0.3s ease;
}

.sort-dropdown-box.active .sort-dropdown-current svg {
    transform: scaleY(-1);
}

.sort-dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--card-white);
    border: 1px solid rgba(0, 0, 0, 0.6);
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.2s ease;
}

.sort-dropdown-box.active .sort-dropdown-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sort-dropdown-options a {
    text-decoration: none;
    font-family: var(--heading-condensed), var(--heading);
    font-size: 13px;
    font-weight: 900;
    color: var(--charcoal);
    padding: 12px 20px;
    transform: scaleY(1.1);
    transition: background 0.2s ease;
}

.sort-dropdown-options a:hover {
    background: rgba(0, 0, 0, 0.03);
}

/* Grid & Cards */
.journal-grid-section {
    padding: 60px 5% 100px;
}

.remedy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 30px;
    /* More vertical breathing room */
}

.remedy-article-card {
    background: var(--card-white);
    border-radius: 8px;
    /* Sharper corners */
    overflow: hidden;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.03);
    /* Extremely subtle shadow, flat look */
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease;
}

.remedy-article-card:hover {
    transform: translateY(-5px);
}

.remedy-article-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.remedy-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.remedy-article-card:hover .remedy-article-image img {
    transform: scale(1.05);
}

.remedy-article-content {
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: center;
}

.remedy-article-title {
    font-family: var(--heading-condensed), var(--heading);
    font-size: 18px;
    font-weight: 900;
    color: var(--charcoal);
    text-transform: uppercase;
    margin-bottom: 8px;
    /* Tighter spacing */
    line-height: 1.1;
    transform: scaleY(1.1);
    /* Compressed look */
    letter-spacing: -0.02em;
}

.remedy-article-title a {
    color: inherit;
    text-decoration: none;
}

.remedy-article-title a:hover {
    color: #7B439A;
}

.remedy-article-desc {
    font-family: var(--body);
    font-size: 14px;
    /* Slightly larger description */
    color: var(--charcoal);
    opacity: 0.8;
    margin-bottom: 25px;
    line-height: 1.5;
    flex-grow: 1;
}

.remedy-read-more {
    font-family: var(--heading-condensed), var(--heading);
    font-size: 10px;
    /* Smaller, like toolbar */
    font-weight: 900;
    color: var(--charcoal);
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: 2px solid var(--charcoal);
    padding-bottom: 2px;
    align-self: center;
    transition: color 0.3s ease, border-color 0.3s ease;
    transform: scaleY(1.1);
}

.remedy-read-more:hover {
    color: #7B439A;
    border-color: #7B439A;
}

/* Pagination */
.journal-pagination {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.journal-pagination .page-numbers {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    color: var(--charcoal);
    font-family: var(--heading);
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.journal-pagination .page-numbers:hover {
    background: rgba(0, 0, 0, 0.05);
}

.journal-pagination .page-numbers.current {
    background: var(--charcoal);
    color: var(--card-white);
}

/* Responsive */
@media (max-width: 1024px) {
    .remedy-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .remedy-style-hero {
        justify-content: center;
        padding: 80px 5%;
    }

    .journal-hero-content-right {
        margin-right: 0;
        max-width: 100%;
        background: rgba(255, 255, 255, 0.85);
        /* Readability on mobile */
        padding: 30px 20px;
        border-radius: 12px;
    }

    .remedy-blog-title {
        font-size: 32px;
    }

    .journal-category-list {
        gap: 20px;
    }

    .remedy-grid {
        grid-template-columns: 1fr;
    }

    .sort-label {
        display: none;
        /* Hide on small screens for space */
    }
}