/* =========================================================

   BLUE HIMALAYAN FARM

   FINAL MASTER CSS

   - Blue / teal / green hero

   - Carrot-orange outer fruit ring

   - Green-teal inner ring

   - Bright white fruit center

   - Clear spinning fruit

   ========================================================= */



* {

    box-sizing: border-box;

}



:root {

    --blue: #1f3f78;

    --blue-dark: #162f5d;

    --blue-mid: #24558f;

    --blue-light: #2c72a4;



    --green: #3f7d45;

    --green-dark: #1e5937;

    --green-light: #5e9f50;



    --teal: #55b79a;

    --teal-dark: #2f8f82;



    --carrot: #ed8927;

    --carrot-dark: #d97814;



    --cream: #faf9f3;

    --white: #ffffff;



    --text: #31483a;

    --muted: #6f7c72;

    --line: #e1e7df;

    --danger: #a14537;



    --shadow: 0 14px 34px rgba(43, 70, 50, 0.09);

}



html {

    scroll-behavior: smooth;

}



body {

    margin: 0;

    font-family: Arial, Helvetica, sans-serif;

    background: var(--cream);

    color: var(--text);

    line-height: 1.6;

}



body.no-scroll {

    overflow: hidden;

}



a {

    color: inherit;

    text-decoration: none;

}



button,

input,

textarea {

    font: inherit;

}



button {

    cursor: pointer;

}



.container {

    width: min(1160px, calc(100% - 40px));

    margin: 0 auto;

}



/* =========================================================

   HEADER

   ========================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: linear-gradient(
        90deg,
        #fbfcf7 0%,
        #f2f8ed 50%,
        #faf7e9 100%
    );

    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(10px);
}


.nav-row {

    min-height: 78px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 28px;

}

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

.brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.brand-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: block;
}

/* animated plant */
.grow-plant {
    position: relative;
    width: 26px;
    height: 42px;
    display: inline-block;
    flex-shrink: 0;
}

