/* ==========================================================================
   Krishna Confectionery - custom layer on top of the base theme.
   Product cards, category tiles, detail pages, contact form and the motion
   that ties them together. Uses the theme's own custom properties so the
   palette stays in one place.
   ========================================================================== */

:root {
    --kc-pink: var(--ul-primary, #FC0166);
    --kc-yellow: var(--ul-secondary, #F8CB46);
    --kc-orange: #FC791A;
    --kc-cream: #FFF9F4;
    --kc-ink: #2B1720;
    --kc-muted: #7C6772;
    --kc-line: #F3DCE6;
    --kc-shadow: 0 18px 40px -22px rgba(252, 1, 102, .45);
    --kc-shadow-lg: 0 28px 60px -26px rgba(252, 1, 102, .55);
    --kc-radius: 22px;
}

/* ============================================================== motion ==== */

@keyframes kc-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-14px) rotate(3deg); }
}

@keyframes kc-pop-in {
    from { opacity: 0; transform: translateY(26px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

@keyframes kc-shine {
    from { transform: translateX(-140%) skewX(-18deg); }
    to   { transform: translateX(240%) skewX(-18deg); }
}

@keyframes kc-pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
    70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@keyframes kc-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes kc-spin-slow {
    to { transform: rotate(360deg); }
}

/* Scroll reveal - elements start hidden and are released by krishna.js.
   Anything not reached by the observer still shows, so no JS means no loss. */
.kc-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
    will-change: opacity, transform;
}

.kc-reveal.is-visible {
    opacity: 1;
    transform: none;
}

.kc-reveal[data-delay="1"] { transition-delay: .08s; }
.kc-reveal[data-delay="2"] { transition-delay: .16s; }
.kc-reveal[data-delay="3"] { transition-delay: .24s; }
.kc-reveal[data-delay="4"] { transition-delay: .32s; }
.kc-reveal[data-delay="5"] { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
    .kc-reveal,
    .kc-reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .kc-product-card__img img,
    .kc-cat-card__img img,
    .kc-wa-float {
        animation: none !important;
    }
}

/* ==================================================== floating whatsapp ==== */

.kc-wa-float {
    position: fixed;
    right: 22px;
    bottom: 24px;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 58px;
    padding: 0 17px;
    border-radius: 999px;
    background: #25D366;
    color: #fff;
    box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .7);
    animation: kc-pulse-ring 2.6s ease-out infinite;
    transition: gap .35s ease, padding .35s ease, background .25s ease;
}

.kc-wa-float:hover,
.kc-wa-float:focus-visible {
    color: #fff;
    background: #1EBE5B;
    gap: 10px;
    padding-right: 22px;
}

.kc-wa-float__label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 600;
    font-size: 15px;
    transition: max-width .35s ease;
}

.kc-wa-float:hover .kc-wa-float__label,
.kc-wa-float:focus-visible .kc-wa-float__label {
    max-width: 160px;
}

.kc-wa-icon { flex: none; }

@media (max-width: 575px) {
    .kc-wa-float { right: 14px; bottom: 16px; height: 52px; padding: 0 14px; }
}

/* WhatsApp coloured button used inside content. */
.kc-btn-wa {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 26px;
    border-radius: 999px;
    background: #25D366;
    color: #fff;
    font-weight: 600;
    border: none;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.kc-btn-wa:hover,
.kc-btn-wa:focus-visible {
    background: #1EBE5B;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 16px 28px -14px rgba(37, 211, 102, .8);
}

/* ======================================================= category tiles ==== */

.kc-cat-card {
    position: relative;
    display: block;
    height: 100%;
    padding: 34px 28px 30px;
    border-radius: var(--kc-radius);
    background: #fff;
    border: 1px solid var(--kc-line);
    overflow: hidden;
    transition: transform .4s cubic-bezier(.2, .7, .3, 1), box-shadow .4s ease, border-color .3s ease;
}

.kc-cat-card::before {
    content: "";
    position: absolute;
    inset: auto -40% -55% auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: var(--kc-accent, var(--kc-pink));
    opacity: .1;
    transition: transform .5s ease, opacity .4s ease;
}

.kc-cat-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--kc-shadow-lg);
    border-color: transparent;
}

.kc-cat-card:hover::before {
    transform: scale(1.8);
    opacity: .16;
}

.kc-cat-card__img {
    position: relative;
    height: 148px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.kc-cat-card__img img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 14px 18px rgba(43, 23, 32, .22));
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.kc-cat-card:hover .kc-cat-card__img img {
    transform: scale(1.09) rotate(-4deg);
}

.kc-cat-card__title {
    position: relative;
    font-size: 22px;
    margin: 0 0 6px;
    color: var(--kc-ink);
}

.kc-cat-card__tagline {
    position: relative;
    display: block;
    font-size: 14px;
    color: var(--kc-accent, var(--kc-pink));
    font-weight: 600;
    margin-bottom: 12px;
}

.kc-cat-card__descr {
    position: relative;
    font-size: 15px;
    line-height: 1.65;
    color: var(--kc-muted);
    margin-bottom: 18px;
}

.kc-cat-card__meta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px dashed var(--kc-line);
    font-size: 14px;
    font-weight: 600;
    color: var(--kc-ink);
}

.kc-cat-card__meta .arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--kc-accent, var(--kc-pink));
    color: #fff;
    font-size: 13px;
    transition: transform .35s ease;
}

.kc-cat-card:hover .kc-cat-card__meta .arrow {
    transform: translateX(5px);
}

/* ========================================================= product card ==== */

.kc-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--kc-radius);
    background: #fff;
    border: 1px solid var(--kc-line);
    overflow: hidden;
    transition: transform .4s cubic-bezier(.2, .7, .3, 1), box-shadow .4s ease, border-color .3s ease;
}

.kc-product-card:hover {
    transform: translateY(-9px);
    border-color: transparent;
    box-shadow: var(--kc-shadow-lg);
}

.kc-product-card__img {
    position: relative;
    display: block;
    /* A square frame that scales with the column: tall pouches and slim jars
       both fit whole, and every card still lines up on the same grid. */
    aspect-ratio: 1 / 1;
    min-height: 240px;
    padding: 54px 20px 22px;
    background:
        radial-gradient(120% 100% at 50% 0%, #FFF6FA 0%, var(--kc-cream) 60%, #FDEFF5 100%);
    overflow: hidden;
}

/* Soft pedestal so the pack reads as standing rather than floating. */
.kc-product-card__img::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 16px;
    width: 62%;
    height: 20px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(43, 23, 32, .20) 0%, rgba(43, 23, 32, 0) 72%);
    pointer-events: none;
}

.kc-product-card__img > a {
    display: block;
    width: 100%;
    height: 100%;
}

.kc-product-card__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    transform-origin: center bottom;
    filter: drop-shadow(0 16px 20px rgba(43, 23, 32, .18));
    transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}

.kc-product-card:hover .kc-product-card__img img {
    transform: scale(1.06);
}

/* The stand-in used when a product photo is still missing - it is a flat
   graphic, so it gets neither the drop shadow nor the pedestal. */
.kc-product-card__img img[src$=".svg"] {
    filter: none;
    opacity: .85;
    padding: 6% 8%;
}

.kc-product-card__img:has(img[src$=".svg"])::before {
    display: none;
}

/* Sweep of light across the photo on hover. */
.kc-product-card__img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .65) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-140%) skewX(-18deg);
    pointer-events: none;
}

.kc-product-card:hover .kc-product-card__img::after {
    animation: kc-shine .85s ease forwards;
}

.kc-product-card__price {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--ul-gradient, linear-gradient(90deg, #FC0166, #F8CB46));
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    box-shadow: var(--kc-shadow);
}

.kc-product-card__pieces {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    max-width: 55%;
    text-align: right;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(43, 23, 32, .78);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    backdrop-filter: blur(3px);
}

.kc-product-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 20px 22px 22px;
}

.kc-product-card__type {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--kc-pink);
    margin-bottom: 7px;
}

.kc-product-card__title {
    font-size: 19px;
    line-height: 1.35;
    margin: 0 0 10px;
}

.kc-product-card__title a {
    color: var(--kc-ink);
    background-image: linear-gradient(var(--kc-pink), var(--kc-pink));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .35s ease, color .25s ease;
}

.kc-product-card__title a:hover {
    color: var(--kc-pink);
    background-size: 100% 2px;
}

.kc-product-card__packing {
    font-size: 13.5px;
    color: var(--kc-muted);
    margin: 0 0 16px;
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.kc-product-card__packing i {
    color: var(--kc-yellow);
    font-size: 11px;
    margin-top: 4px;
}

.kc-product-card__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px dashed var(--kc-line);
}

.kc-product-card__actions .kc-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--kc-ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .25s ease, gap .25s ease;
}

.kc-product-card__actions .kc-link:hover {
    color: var(--kc-pink);
    gap: 11px;
}

.kc-product-card__actions .kc-wa-mini {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(37, 211, 102, .12);
    color: #1EBE5B;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.kc-product-card__actions .kc-wa-mini:hover {
    background: #25D366;
    color: #fff;
    transform: scale(1.09);
}

/* ============================================================== filters ==== */

.kc-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 34px;
}

.kc-filter-bar button {
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid var(--kc-line);
    background: #fff;
    color: var(--kc-ink);
    font-size: 14px;
    font-weight: 600;
    transition: all .28s ease;
}

.kc-filter-bar button:hover {
    border-color: var(--kc-pink);
    color: var(--kc-pink);
}

.kc-filter-bar button.active {
    background: var(--ul-gradient, linear-gradient(90deg, #FC0166, #F8CB46));
    border-color: transparent;
    color: #fff;
    box-shadow: var(--kc-shadow);
}

.kc-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--kc-muted);
}

/* ======================================================== product detail === */

.kc-detail-gallery {
    position: relative;
    border-radius: 26px;
    padding: 42px;
    background:
        radial-gradient(120% 100% at 50% 0%, #FFF6FA 0%, var(--kc-cream) 55%, #FDEFF5 100%);
    border: 1px solid var(--kc-line);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    overflow: hidden;
}

.kc-detail-gallery img {
    max-width: 100%;
    max-height: 460px;
    object-fit: contain;
    filter: drop-shadow(0 26px 34px rgba(43, 23, 32, .22));
    animation: kc-float 6s ease-in-out infinite;
}

.kc-detail-gallery__ring {
    position: absolute;
    width: 340px;
    height: 340px;
    border: 2px dashed rgba(252, 1, 102, .18);
    border-radius: 50%;
    animation: kc-spin-slow 34s linear infinite;
    pointer-events: none;
}

.kc-detail__type {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(252, 1, 102, .09);
    color: var(--kc-pink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.kc-detail__title {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.18;
    color: var(--kc-ink);
    margin: 0 0 14px;
}

.kc-detail__price {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 34px;
    font-weight: 800;
    color: var(--kc-pink);
    margin-bottom: 18px;
}

.kc-detail__price small {
    font-size: 14px;
    font-weight: 600;
    color: var(--kc-muted);
}

.kc-detail__descr {
    font-size: 16px;
    line-height: 1.75;
    color: var(--kc-muted);
    margin-bottom: 26px;
}

.kc-spec {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.kc-spec__item {
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--kc-cream);
    border: 1px solid var(--kc-line);
    transition: transform .3s ease, box-shadow .3s ease;
}

.kc-spec__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--kc-shadow);
}

.kc-spec__label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--kc-muted);
    margin-bottom: 5px;
}

.kc-spec__value {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--kc-ink);
    line-height: 1.4;
}

.kc-flavours {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 28px;
}

.kc-flavours span {
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--kc-line);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--kc-ink);
    transition: all .25s ease;
}

.kc-flavours span:hover {
    background: var(--kc-yellow);
    border-color: var(--kc-yellow);
    transform: translateY(-2px);
}

.kc-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* =========================================================== stat strip ==== */

.kc-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
}

.kc-stat {
    padding: 28px 24px;
    border-radius: var(--kc-radius);
    background: #fff;
    border: 1px solid var(--kc-line);
    text-align: center;
    transition: transform .35s ease, box-shadow .35s ease;
}

.kc-stat:hover {
    transform: translateY(-7px);
    box-shadow: var(--kc-shadow);
}

.kc-stat__num {
    display: block;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    background: var(--ul-gradient, linear-gradient(90deg, #FC0166, #F8CB46));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.kc-stat__label {
    font-size: 14.5px;
    color: var(--kc-muted);
    font-weight: 600;
}

/* ============================================================= marquee ===== */

.kc-marquee {
    overflow: hidden;
    padding: 16px 0;
    background: var(--ul-gradient, linear-gradient(90deg, #FC0166, #F8CB46));
}

.kc-marquee__track {
    display: flex;
    width: max-content;
    animation: kc-marquee 26s linear infinite;
}

.kc-marquee:hover .kc-marquee__track {
    animation-play-state: paused;
}

.kc-marquee__track span {
    display: inline-flex;
    align-items: center;
    gap: 26px;
    padding-right: 26px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}

.kc-marquee__track span::after {
    content: "🍬";
    font-size: 17px;
}

/* The band inside the "Explore Our Wide Range" section, where it replaced the
   old oversized scrolling headline. It sits between the section heading and
   the product tabs, so it needs the breathing room the headline strip had. */
.kc-marquee--menus {
    margin: clamp(24px, 2.6vw, 44px) 0 clamp(28px, 3vw, 52px);
}

/* =============================================================== forms ===== */

.kc-alert {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 14px;
    margin-bottom: 24px;
    font-size: 14.5px;
    line-height: 1.6;
    animation: kc-pop-in .5s ease both;
}

.kc-alert--ok {
    background: #E9F9EF;
    border: 1px solid #B7E7C7;
    color: #1B7A3E;
}

.kc-alert--err {
    background: #FDEDF2;
    border: 1px solid #F5C2D3;
    color: #B31745;
}

.kc-alert ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

/* Google reCAPTCHA v2. The widget itself is an iframe Google controls - it
   renders at a fixed 304x78 and cannot be restyled - so all we own is the
   space around it and how it behaves when the form gets narrow. */
.kc-recaptcha {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Below ~360px of field width the 304px widget would overflow the card, so
   scale it down from its top-left corner and reclaim the height it leaves. */
@media (max-width: 420px) {
    .kc-recaptcha .g-recaptcha {
        transform: scale(.85);
        transform-origin: 0 0;
        height: 66px;
    }
}

.kc-recaptcha__hint {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--kc-pink);
}

.kc-recaptcha__hint[hidden] {
    display: none;
}

/* Consent line was sitting flush against the security-code row. */
.ul-inner-contact-form .ul-checkout-agreement-wrapper {
    margin-top: clamp(18px, 1.8vw, 26px);
    margin-bottom: clamp(18px, 1.8vw, 26px);
}

/* ========================================================= contact page ==== */
/* The enquiry form is what this page is for, so it gets the weight: its own
   raised card with a header of its own, a two-column field grid, and inputs
   sized to be typed in on a phone. Everything else on the page - the three
   info tiles above, the picture and the WhatsApp panel beside it - is set up
   to lead into it rather than compete with it. */

/* --- the three info tiles ------------------------------------------------ */
/* The theme draws these in its own red; carry the brand line and cream so the
   row reads as one family with the card below it. */

.ul-contact-info {
    border: 1px solid var(--kc-line);
    border-radius: 20px;
    background: #fff;
    transition: transform .4s cubic-bezier(.2, .7, .3, 1), box-shadow .4s ease;
}

.ul-contact-info:hover {
    transform: translateY(-6px);
    box-shadow: var(--kc-shadow);
}

.ul-contact-info .icon {
    border: 0;
    border-radius: 14px;
    color: var(--kc-pink);
    background: linear-gradient(148deg, #FFE9F2 0%, #FFD7E8 100%);
}

.ul-contact-info .title a { color: var(--kc-ink); }
.ul-contact-info .title a:hover { color: var(--kc-pink); }
.ul-contact-info .descr { color: var(--kc-muted); }

/* --- the two-column body -------------------------------------------------- */

.kc-contact-main {
    margin-top: clamp(30px, 3.4vw, 60px);
}

.kc-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(22px, 2.6vw, 48px);
    align-items: start;
}

/* Under 992px the form leads and the aside follows it, so the first thing a
   visitor meets on a phone is the thing they came to fill in. */
@media (max-width: 991px) {
    .kc-contact-grid { grid-template-columns: minmax(0, 1fr); }
    .kc-contact-aside { order: 2; }
    .kc-form-card { order: 1; }
}

/* --- aside ---------------------------------------------------------------- */

.kc-contact-aside {
    position: sticky;
    top: 110px;
}

@media (max-width: 991px) {
    .kc-contact-aside { position: static; }
}

.kc-contact-aside__img {
    margin: 0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 22px 46px -28px rgba(43, 23, 32, .55);
}

.kc-contact-aside__img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.kc-contact-aside__panel {
    margin-top: clamp(16px, 1.6vw, 24px);
    padding: clamp(20px, 2vw, 30px);
    border-radius: 22px;
    background: var(--kc-cream);
    border: 1px solid var(--kc-line);
}

.kc-contact-aside__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
}

.kc-contact-aside__descr {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--kc-muted);
}

.kc-contact-points {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px dashed var(--kc-line);
}

.kc-contact-aside__hours {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--kc-ink);
}

.kc-contact-aside__hours i { color: var(--kc-pink); }

/* --- the form card -------------------------------------------------------- */

.kc-form-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--kc-line);
    border-radius: clamp(20px, 2vw, 28px);
    box-shadow: 0 34px 76px -44px rgba(43, 23, 32, .5);
}

/* No overflow clipping on the card itself - the product dropdown opens out of
   its own field and would be cut off. The header rounds its own top corners
   instead. */