.stem {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 4px;
    height: 26px;
    background: linear-gradient(to top, #4f8c45, #7fcf6a);
    border-radius: 4px;
    transform: translateX(-50%) scaleY(0);
    transform-origin: bottom center;
    animation: stemGrow 2.5s ease-in-out infinite;
}

.leaf {
    position: absolute;
    width: 12px;
    height: 7px;
    background: linear-gradient(135deg, #8fe07d, #59b34d);
    border-radius: 12px 12px 12px 0;
    opacity: 0;
}

.leaf.left {
    transform-origin: right center;
}

.leaf.right {
    transform-origin: left center;
    border-radius: 12px 12px 0 12px;
}

.leaf1.left {
    left: 2px;
    bottom: 14px;
    transform: rotate(-35deg) scale(0);
    animation: leafLeft1 2.5s ease-in-out infinite;
}

.leaf1.right {
    right: 2px;
    bottom: 16px;
    transform: rotate(35deg) scale(0);
    animation: leafRight1 2.5s ease-in-out infinite;
}

.leaf2.left {
    left: 1px;
    bottom: 24px;
    transform: rotate(-28deg) scale(0);
    animation: leafLeft2 2.5s ease-in-out infinite;
}

.leaf2.right {
    right: 1px;
    bottom: 26px;
    transform: rotate(28deg) scale(0);
    animation: leafRight2 2.5s ease-in-out infinite;
}

@keyframes stemGrow {
    0%   { transform: translateX(-50%) scaleY(0); }
    35%  { transform: translateX(-50%) scaleY(1); }
    100% { transform: translateX(-50%) scaleY(1); }
}

@keyframes leafLeft1 {
    0%, 20%   { opacity: 0; transform: rotate(-35deg) scale(0); }
    35%, 100% { opacity: 1; transform: rotate(-35deg) scale(1); }
}

@keyframes leafRight1 {
    0%, 25%   { opacity: 0; transform: rotate(35deg) scale(0); }
    40%, 100% { opacity: 1; transform: rotate(35deg) scale(1); }
}

@keyframes leafLeft2 {
    0%, 40%   { opacity: 0; transform: rotate(-28deg) scale(0); }
    60%, 100% { opacity: 1; transform: rotate(-28deg) scale(1); }
}

@keyframes leafRight2 {
    0%, 45%   { opacity: 0; transform: rotate(28deg) scale(0); }
    65%, 100% { opacity: 1; transform: rotate(28deg) scale(1); }
}



/* Old CSS-drawn plant is intentionally disabled.
   The real assets/images/logo/logo.jpg is used instead. */
.plant-logo,
.plant-stem,
.plant-leaf,
.plant-tip {
    display: none !important;
}


nav {

    display: flex;

    align-items: center;

    gap: 24px;

}



nav a,

.cart-nav {

    padding: 0;

    border: 0;

    background: none;

    color: #344d3b;

    font-size: 14px;

    font-weight: 700;

}



nav a:hover,

.cart-nav:hover {

    color: var(--blue);

}



.menu-button {

    display: none;

    padding: 0;

    border: 0;

    background: none;

    color: var(--green-dark);

    font-size: 24px;

}



/* =========================================================

   HERO

   ========================================================= */

/*

.hero {

    padding: 68px 0 76px;

    text-align: center;

    color: #fff;

    background:

        radial-gradient(

            circle at 12% 88%,

            rgba(54, 176, 154, 0.42) 0%,

            rgba(54, 176, 154, 0.15) 24%,

            transparent 44%

        ),

        radial-gradient(

            circle at 85% 16%,

            rgba(255, 255, 255, 0.10) 0%,

            transparent 28%

        ),

        linear-gradient(

            90deg,

            #135b9d 0%,

            #1d7fdf 45%,

            #156fbe 68%,

            #0c3569 100%

        );

}

*/

.hero {
    position: relative;
    overflow: hidden;
    min-height: 500px;
    padding: 68px 0 76px;
    text-align: center;
    color: #fff;

    /* Fallback shown before slideshow photos load */
    background:
        radial-gradient(circle at 15% 20%, rgba(126, 181, 92, 0.25) 0%, transparent 25%),
        radial-gradient(circle at 85% 25%, rgba(255, 181, 72, 0.18) 0%, transparent 22%),
        radial-gradient(circle at 50% 85%, rgba(77, 148, 95, 0.18) 0%, transparent 28%),
        linear-gradient(135deg, #5f8f52 0%, #6fa36d 20%, #8ebc74 38%, #b7c96f 55%, #d9b45b 75%, #8aa0c8 100%);
}

.hero-slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    background: linear-gradient(
        90deg,
        rgba(17, 71, 92, 0.58) 0%,
        rgba(32, 102, 112, 0.42) 42%,
        rgba(43, 114, 95, 0.32) 72%,
        rgba(15, 54, 76, 0.50) 100%
    );

    pointer-events: none;
}
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.035);
    transition: opacity 2s ease-in-out, transform 8s ease-out;
}

.hero-slide.active {
    opacity: 1;
    transform: scale(1);
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            110deg,
            rgba(20, 80, 54, 0.46) 0%,
            rgba(34, 111, 89, 0.30) 30%,
            rgba(33, 83, 151, 0.28) 58%,
            rgba(19, 47, 102, 0.42) 100%
        );
}

.hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}



.hero-inner {

    display: flex;

    flex-direction: column;

    align-items: center;

}



/* =========================================================

   FRUIT GLOBE

   ========================================================= */

/*

.fruit-globe-wrap {

    margin: 0 auto 10px;

    padding: 0;

    background: transparent;

    border: 0;

    box-shadow: none;

}

    */

.fruit-globe-wrap {

    display: none !important;

}



.fruit-globe {

    position: relative;

    width: 205px;

    height: 205px;

    margin: 0 auto;



    overflow: visible;

    background: transparent;

    border: 0;

    border-radius: 0;

    box-shadow: none;

}



/* dotted circle */

.fruit-globe::before {

    content: none;

}



/* small top stem/mark */

.fruit-globe::after {

    content: none;

}



/* clear spinning fruit */

.fruit-stage {

    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    z-index: 2;

    font-size: 6rem;

    line-height: 1;

    opacity: 1 !important;

    filter: drop-shadow(0 4px 8px rgba(0,0,0,.10));

    text-shadow: none;

    animation: fruitSpin 3s linear infinite;

    transform-origin: 50% 50%;

}