.kc-form-card__head {
    position: relative;
    padding: clamp(28px, 2.6vw, 44px) clamp(20px, 2.2vw, 44px) clamp(20px, 2vw, 30px);
    background: linear-gradient(180deg, #FFF3F8 0%, #fff 100%);
    border-bottom: 1px dashed var(--kc-line);
    border-radius: clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px) 0 0;
    overflow: hidden;
}

/* Brand rule across the top of the card, so it reads as the page's one
   primary object rather than another panel. */
.kc-form-card__head::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, var(--kc-pink) 0%, var(--kc-orange) 55%, var(--kc-yellow) 100%);
}

.kc-form-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(252, 1, 102, .08);
    color: var(--kc-pink);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.kc-form-card__title {
    margin: 14px 0 8px;
    font-size: clamp(24px, 2vw, 34px);
    font-weight: 700;
    line-height: 1.2;
}

.kc-form-card__sub {
    margin: 0;
    max-width: 52ch;
    font-size: 15px;
    line-height: 1.75;
    color: var(--kc-muted);
}

.kc-form-card__body {
    padding: clamp(22px, 2.2vw, 40px) clamp(20px, 2.2vw, 44px) clamp(26px, 2.4vw, 42px);
}

/* --- fields --------------------------------------------------------------- */

.kc-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 1.4vw, 22px);
}

.kc-field--full { grid-column: 1 / -1; }

@media (max-width: 575px) {
    .kc-form__grid { grid-template-columns: minmax(0, 1fr); }
}

.kc-form .kc-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--kc-ink);
}

.kc-form .req { color: var(--kc-pink); }

/* Taller, softer, cream-filled fields - the theme's are 45-60px hairline
   boxes in its own red, which read as a form to get past rather than one to
   fill in. */
.kc-form input,
.kc-form textarea,
.kc-form .ss-main {
    width: 100%;
    height: 54px;
    padding: 0 18px;
    border: 1.5px solid var(--kc-line);
    border-radius: 14px;
    background: var(--kc-cream);
    font-size: 15px;
    color: var(--kc-ink);
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.kc-form textarea {
    height: 168px;
    padding: 16px 18px;
    line-height: 1.7;
    margin-bottom: 0;
    resize: vertical;
}

.kc-form input::placeholder,
.kc-form textarea::placeholder {
    color: #BCA9B2;
}

.kc-form input:focus,
.kc-form input:focus-visible,
.kc-form textarea:focus,
.kc-form textarea:focus-visible,
.kc-form .ss-main:focus,
.kc-form .ss-main:focus-within {
    outline: none;
    background: #fff;
    border-color: var(--kc-pink);
    box-shadow: 0 0 0 4px rgba(252, 1, 102, .10);
}

/* SlimSelect draws the product dropdown; match it to the inputs beside it and
   lay its panel out inside the wrapper (krishna.js asks for the relative
   content position that pairs with this). */
.kc-form .ss-main {
    display: flex;
    align-items: center;
}

.kc-form .select-wrapper {
    position: relative;
}

/* SlimSelect's relative mode leaves the panel in flow, which shoves the
   message field down the moment the list opens. Lift it out over the field
   again - the wrapper above is what it anchors to. */
.kc-form .ss-content {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    width: 100%;
    /* ss-relative pins the panel to 100% of the wrapper, which is one field
       tall - the option list would collapse to nothing. */
    height: auto;
    border-radius: 14px;
    border-color: var(--kc-line);
    box-shadow: 0 22px 48px -26px rgba(43, 23, 32, .45);
    overflow: hidden;
}

/* --- security check ------------------------------------------------------- */

.kc-form .kc-recaptcha {
    padding: 14px;
    border-radius: 16px;
    background: var(--kc-cream);
    border: 1px dashed var(--kc-line);
}

/* --- consent, submit, note ------------------------------------------------ */

.kc-form .ul-checkout-agreement-wrapper .txt {
    font-size: 14px;
    line-height: 1.7;
    color: var(--kc-muted);
}

.kc-form .submit-btn {
    height: 58px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;
    background: linear-gradient(120deg, var(--kc-pink) 0%, #ff4d8d 100%);
    box-shadow: var(--kc-shadow);
    transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease, filter .3s ease;
}

.kc-form .submit-btn:hover {
    background: linear-gradient(120deg, var(--kc-pink) 0%, #ff4d8d 100%);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: var(--kc-shadow-lg);
    filter: saturate(1.08);
}

.kc-form__note {
    margin: 14px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--kc-muted);
}

/* ============================================================== gallery ==== */

.kc-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.kc-gallery-item {
    position: relative;
    display: block;
    border-radius: 18px;
    overflow: hidden;
    background: var(--kc-cream);
    border: 1px solid var(--kc-line);
    aspect-ratio: 1 / 1;
}

.kc-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}

.kc-gallery-item:hover img {
    transform: scale(1.1);
}

.kc-gallery-item__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 18px;
    text-align: center;
    background: linear-gradient(to top, rgba(43, 23, 32, .82) 0%, rgba(43, 23, 32, 0) 55%);
    opacity: 0;
    transition: opacity .35s ease;
}

.kc-gallery-item:hover .kc-gallery-item__overlay {
    opacity: 1;
}

.kc-gallery-item__overlay span {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    transform: translateY(10px);
    transition: transform .35s ease;
}

.kc-gallery-item:hover .kc-gallery-item__overlay span {
    transform: none;
}

/* ============================================================ utilities ==== */

.kc-section-cream { background: var(--kc-cream); }

.kc-lead {
    font-size: 16.5px;
    line-height: 1.8;
    color: var(--kc-muted);
}

.kc-ticklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.kc-ticklist li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 15.5px;
    color: var(--kc-ink);
}

.kc-ticklist li i {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(252, 1, 102, .1);
    color: var(--kc-pink);
    font-size: 10px;
    margin-top: 2px;
}

/* =========================================== inner page vertical rhythm === */

/* This build of the theme reduced `.ul-section-spacing` to nothing but a
   lavender background colour - the padding that gives the class its name was
   dropped. Inner pages therefore had no breathing room between sections and sat
   on an unintended tint. Restore both here, scoped to `.kc-inner` so the home
   page keeps exactly the rhythm it has today. */
.kc-inner .ul-section-spacing {
    background-color: transparent;
    padding-top: clamp(56px, 5.6vw, 104px);
    padding-bottom: clamp(56px, 5.6vw, 104px);
}

/* Bootstrap's pt-0/pb-0/py-5 are !important, so per-section overrides in the
   markup still win over the rule above - that is intentional. */

.kc-inner main {
    background: #fff;
}

/* Alternating tinted bands, so long pages read as distinct blocks. */
.kc-inner .kc-section-cream {
    background: var(--kc-cream);
}

/* First section after the breadcrumb needs a little more air above it. */
.kc-inner .ul-breadcrumb + section,
.kc-inner .ul-breadcrumb + .ul-section-spacing {
    padding-top: clamp(60px, 6vw, 110px);
}

/* The bulk-order strip is shared with the home page, so it carries its own
   padding rather than leaning on the inner-page layer above. On inner pages the
   section before it already supplies the gap; on the home page it does not. */
/* The band is the rectangle now - it was a rounded card inset inside the
   container, which left a strip of page background between it and the footer.
   Full bleed, square corners, and it is the last thing before <footer> on
   every page that includes it, so the two meet with no gap. */
.kc-cta {
    position: relative;
    overflow: hidden;
    padding: clamp(40px, 4.4vw, 78px) 0;
    background: var(--ul-gradient, linear-gradient(90deg, #FC0166, #F8CB46));
}

.kc-cta__inner {
    position: relative;
    z-index: 1;
}

/* Anchored to the band's own corners now that the band runs the full width
   of the page. Both corners carry candy graphics from assets/img/animated -
   the restaurant theme's tomato and basil vectors are gone. Pale wrappers on
   the yellow end and a pink lollipop on the pink end both need more presence
   than the theme's original 35% to read at all. */
.kc-cta__vector {
    position: absolute;
    width: clamp(130px, 12vw, 210px);
    opacity: .6;
    pointer-events: none;
    user-select: none;
}

.kc-cta__vector--left {
    left: -30px;
    bottom: -30px;
}

.kc-cta__vector--right {
    right: -20px;
    top: -30px;
}

.kc-cta__title {
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 900;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 10px;
}

.kc-cta__descr {
    font-size: 16px;
    line-height: 1.75;
    color: #fff;
    opacity: .92;
    max-width: 640px;
    margin-bottom: 0;
}

.kc-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-end;
}

/* Stacked columns put the buttons under the copy, so they line up with it
   rather than hanging off the right edge. */
@media (max-width: 991px) {
    .kc-cta__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 575px) {
    .kc-cta__actions > * {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* Section headings sat too close to the grid that follows. */
.kc-inner .ul-section-heading {
    margin-bottom: clamp(28px, 2.8vw, 46px);
}

/* A heading block that also carries lead copy needs the copy separated. */
.kc-inner .ul-section-heading .kc-lead {
    margin-top: 14px;
    margin-bottom: 0;
}

/* ============================================ breadcrumb (candy themed) === */

/* The stock theme puts a restaurant food photo behind every inner page header.
   Swap it for a confectionery gradient with the site's own candy vectors. */
/* The theme sizes this strip for a header that overlays it (top padding maxes
   out at 242px). Our header is opaque and sits above the strip, so that top
   padding was pure dead space - nearly half a screen before any content. */
.ul-breadcrumb {
    background: linear-gradient(120deg, #7A1140 0%, #C8286A 42%, #F0763A 100%);
    overflow: hidden;
    padding-top: clamp(58px, 8vw, 150px);
    padding-bottom: clamp(50px, 4.8vw, 78px);
    padding-left: 15px;
    padding-right: 15px;
}

.ul-breadcrumb-nav {
    margin-top: 14px;
}

.ul-breadcrumb::before {
    background:
        radial-gradient(60% 90% at 15% 20%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(50% 80% at 85% 90%, rgba(248, 203, 70, .22) 0%, rgba(248, 203, 70, 0) 60%),
        rgba(30, 6, 18, .30);
}

/* Two soft candy discs drifting behind the title. */
.ul-breadcrumb::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        url("../img/footer-vector-1.png"),
        url("../img/footer-vector-3.png");
    background-repeat: no-repeat, no-repeat;
    background-position: -30px 78%, calc(100% + 20px) 12%;
    background-size: 190px auto, 160px auto;
    opacity: .35;
    animation: kc-float 9s ease-in-out infinite;
}

@media (max-width: 767px) {
    .ul-breadcrumb::after { background-size: 120px auto, 100px auto; }
}

/* ================================== theme overrides for the menu panel ==== */

/* The base theme paints this panel solid primary pink, which was fine for the
   text-only menu rows it shipped with. Our product cards need a calm surface,
   so the panel becomes a soft cream card and the tabs are re-tinted to match. */
.ul-menus-tabs-wrapper {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--kc-cream) 100%);
    border: 1px solid var(--kc-line);
    box-shadow: 0 30px 70px -46px rgba(43, 23, 32, .5);
}

.ul-menus-tab-navs {
    border-bottom-color: var(--kc-line);
    padding: clamp(16px, 1.5vw, 26px) clamp(15px, 1.58vw, 30px);
}

/* The theme insets the product grid by up to 130px a side inside a panel that
   is already centred and max-width'd, so the cards end up in a narrow column
   with dead margin either side. Matching the tab row's own 30px instead lets
   the grid use the panel's full width and lines the first card up under the
   first tab. The rhythm then lives on the vertical, where it belongs. */
.ul-menus-tabs-wrapper .tabs {
    padding: clamp(18px, 1.6vw, 28px) clamp(15px, 1.58vw, 30px) clamp(20px, 1.9vw, 34px);
}

.ul-menus-tab-navs button {
    border-color: var(--kc-line);
    color: var(--kc-muted);
    transition: all .28s ease;
}

.ul-menus-tab-navs button:hover {
    color: var(--kc-pink);
    border-color: var(--kc-pink);
}

.ul-menus-tab-navs button.active {
    color: #fff;
    border-color: transparent;
    background: var(--ul-gradient, linear-gradient(90deg, #FC0166, #F8CB46));
    box-shadow: var(--kc-shadow);
}

/* The header nav grows a lot with four category links - tighten it a touch
   so it still fits on mid-size laptops. */
@media (min-width: 992px) and (max-width: 1399px) {
    .ul-header-nav a { font-size: 14px; }
    .ul-header-nav > * { margin-right: 16px; }
}

/* ========================================================== scrollbar ==== */
/* A thin brand scrollbar: cream track, thumb running the site's pink -> gold
   gradient. Firefox only takes a flat colour, so it gets the pink. */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--kc-pink) var(--kc-cream);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--kc-cream);
    border-left: 1px solid var(--kc-line);
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    border: 2px solid var(--kc-cream);
    background: linear-gradient(180deg, var(--kc-pink), var(--kc-yellow));
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    border-width: 1px;
    background: linear-gradient(180deg, #d80057, var(--kc-orange));
    background-clip: padding-box;
}

::-webkit-scrollbar-corner {
    background: var(--kc-cream);
}

/* Scrollable panels inside the page (menu drawer, tables) get a slimmer one
   so it does not compete with the main bar. */
.ul-sidebar-wrapper ::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* =================================================== smooth scrolling ==== */
/* The easing lives in krishna.js. Bootstrap's Reboot sets
   `:root { scroll-behavior: smooth }` under prefers-reduced-motion:
   no-preference, which would animate every scrollTo our own rAF loop makes -
   the browser and the loop then chase each other and the page drags. Ours is
   the only animator, so turn the CSS one off. Written as `:root` to match
   Bootstrap's specificity; krishna.css loads after it, so this wins.
   scroll-padding-top keeps anchor targets, and the browser's own
   find-in-page, clear of the sticky header. */

:root {
    scroll-behavior: auto;
    scroll-padding-top: 120px;
}

/* ======================================== banner full-bleed photo hero === */
/* The theme's banner keeps its own copy and buttons; what changes is that
   the product-photo column is gone and the slider's images now sit behind
   the whole section, carrying the reference build's slow zoom. Navigation
   is the dot column alone - the progressbar/arrow bar has been removed.
   Overrides style.css - krishna.css loads after it. */

.ul-banner {
    /* The old flat pink stays as the colour behind the photos while they
       decode, and as the fallback if one ever fails to load. */
    background-color: #ddaed3;
}

.ul-banner-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.ul-banner-bg .ul-banner-img-slider,
.ul-banner-bg .swiper-wrapper,
.ul-banner-bg .swiper-slide {
    height: 100%;
}

.ul-banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1);
    transition: transform 9000ms ease;
}

/* The showing slide drifts in for as long as it is up - the reference
   build's effect, at a gentler scale because this banner is shorter. */
.ul-banner-bg .swiper-slide-active img { transform: scale(1.18); }

/* Darker on the left, where the copy sits; the product photography on the
   right stays readable. */
.ul-banner-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .38) 45%, rgba(0, 0, 0, .12) 100%);
}

/* Everything the theme already had has to clear the backdrop. */
.ul-banner .top {
    position: relative;
    z-index: 3;
}

/* --- the copy -----------------------------------------------------------
   Over photography the theme's flat-pink typography needs a measure and a
   little separation from the image, or it reads as text dropped on a photo
   rather than a designed banner. Each line gets a shadow tuned to its
   weight - heavier type needs a wider, softer one. */

.ul-banner-txt { max-width: 780px; }

.ul-banner-sub-title {
    font-size: clamp(21px, 2.2vw, 42px);
    margin-bottom: clamp(4px, 0.5vw, 10px);
    text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}

.ul-banner-title {
    color: #fff;
    max-width: 13ch;
    font-size: clamp(34px, 4.4vw, 82px);
    line-height: 1.05;
    margin-bottom: clamp(14px, 1.35vw, 26px);
    text-shadow: 0 4px 28px rgba(0, 0, 0, .5);
}

.ul-banner-descr {
    color: #fff;
    max-width: 58ch;
    font-size: clamp(14px, 1.05vw, 18px);
    line-height: 1.65;
    margin-bottom: clamp(26px, 2.5vw, 46px);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}

/* The theme's button is sized for a page section; as the one call to action
   on a full-height hero it needs more presence. */
.ul-banner .ul-btn {
    height: clamp(48px, 3.5vw, 64px);
    padding: 0 clamp(20px, 1.9vw, 36px);
    font-size: clamp(13px, 0.9vw, 17px);
    letter-spacing: .04em;
    box-shadow: var(--kc-shadow);
}

/* Dots, in the reference build's style: round bullets stacked up the left
   edge. main.js renders them as "01".."04" and that file is the untouched
   theme, so the numerals are sized away rather than removed. */
.ul-banner-img-slider-dots.swiper-pagination-bullets.swiper-pagination-horizontal {
    z-index: 4;
    top: 50%;
    left: clamp(10px, 1.6vw, 30px);
    right: auto;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 8px;
}

.ul-banner-img-slider-dots.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    font-size: 0;
    writing-mode: horizontal-tb;
    transform: none;
    border-radius: 10px;
    background-color: #fff;
    opacity: 1;
    transition: .6s;
}

.ul-banner-img-slider-dots.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active {
    font-size: 0;
    background-color: var(--kc-pink);
}

@media (max-width: 767px) {
    .ul-banner-img-slider-dots.swiper-pagination-bullets.swiper-pagination-horizontal {
        display: none;
    }
}

/* The cloud line, now riding over the photo at the foot of the section.
   The copy is centred in what is left once the cloud has its room, rather
   than sitting on fixed padding - otherwise the taller section just opens a
   gap under the button. The extra bottom padding is the cloud's share. */
.ul-banner {
    /* Symmetric padding around the slide track. The cloud overlays the last
       ~125px of the section, and the copy clears it on all four slides -
       including the santra headline, which is the tallest and sets the
       track height for the rest. */
    --kc-banner-pad: clamp(120px, 16vw, 255px);

    min-height: clamp(620px, 62vw, 1000px);
    padding-top: var(--kc-banner-pad);
    padding-bottom: var(--kc-banner-pad);
}