/* very light highlight only - no heavy blur */

.globe-shine {

    display: none;

}



/* BH removed */

.bh-core {

    display: none;

}



@keyframes fruitSpin {

    from { transform: rotate(0deg); }

    to   { transform: rotate(360deg); }

}



/* =========================================================

   HERO TEXT

   ========================================================= */



.hero-location {

    margin-top: 18px;

    margin-bottom: 18px;

    color: #ed8927;

    font-weight: 700;

    letter-spacing: 3px;

    font-size: 0.95rem;

}



.hero-dot {

    color: #b7f34d;

    padding: 0 8px;

}



.hero h1 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: clamp(50px, 6vw, 76px);
    line-height: 1.05;
    font-weight: 800;

    /* Shiny blueberry / morning-dew look */
    background: linear-gradient(
        180deg,
        #eef9ff 0%,
        #c7e8ff 10%,
        #80c0ff 24%,
        #4b8df2 42%,
        #2d63d2 60%,
        #1945aa 78%,
        #0f2f79 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #245fd1;

    filter: drop-shadow(0 5px 12px rgba(11, 44, 110, 0.20));
}



.hero-copy {

    max-width: 720px;

    margin: 18px auto 0;

    color: #eef8ff;

    font-size: 17px;

}



.hero-actions {

    margin-top: 28px;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

}



/* =========================================================

   BUTTONS

   ========================================================= */



.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 13px 22px;

    border: 0;

    border-radius: 999px;

    font-weight: 800;

    transition: .2s ease;

}



.btn:hover {

    transform: translateY(-2px);

}



.btn-gold {

    background: linear-gradient(135deg, #f0ad25, #e8841d);

    color: #283d31;

}



.btn-green {

    background: var(--green-dark);

    color: white;

}



.btn-outline {

    border: 2px solid rgba(255,255,255,.70);

    background: transparent;

    color: white;

}



.btn-full {

    width: 100%;

}



.copy-status {

    min-height: 20px;

    margin: 8px 0 0;

    color: #eaf6ff;

    font-size: 12px;

}



/* =========================================================

   GENERAL SECTIONS

   ========================================================= */



.section {

    padding: 76px 0;

}



.section h2 {

    margin: 0 0 13px;

    color: var(--green-dark);

    font-family: Georgia, serif;

    font-size: clamp(38px, 4.5vw, 58px);

    line-height: 1.08;

}



.section-intro {

    margin: 0;

    color: var(--muted);

}



.eyebrow {

    margin: 0 0 8px;

    color: var(--green);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2px;

}



.eyebrow\.light {

    color: #cde6ca;

}



/* =========================================================

   OUR FARM

   ========================================================= */



.farm-detail-grid {

    margin-top: 28px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

    align-items: stretch;

}



.farm-copy {

    color: #53665a;

    font-size: 17px;

}



.farm-media-placeholder {

    min-height: 310px;

    display: grid;

    place-items: center;

    padding: 30px;

    border: 2px dashed #cbd9ca;

    border-radius: 26px;

    background: linear-gradient(135deg, #edf5eb, #dfeadb);

    text-align: center;

}



.farm-media-placeholder div {

    display: grid;

    gap: 8px;

}



.farm-media-placeholder strong {

    color: var(--green-dark);

    font-family: Georgia, serif;

    font-size: 28px;

}



.farm-media-placeholder span {

    color: var(--muted);

}



/* =========================================================

   PRODUCTS

   ========================================================= */



.products-section {

    background: #f1f3e8;

}



.category-tabs {

    margin: 28px 0 24px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.category-tab {

    padding: 10px 16px;

    border: 1px solid #ced9ca;

    border-radius: 999px;

    background: white;

    color: #496253;

    font-weight: 800;

}



.category-tab.active {

    border-color: var(--green-dark);

    background: var(--green-dark);

    color: white;

}



.products-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0,1fr));

    gap: 20px;

}



.product-card {

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--line);

    border-radius: 22px;

    background: white;

    box-shadow: var(--shadow);

}