.ul-banner .top { width: 100%; }

.ul-banner-line {
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
}

.ul-banner-line img { width: 100%; display: block; }

/* No cloud below 1199px, so both go back to the theme's own spacing. */
@media (max-width: 1199px) {
    .ul-banner-line { display: none; }
}

/* ==================================================== header logo ======== */
/* The theme sized the logo with `max-width: clamp(100px, 5vw, 200px)`, whose
   100px floor wins on every realistic screen - so the mark rendered at 100px
   from a 500px source and filled the whole 80px header row edge to edge, with
   no breathing room above or below. That is what made it read as small and
   slightly squeezed, and it looked that way in BOTH states: the sticky and
   non-sticky headers were already pixel-identical.

   So the fix is not to match one state to the other, it is to give the mark a
   size and some air, stated once so it can never drift between states or
   viewport widths. Fixed px, not vw - a logo that resizes with the window is
   exactly how the two states came to look different in the first place. */
.ul-header .logo-container .logo,
.ul-sidebar-header-logo .logo {
    width: 120px;
    max-width: 120px;
    height: auto;
}

/* Air above and below the mark, so it sits in the bar instead of filling it. */
.ul-header .logo-container {
    display: flex;
    align-items: center;
    padding: 6px 0;
}

@media (max-width: 575px) {
    .ul-header .logo-container .logo,
    .ul-sidebar-header-logo .logo {
        width: 96px;
        max-width: 96px;
    }
}

/* ============================================ header bulk-order button === */
/* The theme bumps everything in .ul-header-actions to 30px below 992px:
       @media (max-width: 991px) { .ul-header-actions button, .ul-header-actions a
                                   { font-size: 30px; color: var(--ul-primary); } }
   That is sized for the hamburger, which is an icon glyph and needs the room.
   But the selector also catches the "Order in Bulk" link next to it, so its
   LABEL rendered at 30px in primary pink - pink text on a pink button, in a
   pill wide enough to shove the hamburger toward the edge.

   It hid on phones (the button is .d-sm-inline-flex .d-none, so it is gone
   below 576px) and it was fine on desktop, which left one window where it
   showed: 576-991px. That is exactly the viewport Chrome for Android lays out
   when someone turns on "Desktop site" - hence the report.

   So put the button back to its own type scale and its own colour, and leave
   the icon button alone at 30px where it belongs. */
@media (max-width: 991.98px) {
    .ul-header-actions a.ul-btn,
    .ul-header-actions button.ul-btn {
        font-size: clamp(13px, 0.84vw, 16px);
        color: var(--white);
    }

    /* The theme's hover swaps the fill to white, so the label turning primary
       on hover is correct - it just must not be the resting state. */
    .ul-header-actions a.ul-btn:hover,
    .ul-header-actions button.ul-btn:hover {
        color: var(--ul-primary);
    }
}

/* ================================================= wide section width ==== */
/* Widens a section's container to the header's, so its content lines up with
   the logo on one edge and the bulk-order button on the other. .ul-container
   carries 30px of its own horizontal padding inside its max-width, so that
   has to be added on top of the header's figure for the content boxes - not
   just the outer boxes - to agree. Header width: style.css .ul-header-container. */

.ul-container.kc-container-wide {
    max-width: calc(clamp(576px, 85.13vw, 1620px) + var(--container-space-x));
}

/* ====================================== about page: the four process steps ==== */
/* These sizes used to sit in style attributes on about.php, which no
   stylesheet could then adjust. They are the same values, moved here.
   The wide-sections block further down enlarges them; delete that block and
   the steps fall back to exactly what they look like here. */

.kc-step {
    text-align: left;
    padding: 28px 24px;
    /* The four steps carry different amounts of text. Filling the row's
       height keeps the boxes level instead of leaving one hanging lower. */
    height: 100%;
}

.kc-step__num {
    display: inline-block;
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    color: var(--kc-line);
    margin-bottom: 10px;
}

.kc-step__title {
    font-size: 18px;
    margin: 0 0 8px;
}

.kc-step__text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--kc-muted);
}

/* ============================================== social / connect card ==== */
/* Replaces the map at the foot of the contact page. One cream panel, an
   intro on the left and the profiles stacked on the right, so it reads as
   part of the page rather than three loose buttons. */

.kc-connect {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(28px, 3.6vw, 64px);
    align-items: center;
    padding: clamp(28px, 3.4vw, 60px);
    border-radius: var(--kc-radius);
    border: 1px solid var(--kc-line);
    background: linear-gradient(180deg, #fff 0%, var(--kc-cream) 100%);
    box-shadow: 0 30px 70px -46px rgba(43, 23, 32, .5);
}

@media (max-width: 991px) {
    .kc-connect { grid-template-columns: minmax(0, 1fr); }
}

.kc-connect__intro .ul-section-title { margin-bottom: 14px; }

.kc-connect__intro p {
    color: var(--kc-muted);
    margin: 0;
    max-width: 46ch;
}

.kc-connect__cards {
    display: grid;
    gap: clamp(12px, 1.1vw, 18px);
}

.kc-social {
    --kc-social-tint: var(--kc-pink);

    display: flex;
    align-items: center;
    gap: clamp(14px, 1.2vw, 20px);
    padding: clamp(14px, 1.25vw, 20px) clamp(16px, 1.5vw, 24px);
    border-radius: 16px;
    border: 1px solid var(--kc-line);
    background: #fff;
    color: var(--kc-ink);
    text-decoration: none;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.kc-social:hover {
    color: var(--kc-ink);
    transform: translateY(-3px);
    border-color: var(--kc-social-tint);
    box-shadow: 0 22px 44px -28px rgba(43, 23, 32, .55);
}

.kc-social__icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 20px;
    color: #fff;
    background: var(--kc-social-tint);
}

.kc-social__txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.kc-social__net {
    font-weight: 700;
    font-size: clamp(15px, 1vw, 18px);
    line-height: 1.2;
}

/* Handles are long and must not push the arrow off the card. */
.kc-social__handle {
    font-size: clamp(12px, 0.85vw, 14px);
    color: var(--kc-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kc-social__go {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--kc-social-tint);
    font-size: 15px;
    transition: transform .28s ease;
}

.kc-social:hover .kc-social__go { transform: translateX(4px); }

/* Each network keeps its own colour so the row is scannable at a glance. */
.kc-social--ig { --kc-social-tint: #C13584; }
.kc-social--fb { --kc-social-tint: #1877F2; }
.kc-social--wa { --kc-social-tint: #25D366; }

.kc-social--ig .kc-social__icon {
    background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF);
}

/* ================================================ about page sections ==== */
/* The intro runs the same two-column creative as the home page's "Who We Are":
   the photo collage on the left, the story on the right. Only the copy block
   differs - a tick list where the home page carries the three-item strip - so
   these rules just give that list and the author strip their rhythm. */

.ul-inner-about .ul-about-txt .ul-section-descr + .ul-section-descr {
    margin-top: 14px;
}

.ul-inner-about .ul-about-txt .kc-ticklist {
    margin-top: clamp(20px, 2vw, 32px);
}

.ul-inner-about .ul-about-txt .ul-about-author {
    margin-top: clamp(22px, 2.2vw, 36px);
}

/* --- leadership --------------------------------------------------------- */

.kc-leaders {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(26px, 3.4vw, 60px);
    align-items: center;
    padding: clamp(22px, 2.4vw, 42px);
    border-radius: var(--kc-radius);
    border: 1px solid var(--kc-line);
    background: linear-gradient(180deg, #fff 0%, var(--kc-cream) 100%);
    box-shadow: 0 30px 70px -46px rgba(43, 23, 32, .5);
}

@media (max-width: 991px) {
    .kc-leaders { grid-template-columns: minmax(0, 1fr); }
}

/* The portrait is a tall phone photo - a fixed aspect box keeps it from
   dictating the height of the whole panel. */
.kc-leaders__photo {
    border-radius: 18px;
    overflow: hidden;
    background: var(--kc-cream);
    aspect-ratio: 4 / 5;
}

.kc-leaders__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    display: block;
}

.kc-leaders__txt .ul-section-title { margin-bottom: 14px; }
.kc-leaders__txt .kc-lead + .kc-lead { margin-top: 14px; }

.kc-leaders__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(10px, 1vw, 16px);
    margin-top: clamp(20px, 2vw, 32px);
}

/* --- trade fair --------------------------------------------------------- */

.kc-fair {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(20px, 2.4vw, 40px);
    align-items: start;
}

@media (max-width: 991px) {
    .kc-fair { grid-template-columns: minmax(0, 1fr); }
}

.kc-fair__video { margin: 0; }

.kc-fair__video video {
    width: 100%;
    display: block;
    border-radius: var(--kc-radius);
    border: 1px solid var(--kc-line);
    background: #000;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    box-shadow: var(--kc-shadow-lg);
}

.kc-fair__video figcaption {
    margin-top: 12px;
    font-size: 14px;
    color: var(--kc-muted);
}

.kc-fair__side .kc-lead { margin: 0 0 clamp(16px, 1.6vw, 24px); }

.kc-fair__shots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 0.8vw, 14px);
    margin-bottom: clamp(18px, 1.8vw, 28px);
}

.kc-fair__shots img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--kc-line);
    transition: transform .3s ease;
}