.product-card {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.product-image-wrap {
    position: relative;
    width: 100%;
    height: 230px;
    overflow: hidden;
    background: transparent;
}

.product-image-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.product-body {
    display: block;
    padding: 22px;
    background: #fff;
}

.product-price {
    font-size: 24px;
    font-weight: 800;
    color: #28563a;
}

.product-unit {
    margin-top: 3px;
    color: #66756b;
}

.add-cart {
    width: 100%;
    margin-top: 18px;
}


.product-status {

    position: absolute;

    top: 14px;

    right: 14px;

    padding: 7px 10px;

    border-radius: 999px;

    background: rgba(255,255,255,.92);

    color: var(--green-dark);

    font-size: 11px;

    font-weight: 900;

}



.product-body {

    padding: 20px;

    display: flex;

    flex: 1;

    flex-direction: column;

}



.product-body h3 {

    margin: 0 0 8px;

    color: var(--green-dark);

    font-size: 23px;

}



.product-description {

    margin: 0 0 14px;

    color: #68766c;

    font-size: 14px;

}



.product-price-row {

    margin-top: auto;

    padding-top: 10px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 14px;

}



.product-price {

    color: #2f4d38;

    font-size: 22px;

    font-weight: 900;

}



.product-unit {

    color: var(--muted);

    font-size: 12px;

    font-weight: 700;

}



.add-cart {

    width: 100%;

    margin-top: 14px;

    padding: 12px 14px;

    border: 0;

    border-radius: 12px;

    background: var(--green-dark);

    color: white;

    font-weight: 900;

}



.add-cart:hover:not(:disabled) {

    background: var(--green);

}



.add-cart:disabled {

    background: #aab7ad;

    cursor: not-allowed;

}



.availability-note {

    margin-top: 22px;

    padding: 16px 18px;

    border: 1px solid #eadba7;

    border-radius: 15px;

    background: #fffbea;

    color: #634f1e;

}



/* =========================================================

   VIDEO

   ========================================================= */



.video-section {

    background: white;

}



.video-layout {

    margin-top: 28px;

    display: grid;

    grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr);

    gap: 32px;

    align-items: center;

}



.youtube-shell {

    min-height: 380px;

    overflow: hidden;

    display: grid;

    place-items: center;

    border: 1px solid #dedfd9;

    border-radius: 25px;

    background: #f2f2ef;

}



.youtube-shell iframe {

    width: 100%;

    height: 100%;

    min-height: 380px;

    border: 0;

}



.video-placeholder {

    display: grid;

    gap: 8px;

    padding: 35px;

    color: #6f7c72;

    text-align: center;

}



.video-placeholder strong {

    color: var(--green-dark);

    font-family: Georgia, serif;

    font-size: 27px;

}



.video-copy {

    color: #5f7064;

}



/* =========================================================

   FOLLOW

   ========================================================= */



.follow-section {

    background: #eef5e9;

}



.social-row {

    margin-top: 22px;

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}



.social-pill {

    min-height: 48px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 12px 18px;

    border: 0;

    border-radius: 14px;

    color: white;

    font-weight: 800;

    box-shadow: 0 8px 20px rgba(0,0,0,.08);

    transition: transform .2s ease, box-shadow .2s ease;

}



.social-pill:hover {

    transform: translateY(-2px);

    box-shadow: 0 12px 24px rgba(0,0,0,.13);

}



#youtubeChannelLink {

    background: #ff0000;

    color: white;

}



#instagramLink {

    background: linear-gradient(

        135deg,

        #833ab4 0%,

        #c13584 35%,

        #e1306c 60%,

        #f77737 82%,

        #fcaf45 100%

    );

    color: white;

}



#facebookLink {

    background: #1877f2;

    color: white;

}



#tiktokLink {

    background: #111111;

    color: white;

    text-shadow: -1px 0 #25f4ee, 1px 0 #fe2c55;

}



#xLink {

    background: #000000;

    color: white;

}



/* =========================================================

   ZELLE SUMMARY

   ========================================================= */



.zelle-summary {

    background: #f6f4ea;

}



.zelle-summary-card {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 30px;

    border: 1px solid var(--line);

    border-radius: 25px;

    background: white;

    box-shadow: var(--shadow);

}



/* =========================================================

   CONTACT

   ========================================================= */



.contact-section,
footer {
    background: linear-gradient(
        135deg,
        #3f8a55 0%,
        #58a85f 48%,
        #73b866 100%
    );
}



.contact-card {

    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 50px;

    padding: 48px;

    border-radius: 32px;

    color: white;

    background: linear-gradient(

        135deg,

        #2f7d42 0%,

        #54a84f 100%

    );

    box-shadow: var(--shadow);

}



.contact-card h2 {

    color: white;

}



.contact-card p {

    color: #eef8ea;

}



.contact-details {

    margin-top: 25px;

    display: grid;

    gap: 6px;

    font-weight: 800;

}



.contact-form {

    display: grid;

    gap: 11px;

    padding: 24px;

    border-radius: 22px;

    background: rgba(255,255,255,.12);

}



.contact-form label {

    font-size: 12px;

    font-weight: 800;

}



.contact-form input,

.contact-form textarea {

    width: 100%;

    margin-top: 5px;

    padding: 12px 13px;

    border: 1px solid rgba(255,255,255,.40);

    border-radius: 10px;

    background: white;

    color: var(--text);

}



/* =========================================================

   CART

   ========================================================= */



.cart-overlay {

    position: fixed;

    inset: 0;

    z-index: 1100;

    background: rgba(10,20,14,.38);

}



.cart-drawer {

    position: fixed;

    top: 0;

    right: 0;

    z-index: 1200;

    width: min(430px,100%);

    height: 100vh;

    display: flex;

    flex-direction: column;

    background: white;

    box-shadow: -16px 0 50px rgba(0,0,0,.18);

    transform: translateX(105%);

    transition: transform .25s ease;

}



.cart-drawer.open {

    transform: translateX(0);

}



.cart-header {

    padding: 22px;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    border-bottom: 1px solid var(--line);

}



.cart-header h3 {

    margin: 0;

    color: var(--green-dark);

    font-size: 26px;

}



.cart-close {

    padding: 0;

    border: 0;

    background: none;

    font-size: 30px;

}



.cart-items {

    flex: 1;

    overflow: auto;

    padding: 18px;

    display: grid;

    gap: 12px;

}



.cart-item {

    padding: 13px;

    display: grid;

    grid-template-columns: 1fr auto;

    gap: 10px;

    border: 1px solid var(--line);

    border-radius: 15px;

}



.cart-item-title {

    color: var(--green-dark);

    font-weight: 900;

}



.cart-item-meta {

    color: var(--muted);

    font-size: 12px;

}



.cart-qty {

    margin-top: 8px;

    display: flex;

    align-items: center;

    gap: 7px;

}



.qty-btn {

    width: 28px;

    height: 28px;

    border: 1px solid var(--line);

    border-radius: 8px;

    background: #f4f6f1;

}



.cart-remove {

    border: 0;

    background: none;

    color: var(--danger);

    font-size: 12px;

    font-weight: 800;

}



.cart-footer {

    padding: 20px;

    border-top: 1px solid var(--line);

}



.cart-total-row {

    display: flex;

    justify-content: space-between;

    font-size: 19px;

}



.cart-note {

    color: var(--muted);

    font-size: 12px;

}



/* =========================================================

   FOOTER

   ========================================================= */



.site-footer {

    padding: 38px 0;

    background: linear-gradient(135deg, #1e5937, #3f7d45);

    color: white;

}



.footer-inner {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    text-align: center;

}



.footer-inner strong {

    font-size: 17px;

}



/* =========================================================

   PAYMENT PAGE

   ========================================================= */



.payment-page {

    background: #f6f5eb;

}



.payment-header {

    padding: 22px 0;

    border-bottom: 1px solid var(--line);

    background: white;

}



.payment-wrap {

    padding: 55px 0;

}



.payment-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 28px;

}



.payment-card {

    padding: 28px;

    border: 1px solid var(--line);

    border-radius: 25px;

    background: white;

    box-shadow: var(--shadow);

}



.payment-card h1,

.payment-card h2 {

    color: var(--green-dark);

    font-family: Georgia, serif;

}



.order-summary-list {

    margin: 18px 0;

    display: grid;

    gap: 10px;

}