.kc-fair__shots img:hover { transform: translateY(-3px); }


/* ============================== banner hero - small screens ============== */
/* Everything below is inside a max-width media query, so the desktop banner
   is untouched. The hero was authored for a wide, copy-left/photo-right
   composition; on a phone that leaves three problems, fixed here in order:
   the copy stops after ~290px and the remaining ~330px of the 620px section
   is empty photo; the 1905x1000 photos are cropped to their middle third, so
   the product - which sits at about 70% across - falls outside the frame;
   and the scrim is a left-to-right one, so full-width copy runs off its dark
   end. */

@media (max-width: 767px) {
    .ul-banner {
        /* Height follows the viewport instead of a fixed 620px, with a floor
           for short phones and a ceiling so it never eats a whole tall screen.
           svh (not vh) so the mobile URL bar collapsing does not resize it. */
        min-height: clamp(560px, 86vh, 680px);
        min-height: clamp(560px, 86svh, 680px);

        /* The header is absolutely positioned over the banner's first 92px,
           so the copy has to start below that; the rest of the free space is
           shared out by centring rather than left as a gap at the foot. */
        padding-top: 112px;
        padding-bottom: 76px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Bootstrap's gutters make the copy's left and right insets uneven once
       the row is the full width of the screen; zero them and let
       .ul-banner-txt own the inset on both sides. */
    .ul-banner .row {
        margin-left: 0;
        margin-right: 0;
    }

    .ul-banner .row > * {
        padding-left: 0;
        padding-right: 0;
    }

    .ul-banner-txt {
        max-width: none;
        padding: 0 20px;
    }

    /* Pulls the crop across to the product. Cover scales these photos by
       height on a portrait screen, so only the horizontal position has any
       effect - 78% lands the pack near the middle of the frame. */
    .ul-banner-bg img {
        object-position: 78% center;
    }

    /* The slow zoom crops further in as it runs, which a phone frame cannot
       spare, so it travels less far here than on desktop. */
    .ul-banner-bg .swiper-slide-active img {
        transform: scale(1.08);
    }

    /* Vertical scrim: the copy is full-width now, so it needs the dark end
       above it rather than to its left. Lightest across the lower middle,
       where the product is, and darker again at the foot so the dots read. */
    .ul-banner-bg::after {
        background: linear-gradient(180deg,
            rgba(0, 0, 0, .80) 0%,
            rgba(0, 0, 0, .70) 22%,
            rgba(0, 0, 0, .62) 58%,
            rgba(0, 0, 0, .34) 80%,
            rgba(0, 0, 0, .50) 100%);
    }

    /* The eyebrow is the theme pink, and these photos are mostly pink and
       orange - over a phone-width crop it lands on the product itself, so it
       needs more separation than the desktop shadow gives it. */
    .ul-banner-sub-title {
        text-shadow: 0 2px 6px rgba(0, 0, 0, .85), 0 0 18px rgba(0, 0, 0, .6);
    }

    .ul-banner-sub-title {
        font-size: clamp(19px, 5.6vw, 26px);
    }

    .ul-banner-title {
        /* 13ch is a desktop measure; at 34px on a 390px screen it wraps the
           headline into five short lines. */
        max-width: 16ch;
        font-size: clamp(29px, 8.4vw, 40px);
    }

    .ul-banner-descr {
        font-size: 15px;
        line-height: 1.6;
        max-width: 42ch;
        margin-bottom: 28px;
    }

    /* The dots were hidden earlier in this file because the desktop treatment
       is a column up the left edge, which has nowhere to go on a phone. They
       come back as a centred row at the foot - without them nothing tells you
       there are four slides. Overrides that rule by coming later in the file. */
    .ul-banner-img-slider-dots.swiper-pagination-bullets.swiper-pagination-horizontal {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 12px;
        top: auto;
        bottom: 24px;
        left: 0;
        right: 0;
        width: 100%;
        transform: none;
    }

    .ul-banner-img-slider-dots.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
    }
}

/* Tablets keep the theme's left-hand dot column and its type, and only need
   the same centring - the copy is still far shorter than the section. */
@media (min-width: 768px) and (max-width: 991px) {
    .ul-banner {
        min-height: clamp(560px, 78vh, 720px);
        min-height: clamp(560px, 78svh, 720px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* A phone held sideways is only ~390px tall; the portrait floor above would
   push the hero well past the fold. Width-capped so no desktop is caught. */
@media (max-width: 899px) and (orientation: landscape) {
    .ul-banner {
        min-height: 440px;
        padding-top: 100px;
        padding-bottom: 56px;
    }
}


/* ================================== "Who We Are" image collage =========== */
/* Replaces the theme's .ul-about-imgs pair - a dark chalkboard vegetable tile
   behind a second copy of the logo - with two photographs of the company:
   the AAHAR stand for the range, and the owners for the people. The pink
   plate keeps the offset-block shape the theme's layout was built around,
   as flat brand colour instead of a patterned image. */

.kc-about-imgs {
    position: relative;
    z-index: 1;
    max-width: 560px;
    /* Room above for the plate to show, and below for the inset to hang past
       the foot of the main photo. Both are percentages of the column's own
       width, so the plate keeps its proportion in the narrow col-lg-4 the
       section drops to between 992px and 1199px. */
    padding: clamp(22px, 7%, 42px) 0 clamp(34px, 11%, 62px);
}

.kc-about-imgs__plate {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 55%;
    height: 46%;
    border-radius: 20px;
    background: linear-gradient(148deg, #ffe6f2 0%, #ffd2e7 100%);
}

.kc-about-imgs__main {
    position: relative;
    z-index: 1;
    /* Pushed right so the plate reads as a panel behind it rather than a
       border around it. */
    margin: 0 0 0 16%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .16);
}

.kc-about-imgs__main img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* The inset overlaps the main photo's bottom-left corner and drops below it,
   which is what the container's bottom padding is reserving. */
.kc-about-imgs__inset {
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 0;
    width: 44%;
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    /* White keyline so the two photographs read as separate cards where they
       overlap - both are light at the join. */
    border: 7px solid #fff;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .2);
}

.kc-about-imgs__inset img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 28%;
}

/* Once the column stops sharing a row with the copy, the collage is a block
   of its own and centres rather than hugging the left gutter. */
@media (max-width: 767px) {
    .kc-about-imgs {
        max-width: 420px;
        margin-inline: auto;
    }

    .kc-about-imgs__inset {
        border-width: 5px;
    }
}


/* ==================================== Instagram feed (Elfsight) ========== */
/* The widget brings its own grid, sizing and responsive behaviour, so there is
   nothing to style inside it - only the frame around it: the section's own
   rhythm, a reserved height so the page does not jump when the embed resolves,
   and the follow button beneath. */

.kc-insta__embed {
    /* The feed now sits under the category cards in the same section, so this
       is the only gap between them - the section's own bottom padding still
       closes it off below. */
    margin-top: clamp(34px, 3.8vw, 66px);
    /* Elfsight injects nothing until platform.js resolves; without a floor the
       cards above and the button below collide for the first moment. */
    min-height: 320px;
}

.kc-insta__action {
    display: flex;
    justify-content: center;
    margin-top: clamp(22px, 2.4vw, 40px);
}

@media (max-width: 767px) {
    .kc-insta__embed {
        min-height: 260px;
    }
}


/* =========================================== legal pages (privacy, terms) == */
/* Long prose the theme has no styling for. Two columns on desktop: a sticky
   contents list beside the text, so a fifteen-section document stays navigable
   without scrolling back to the top. It collapses to a plain list above the
   prose once there is no room beside it. */

.kc-legal {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: start;
}

/* --- contents -------------------------------------------------------------- */

.kc-legal__toc {
    position: sticky;
    /* Clears the sticky header, which is ~92px plus breathing room. */
    top: 120px;
    padding: 24px;
    border: 1px solid var(--kc-line);
    border-radius: var(--kc-radius);
    background: var(--kc-cream);
}

.kc-legal__toc-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--kc-muted);
    margin: 0 0 14px;
}

.kc-legal__toc nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kc-legal__toc a {
    font-size: 14px;
    line-height: 1.45;
    color: var(--kc-ink);
    padding: 7px 10px;
    border-radius: 8px;
    transition: background-color .2s ease, color .2s ease;
}

.kc-legal__toc a:hover,
.kc-legal__toc a:focus-visible {
    color: var(--kc-pink);
    background-color: #fff;
}

/* --- the document ---------------------------------------------------------- */

.kc-legal__body {
    /* A measure for reading. Legal text is the one place on this site where a
       full-width line would genuinely hurt. */
    max-width: 76ch;
    color: var(--kc-ink);
}

.kc-legal__updated {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--kc-muted);
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--kc-cream);
    border: 1px solid var(--kc-line);
    margin-bottom: clamp(20px, 2vw, 30px);
}

.kc-legal__lead {
    font-size: clamp(17px, 1.2vw, 19px);
    line-height: 1.7;
    color: var(--kc-ink);
    padding-bottom: clamp(20px, 2vw, 30px);
    border-bottom: 1px solid var(--kc-line);
    margin-bottom: clamp(24px, 2.4vw, 38px);
}

.kc-legal__body h2 {
    font-size: clamp(20px, 1.7vw, 26px);
    font-weight: 800;
    line-height: 1.3;
    /* Generous space above, tight below, so each heading binds to its own text
       rather than floating between two blocks. */
    margin: clamp(34px, 3.4vw, 54px) 0 12px;
    /* Anchor links from the contents list must not land under the header. */
    scroll-margin-top: 120px;
}

.kc-legal__body h2:first-of-type {
    margin-top: 0;
}

.kc-legal__body h3 {
    font-size: clamp(16px, 1.15vw, 18px);
    font-weight: 800;
    margin: clamp(22px, 2.2vw, 32px) 0 8px;
    color: var(--kc-ink);
}

.kc-legal__body p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--kc-muted);
    margin-bottom: 16px;
}

.kc-legal__body strong {
    color: var(--kc-ink);
    font-weight: 700;
}

.kc-legal__body a {
    color: var(--kc-pink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kc-legal__body a:hover {
    text-decoration-thickness: 2px;
}

.kc-legal__list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.kc-legal__list li {
    position: relative;
    padding-left: 26px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--kc-muted);
    margin-bottom: 10px;
}

.kc-legal__list li::before {
    content: "";
    position: absolute;
    left: 4px;
    /* Centres the dot on the first line of text rather than the top of the li. */
    top: .72em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--kc-pink);
}

/* Contact blocks read as a small definition list, not as bulleted prose. */
.kc-legal__contact-list {
    list-style: none;
    padding: 20px 24px;
    margin: 0 0 16px;
    border: 1px solid var(--kc-line);
    border-radius: var(--kc-radius);
    background: var(--kc-cream);
}

.kc-legal__contact-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--kc-muted);
    padding: 7px 0;
}

.kc-legal__contact-list li + li {
    border-top: 1px dashed var(--kc-line);
}

.kc-legal__contact-list strong {
    flex: 0 0 74px;
    color: var(--kc-ink);
}

.kc-legal__foot {
    margin-top: clamp(30px, 3vw, 46px);
    padding-top: clamp(18px, 1.8vw, 26px);
    border-top: 1px solid var(--kc-line);
}

/* --- stacked ---------------------------------------------------------------- */

@media (max-width: 991px) {
    .kc-legal {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(26px, 3vw, 40px);
    }

    .kc-legal__toc {
        position: static;
        padding: 20px;
    }

    /* Side by side it is a column of links; stacked it is a wrapping row, so it
       costs a couple of lines instead of half a screen. */
    .kc-legal__toc nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .kc-legal__toc a {
        background: #fff;
        border: 1px solid var(--kc-line);
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 13px;
    }

    .kc-legal__body {
        max-width: none;
    }
}

@media (max-width: 575px) {
    .kc-legal__contact-list {
        padding: 16px 18px;
    }

    .kc-legal__contact-list strong {
        flex: 0 0 100%;
    }
}


/* ---------------------------------------- footer copyright bar ----------- */
/* The theme shipped a pale blue scalloped strip here, which read as a stray
   band under an otherwise dark footer and left the links at very low contrast.
   The bar now continues the footer's dark ground, with the scallop drawn in
   CSS (crisp at any width, no image request) and a candy stripe as the seam. */

.ul-footer-bottom {
    position: relative;
    padding: 26px 0;
    background: var(--ul-black);
    text-align: initial;
    margin: 0;
}

/* Candy stripe seam: separates the copyright line from the footer columns
   without the stray pale band the theme's scalloped image left behind. */
.ul-footer-bottom::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg,
        var(--kc-pink) 0%,
        var(--kc-orange) 45%,
        var(--kc-yellow) 100%);
}

.kc-footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px clamp(16px, 2vw, 30px);
}

.kc-footer-legal__copy {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    margin: 0;
    font-size: clamp(13px, .84vw, 15px);
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
}

.kc-footer-legal__copy b {
    font-weight: 600;
    color: var(--white);
}

.kc-footer-legal__mark {
    color: var(--kc-yellow);
}

.kc-footer-legal__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px clamp(14px, 1.6vw, 24px);
}

.kc-footer-legal__links a {
    position: relative;
    font-size: clamp(13px, .84vw, 15px);
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
    transition: color .2s ease;
}

.kc-footer-legal__links a:hover,
.kc-footer-legal__links a:focus-visible {
    color: var(--kc-yellow);
}

/* Divider between the two links; drops out once they wrap onto their own row. */
.kc-footer-legal__links a + a::before {
    content: "";
    position: absolute;
    left: calc(clamp(14px, 1.6vw, 24px) / -2);
    top: 50%;
    width: 1px;
    height: 13px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .28);
}

/* Below the wrap point the row centres, and the bar gains room so the floating
   WhatsApp button never sits on top of the links. */
@media (max-width: 767px) {
    .ul-footer-bottom {
        padding: 22px 0;
    }

    .kc-footer-legal {
        justify-content: center;
        text-align: center;
        gap: 12px;
    }

    .kc-footer-legal__copy {
        justify-content: center;
        flex: 0 0 100%;
    }

    .kc-footer-legal__links {
        justify-content: center;
        flex: 0 0 100%;
    }
}

@media (max-width: 575px) {
    .ul-footer-bottom {
        padding-bottom: 86px;
    }

    .kc-footer-legal__rights {
        flex: 0 0 100%;
    }
}

/* The consent line now carries links to the two policy pages. The theme gives
   anchors inside the label no colour of their own, so they read as plain text
   and nobody discovers they are clickable. (Clicking one does not toggle the
   checkbox - a label does nothing for clicks on interactive descendants.) */