.order-summary-row {

    padding-bottom: 8px;

    display: flex;

    justify-content: space-between;

    gap: 16px;

    border-bottom: 1px solid #edf0eb;

}



.payment-total {

    margin-top: 15px;

    display: flex;

    justify-content: space-between;

    font-size: 22px;

    font-weight: 900;

}



.zelle-qr-placeholder {

    min-height: 220px;

    display: grid;

    place-items: center;

    padding: 25px;

    border: 2px dashed #c8d5c7;

    border-radius: 18px;

    background: #f9fcf7;

    color: #728072;

    text-align: center;

}



.terms-box {

    margin-top: 22px;

    padding: 18px;

    border: 1px solid #ead6ab;

    border-radius: 16px;

    background: #fffaf0;

}



.terms-box ul {

    padding-left: 20px;

}



.agreement-row {

    margin-top: 18px;

    display: flex;

    align-items: flex-start;

    gap: 10px;

}



.payment-contact {

    margin-top: 20px;

    padding: 16px;

    border-radius: 14px;

    background: #edf5ea;

}



.back-home {

    margin-top: 20px;

    display: inline-flex;

    color: var(--green-dark);

    font-weight: 900;

}



/* =========================================================

   TABLET

   ========================================================= */



@media (max-width: 920px) {

    nav {

        position: absolute;

        top: 73px;

        left: 20px;

        right: 20px;

        display: none;

        padding: 18px;

        flex-direction: column;

        align-items: flex-start;

        border-radius: 16px;

        background: white;

        box-shadow: var(--shadow);

    }



    nav.open {

        display: flex;

    }



    .menu-button {

        display: block;

    }



    .farm-detail-grid,

    .video-layout,

    .contact-card,

    .payment-grid {

        grid-template-columns: 1fr;

    }



    .products-grid {

        grid-template-columns: repeat(2,minmax(0,1fr));

    }



    .zelle-summary-card {

        flex-direction: column;

        align-items: flex-start;

    }

}



/* =========================================================

   MOBILE

   ========================================================= */



@media (max-width: 590px) {

    .container {

        width: min(100% - 26px,1160px);

    }



    .hero {

        padding: 55px 0 60px;

    }



    .fruit-globe {

        width: 165px;

        height: 165px;

    }



    .fruit-stage {

        font-size: 5rem;

    }



    .hero h1 {

        font-size: 46px;

    }



    .products-grid {

        grid-template-columns: 1fr;

    }



    .section {

        padding: 58px 0;

    }



    .contact-card {

        padding: 28px;

    }



    .social-row {

        display: grid;

        grid-template-columns: 1fr 1fr;

    }



    .social-pill {

        width: 100%;

    }

}


/* Blue Himalayan Farm YouTube Shorts */

.farm-youtube-video {
    width: 100%;
    max-width: 350px;
    aspect-ratio: 1 / 1;
    margin: 20px auto;
    overflow: hidden;
    border-radius: 16px;
    background: #111;
}

.farm-youtube-video iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}

/* FEATURED FARM YOUTUBE VIDEO */

.featured-farm-video {
    padding: 35px 0 45px;
    text-align: center;
}

.featured-farm-video h2 {
    color: #286c4b;
    margin-bottom: 10px;
}

.featured-farm-video p {
    margin-bottom: 20px;
}

.featured-video-frame {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: #102a24;
}

.featured-video-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.featured-video-actions {
    margin-top: 18px;
}

.featured-youtube-button {
    display: inline-block;
    background: #e62117;
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
}

@media (max-width: 600px) {
    .featured-farm-video {
        padding: 25px 0;
    }
}

/* =========================================================
   FARM VIDEO: FIT THE EXISTING GREEN CARD
   ========================================================= */