.ul-checkout-agreement-wrapper label a {
    color: var(--kc-pink);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

.ul-checkout-agreement-wrapper label a:hover,
.ul-checkout-agreement-wrapper label a:focus-visible {
    text-decoration-thickness: 2px;
}


/* ============================================================ 404 page ==== */

.kc-404 {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
}

.kc-404__code {
    display: block;
    font-size: clamp(72px, 12vw, 150px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
    background: var(--ul-gradient, linear-gradient(90deg, #FC0166, #F8CB46));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: clamp(8px, 1vw, 16px);
}

.kc-404 .kc-lead {
    margin: 14px auto clamp(26px, 2.8vw, 40px);
}

.kc-404__links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.kc-404__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: clamp(28px, 3vw, 44px);
    padding-top: clamp(22px, 2.4vw, 34px);
    border-top: 1px solid var(--kc-line);
}

.kc-404__cats a {
    font-size: 14px;
    font-weight: 600;
    color: var(--kc-ink);
    padding: 8px 16px;
    border: 1px solid var(--kc-line);
    border-radius: 999px;
    background: var(--kc-cream);
    transition: color .2s ease, border-color .2s ease;
}

.kc-404__cats a:hover {
    color: var(--kc-pink);
    border-color: var(--kc-pink);
}

@media (max-width: 575px) {
    .kc-product-card__img {
        min-height: 210px;
        padding: 48px 16px 18px;
    }
}

/* ##################### WIDE PRODUCT SECTIONS - START ##################### */
/*
   Every section that lists products or categories runs at the header's full
   width instead of the 1170px body column, and the cards inside grow with it
   so the product is what got bigger rather than the empty margins.

   This whole block is a single switch. Delete from the START banner above to
   the END banner at the foot of the file, inclusive, and the site returns to
   the widths and card sizes it had before - no other edit needed anywhere,
   because the kc-section-* classes in the PHP are only hooks and do nothing
   on their own. Both banners are complete one-line comments precisely so that
   a line-range delete cannot leave a comment half open, and the banner text
   appears nowhere else in this file - including in this comment - so that a
   range delete cannot stop early on a stray mention of itself.

   README, "Wide product sections", carries the one-line command and the full
   list of what this covers.

   The width figure matches .ul-header-container in style.css exactly, so these
   sections line up with the logo on one edge and the bulk-order button on the
   other. .ul-container carries 30px of its own horizontal padding inside its
   max-width, so that is added on top for the content boxes to agree.
*/

.kc-section-products > .ul-container,
.kc-section-ranges   > .ul-container,
.kc-section-gallery  > .ul-container,
.kc-section-process  > .ul-container,
.ul-menus            > .ul-container {
    max-width: calc(clamp(576px, 85.13vw, 1620px) + var(--container-space-x));
}

/* The home page's tabbed panel is not inside a .ul-container - it centres
   itself - so it takes the figure without the container padding. */
.ul-menus-tabs-wrapper {
    max-width: clamp(576px, 85.13vw, 1620px);
}

/* ------------------------------------------------- product cards -------- */
/* Two hooks, one set of sizes: the home page's tabbed panel, and
   .kc-section-products on every other listing of product cards - the shop
   page's four range grids, a category page's grid, the related items under a
   product. Product cards anywhere else keep the size they were designed at. */

.ul-menus-tabs-wrapper .kc-product-card__img,
.kc-section-products .kc-product-card__img {
    min-height: 300px;
    padding: 60px 26px 26px;
}

.ul-menus-tabs-wrapper .kc-product-card__price,
.kc-section-products .kc-product-card__price {
    top: 16px;
    left: 16px;
    padding: 8px 17px;
    font-size: 15.5px;
}

.ul-menus-tabs-wrapper .kc-product-card__pieces,
.kc-section-products .kc-product-card__pieces {
    top: 16px;
    right: 16px;
    padding: 7px 14px;
    font-size: 13px;
}

.ul-menus-tabs-wrapper .kc-product-card__body,
.kc-section-products .kc-product-card__body {
    padding: 24px 26px 26px;
}

.ul-menus-tabs-wrapper .kc-product-card__type,
.kc-section-products .kc-product-card__type {
    font-size: 13.5px;
    margin-bottom: 9px;
}

.ul-menus-tabs-wrapper .kc-product-card__title,
.kc-section-products .kc-product-card__title {
    font-size: 22px;
    margin-bottom: 12px;
}

.ul-menus-tabs-wrapper .kc-product-card__packing,
.kc-section-products .kc-product-card__packing {
    font-size: 15px;
    margin-bottom: 20px;
}

.ul-menus-tabs-wrapper .kc-product-card__actions,
.kc-section-products .kc-product-card__actions {
    padding-top: 18px;
}

.ul-menus-tabs-wrapper .kc-product-card__actions .kc-link,
.kc-section-products .kc-product-card__actions .kc-link {
    font-size: 15.5px;
}

.ul-menus-tabs-wrapper .kc-product-card__actions .kc-wa-mini,
.kc-section-products .kc-product-card__actions .kc-wa-mini {
    width: 42px;
    height: 42px;
}

/* The tab row on the home panel, and the price filter above a category grid,
   both belong to the row of cards they head, so they grow with it. */
.ul-menus-tabs-wrapper .ul-menus-tab-navs button {
    font-size: 16.5px;
    padding: 12px 26px;
}

.kc-section-products .kc-filter-bar button {
    font-size: 15.5px;
    padding: 11px 24px;
}

/* ------------------------------------------------ category cards -------- */
/* The four ranges, wherever they are shown as cards: home, shop, the about
   page's "What We Make", and "Our Other Ranges" at the foot of a category. */

.kc-section-ranges .kc-cat-card {
    padding: 42px 34px 36px;
}

.kc-section-ranges .kc-cat-card__img {
    height: 180px;
    margin-bottom: 24px;
}

.kc-section-ranges .kc-cat-card__title {
    font-size: 25px;
    margin-bottom: 8px;
}

.kc-section-ranges .kc-cat-card__tagline {
    font-size: 15.5px;
    margin-bottom: 15px;
}

/* Only the home and shop range cards carry a description; the about page's
   do not, so this rule simply finds nothing there. */
.kc-section-ranges .kc-cat-card__descr {
    font-size: 16.5px;
    margin-bottom: 20px;
}

.kc-section-ranges .kc-cat-card__meta {
    padding-top: 19px;
    font-size: 15.5px;
}

/* ------------------------------------------------- process steps -------- */

.kc-section-process .kc-step        { padding: 34px 30px; }
.kc-section-process .kc-step__num   { font-size: 44px; margin-bottom: 12px; }
.kc-section-process .kc-step__title { font-size: 21px; margin-bottom: 10px; }
.kc-section-process .kc-step__text  { font-size: 16px; }

/* ------------------------------------------------------- gallery -------- */
/* The tile floor rises from 180px to 230px, so a wider band means bigger
   photos rather than more, smaller ones per row. */

.kc-section-gallery .kc-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
}

/* ---------------------------------------------------- small screens ----- */
/* Below four columns the cards already fill the row, so the enlarged type
   would only crowd them. Back to the sizes they were designed at. */

@media screen and (max-width: 1199px) {
    .ul-menus-tabs-wrapper .kc-product-card__img,
    .kc-section-products .kc-product-card__img {
        min-height: 240px;
        padding: 54px 20px 22px;
    }

    .ul-menus-tabs-wrapper .kc-product-card__body,
    .kc-section-products .kc-product-card__body {
        padding: 20px 22px 22px;
    }

    .ul-menus-tabs-wrapper .kc-product-card__title,
    .kc-section-products .kc-product-card__title    { font-size: 19px; }

    .ul-menus-tabs-wrapper .kc-product-card__type,
    .kc-section-products .kc-product-card__type     { font-size: 12.5px; }

    .ul-menus-tabs-wrapper .kc-product-card__packing,
    .kc-section-products .kc-product-card__packing  { font-size: 13.5px; }
}

@media screen and (max-width: 991px) {
    .kc-section-ranges .kc-cat-card {
        padding: 34px 28px 30px;
    }

    .kc-section-ranges .kc-cat-card__img {
        height: 148px;
        margin-bottom: 20px;
    }

    .kc-section-ranges .kc-cat-card__title   { font-size: 22px; }
    .kc-section-ranges .kc-cat-card__tagline { font-size: 14px; }
    .kc-section-ranges .kc-cat-card__descr   { font-size: 15px; margin-bottom: 18px; }
    .kc-section-ranges .kc-cat-card__meta    { font-size: 14px; }

    .kc-section-process .kc-step        { padding: 28px 24px; }
    .kc-section-process .kc-step__num   { font-size: 36px; margin-bottom: 10px; }
    .kc-section-process .kc-step__title { font-size: 18px; margin-bottom: 8px; }
    .kc-section-process .kc-step__text  { font-size: 14.5px; }

    .kc-section-gallery .kc-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 16px;
    }
}

/* ###################### WIDE PRODUCT SECTIONS - END ###################### */

/* ################## FLOATING CANDY DECORATIONS - START ################## */

/* A single decorative candy PNG sits in the side gutter of a section - the
   strip left over between the section edge and its content container - and
   only where that strip is wide enough to be genuinely spare space.
   krishna.js measures it and writes --kc-size and --kc-pos in px, so the
   piece stays beside the content instead of drifting over it.

   One effect only: .kc-float__orbit does a slow circular drift. That is a
   compositor-only transform on one element per section, so it costs nothing
   while the page scrolls. There is no scroll-linked movement at all.
   The layer is inert: it never takes pointer events and is hidden from AT. */

/* The candies float in FRONT of the section - photos, cards, the theme's own
   vectors and background art all pass underneath them. In-section content in
   this theme tops out at z-index 4, so 6 clears it; the chrome that must stay
   on top (header 99, sidebar 999, WhatsApp button 999, preloader) all sits
   outside sections and still wins. The layer never takes pointer events, so
   nothing underneath becomes unclickable. */
.kc-floaters {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 6;
}

/* Anchor for the overlay - harmless on the many sections already relative. */
.kc-has-floaters {
    position: relative;
}

.kc-float {
    position: absolute;
    top: var(--kc-y);
    left: var(--kc-pos);
    width: var(--kc-size);
    opacity: 0;
    transition: opacity .9s ease;
}

/* Mirror image - anchored to the right edge of the section instead. */
.kc-float--right {
    left: auto;
    right: var(--kc-pos);
}

.kc-floaters.is-visible .kc-float {
    opacity: var(--kc-opacity, .5);
}

.kc-float__orbit {
    display: block;
    animation: kc-orbit var(--kc-dur) linear var(--kc-delay) infinite;
}

.kc-float__img {
    display: block;
    width: 100%;
    height: auto;
}

/* Circular drift - a full loop around a small circle of --kc-r radius. */
@keyframes kc-orbit {
    0%   { transform: translate3d(calc(var(--kc-r) *  1), calc(var(--kc-r) *  0), 0); }
    25%  { transform: translate3d(calc(var(--kc-r) *  0), calc(var(--kc-r) *  1), 0); }
    50%  { transform: translate3d(calc(var(--kc-r) * -1), calc(var(--kc-r) *  0), 0); }
    75%  { transform: translate3d(calc(var(--kc-r) *  0), calc(var(--kc-r) * -1), 0); }
    100% { transform: translate3d(calc(var(--kc-r) *  1), calc(var(--kc-r) *  0), 0); }
}

/* Below 992px krishna.js does not build the layer at all - the gutters there
   are too tight for a candy to be anything but clutter beside the text. */
@media (max-width: 991.98px) {
    .kc-floaters {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kc-float {
        transition: none;
    }

    .kc-float__orbit {
        animation: none;
    }
}

/* ################### FLOATING CANDY DECORATIONS - END ################### */