.farm-media-placeholder {
    width: 100%;
    min-width: 0;
    padding: 20px;
    border-radius: 22px;
}
.farm-media-placeholder > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
}
.farm-media-placeholder iframe {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border: 0;
    border-radius: 14px;
}
.farm-video-actions {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.farm-video-watch {
    color: #286c4b;
    font-weight: 700;
}
.farm-video-subscribe {
    display: block;
    width: 100%;
    padding: 11px 14px;
    border: 2px solid #286c4b;
    border-radius: 12px;
    color: #286c4b;
    background: rgba(255,255,255,.65);
    font-weight: 700;
    text-align: center;
}
.farm-video-watch:hover,
.farm-video-subscribe:hover { text-decoration: underline; }

/* Compact social links fixed at the upper-right side of the page */
.farm-social-rail {
    position: fixed;
    top: 100px;
    right: 10px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 6px;
    border: 1px solid rgba(30,89,55,.15);
    border-radius: 14px;
    background: rgba(255,255,255,.90);
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
}
.farm-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    border-radius: 9px;
    color: #fff;
    transition: transform .15s ease;
}
.farm-social-icon:hover { transform: translateX(-2px); }
.farm-social-icon:focus-visible { outline: 2px solid #286c4b; outline-offset: 2px; }
.farm-social-icon svg { width: 18px; height: 18px; }
.farm-social-icon-youtube { background: #e62117; }
.farm-social-icon-instagram { background: linear-gradient(135deg,#833ab4,#e1306c,#f77737); }
@media (max-width: 600px) {
    .farm-media-placeholder { padding: 12px; }
    .farm-media-placeholder iframe { max-width: 100%; }
    .farm-social-rail { top: 84px; right: 4px; padding: 4px; gap: 5px; }
    .farm-social-icon { width: 29px; height: 29px; }
    .farm-social-icon svg { width: 16px; height: 16px; }
}

/* === Blue Himalayan Farm: compact social rail and US flag (2026) === */
.nav-row .farm-us-flag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 20px;
    line-height: 1;
    margin-left: 0;
    position: relative;
    top: -2px;
}
.nav-row nav { margin-left: auto; }
.farm-social-icon-facebook { background: #1877f2; font: 800 22px/1 Arial, sans-serif; }
.farm-social-icon-tiktok { background: #171717; font: 700 25px/1 Arial, sans-serif; text-shadow: -1px 0 #25f4ee, 1px 0 #fe2c55; }
.farm-social-icon-x { background: #111; font: 600 19px/1 Arial, sans-serif; }
.farm-social-unlinked { opacity: .65; cursor: default; }
.farm-social-unlinked:hover { transform: none; }
@media (max-width: 920px) {
    .nav-row { gap: 12px; }
    .nav-row .menu-button { margin-left: auto; }
    .nav-row nav { margin-left: 0; }
    .nav-row .farm-us-flag { font-size: 24px; }
}
@media (max-width: 590px) {
    .nav-row .brand-name { font-size: clamp(13px, 3.6vw, 18px); }
    .nav-row .farm-us-flag { font-size: 21px; }
    .farm-social-rail { max-height: calc(100dvh - 100px); overflow-y: auto; }
}

/* Real USA flag image in the existing header: subtle waving motion. */
.nav-row .farm-us-flag {
    perspective: 180px;
    overflow: visible;
}
.nav-row .farm-us-flag img {
    display: block;
    width: 38px;
    height: 24px;
    object-fit: fill;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,.16);
    transform-origin: left center;
    animation: farmRealFlagWave 3s ease-in-out infinite;
}
@keyframes farmRealFlagWave {
    0%, 100% { transform: perspective(160px) rotateY(-9deg) skewY(0deg); }
    50% { transform: perspective(160px) rotateY(13deg) skewY(-2deg); }
}
@media (max-width: 590px) {
    .nav-row .farm-us-flag img { width: 32px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .nav-row .farm-us-flag img { animation: none; }
}

/* =========================================================
   CONSISTENT HEADER FONT — HOME, CAREERS AND CHECKOUT
   Typography only. Keep existing colors and layout.
   ========================================================= */
.site-header .brand-name,
.site-header .brand .brand-name {
    font-family: Georgia, 'Times New Roman', Times, serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}

.site-header #mainNav .cart-nav {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    color: #244B38 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    vertical-align: middle !important;
}

@media (max-width: 590px) {
    .site-header .brand-name,
    .site-header .brand .brand-name {
        font-size: 17px !important;
    }
}

/* Keep Zelle Payment button on one line */
a.btn,
button.btn {
    white-space: nowrap !important;
    width: max-content;
    max-width: 100%;
}

.site-header #cartCount {
    display: none !important;
}