:root {
    --font: "Zalando Sans Expanded", sans-serif;
    --white: #ffffff;
    --black: #000000;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    font-family: var(--font);
    background: var(--white);
    font-optical-sizing: auto;
    font-style: normal;
    font-smoothing: antialiased;
}
/* .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
} */

.site-header {
    background: var(--white);
    padding: 2rem 0rem;
    position: sticky;
    top: 0;
    z-index: 999;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 12.7rem; /* 127.06px */
    border: 0.3rem solid var(--black); /* 3.03px */
    gap: 3.025rem; /* 30.25px */
    padding: 2.025rem 4.84rem;
}
.site-header {
    transition: transform 0.3s ease;
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
}

.site-header.hide {
    transform: translateY(-100%);
}
/* Logo */
.logo {
    text-decoration: none;
    flex-shrink: 0;
}

.logo img {
    width: 100%;
    max-width: 315px;
}

/* Nav */
.main-nav ul {
    display: flex;
    list-style: none;
    gap: 4.2rem;
}

.main-nav a {
    text-decoration: none;
    font-size: 2.18rem;
    font-weight: 400;
    color: var(--black);
    transition: opacity 0.2s;
}

.main-nav a:hover {
    opacity: 0.6;
}

.main-nav a.active {
    opacity: 1;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.8rem;
    text-decoration-thickness: 0.2rem;
    text-decoration-color: rgba(47, 47, 228, 1);
}

/* Header Right (Desktop) */
.header-right {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

/* Search Box */
.search-box {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border: 0.151rem solid var(--black);
    border-radius: 9.38rem;
    padding: 1.2rem 2rem;
    width: 50rem;
}

.search-box svg {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
}

.search-box input {
    border: none;
    outline: none;
    font-family: var(--font);
    font-size: 2.1rem;
    width: 100%;
    background: transparent;
    color: var(--black);
}

.search-box input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}
.search-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--black);
    font-size: 1.6rem;
    display: none;
    padding: 0;
    line-height: 1;
}

.search-clear .bi-x {
    font-size: 2rem;
}

.search-clear.show {
    display: block;
}

.search-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 420px;
    overflow-y: auto;
    margin-top: 4px;
}

.search-suggestions.show {
    display: block;
}

.search-suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.search-suggestion-item:hover {
    background: #f5f5f5;
}

.search-suggestion-item + .search-suggestion-item {
    border-top: 1px solid #f0f0f0;
}

.search-suggestion-img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.search-suggestion-info {
    flex: 1;
    min-width: 0;
}

.search-suggestion-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-suggestion-price {
    font-size: 13px;
    color: #666;
    margin-top: 2px;
}

.search-suggestion-price .original {
    text-decoration: line-through;
    color: #999;
    margin-right: 6px;
}

.search-suggestion-price .sale {
    color: #e74c3c;
    font-weight: 600;
}

.search-suggestion-all {
    display: block;
    text-align: center;
    padding: 12px;
    font-size: 14px;
    color: var(--color-primary, #4A90D9);
    font-weight: 500;
    text-decoration: none;
    border-top: 1px solid #f0f0f0;
}

.search-suggestion-all:hover {
    background: #f9f9f9;
}

.search-suggestion-no-result {
    padding: 20px 16px;
    text-align: center;
    color: #999;
    font-size: 14px;
}

/* Ensure search-box is positioned for absolute dropdown */
.header-right .search-box,
.mobile-header-right .search-box {
    position: relative;
}

/* Icon Buttons */
.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.icon-btn svg {
    width: 3rem;
    height: 3rem;
}
.icon-btn svg {
    transition: transform 0.3s ease;
}

.icon-btn:hover svg {
    transform: scale(1.15);
}

.position-relative {
    position: relative;
}

.header-badge {
    position: absolute;
    top: -0.4rem;
    right: -0.6rem;
    min-width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: rgba(47, 47, 228, 1);
    color: rgba(255, 255, 255, 1);
    font-family: var(--font);
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.4rem;
    line-height: 1;
}

.header-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: var(--font);
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
    text-decoration: none;
    background: rgba(255, 255, 255, 1);
    border: 0.15rem solid rgba(0, 0, 0, 1);
    border-radius: 6rem;
    padding: 0.6rem 1.6rem;
    transition: all 0.2s ease;
    box-shadow: 0 0.3rem 0 0 rgba(0, 0, 0, 1);
    white-space: nowrap;
}

.header-login-btn:hover {
    box-shadow: 0 0.1rem 0 0 rgba(0, 0, 0, 1);
    transform: translateY(0.2rem);
}

.header-login-btn svg {
    width: 1.4rem;
    height: 1.4rem;
}

/* Mobile-only login button - hidden on desktop */
.mobile-login-btn {
    display: none;
}

/* Mobile-only header right inside nav - hidden on desktop */
.mobile-header-right {
    display: none;
}

/* Hamburger - hidden on desktop */
.nav-close {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 2.8rem;
    color: var(--black);
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.hamburger span {
    display: block;
    width: 2.4rem;
    height: 0.2rem;
    background: var(--black);
    border-radius: 0.2rem;
    transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
    transform: translateY(0.7rem) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
    opacity: 0;
}
.hamburger.active span:nth-child(3) {
    transform: translateY(-0.7rem) rotate(-45deg);
}

/* Overlay */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 998;
}

.nav-overlay.open {
    display: block;
}

/*  */

/* footer css starts here  */
/* ==============================
   FOOTER
============================== */
.site-footer {
    /* background: #0d0d0d; */
    overflow: hidden;
    position: relative;
}

/* Pet Images Strip - Parallax */
.footer-pets {
    position: relative;
    height: 40rem;
    /* overflow: hidden; */
    /* background: #0d0d0d; */
}

.footer-pets-inner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.blog-footer-bg{
    display: none;
    position: absolute;
    z-index: -1;

}
.blog-footer-bg.active{
    display: block;
}
.pet-img-group {
    width: 100%;
    max-width: 115rem;
    height: auto;
    object-fit: contain;
}

/* Footer Main */
.footer-main {
    /* background-position: center center; */
    background-size: cover;
    background-repeat: no-repeat;
    background: #1a1a1aab;
    border-radius: 9rem 9rem 0 0;
    padding: 6rem 0 5rem;
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 9rem 9rem 0 0;
    -moz-border-radius: 9rem 9rem 0 0;
    -ms-border-radius: 9rem 9rem 0 0;
    -o-border-radius: 9rem 9rem 0 0;
}

/* Paw Print Decorations */

/* Brand */
.footer-brand {
    text-align: center;
    margin-bottom: 8rem;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.footer-logo {
    width: 100%;
    max-width: 762px;
}

.footer-brand-slogan {
    font-size: 3.26rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 6rem;
}

.footer-signin-btn {
    display: block;
    align-items: center;
    gap: 0.8rem;
    background: var(--white);
    color: var(--black);
    font-size: 2.6rem;
    font-weight: 600;
    width: 40rem;
    text-align: center;
    padding: 1.6rem 3.2rem;
    border-radius: 5rem;
    text-decoration: none;
    box-shadow: 0 0.6rem 0 0 rgba(255, 83, 123, 1);
    transition: all 0.2s ease;
}

.footer-signin-btn:hover {
    transform: translateY(0.3rem);
    box-shadow: 0 0.3rem 0 0 rgba(255, 83, 123, 1);
}

/* Footer Grid */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.4fr;
    gap: 4rem;
    position: relative;
    z-index: 1;
}

.footer-heading {
    font-size: 2.1rem;
    font-weight: 500;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 2rem;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.footer-links a {
    font-size: 2.1rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--white);
}

.footer-links a.active {
    color: var(--white);
    font-weight: 600;
}

/* Contact Column */
.footer-address {
    font-size: 2.1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: 1.6rem;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 2.3rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    margin-bottom: 1rem;
    transition: color 0.2s;
}

.footer-contact-item:hover {
    color: var(--white);
}

.footer-contact-item svg {
    flex-shrink: 0;
}

/* Bottom Bar */
.footer-bottom {
    background: rgba(0, 0, 0, 1);
    text-align: center;
    padding: 2rem 0;
}

.footer-bottom p {
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 1);
}

/* ==============================
   RESPONSIVE
============================== */
/* @media (max-width: 1200px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem 2rem;
    }

    .footer-brand-title {
        font-size: 6rem;
    }
}

@media (max-width: 768px) {
    .footer-pets {
        height: 20rem;
    }

    .pet-img {
        width: 12rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .footer-brand-title {
        font-size: 4.5rem;
    }

    .footer-brand-slogan {
        font-size: 1.8rem;
    }

    .footer-main {
        padding: 4rem 0 3rem;
    }
} */

/* footer css ends here */

/* inner banner css starts here */
.page-banner {
    padding: 3rem 0;
}
.page-banner-inner__background {
    background-image: url("../images/banners/banner-sub-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 12rem 0;
    border-radius: 9rem;
    -webkit-border-radius: 9rem;
    -moz-border-radius: 9rem;
    -ms-border-radius: 9rem;
    -o-border-radius: 9rem;
}
.page-banner-inner {
    position: relative;
    z-index: 1;
}

.banner-back-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
    font-size: 3rem;
    position: absolute;
    top: 3rem;
    left: 5rem;
    font-weight: 600;
    white-space: nowrap;
    transition: opacity 0.2s;
}

.banner-back-btn:hover {
    opacity: 0.8;
    color: var(--white);
}

.banner-back-btn svg {
    flex-shrink: 0;
}

.page-banner-title {
    font-size: 7.4rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    flex: 1;
}

/* inner banner css sends here */

/* inner policy content css starts here */
/* ==============================
   POLICY CONTENT
============================== */
.policy-content {
    padding: 1rem 0 6rem;
}

.policy-body {
    max-width: 105rem;
    margin: 0 auto;
}

.policy-heading {
    font-size: 4.8rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 1.6rem;
}

.policy-body h3 {
    font-size: 2.4rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    margin-top: 2.4rem;
    margin-bottom: 1.2rem;
}

.policy-body p{
    font-size: 2rem;
    font-weight: 400;
    color: rgba(108, 117, 125, 1);
    line-height: 1.8;
    margin-bottom: 1.6rem;
}

.policy-body h2 ,h1  {
    font-size: 4.8rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 1.6rem;
}

.policy-para {
    font-size: 2rem;
    font-weight: 400;
    color: rgba(108, 117, 125, 1);
    line-height: 1.8;
    margin-bottom: 1.6rem;
}

.policy-page ul {
    list-style: disc;
    padding-left: 2.4rem;
    margin-bottom: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.policy-body li {
    font-size: 2rem;
    font-weight: 400;
    color: rgba(108, 117, 125, 1);
    line-height: 1.8;
}

.policy-body li strong {
    color: rgba(0, 0, 0, 0.8);
    font-weight: 600;
}

/* Responsive */
/* @media (max-width: 768px) {
    .policy-heading {
        font-size: 3.2rem;
    }

    .policy-subheading {
        font-size: 2rem;
    }

    .policy-para,
    .policy-list li {
        font-size: 1.8rem;
    }
} */

/* inner policy content css ends here */

/* order details css starts here */

/* ==============================
   COMMON BUTTON
============================== */
.paw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    background: rgba(255, 255, 255, 1);
    border: 0.2rem solid rgba(0, 0, 0, 1);
    border-radius: 6rem;
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
    padding: 2.2rem 4rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 0.8rem 0 0 rgba(0, 0, 0, 1);
    white-space: nowrap;
}

.paw-btn:hover {
    transform: translateY(0.2rem);
    box-shadow: 0 0.2rem 0 0 rgba(0, 0, 0, 1);
    color: rgba(0, 0, 0, 1);
}

.paw-btn svg {
    flex-shrink: 0;
}

.paw-btn--full {
    width: 100%;
    max-width: 45rem;
    margin: 0 auto;
}

/* ==============================
   COMMON INPUT FIELDS
============================== */
.paw-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.paw-form-group label {
    font-family: var(--font);
    font-size: 1.8rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
}

.paw-input {
    width: 100%;
    padding: 1.6rem 2.4rem;
    border: 0.3rem solid rgba(0, 0, 0, 1);
    border-radius: 9rem;
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    background: transparent;
    outline: none;
    transition: border-color 0.2s;
    -webkit-border-radius: 9rem;
    -moz-border-radius: 9rem;
    -ms-border-radius: 9rem;
    -o-border-radius: 9rem;
}

.paw-input::placeholder {
    color: rgba(0, 0, 0, 0.35);
}

.paw-input:focus {
    border-color: rgba(0, 0, 0, 0.6);
}

.field-error {
    font-family: var(--font);
    font-size: 1.4rem;
    color: rgba(220, 38, 38, 1);
    margin-top: 0.6rem;
    line-height: 1.4;
}

.field-hint {
    font-family: var(--font);
    font-size: 1.3rem;
    color: rgba(0, 0, 0, 0.5);
    line-height: 1.4;
}

.is-invalid {
    border-color: rgba(220, 38, 38, 1) !important;
}

.paw-select {
    width: 100%;
    padding: 1.6rem 2.4rem;
    border: 0.3rem solid rgba(0, 0, 0, 1);
    font-family: var(--font);
    font-size: 1.8rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    background: transparent;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: right 2rem center;
    padding-right: 4.8rem;
    border-radius: 6rem;
}

.paw-select:focus {
    border-color: rgba(0, 0, 0, 0.6);
}

.paw-checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    cursor: pointer;
}

.paw-checkbox-wrap input[type="checkbox"] {
    width: 2.2rem;
    height: 2.2rem;
    accent-color: rgba(0, 179, 45, 1);
    cursor: pointer;
    flex-shrink: 0;
}

.paw-checkbox-wrap label {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 400;
    color: rgba(110, 110, 110, 1);
    cursor: pointer;
}

/* ==============================
   CHECKOUT LAYOUT
============================== */
.checkout-page {
    min-height: 100vh;
    /* background: rgba(245, 240, 235, 1); */
    background-image: url(../images/common/order-process-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* Background blob decorations */
/* .checkout-page::before {
    content: '';
    position: absolute;
    width: 40rem;
    height: 40rem;
    border-radius: 50%;
    background: rgba(163, 90, 60, 0.06);
    bottom: -10rem;
    left: -10rem;
    pointer-events: none;
}

.checkout-page::after {
    content: '';
    position: absolute;
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    background: rgba(163, 90, 60, 0.04);
    top: 20%;
    right: -8rem;
    pointer-events: none;
} */

/* ==============================
   CHECKOUT HEADER
============================== */
.checkout-header-bg {
    background: #c8e63a;
}
.checkout-header {
    padding: 3rem 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.checkout-back {
    position: absolute;
    left: 4rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--font);
    font-size: 3rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
    text-decoration: none;
    transition: opacity 0.2s;
}

.checkout-back:hover {
    opacity: 0.7;
    color: rgba(0, 0, 0, 1);
}

.checkout-back svg {
    flex-shrink: 0;
}

.checkout-brand {
    font-family: var(--font);
    font-size: 3.2rem;
    font-weight: 800;
    color: rgba(0, 0, 0, 1);
    letter-spacing: 0.1rem;
}

/* ==============================
   PROGRESS BAR
============================== */
.checkout-progress {
    padding: 4rem 0 2rem;
    max-width: 90rem;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.progress-steps {
    display: flex;
    align-items: flex-start;
    position: relative;
}

.progress-line {
    position: absolute;
    top: 5.8rem;
    left: 5%;
    right: 5%;
    height: 0.3rem;
    background: rgba(0, 0, 0, 1);
    z-index: 0;
}

.progress-line-fill {
    height: 100%;
    background: rgba(47, 47, 228, 1);
    transition: width 0.4s ease;
}

.progress-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    position: relative;
    z-index: 1;
}

.progress-step-num {
    width: 3.45rem;
    height: 3.45rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 1);
    color: rgba(119, 119, 119, 1);
    font-family: var(--font);
    font-size: 1.8rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.progress-step.active .progress-step-num,
.progress-step.done .progress-step-num {
    background: rgba(47, 47, 228, 1);
    color: rgba(255, 255, 255, 1);
}

.progress-step-label {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 500;
    color: rgba(129, 129, 129, 1);
    white-space: nowrap;
}

.progress-step.active .progress-step-label,
.progress-step.done .progress-step-label {
    color: rgba(0, 0, 0, 1);
}
.border-top-tottol {
    border-top: 0.3rem solid rgba(0, 0, 0, 1);
    margin-top: 2rem;
}

/* ==============================
   CHECKOUT BODY
============================== */
.checkout-body {
    padding: 2rem 4rem 6rem;
    margin: 0 auto;
    max-width: 145rem;
    position: relative;
    z-index: 1;
}

/* ==============================
   CHECKOUT CARD
============================== */
.checkout-card {
    background: rgba(255, 255, 255, 1);
    border: 0.3rem solid rgba(0, 0, 0, 1);
    border-radius: rem;
    padding: 3rem;
    margin-bottom: 2.4rem;
    -webkit-border-radius: 6rem;
    -moz-border-radius: 6rem;
    -ms-border-radius: 6rem;
    -o-border-radius: 6rem;
}

.checkout-card-title {
    font-family: var(--font);
    font-size: 3.6rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 2.4rem;
}

/* ==============================
   VIEW 1 - ORDER DETAILS
============================== */
.order-details-layout {
    display: grid;
    grid-template-columns: 1fr 50rem;
    gap: 2.4rem;
    align-items: start;
}

.order-item {
    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
    padding: 1.6rem 0;
}

.order-item:last-child {
    border-bottom: none;
}

.order-item-img-wrap {
    position: relative;
    flex-shrink: 0;
}

.order-item-img-wrap img {
    width: 8rem;
    height: 8rem;
    object-fit: cover;
    border-radius: 0.6rem;
    -webkit-border-radius: 0.6rem;
    -moz-border-radius: 0.6rem;
    -ms-border-radius: 0.6rem;
    -o-border-radius: 0.6rem;
}

.order-item-qty-badge {
    position: absolute;
    top: -0.6rem;
    right: -0.6rem;
    width: 2.4rem;
    height: 2.4rem;
    background: rgba(0, 0, 0, 1);
    color: #fff;
    border-radius: 0.6rem;
    font-family: var(--font);
    font-size: 1.4rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-item-info {
    flex: 1;
}

.order-item-name {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 0.4rem;
}

.order-item-meta {
    font-family: var(--font);
    font-size: 1.8rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.order-item-meta span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.order-item-meta .divider {
    width: 0.1rem;
    height: 1.4rem;
    background: rgba(0, 0, 0, 0.2);
}

.order-item-price {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    white-space: nowrap;
}

/* Order Summary */
.order-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 0;
}

.order-summary-row:last-child {
    border-bottom: none;
    font-weight: 500;
    font-size: 3rem;
    padding-top: 1.6rem;
}

.order-summary-row span:first-child {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
}

.order-summary-row span:last-child {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
}

.order-summary-row.total span {
    border-bottom: none;
    font-weight: 500;
    font-size: 3rem;
    padding-top: 1.6rem;
}

/* ==============================
   VIEW 2 - DELIVERY DETAILS
============================== */
.add-address-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font);
    font-size: 3rem;
    font-weight: 600;
    color: rgba(47, 47, 228, 1);
    background: none;
    border: none;
    cursor: pointer;
    margin-left: auto;
    margin-bottom: 2.4rem;
    transition: opacity 0.2s;
}

.add-address-btn:hover {
    opacity: 0.7;
}

.address-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    margin-bottom: 3rem;
}

.address-card {
    border: 0.3rem solid rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 3rem;
    padding: 2rem;
    cursor: pointer;
    transition: border-color 0.2s;
    position: relative;
    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    -ms-border-radius: 3rem;
    -o-border-radius: 3rem;
}

.address-card.selected {
    border-color: rgba(0, 0, 0, 1);
}

.address-card-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.address-card-radio {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 0.2rem solid rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.address-card.selected .address-card-radio {
    border-color: #22c55e;
    background: #22c55e;
}

.address-card.selected .address-card-radio::after {
    content: "";
    width: 0.8rem;
    height: 0.8rem;
    background: white;
    border-radius: 50%;
}

.address-card-type {
    font-family: var(--font);
    font-size: 3rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    flex: 1;
}

.address-card-actions {
    display: flex;
    align-items: center;
    gap: 3.2rem;
    margin-left: auto;
}

.address-edit-btn,
.address-delete-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font);
    font-size: 1.8rem;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.address-edit-btn {
    color: rgba(0, 42, 196, 1);
}

.address-delete-btn {
    color: rgba(196, 0, 3, 1);
}

.address-edit-btn:hover,
.address-delete-btn:hover {
    opacity: 0.7;
}

.address-card-text {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.address-card-contact {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
}

/* ==============================
   ADDRESS FORM
============================== */
.address-form-layout {
    display: flex;
    gap: 0;
}

.address-form-left,
.address-form-right {
    flex: 1;
    padding: 0 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.address-form-left {
    padding-left: 0;
    border-right: 0.15rem solid rgba(193, 193, 193, 1);
}

.address-form-right {
    padding-right: 0;
}

.address-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
}

.address-form-title {
    font-family: var(--font);
    font-size: 2.2rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 0.4rem;
}

/* ==============================
   VIEW 3 - PAYMENT
============================== */
.payment-card {
    max-width: 70rem;
    margin: 0 auto;
}

.payment-option {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 2rem 0;
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.08);
    cursor: pointer;
}

.payment-option:last-child {
    border-bottom: none;
}

.payment-option-head {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.payment-radio {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 0.2rem solid rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;
}

.payment-option.selected .payment-radio {
    border-color: rgba(0, 42, 196, 1);
    background: rgba(0, 42, 196, 1);
}

.payment-option.selected .payment-radio::after {
    content: "";
    width: 0.8rem;
    height: 0.8rem;
    background: white;
    border-radius: 50%;
}

.payment-option-name {
    font-family: var(--font);
    font-size: 2.7rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.payment-option-name img {
    height: 2rem;
    width: auto;
    display: inline;
}

.payment-option-desc {
    font-family: var(--font);
    font-size: 2.4rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
    padding-left: 3.2rem;
}

.payment-card-fields {
    display: none;
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.6rem 0 0 3.2rem;
}

.payment-option.selected .payment-card-fields {
    display: flex;
}

/* Manual Payment */
.manual-payment-card {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    padding: 3rem;
    border: 0.15rem solid rgba(0, 0, 0, 1);
    border-radius: 2rem;
    background: rgba(255, 255, 255, 1);
    max-width: 80rem;
    margin: 0 auto;
}
.payment-title {
    font-size: 2.4rem;
    font-weight: 500;
}
.manual-payment-secure {
    font-size: 1.4rem;
    font-weight: 400;
}
/* TOP ROW */
.manual-payment-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.manual-payment-top-left {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.manual-payment-top-right .logo img {
    max-width: 14rem;
    height: auto;
}

/* BOTTOM ROW */
.manual-payment-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
}

.manual-payment-details {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.manual-payment-details p,
.manual-payment-info p {
    font-family: var(--font);
    font-size: 1.6rem;
    color: rgba(0, 0, 0, 0.8);
}

.manual-payment-info {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-align: right;
}

.manual-payment-amount {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: rgba(0, 0, 0, 1) !important;
}

/* NOTES */
.manual-payment-notes h4 {
    font-family: var(--font);
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.manual-payment-notes p {
    font-family: var(--font);
    font-size: 1.5rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.6;
}

/* ==============================
   PAYMENT SUCCESS
============================== */
.payment-success-page {
    min-height: 100vh;
    background-image: url(../images/common/payment-success-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    position: relative;
    overflow: hidden;
    gap: 1.4rem;
}

.payment-success-page::before,
.payment-success-page::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

/* .payment-success-page::before {
    width: 40rem;
    height: 40rem;
    top: -10rem;
    left: -10rem;
}

.payment-success-page::after {
    width: 30rem;
    height: 30rem;
    bottom: -8rem;
    right: -8rem;
} */

.payment-success-card {
    background: rgba(255, 255, 255, 1);
    border: 0.3rem solid rgba(0, 0, 0, 1);
    border-radius: 9rem;
    padding: 11rem 5rem 4rem;
    max-width: 80rem;
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 1;
    margin-top: 10rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.payment-success-pet {
    position: absolute;
    top: -19rem;
    left: 50%;
    transform: translateX(-50%);
    width: 35rem;
    height: auto;
}

.payment-success-brand {
    font-family: var(--font);
    font-size: 5.6rem;
    font-weight: 800;
    color: rgba(0, 42, 196, 1);
    margin-bottom: 0.8rem;
    letter-spacing: 0.05rem;
}

.payment-success-title {
    font-family: var(--font);
    font-size: 2.8rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 1rem;
}

.payment-success-desc {
    font-family: var(--font);
    font-size: 1.8rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 3rem;
    line-height: 1.6;
}

/* ==============================
   CHECKOUT BUTTON WRAP
============================== */
.checkout-btn-wrap {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

/* ==============================
   ORDER SUCCESS / THANK YOU
============================== */
.order-success {
    position: relative;
    padding: 4rem 0 8rem;
    overflow: hidden;
}

.order-success-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    max-width: 100%;
    pointer-events: none;
    opacity: 0.08;
}

.order-success-inner {
    max-width: 90rem;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.order-success-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.order-success-icon svg {
    width: 8.8rem;
    height: 8.8rem;
    color: rgba(47, 47, 228, 1);
    stroke-width: 1.5;
}

.order-success-leaf {
    position: absolute;
    bottom: -1rem;
    right: -3rem;
    width: 5rem;
    height: auto;
    pointer-events: none;
}

.order-success-title {
    font-family: var(--font);
    font-size: 5.6rem;
    font-weight: 800;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 1.2rem;
    letter-spacing: 0.05em;
}

.order-success-subtitle {
    font-family: var(--font);
    font-size: 2.4rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: 0.8rem;
}

.order-success-desc {
    font-family: var(--font);
    font-size: 1.8rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 4rem;
    line-height: 1.6;
}

.order-success-card {
    background: rgba(255, 255, 255, 1);
    border: 0.3rem solid rgba(0, 0, 0, 1);
    border-radius: 6rem;
    padding: 4rem;
    margin-bottom: 4rem;
    text-align: left;
}

.order-success-order-no {
    font-family: var(--font);
    font-size: 2.4rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 3rem;
}

.order-success-info-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
}

.order-success-info-item {
    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
}

.order-success-info-icon {
    flex-shrink: 0;
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    background: rgba(245, 240, 235, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-success-info-icon svg {
    width: 2.4rem;
    height: 2.4rem;
    color: rgba(47, 47, 228, 1);
}

.order-success-info-label {
    font-family: var(--font);
    font-size: 1.3rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.5);
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
}

.order-success-info-val {
    font-family: var(--font);
    font-size: 1.8rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
    line-height: 1.4;
}

.order-success-info-val strong {
    font-weight: 700;
}

.order-success-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    background: rgba(47, 47, 228, 1);
    border: 0.2rem solid rgba(0, 0, 0, 1);
    border-radius: 6rem;
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    padding: 2rem 4rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 0.8rem 0 0 rgba(0, 0, 0, 1);
    margin-bottom: 2.4rem;
    min-width: 28rem;
}

.order-success-btn:hover {
    transform: translateY(0.2rem);
    box-shadow: 0 0.2rem 0 0 rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 1);
    background: rgba(40, 40, 200, 1);
}

.order-success-continue {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
    text-decoration: none;
    transition: color 0.2s;
}

.order-success-continue:hover {
    color: rgba(0, 0, 0, 1);
}

.order-success-continue i {
    font-size: 2.2rem;
    transition: transform 0.2s;
}

.order-success-continue:hover i {
    transform: translateX(0.4rem);
}

/* ==============================
   RESPONSIVE
============================== */
/* @media (max-width: 992px) {
    .order-details-layout {
        grid-template-columns: 1fr;
    }

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

    .address-form-layout {
        flex-direction: column;
    }

    .address-form-left {
        border-right: none;
        border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
        padding: 0 0 2rem 0;
    }

    .address-form-right {
        padding: 2rem 0 0 0;
    }

    .manual-payment-card {
        grid-template-columns: 1fr;
    }

    .manual-payment-right {
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .checkout-header {
        padding: 1.6rem 2rem;
    }

    .checkout-back {
        left: 2rem;
        font-size: 1.6rem;
    }

    .checkout-body {
        padding: 2rem 1.6rem 4rem;
    }

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

    .address-form-row {
        grid-template-columns: 1fr;
    }

    .paw-btn {
        padding: 2rem 3rem;
        font-size: 1.8rem;
    }

    .payment-success-card {
        padding: 3rem 2.4rem;
        margin-top: 8rem;
    }

    .payment-success-brand {
        font-size: 4rem;
    }
} */

/* order details css ends here */

/* cart page css starts here */
/* ==============================
   CART SECTION
============================== */
.cart-section {
    padding: 4rem 0 8rem;
}

.cart-items {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.cart-item-card {
    padding: 5rem;
    position: relative;
}

.cart-item-card.selected {
    border-color: #7c3aed;
}

.cart-item-inner {
    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
}

/* Checkbox */
.cart-item-check {
    flex-shrink: 0;
    padding-top: 0.4rem;
}

.cart-checkbox {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.6rem;
    border: 0.2rem solid rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.cart-checkbox.active {
    background: #7c3aed;
    border-color: #7c3aed;
}
/* Hide tick by default */
.cart-checkbox svg {
    display: none;
}

/* Show tick when active */
.cart-checkbox.active svg {
    display: block;
}

/* Cart item image */
.cart-item-card .order-item-img-wrap img {
    width: 10rem;
    height: 10rem;
    object-fit: cover;
    border-radius: 1rem;
}

/* Cart item info */
.cart-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.cart-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Qty controls */
.cart-qty-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    border: 0.15rem solid rgba(0, 0, 0, 1);
    border-radius: 0.8rem;
    width: fit-content;
    overflow: hidden;
}

.cart-qty-btn {
    background: none;
    border: none;
    width: 3.6rem;
    height: 3.6rem;
    font-size: 2rem;
    font-family: var(--font);
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.cart-qty-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.cart-qty-val {
    font-family: var(--font);
    font-size: 1.6rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    min-width: 3.6rem;
    text-align: center;
    border-left: 0.15rem solid rgba(0, 0, 0, 1);
    border-right: 0.15rem solid rgba(0, 0, 0, 1);
    padding: 0.6rem 0;
}

/* Cart actions */
.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-top: 2rem;
}

.cart-wishlist-btn,
.cart-remove-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font);
    font-size: 1.6rem;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
    color: rgba(0, 0, 0, 1);
}

.cart-remove-btn {
    color: rgba(196, 0, 3, 1);
}

.cart-wishlist-btn:hover,
.cart-remove-btn:hover {
    opacity: 0.7;
}

/* cart page css ends here */

/* ==============================
   AUTH PAGES - LOGIN / REGISTER / FORGOT
============================== */

.auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* ── LEFT - Media Side ── */
.auth-left {
    position: relative;
    overflow: hidden;
    /* height: 100vh; */
}

.auth-left video,
.auth-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── RIGHT - Form Side ── */
.auth-right {
    background-image: url("../images/common/sign-in-up.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.5rem;
    justify-content: center;
    padding: 4rem;
    position: relative;
    /* height: 100vh; */
}

.auth-brand {
    font-family: var(--font);
    font-size: 4.8rem;
    font-weight: 800;
    color: rgba(0, 0, 0, 1);
    letter-spacing: 0.1rem;
    margin-bottom: 3rem;
    text-align: center;
}

.auth-card {
    background: rgba(255, 255, 255, 1);
    border: 0.15rem solid rgba(0, 0, 0, 1);
    border-radius: 2.4rem;
    padding: 4rem;
    width: 100%;
    max-width: 70rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.auth-card-title {
    font-family: var(--font);
    font-size: 2.4rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    text-align: center;
    margin-bottom: 0.4rem;
}

.auth-card-desc {
    font-family: var(--font);
    font-size: 1.6rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
    text-align: center;
    line-height: 1.6;
    margin-top: -0.8rem;
}

/* Or divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding-top: 1.5rem;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 0.15rem;
    background: rgba(207, 223, 226, 1);
}

.auth-divider span {
    font-family: var(--font);
    font-size: 2rem;
    color: rgba(41, 73, 87, 1);
}

/* Forgot password link */
.auth-forgot {
    display: block;
    text-align: right;
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 400;
    color: rgba(0, 42, 196, 1);
    text-decoration: none;
    margin-top: -1rem;
    transition: opacity 0.2s;
}

.auth-forgot:hover {
    opacity: 0.7;
    color: rgba(0, 42, 196, 1);
}

/* Bottom link */
.auth-bottom-text {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.7);
    text-align: center;
}

.auth-bottom-text a {
    color: rgba(0, 42, 196, 1);
    font-weight: 400;
    text-decoration: none;
    transition: opacity 0.2s;
}

.auth-bottom-text a:hover {
    opacity: 0.7;
}

/* Password wrap with eye toggle */
.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input-wrap .paw-input {
    padding-right: 5rem;
}

.auth-eye-btn {
    position: absolute;
    top: 50%;
    right: 1.8rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.auth-eye-btn:hover {
    color: rgba(0, 0, 0, 0.8);
}

/* OTP inputs */
.auth-otp-wrap {
    display: flex;
    justify-content: center;
    gap: 1.6rem;
    margin: 1rem 0;
}

.auth-otp-input {
    width: 7rem;
    height: 7rem;
    border: 0.15rem solid rgba(0, 0, 0, 1);
    border-radius: 1.6rem;
    font-family: var(--font);
    font-size: 2.4rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
    text-align: center;
    outline: none;
    background: transparent;
    transition: border-color 0.2s;
}

.auth-otp-input:focus {
    border-color: rgba(0, 42, 196, 1);
}

.auth-resend-form {
    margin-top: 1rem;
    text-align: center;
}

.auth-resend-btn {
    background: none;
    border: none;
    color: rgba(0, 42, 196, 1);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    font-size: inherit;
}

.auth-resend-btn:hover {
    color: rgba(0, 0, 0, 1);
}

/* ── FORGOT / OTP / SET PASSWORD - centered layout ── */
.auth-page-centered {
    min-height: 100vh;
    background-image: url("../images/common/Forgot password-bg.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    position: relative;
    gap: 3.5rem;
}

/* ==============================
   RESPONSIVE
============================== */
/* @media (max-width: 992px) {
    .auth-page {
        grid-template-columns: 1fr;
    }

    .auth-left {
        display: none;
    }

    .auth-right {
        min-height: 100vh;
    }
}

@media (max-width: 576px) {
    .auth-right {
        padding: 3rem 2rem;
    }

    .auth-card {
        padding: 2.4rem;
    }

    .auth-brand {
        font-size: 3.6rem;
    }

    .auth-otp-input {
        width: 5.6rem;
        height: 5.6rem;
        font-size: 2rem;
    }
} */

/* ==============================
   ACCOUNT PAGES
============================== */

/* ── ACCOUNT BANNER ── */
.account-banner {
    margin: 3rem 0;
    border-radius: 3rem;
    overflow: hidden;
    background-image: url("../images/banners/account-banner-bg.png");
    background-size: cover;
    background-position: center;
    padding: 6rem 0;
    text-align: center;
    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    -ms-border-radius: 3rem;
    -o-border-radius: 3rem;
}

.account-banner-title {
    font-family: var(--font);
    font-size: 5rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 1.2rem;
}

.account-banner-breadcrumb {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 400;
}

.account-banner-breadcrumb a {
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
}

.account-banner-breadcrumb span {
    color: #c8e63a;
    font-weight: 500;
}

/* ── ACCOUNT LAYOUT ── */
.account-section {
    padding: 3rem 0 6rem;
}

.account-layout {
    display: grid;
    grid-template-columns: 30rem 1fr;
    gap: 2.4rem;
    align-items: start;
}

/* ── ACCOUNT SIDEBAR ── */
.account-sidebar {
    background: rgba(255, 255, 255, 1);
    border: 0.3rem solid rgba(0, 0, 0, 1);
    border-radius: 6rem;
    padding: 5rem 3rem;
    position: sticky;
    top: 10rem;
    -webkit-border-radius: 6rem;
    -moz-border-radius: 6rem;
    -ms-border-radius: 6rem;
    -o-border-radius: 6rem;
}

.account-sidebar-brand {
    font-family: var(--font);
    font-size: 3rem;
    font-weight: 800;
    color: rgba(0, 0, 0, 1);
    letter-spacing: 0.1rem;
    margin-bottom: 2.4rem;
}

.account-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 2.5rem;
}

.account-nav-item {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    text-decoration: none;
    padding: 1.2rem 0;
    transition: color 0.2s;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}

.account-nav-item:hover {
    color: rgba(0, 42, 196, 1);
}

.account-nav-item.active {
    color: rgba(0, 42, 196, 1);
}

/* ── ACCOUNT CONTENT ── */
.account-content {
    background: rgba(255, 255, 255, 1);
    border: 0.3rem solid rgba(0, 0, 0, 1);
    border-radius: 6rem;
    padding: 5rem;
    min-height: 40rem;
    -webkit-border-radius: 6rem;
    -moz-border-radius: 6rem;
    -ms-border-radius: 6rem;
    -o-border-radius: 6rem;
}

/* ── ACCOUNT VIEWS ── */
.account-view {
    display: none;
}

.account-view.active {
    display: block;
}

/* ── BACK BTN ── */
.account-back-btn {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--font);
    font-size: 2.2rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
    text-decoration: none;
    margin-bottom: 2.4rem;
    transition: opacity 0.2s;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.account-back-btn:hover {
    opacity: 0.6;
}

/* ==============================
   VIEW 1 - OVERVIEW
============================== */
.account-overview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
}

.account-user-info {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.account-avatar {
    width: 11rem;
    height: 11rem;
    border-radius: 50%;
    object-fit: cover;
}

.account-username {
    font-family: var(--font);
    font-size: 3rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
}

.account-edit-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font);
    font-size: 1.8rem;
    font-weight: 500;
    color: rgba(0, 42, 196, 1);
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.account-edit-btn:hover {
    opacity: 0.7;
}

.account-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem 4rem;
}

.account-detail-item label {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 400;
    color: rgba(114, 114, 114, 1);
    display: block;
    margin-bottom: 0.4rem;
}

.account-detail-item p {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
}

/* ==============================
   VIEW 1 EDIT - OVERVIEW EDIT
============================== */
.account-upload-wrap {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

.account-upload-avatar {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.account-upload-info {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.account-upload-btn {
    font-family: var(--font);
    font-size: 1.6rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    border: 0.15rem solid rgba(0, 0, 0, 1);
    border-radius: 5rem;
    padding: 0.8rem 1.6rem;
    background: none;
    cursor: pointer;
    transition: all 0.2s;
    width: fit-content;
}

.account-upload-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.account-upload-hint {
    font-family: var(--font);
    font-size: 1.4rem;
    color: rgba(0, 0, 0, 0.5);
}

.account-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

/* ==============================
   VIEW 2 - ORDERS & RETURNS
============================== */
.order-card {
    background: rgba(248, 248, 248, 1);
    border-radius: 6rem;
    padding: 5rem;
    margin-bottom: 1.6rem;
    -webkit-border-radius: 6rem;
    -moz-border-radius: 6rem;
    -ms-border-radius: 6rem;
    -o-border-radius: 6rem;
}

.order-card-status {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.4rem;
}

.order-status-dot {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.order-status-dot.delivered {
    background: rgba(0, 141, 47, 1);
}
.order-status-dot.in-progress {
    background: rgba(255, 153, 10, 1);
}
.order-status-dot.cancelled {
    background: rgba(203, 31, 34, 1);
}

.order-status-text {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 500;
}

.order-status-text.delivered {
    color: rgba(0, 141, 47, 1);
}
.order-status-text.in-progress {
    color: rgba(255, 153, 10, 1);
}
.order-status-text.cancelled {
    color: rgba(203, 31, 34, 1);
}

.order-status-date {
    font-family: var(--font);
    font-size: 1.6rem;
    font-weight: 400;
    color: rgba(79, 79, 79, 1);
}

.order-product-item {
    border: 0.75px solid rgba(128, 128, 128, 1);
    border-radius: 1.8rem;
    padding: 5rem;
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin: 1.2rem 0;
    -webkit-border-radius: 1.8rem;
    -moz-border-radius: 1.8rem;
    -ms-border-radius: 1.8rem;
    -o-border-radius: 1.8rem;
}

.order-product-item img {
    width: 10rem;
    height: 10rem;
    object-fit: cover;
    border-radius: 0.8rem;
    flex-shrink: 0;
}

.order-product-info {
    flex: 1;
}

.order-product-exchange {
    font-family: var(--font);
    font-size: 1.6rem;
    font-weight: 400;
    color: rgba(79, 79, 79, 1);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.order-product-name {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 0.4rem;
}

.order-product-meta {
    font-family: var(--font);
    font-size: 1.6rem;
    font-weight: 500;
    color: rgba(110, 110, 110, 1);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.order-product-meta .divider {
    width: 0.1rem;
    height: 1.4rem;
    background: rgba(0, 0, 0, 0.2);
}

.order-card-actions {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    padding-top: 1.2rem;
}

.order-action-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s;
}

.order-action-btn.cancel {
    color: rgba(196, 0, 3, 1);
}

.order-action-btn:hover {
    opacity: 0.7;
}

/* ── ORDER DETAIL (In progress tracking) ── */
.order-tracking {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 2rem 0;
}

.order-tracking-step {
    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
    position: relative;
    padding-bottom: 2.4rem;
}

.order-tracking-step:last-child {
    padding-bottom: 0;
}

.order-tracking-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 0.95rem;
    top: 2.4rem;
    bottom: 0;
    width: 0.15rem;
    background: rgba(0, 0, 0, 0.2);
}

.order-tracking-dot {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 0.2rem solid rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    margin-top: 0.2rem;
    background: white;
}

.order-tracking-step.done .order-tracking-dot {
    background: rgba(31, 154, 72, 1);
    border-color: rgba(31, 154, 72, 1);
}

.order-tracking-info h4 {
    font-family: var(--font);
    font-size: 1.8rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 0.2rem;
}

.order-tracking-info p {
    font-family: var(--font);
    font-size: 1.5rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
}

/* ── CANCEL ORDER FORM ── */
.cancel-order-card {
    /* border: 0.15rem solid rgba(0, 0, 0, 0.1); */
    border-radius: 2rem;
    padding: 3rem;
}

.cancel-reason-title {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 500;
    color: rgba(110, 110, 110, 1);
    margin-bottom: 1.6rem;
}

.cancel-reasons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.cancel-reason-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    cursor: pointer;
}

.cancel-reason-item input[type="radio"] {
    width: 1.6rem;
    height: 1.6rem;
    accent-color: rgba(0, 42, 196, 1);
    cursor: pointer;
    flex-shrink: 0;
}

.cancel-note-label {
    font-family: var(--font);
    font-size: 1.8rem;
    font-weight: 500;
    color: rgba(110, 110, 110, 1);
    margin-bottom: 0.8rem;
}

.cancel-note-wrap {
    position: relative;
    margin-bottom: 2rem;
}

.cancel-note-textarea {
    width: 100%;
    height: 12rem;
    padding: 1.6rem;
    border: 0.15rem solid rgba(0, 0, 0, 0.2);
    border-radius: 1.2rem;
    font-family: var(--font);
    font-size: 1.8rem;
    color: rgba(110, 110, 110, 1);
    resize: none;
    outline: none;
    transition: border-color 0.2s;
}

.cancel-note-textarea:focus {
    border-color: rgba(0, 0, 0, 0.5);
}

.cancel-note-count {
    position: absolute;
    bottom: 1rem;
    right: 1.2rem;
    font-family: var(--font);
    font-size: 1.8rem;
    font-weight: 500;
    color: rgba(110, 110, 110, 1);
}

.cancel-info-box {
    background: rgba(240, 243, 255, 1);
    border: 0.1rem solid rgba(47, 47, 228, 1);
    border-radius: 1.2rem;
    padding: 1.6rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2.4rem;
    -webkit-border-radius: 1.2rem;
    -moz-border-radius: 1.2rem;
    -ms-border-radius: 1.2rem;
    -o-border-radius: 1.2rem;
}

.cancel-info-box svg {
    flex-shrink: 0;
    color: rgba(0, 42, 196, 1);
    margin-top: 0.2rem;
}

.cancel-info-box p {
    font-family: var(--font);
    font-size: 1.8rem;
    color: rgba(0, 0, 0, 1);
    line-height: 1.6;
}

/* ── CANCEL BTN - RED ── */
.paw-btn--red {
    background: rgba(255, 48, 37, 1);
    border-color: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 1);
    box-shadow: 0 0.8rem 0 0 rgba(0, 0, 0, 1);
}

.paw-btn--red:hover {
    color: rgba(255, 255, 255, 1);
    box-shadow: 0 0.2rem 0 0 rgba(0, 0, 0, 1);
}

/* ── LOGOUT MODAL ── */
.logout-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logout-modal {
    background: var(--white);
    border: 0.2rem solid rgba(0, 0, 0, 1);
    border-radius: 3rem;
    padding: 3rem 4rem;
    text-align: center;
    max-width: 42rem;
    width: 90%;
}
.logout-modal h3 {
    font-family: var(--font);
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.logout-modal p {
    font-family: var(--font);
    font-size: 1.6rem;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 2.4rem;
}
.logout-modal-actions {
    display: flex;
    gap: 1.2rem;
    justify-content: center;
}
.logout-modal-actions .paw-btn {
    padding: 1.4rem 3.2rem;
    font-size: 1.6rem;
}

/* ==============================
   VIEW 3 - ADDRESSES
============================== */
.account-addr-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2rem;
}

.account-addr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
}

/* ==============================
   DELETE ACCOUNT
============================== */
.delete-account-title {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 1.2rem;
}

.delete-account-subtitle {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 400;
    color: rgba(0, 42, 196, 1);
    margin-bottom: 1.6rem;
}

.delete-account-body p {
    font-family: var(--font);
    font-size: 1.6rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
    margin-bottom: 1.2rem;
}

.delete-account-check {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
    cursor: pointer;
}

.delete-account-check input[type="checkbox"] {
    width: 1.8rem;
    height: 1.8rem;
    accent-color: rgba(157, 157, 157, 1);
    cursor: pointer;
}

.delete-account-check label {
    font-family: var(--font);
    font-size: 1.6rem;
    font-weight: 400;
    color: rgba(56, 56, 56, 1);
    cursor: pointer;
}

/* ==============================
   COMPARE PAGE
============================== */
.compare-section {
    padding: 3rem 0 6rem;
}

.compare-table-wrap {
    border: 0.3rem solid rgba(0, 0, 0, 1);
    border-radius: 6rem;
    overflow: hidden;
    -webkit-border-radius: 6rem;
    -moz-border-radius: 6rem;
    -ms-border-radius: 6rem;
    -o-border-radius: 6rem;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
}

/* Label column */
.compare-label-col {
    width: 18rem;
}

/* Product columns */
.compare-product-col {
    width: 1fr;
    border-left: 0.3rem solid rgba(0, 0, 0, 1);
    padding: 3rem 2.4rem;
    vertical-align: top;
}

/* Product card inside th */
.compare-product-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
}

.compare-product-img-wrap {
    width: 100%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
}

.compare-product-img-wrap img {
    width: 100%;
    max-height: 40rem;
    object-fit: contain;
}

.compare-product-name {
    font-family: var(--font);
    font-size: 2.4rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    line-height: 1.3;
}

.compare-product-desc {
    font-family: var(--font);
    font-size: 1.8rem;
    font-weight: 400;
    color: rgba(25, 28, 31, 1);
    line-height: 1.6;
}

/* Remove button on compare card */
.compare-remove-btn {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 2;
}
.compare-remove-btn:hover {
    background: rgba(255, 0, 0, 0.8);
}

/* Add to cart button - smaller version */
.compare-add-btn {
    font-size: 1.6rem;
    padding: 1.2rem 2.4rem;
    box-shadow: 0 0.5rem 0 0 rgba(0, 0, 0, 1);
}
.compare-remove-text-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font);
    font-size: 1.6rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.6rem 0;
    transition: color 0.2s;
}
.compare-remove-text-btn:hover {
    color: rgba(239, 68, 68, 1);
}

.compare-add-btn:hover {
    box-shadow: 0 0.2rem 0 0 rgba(0, 0, 0, 1);
}

/* Spec rows */
.compare-row td {
    padding: 1.6rem 2.4rem;
    border-top: 0.3rem solid rgba(0, 0, 0, 1);
}

.compare-row--highlight {
    background: #c8e63a;
}

.compare-label {
    font-family: var(--font);
    font-size: 1.8rem;
    font-weight: 400;
    color: rgba(71, 81, 86, 1);
    white-space: nowrap;
}

.compare-value {
    font-family: var(--font);
    font-size: 1.8rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    border-left: 0.3rem solid rgba(0, 0, 0, 1);
}

/* Price */
.compare-price {
    font-family: var(--font);
    font-size: 1.8rem;
    font-weight: 600;
    color: rgba(0, 42, 196, 1);
}

/* Stock */
.compare-stock {
    font-family: var(--font);
    font-size: 1.6rem;
    font-weight: 600;
}

.compare-stock.in-stock {
    color: rgba(45, 178, 36, 1);
}

.compare-stock.out-of-stock {
    color: rgba(238, 88, 88, 1);
}

/* Responsive */
/* @media (max-width: 768px) {
    .compare-table-wrap {
        overflow-x: auto;
    }

    .compare-table {
        min-width: 70rem;
    }

    .compare-label-col {
        width: 12rem;
    }

    .compare-product-name {
        font-size: 1.8rem;
    }

    .compare-product-desc {
        font-size: 1.4rem;
    }
} */

/* ==============================
   EMPTY STATE PAGES
   (Cart Empty, Wishlist Empty, 404)
============================== */

.empty-state-page {
    min-height: 100vh;
    background-image: url("../images/common/empty-page-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    position: relative;
}

.empty-state-img {
    width: 100%;
    max-width: 50rem;
    height: auto;
    object-fit: contain;
    margin-bottom: 3rem;
}

.empty-state-title {
    font-family: var(--font);
    font-size: 5.6rem;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 1.2rem;
    line-height: 1.2;
}

.empty-state-desc {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 400;
    color: rgba(74, 55, 40, 1);
    line-height: 1.6;
    max-width: 65rem;
    margin: 0 auto 3.6rem;
}

/* ==============================
   404 PAGE
============================== */
.notfound-page {
    min-height: 100vh;
    background-image: url("../images/common/empty-page-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    position: relative;
}

.notfound-number-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3rem;
}

.notfound-number {
    font-family: var(--font);
    font-size: 30rem;
    font-weight: 800;
    color: rgba(0, 42, 196, 1);
    line-height: 1;
    letter-spacing: -1rem;
    user-select: none;
}

.notfound-dog-img {
    position: absolute;
    width: 28rem;
    height: 28rem;
    object-fit: cover;
    border-radius: 50%;
    z-index: 1;
}

.notfound-title {
    font-family: var(--font);
    font-size: 5rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 1.2rem;
}

.notfound-desc {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
    line-height: 1.6;
    max-width: 50rem;
    margin: 0 auto 3.6rem;
}

/* ==============================
   RESPONSIVE
============================== */
/* @media (max-width: 768px) {
    .empty-state-title {
        font-size: 3.6rem;
    }

    .empty-state-img {
        max-width: 32rem;
    }

    .notfound-number {
        font-size: 16rem;
        letter-spacing: -0.5rem;
    }

    .notfound-dog-img {
        width: 16rem;
        height: 16rem;
    }

    .notfound-title {
        font-size: 3.2rem;
    }
}

@media (max-width: 480px) {
    .empty-state-title {
        font-size: 2.8rem;
    }

    .notfound-number {
        font-size: 12rem;
    }

    .notfound-dog-img {
        width: 12rem;
        height: 12rem;
    }
} */

/* ==============================
   PRODUCT CARD (Shared across shop, wishlist, related)
============================== */
.product-card {
    background: rgba(255, 255, 255, 1);
    border: 0.189rem solid rgba(211, 211, 211, 1);
    border-radius: 5.69rem;
    overflow: hidden;
    position: relative;
    transition:
            transform 0.2s ease,
            box-shadow 0.2s ease;
    -webkit-border-radius: 5.69rem;
    -moz-border-radius: 5.69rem;
    -ms-border-radius: 5.69rem;
    -o-border-radius: 5.69rem;
}

.product-card:hover {
    transform: translateY(-0.4rem);
    box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.08);
}

.product-card-img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1/1;
}

.product-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.product-card:hover .product-card-img-wrap img {
    transform: scale(1.04);
}

.product-card-actions {
    position: absolute;
    top: 2.2rem;
    right: 2.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    z-index: 2;
}
.product-card-wishlist,
.product-card-compare {
    width: 4.8rem;
    height: 6.8rem;
    border-radius: 2.3rem;
    background: rgba(187, 187, 187, 1);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 2;
}

.product-card-wishlist:hover,.product-card-compare:hover {
    background: rgba(252, 252, 252, 0.264);
    transform: scale(1.1);
}
.product-card-compare.active {
    background: rgba(255, 83, 123, 1);
}
.product-card-compare svg path {
    transition: fill 0.2s;
}

.feather {
    display: inline-block;
    width: 2.4rem;
    height: 2.4rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-style: normal;
}
.icon-heart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}
.icon-heart-on {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23dc3545'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}

.product-card-wishlist.active svg path {
    fill: rgba(255, 83, 123, 1);
    stroke: rgba(255, 83, 123, 1);
}

.product-card-body {
    padding: 3.4rem 3.4rem 3.4rem;
}

.product-card-category {
    font-family: var(--font);
    font-size: 1.6rem;
    font-weight: 500;
    color: rgba(132, 132, 132, 1);
    margin-bottom: 0.4rem;
    text-transform: capitalize;
}

.product-card-name {
    font-family: var(--font);
    font-size: 1.8rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 0.6rem;
    line-height: 1.3;
}

.product-card-price {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 1.2rem;
}

.product-card-old-price {
    text-decoration: line-through;
    color: rgba(0, 0, 0, 0.4);
    margin-right: 0.5rem;
}

.product-card-btn {
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font);
    font-size: 1.6rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    background: rgba(255, 255, 255, 1);
    border: 0.2rem solid rgba(0, 0, 0, 1);
    border-radius: 5rem;
    padding: 0.8rem 1.8rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 0.4rem 0 0 rgba(0, 0, 0, 1);
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width: 19rem;
}

.product-card-btn:hover {
    transform: translateY(0.2rem);
    box-shadow: 0 0.1rem 0 0 rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 83, 123, 1);
}
.product-card-btn:hover svg path {
    fill: rgba(255, 255, 255, 1);
}
/* ==============================
   PAGINATION
============================== */
.paw-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 3rem 0;
}

.paw-page-btn {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: 0.15rem solid rgba(0, 0, 0, 1);
    background: none;
    font-family: var(--font);
    font-size: 1.8rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.paw-page-btn.arrow {
    background: rgba(197, 197, 197, 1);
    border-color: rgba(197, 197, 197, 1);
}
.paw-page-btn:hover,
.paw-page-btn.active {
    background: rgba(0, 0, 0, 1);
    border-color: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 1);
}

/* ==============================
   SHOP PAGE
============================== */
.shop-section {
    padding: 3rem 0 6rem;
}

/* Category Tabs */

.shop-category-tabs {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 0.8rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    margin-bottom: 3rem;
    scrollbar-width: none;
}

.shop-category-tabs::-webkit-scrollbar {
    display: none;
}

.shop-cat-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 2rem 2.6rem;
    border: 0.15rem solid rgba(239, 239, 239, 1);
    border-radius: 2.4rem;
    background: rgba(252, 252, 252, 1);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
    min-width: 8rem;
    -webkit-border-radius: 2.4rem;
    -moz-border-radius: 2.4rem;
    -ms-border-radius: 2.4rem;
    -o-border-radius: 2.4rem;
}
.shop-category-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* smooth touch scroll on iOS */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.shop-category-tabs::-webkit-scrollbar {
    display: none;
}

.shop-cat-btn {
    scroll-snap-align: start;
    flex-shrink: 0; /* prevents buttons from shrinking */
}

.shop-cat-btn.active,
.shop-cat-btn:hover {
    border-color: rgba(0, 42, 196, 1);
    background: rgba(0, 42, 196, 0.04);
}

.shop-cat-btn img {
    width: 5rem;
    height: 4.6rem;
    object-fit: contain;
}

.shop-cat-btn span {
    font-family: var(--font);
    font-size: 1.4rem;
    color: rgba(0, 0, 0, 1);
    white-space: nowrap;
}

.shop-cat-btn.active span {
    color: rgba(0, 42, 196, 1);
}

/* Shop Layout */
.shop-layout {
    display: grid;
    grid-template-columns: 34rem 1fr;
    gap: 3rem;
    align-items: start;
}

/* ── SIDEBAR FILTERS ── */
.shop-sidebar {
    position: sticky;
    top: 10rem;
    border: 0.15rem solid rgba(239, 239, 239, 1);
    background-color: rgba(252, 252, 252, 1);
    border-radius: 2.4rem;
    padding: 3rem;
}

.shop-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.4rem;
    padding-bottom: 2.4rem;
    border-bottom: 0.15rem solid rgba(239, 239, 239, 1);
}

.shop-sidebar-title {
    font-family: var(--font);
    font-size: 2.4rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
}

.shop-clear-btn {
    font-family: var(--font);
    font-size: 1.8rem;
    font-weight: 400;
    color: rgba(76, 76, 76, 1);
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.shop-clear-btn:hover {
    opacity: 0.7;
}

.shop-filter-group {
    margin-bottom: 2.4rem;
    padding-bottom: 2.4rem;
    border-bottom: 0.15rem solid rgba(239, 239, 239, 1);
}

.shop-filter-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.shop-filter-title {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 1.2rem;
}

.shop-filter-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    cursor: pointer;
    overflow: hidden;
}
.shop-filter-option a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    width: 100%;
}
.shop-filter-option span {
    font-size: 1.8rem;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 22rem;
}
.shop-filter-option input[type="checkbox"] {
    width: 2.6rem;
    height: 1.6rem;
    border-radius: 0.6rem;
    accent-color: rgba(217, 217, 217, 1);
    cursor: pointer;
    flex-shrink: 0;
}

.shop-filter-option label {
    font-family: var(--font);
    font-size: 1.6rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
}

/* Price range */
.shop-price-slider-wrap {
    padding: 1rem 0;
}

.shop-price-slider {
    width: 100%;
    height: 0.4rem;
    border-radius: 0.3rem;
    margin: 1rem 0 1.6rem;
}

.shop-price-slider .noUi-connect {
    background: rgba(0, 42, 196, 1);
    border-radius: 0.3rem;
}

.shop-price-slider .noUi-base {
    background: rgba(217, 217, 217, 1);
    border-radius: 0.3rem;
}

.shop-price-slider .noUi-handle {
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 50%;
    background: rgba(0, 42, 196, 1);
    border: 0.2rem solid #fff;
    box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.2);
    cursor: grab;
    top: -0.8rem !important;
    right: -1rem !important;
    outline: none;
}

.shop-price-slider .noUi-handle:active {
    cursor: grabbing;
    box-shadow: 0 0.2rem 0.8rem rgba(0, 42, 196, 0.3);
}

.shop-price-slider .noUi-handle::before,
.shop-price-slider .noUi-handle::after {
    display: none;
}

.shop-price-slider .noUi-tooltip {
    display: none;
}

.shop-price-labels {
    display: flex;
    justify-content: space-between;
    font-family: var(--font);
    font-size: 1.8rem;
    color: rgba(0, 0, 0, 1);
}

/* ── SHOP PRODUCTS ── */
.shop-products-area {
    position: relative;
    margin-top: 5rem;
}

.shop-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
    margin-bottom: 2rem;
}

.shop-sort-wrap {
    position: absolute;
    right: 2rem;
    top: -7rem;
}
.shop-pageination-count {
    position: absolute;
    left: 2rem;
    top: -5rem;
    color: rgba(0, 0, 0, 1);
    font-size: 2rem;
    font-weight: 500;
}
.shop-sort-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 2rem;
    border: 0.2rem solid rgba(0, 0, 0, 1);
    border-radius: 2rem;
    background: none;
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    cursor: pointer;
    min-width: 18rem;
    justify-content: space-between;
    transition: border-color 0.2s;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
}

.shop-sort-btn:hover {
    border-color: rgba(0, 0, 0, 0.4);
}

.shop-sort-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    background: var(--white);
    border: 0.2rem solid rgba(0, 0, 0, 0.15);
    border-radius: 1rem;
    overflow: hidden;
    z-index: 100;
    list-style: none;
    box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.08);
}

.shop-sort-menu.open {
    display: block;
}

.shop-sort-menu li {
    padding: 1.2rem 2rem;
    font-family: var(--font);
    font-size: 1.6rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    cursor: pointer;
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.06);
    transition: background 0.15s;
}

.shop-sort-menu li:last-child {
    border-bottom: none;
}

.shop-sort-menu li.active,
.shop-sort-menu li:hover {
    background: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 1);
}

/* ── TRUST BADGES ── */
.shop-trust-badges {
    display: grid
;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    border-radius: 3rem;
    padding: 8rem 0;
    border: 0.15rem solid rgba(239, 239, 239, 1);
    margin-top: 2rem;
    background-color: rgba(252, 252, 252, 1);
}

.trust-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
}

.trust-badge-icon {
    width: 6.8rem;
    height: 5.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.trust-badge-info h4 {
    font-family: var(--font);
    font-size: 2.4rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 0.2rem;
}

.trust-badge-info p {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
}
/* Filter toggle button — hidden on desktop */

/* ==============================
   PRODUCT DETAIL PAGE
============================== */
.product-detail-section {
    padding: 4rem 0 6rem;
}

.product-detail-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: flex-start;
    margin-bottom: 8rem;
}

/* ── LEFT - Images ── */
.product-gallery {
    position: sticky;
    top: 10rem;
}

.product-main-img-wrap {
    position: relative;
    border-radius: 9rem;
    overflow: hidden;
    aspect-ratio: 1/1;
    margin-bottom: 1.6rem;
    border: 0.3rem solid rgba(0, 0, 0, 1);
    -webkit-border-radius: 9rem;
    -moz-border-radius: 9rem;
    -ms-border-radius: 9rem;
    -o-border-radius: 9rem;
}

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

.product-gallery-actions {
    position: absolute;
    top: 4.6rem;
    right: 4.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.8rem;
    z-index: 2;
    border-radius: 4.2rem;
    width: 5.8rem;
    height: 10.8rem;
    background: rgba(187, 187, 187, 1);
}

.product-gallery-action-btn {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    /* background: rgba(255, 255, 255, 0.9); */
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.product-gallery-action-btn:hover {
    /* background: rgba(255, 255, 255, 1); */
    transform: scale(1.1);
}

.product-thumbnails {
    display: flex;
    gap: 1rem;
}

.product-thumb {
    width: calc(25% - 0.75rem);
    aspect-ratio: 1/1;
    border-radius: 3rem;
    overflow: hidden;
    cursor: pointer;
    border: 0.3rem solid transparent;
    transition: border-color 0.2s;
    flex-shrink: 0;
    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    -ms-border-radius: 3rem;
    -o-border-radius: 3rem;
}

.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-thumb.active,
.product-thumb:hover {
    border-color: rgba(0, 0, 0, 1);
}

/* ── RIGHT - Info ── */
.product-info-right {
}

.product-detail-name {
    font-family: var(--font);
    font-size: 3.5rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 1.2rem;
    line-height: 1.3;
}

.product-price-row {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-bottom: 0.8rem;
}

.product-detail-price {
    font-family: var(--font);
    font-size: 4rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
}

.product-detail-original-price {
    font-family: var(--font);
    font-size: 2.4rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    text-decoration: line-through;
}

.product-shipping-note {
    font-family: var(--font);
    font-size: 2.4rem;
    font-weight: 400;
    color: rgba(110, 110, 110, 1);
    margin-bottom: 2.4rem;
}

.product-options-row {
    display: flex;
    align-items: flex-start;
    gap: 4rem;
    margin-bottom: 2.4rem;
}

.product-option-group {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.product-option-label {
    font-family: var(--font);
    font-size: 2.4rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
}
.product-option-group--color .product-color-options {
    margin-top: 1rem;
}

/* Quantity selector */
.product-qty-wrap {
    display: flex;
    align-items: center;
    border: 0.15rem solid rgba(54, 54, 54, 1);
    border-radius: 1.2rem;
    overflow: hidden;
    width: fit-content;
    -webkit-border-radius: 1.2rem;
    -moz-border-radius: 1.2rem;
    -ms-border-radius: 1.2rem;
    -o-border-radius: 1.2rem;
}

.product-qty-btn {
    background: none;
    border: none;
    width: 4.6rem;
    height: 4.6rem;
    font-size: 1.8rem;
    font-family: var(--font);
    color: rgba(0, 0, 0, 1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.product-qty-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.product-qty-val {
    font-family: var(--font);
    font-size: 2.4rem;
    font-weight: 500;
    min-width: 3.2rem;
    text-align: center;
    color: rgba(0, 0, 0, 1);
}

/* Size options */
.product-size-options {
    display: flex;
    gap: 1.8rem;
}

.product-size-btn {
    min-width: 4.6rem;
    height: 4.6rem;
    border-radius: 1.2rem;
    border: 0.15rem solid rgba(54, 54, 54, 1);
    background: none;
    font-family: var(--font);
    font-size: 2.4rem;
    font-weight: 500;
    text-align: center;
    color: rgba(0, 0, 0, 1);
    cursor: pointer;
    padding: 0 1rem;
    transition: all 0.2s;
    -webkit-border-radius: 0.8rem;
    -moz-border-radius: 0.8rem;
    -ms-border-radius: 0.8rem;
    -o-border-radius: 0.8rem;
}

.product-size-btn.active,
.product-size-btn:hover {
    background: rgba(0, 42, 196, 1);
    border-color: rgba(0, 42, 196, 1);
    color: rgba(255, 255, 255, 1);
}

/* Color options */
.product-color-options {
    display: flex;
    gap: 1.8rem;
}
.product-color-options .product-color-btn:nth-child(1) {
    background: rgba(93, 101, 86, 1);
}
.product-color-options .product-color-btn:nth-child(2) {
    background: rgba(0, 0, 0, 1);
}
.product-color-options .product-color-btn:nth-child(3) {
    background: rgba(215, 146, 147, 1);
}
.product-color-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 0.3rem solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
}

.product-color-btn.active,
.product-color-btn:hover {
    outline: 0.3rem solid rgba(0, 0, 0, 1);
    outline-offset: 0.2rem;
}

/* Action buttons */
.product-action-row {
    display: flex;
    gap: 1.2rem;
    margin-top: 2rem;
}

.product-action-row .paw-btn {
    flex: 1;
    justify-content: center;
    font-size: 1.8rem;
    padding: 1.8rem 2rem;
}

/* Description */
.product-description {
    margin-top: 3rem;
    padding-top: 2.4rem;
    border-top: 0.15rem solid rgba(0, 0, 0, 0.08);
}

.product-description {
    font-family: var(--font);
    font-size: 1.8rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    line-height: 1.8;
    margin-bottom: 1.2rem;
}

.product-description p:last-child {
    margin-bottom: 0;
}

/* ── YOU MAY ALSO LIKE ── */
.related-products {
    padding-top: 5rem;
    /* border-top: 0.15rem solid rgba(0, 0, 0, 0.08); */
}

.related-products-title {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 2.4rem;
}

.related-products-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.6rem;
}

/* ==============================
   WISHLIST PAGE
============================== */
.wishlist-section {
    padding: 3rem 0 6rem;
}

.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.6rem;
}

/* ==============================
   RESPONSIVE
============================== */
/* @media (max-width: 1200px) {
    .shop-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .related-products-grid,
    .wishlist-grid {
        grid-template-columns: repeat(4, 1fr);
    }

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

@media (max-width: 992px) {
    .shop-layout {
        grid-template-columns: 1fr;
    }

    .shop-sidebar {
        position: static;
    }

    .product-detail-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .product-gallery {
        position: static;
    }

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

    .related-products-grid,
    .wishlist-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .shop-products-grid,
    .related-products-grid,
    .wishlist-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .shop-trust-badges {
        grid-template-columns: 1fr 1fr;
    }

    .product-options-row {
        flex-direction: column;
        gap: 2rem;
    }

    .product-action-row {
        flex-direction: column;
    }
} */

/* ==============================
   CONTACT PAGE
============================== */
.hero-banner {
    background: #3b2ecc;
    border-radius: 9rem;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 70rem;
    -webkit-border-radius: 9rem;
    -moz-border-radius: 9rem;
    -ms-border-radius: 9rem;
    -o-border-radius: 9rem;
}

.hero-banner__text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8rem 4rem 5rem 10rem;
    flex: 0 0 70%;
    max-width: 70%;
}

.hero-banner__title {
    font-size: 7rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 1.15;
    letter-spacing: -0.05rem;
}

.hero-banner__breadcrumb {
    font-size: 3.6rem;
    font-weight: 400;
    color: rgba(241, 241, 241, 1);
}

.hero-banner__breadcrumb a {
    text-decoration: none;
    transition: color 0.2s;
}

.hero-banner__breadcrumb a:hover {
    /* color: rgba(255, 255, 255, 1); */
    opacity: 0.6;
}

.hero-banner__breadcrumb span {
    color: rgba(210, 241, 77, 1);
    font-weight: 600;
}

.hero-banner__img-wrap {
    position: absolute;
    right: -13rem;
    bottom: 0;
    top: 10rem;
    width: 65%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1;
}

.hero-banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Sparkles */
.hero-banner__sparks {
    position: absolute;
    z-index: 3;
    pointer-events: none;
}

.hero-banner__sparks--tr {
    top: 8rem;
    right: 8rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
}

.hero-banner__sparks--center {
    bottom: 45%;
    left: 33%;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    z-index: 4;
}

.hero-spark {
    display: block;
    flex-shrink: 0;
}
.hero-spark--lg {
    width: 4.2rem;
    height: 4.2rem;
}
.hero-spark--md {
    width: 3rem;
    height: 3rem;
}
.hero-spark--sm {
    width: 2.4rem;
    height: 2.4rem;
}
.hero-spark--xs {
    width: 1.6rem;
    height: 1.6rem;
}

.hero-swirl {
    width: 8rem;
    height: 4rem;
    display: block;
}

/* Responsive */
/* @media (max-width: 1200px) {
    .hero-banner__title {
        font-size: 5.8rem;
    }
    .hero-banner__text {
        flex: 0 0 55%;
        max-width: 55%;
    }
    .hero-banner__img-wrap {
        width: 56%;
    }
}

@media (max-width: 992px) {
    .hero-banner {
        min-height: 36rem;
        border-radius: 3rem;
    }
    .hero-banner__title {
        font-size: 4.8rem;
    }
    .hero-banner__text {
        flex: 0 0 55%;
        max-width: 55%;
        padding: 4rem 3rem 4rem 4rem;
    }
    .hero-banner__img-wrap {
        width: 52%;
    }
    .hero-banner__sparks--center {
        left: 48%;
    }
}

@media (max-width: 767px) {
    .hero-banner {
        flex-direction: column;
        min-height: auto;
        border-radius: 2.4rem;
    }
    .hero-banner__text {
        flex: none;
        max-width: 100%;
        padding: 4rem 3rem 2rem;
        gap: 16rem;
    }
    .hero-banner__title {
        font-size: 3.8rem;
    }
    .hero-banner__img-wrap {
        position: relative;
        width: 100%;
        height: 28rem;
        top: auto;
        right: auto;
        bottom: auto;
    }
    .hero-banner__sparks--center {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero-banner__title {
        font-size: 3rem;
    }
    .hero-banner__text {
        gap: 12rem;
        padding: 3rem 2.4rem 2rem;
    }
} */

/*  */
.page-banner-inner__background {
    /* background-image: url(../images/banners/banner-hero-bg.png); */
}
.contact-section {
    padding: 6rem 0;
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 6rem;
    align-items: center;
}

/* ── Left Info ── */
.contact-heading {
    font-size: 6.8rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    line-height: 1.15;
    margin-bottom: 1.6rem;
}

.contact-subtext {
    font-size: 2rem;
    font-weight: 400;
    color: rgba(74, 55, 40, 1);
    line-height: 1.7;
    margin-bottom: 3.6rem;
    max-width: 34rem;
}

.contact-items {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
}

.contact-item-icon {
    width: 7.2rem;
    height: 7.2rem;
    border-radius: 2.4rem;
    background: rgba(74, 144, 226, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-item-label {
    font-size: 2rem;
    font-weight: 400;
    color: rgba(74, 55, 40, 1);
    margin-bottom: 0.4rem;
}

.contact-item-value {
    font-size: 2rem;
    font-weight: 400;
    color: rgba(74, 55, 40, 1);
    line-height: 1.6;
}

.contact-item-value small {
    font-size: 2rem;
    color: rgba(74, 55, 40, 1);
}

/* ── Form Card ── */
.contact-form-card {
    border-radius: 3rem;
    border: 0.3rem solid rgba(0, 0, 0, 1);
}
.contact-form-card input,
.contact-form-card .contact-textarea {
    border: 0.15rem solid rgba(0, 0, 0, 1);
    border-radius: 1.8rem;
    -webkit-border-radius: 1.8rem;
    -moz-border-radius: 1.8rem;
    -ms-border-radius: 1.8rem;
    -o-border-radius: 1.8rem;
}
.contact-form-name-email {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
    margin-bottom: 1.6rem;
}

.contact-form-field {
    margin-bottom: 1.6rem;
}

.contact-form-field:last-of-type {
    margin-bottom: 2.4rem;
}

.contact-textarea {
    border-radius: 2rem;
    resize: vertical;
    min-height: 14rem;
}

.contact-submit-btn {
    width: 100%;
    justify-content: center;
    /* background: rgba(0, 0, 0, 1); */
    color: rgba(0, 0, 0, 1);
    box-shadow: 0 0.8rem 0 0 rgba(0, 0, 0, 1);
}

.contact-submit-btn:hover {
    /* color: rgba(255, 255, 255, 1); */
    box-shadow: 0 0.2rem 0 0 rgba(0, 0, 0, 1);
}

.contact-submit-btn svg path {
    stroke: rgba(255, 255, 255, 1);
}

/* ==============================
   PET CHANNEL SECTION
============================== */
.contact-channel-section {
    background: rgba(210, 241, 77, 1);
    padding: 7rem 0;
}

.contact-channel-head {
    text-align: center;
    margin-bottom: 4rem;
}

.contact-channel-title-main {
    font-size: 4.5rem;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 0.8rem;
}

.contact-channel-subtitle {
    font-size: 2.4rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
}

.contact-channel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.contact-channel-card {
    background: rgba(255, 255, 255, 1);
    border: 0.15rem solid rgba(232, 213, 196, 1);
    border-radius: 2.4rem;
    padding: 3rem 2.4rem;
}

.contact-channel-icon {
    margin-bottom: 1.2rem;
}

.contact-channel-card-title {
    font-size: 2.4rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 0.8rem;
}

.contact-channel-desc {
    font-size: 2rem;
    font-weight: 400;
    color: rgba(74, 55, 40, 1);
    line-height: 1.6;
}
.contact-channel-icon {
    display: flex;
    gap: 1rem;
}

/* ==============================
   BANNER OVERRIDES FOR CONTACT
============================== */
.contact-banner-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 8rem;
    position: relative;
    z-index: 1;
}

.contact-banner-title {
    font-size: 7.4rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    line-height: 1.2;
}

.contact-banner-breadcrumb {
    font-size: 2rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 2rem;
}

.contact-banner-breadcrumb a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.contact-banner-breadcrumb span {
    color: #c8e63a;
    font-weight: 500;
}

.contact-banner-pet-img {
    position: absolute;
    right: 6rem;
    bottom: 0;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* ==============================
   RESPONSIVE
============================== */
/* @media (max-width: 992px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .contact-heading {
        font-size: 4.8rem;
    }

    .contact-channel-grid {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    .contact-banner-title {
        font-size: 5.5rem;
    }

    .contact-banner-inner {
        padding-left: 5rem;
    }

    .contact-banner-pet-img {
        right: 2rem;
        opacity: 0.4;
    }
}

@media (max-width: 767px) {
    .contact-heading {
        font-size: 3.6rem;
    }

    .contact-section {
        padding: 4rem 0;
    }

    .contact-channel-section {
        padding: 5rem 0;
    }

    .contact-form-card {
        border-radius: 4rem;
    }

    .contact-form-name-email {
        grid-template-columns: 1fr;
    }

    .contact-banner-title {
        font-size: 4rem;
    }

    .contact-banner-inner {
        padding-left: 3rem;
    }

    .contact-banner-pet-img {
        display: none;
    }
} */

/* ==============================
   BLOG PAGE
============================== */
/* banner */
.page-banner--our--blog .hero-banner {
    min-height: 90rem;
}
.page-banner--our--blog .hero-banner__img-wrap {
    position: absolute;
    right: 6rem;
    bottom: 0;
    top: 22rem;
    width: 100%;
    max-width: 65%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1;
}

/* ── LAYOUT ── */
.blog-section {
    padding: 5rem 0 6rem;
}

.blog-layout {
    display: grid;
    grid-template-columns: 38rem 1fr;
    gap: 4rem;
    align-items: start;
}

/* ==============================
   SIDEBAR
============================== */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    position: sticky;
    top: 10rem;
}

.blog-sidebar-search .search-box {
    width: 100% !important;
}

.blog-sidebar-search .search-box input {
    width: 100% !important;
}

/* Blog Search Suggestions */
.blog-search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 360px;
    overflow-y: auto;
    display: none;
    margin-top: 4px;
}

.blog-search-item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem 1.2rem;
    text-decoration: none;
    transition: background 0.2s;
    border-bottom: 1px solid #f0f0f0;
}

.blog-search-item:last-child {
    border-bottom: none;
}

.blog-search-item:hover {
    background: #f9fafb;
}

.blog-search-item-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.blog-search-item-info {
    flex: 1;
    min-width: 0;
}

.blog-search-item-title {
    font-size: 1.4rem;
    font-weight: 500;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-search-item-desc {
    font-size: 1.2rem;
    color: #6b7280;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-search-item-date {
    font-size: 1.1rem;
    color: #9ca3af;
    margin-top: 2px;
}

.blog-search-no-result {
    padding: 1.6rem 1.2rem;
    text-align: center;
    color: #9ca3af;
    font-size: 1.4rem;
}

.blog-sidebar-block {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.blog-sidebar-title {
    font-size: 3rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    padding-bottom: 1rem;
}

/* Latest products list */
.blog-sidebar-products {
    display: flex;
    flex-direction: column;
    gap: 3.4rem;
}

.blog-sidebar-product {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    text-decoration: none;
    transition: opacity 0.2s;
}

.blog-sidebar-product:hover {
    opacity: 0.7;
}

.blog-sidebar-product img {
    width: 6.6rem;
    height: 7.6rem;
    object-fit: cover;
    border-radius: 1.6rem;
    flex-shrink: 0;
}

.blog-sidebar-product-name {
    font-size: 1.8rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    line-height: 1.4;
    margin-bottom: 0.3rem;
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-sidebar-product-date {
    font-size: 1.6rem;
    font-weight: 400;
    color: rgba(159, 159, 159, 1);
}

/* Tags */
.blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.blog-tag {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    border: 0.061rem solid rgba(0, 0, 0, 1);
    border-radius: 5rem;
    font-size: 1.6rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.blog-tag:hover {
    background: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 1);
    border-color: rgba(0, 0, 0, 1);
}

/* Categories */
.blog-categories {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.blog-categories li a {
    font-size: 2rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    text-decoration: none;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.blog-categories li a:hover {
    color: rgba(0, 42, 196, 1);
}

/* ==============================
   BLOG GRID
============================== */
.blog-grid-wrap {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
}

/* ── Blog Card ── */
.blog-card {
    display: flex;
    flex-direction: column;
    /* border: 0.189rem solid rgba(211, 211, 211, 1); */
    /* border-radius: 3rem; */
    overflow: hidden;
    transition:
            transform 0.2s ease,
            box-shadow 0.2s ease;
    /* background: rgba(255, 255, 255, 1); */
}

.blog-card:hover {
    transform: translateY(-0.4rem);
    /* box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.08); */
}

.blog-card-img-wrap {
    position: relative;
    display: block;
    border-radius: 2.99rem;
    aspect-ratio: 11/10;
    overflow: hidden;
    text-decoration: none;
    -webkit-border-radius: 2.99rem;
    -moz-border-radius: 2.99rem;
    -ms-border-radius: 2.99rem;
    -o-border-radius: 2.99rem;
}

.blog-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-img-wrap img {
    transform: scale(1.04);
}

.blog-card-tag {
    position: absolute;
    top: 2.2rem;
    left: 3.2rem;
    background: rgba(255, 255, 255, 0.2);
    filter: blur(11);
    backdrop-filter: blur(11.046813011169434px);
    color: rgb(255 255 255);
    font-size: 2rem;
    font-weight: 400;
    padding: 0.6rem 1.2rem;
    border-radius: 0.4rem;
    z-index: 1;
    -webkit-filter: blur(11);
}

.blog-card-body {
    padding: 2rem 0.4rem 2.4rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    flex: 1;
}

.blog-card-title {
    font-size: 3.8rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    line-height: 1.35;
}

.blog-card-title a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

.blog-card-title a:hover {
    color: rgba(0, 42, 196, 1);
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 2.2rem;
    flex-wrap: wrap;
}

.blog-card-author,
.blog-card-date,
.blog-card-reads {
    font-size: 2rem;
    font-weight: 500;
    color: rgba(18, 20, 22, 1);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.blog-card-date,
.blog-card-reads {
    color: rgba(108, 117, 125, 1);
    font-weight: 400;
}
.blog-card-author svg,
.blog-card-reads svg {
    flex-shrink: 0;
    color: rgba(0, 0, 0, 0.4);
}

.blog-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 2rem;
    font-weight: 500;
    width: fit-content;
    text-decoration: underline;
    color: rgba(18, 20, 22, 1);
    margin-top: 2rem;
    transition: opacity 0.2s;
}

.blog-card-link:hover {
    opacity: 0.7;
    color: rgba(0, 42, 196, 1);
}

/* ==============================
   QUOTE BANNER
============================== */
.blog-quote-banner {
    padding: 3rem 0;
}
.blog-quote-banner .blog-quote-inner {
    background-size: cover;
    background-position: center;
    align-items: center;
    background-repeat: no-repeat;
    background-color: rgba(30, 30, 30, 1);
    padding: 16rem;
    margin: 2rem 0 0;
    border-radius: 5.94rem;
    -webkit-border-radius: 5.94rem;
    -moz-border-radius: 5.94rem;
    -ms-border-radius: 5.94rem;
    -o-border-radius: 5.94rem;
    position: relative;
    z-index: 999;
}
.blog-quote-banner .blog-card-tag {
    position: unset;
    width: fit-content;
}
.blog-quote-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.422);
    border-radius: 5.94rem;
    -webkit-border-radius: 5.94rem;
    -moz-border-radius: 5.94rem;
    -ms-border-radius: 5.94rem;
    -o-border-radius: 5.94rem;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(12px);
    z-index: -1;
}
.blog-quote-inner {
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.blog-quote-text {
    font-size: 4rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 1.4;
}

.blog-quote-sub {
    font-size: 1.9rem;
    font-weight: 400;
    color: rgba(229, 229, 229, 1);
    line-height: 1.6;
}

/* ==============================
   NEWSLETTER
============================== */
.blog-newsletter {
    background: #c8e63a;
    padding: 0 0 0;
}

.blog-newsletter-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    min-height: 42rem;
}

/* Left */
.blog-newsletter-left {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 4rem 4rem 0;
}

.blog-newsletter-brand {
    font-size: 5rem;
    font-weight: 800;
    color: rgba(0, 0, 0, 1);
    letter-spacing: 0.2rem;
    line-height: 1;
}

.blog-newsletter-pet {
    width: 100%;
    max-width: 36rem;
    object-fit: contain;
    display: block;
    align-self: flex-end;
    margin-top: auto;
}

/* Right */
.blog-newsletter-right {
    padding: 5rem 6rem 5rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    justify-content: center;
}

.blog-newsletter-title {
    font-size: 5.6rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    line-height: 1.1;
}

.blog-newsletter-desc {
    font-size: 1.8rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    line-height: 1.6;
    max-width: 38rem;
}

.blog-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-top: 0.8rem;
}

.blog-newsletter-input {
    border-radius: 9rem;
    font-size: 1.8rem;
}

.blog-newsletter-btn {
    font-size: 1.8rem;
    padding: 1.6rem 3.2rem;
}

/* ==============================
   RESPONSIVE
============================== */
/* @media (max-width: 1200px) {
    .blog-layout {
        grid-template-columns: 24rem 1fr;
        gap: 3rem;
    }
}

@media (max-width: 992px) {
    .blog-layout {
        grid-template-columns: 1fr;
    }

    .blog-sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2.4rem;
    }

    .blog-sidebar-search {
        grid-column: 1 / -1;
    }

    .blog-newsletter-inner {
        grid-template-columns: 1fr 1fr;
    }

    .blog-newsletter-title {
        font-size: 4.4rem;
    }
}

@media (max-width: 767px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-sidebar {
        grid-template-columns: 1fr;
    }

    .blog-quote-text {
        font-size: 2.6rem;
    }

    .blog-newsletter-inner {
        grid-template-columns: 1fr;
    }

    .blog-newsletter-left {
        padding: 3rem 3rem 0;
    }

    .blog-newsletter-pet {
        max-width: 24rem;
    }

    .blog-newsletter-right {
        padding: 3rem;
    }

    .blog-newsletter-title {
        font-size: 3.6rem;
    }
}

@media (max-width: 480px) {
    .blog-section {
        padding: 3rem 0 4rem;
    }

    .blog-card-title {
        font-size: 1.7rem;
    }

    .blog-newsletter-title {
        font-size: 3rem;
    }
} */

/* ==============================
   HERO BANNER — Detail Variant
   Overrides on top of existing hero-banner classes
============================== */
/* ==============================
   BLOG DETAIL BANNER — Page-specific
============================== */
.blog-detail-banner {
    background-image: url(../images/blog/blog-details.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.blog-detail-banner::before {
    background: linear-gradient(
            270deg,
            rgba(47, 47, 228, 0) 30.24%,
            #2f2fe4 100%
    );
    content: "";
    position: absolute;
    inset: 0;
}
.blog-detail-banner {
    /* background: #3b2ecc; */
    border-radius: 9rem;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 48rem;
    -webkit-border-radius: 9rem;
    -moz-border-radius: 9rem;
    -ms-border-radius: 9rem;
    -o-border-radius: 9rem;
}

/* Left column — title top, breadcrumb bottom */
.blog-detail-banner__left {
    position: relative;
    z-index: 2;
    flex: 0 0 48%;
    max-width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8rem 3rem 6rem 6rem;
}

.blog-detail-banner__title {
    font-size: 6rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 1.2;
}

.blog-detail-banner__breadcrumb {
    font-size: 3.6rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
}

.blog-detail-banner__breadcrumb a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.2s;
}

.blog-detail-banner__breadcrumb a:hover {
    color: rgba(255, 255, 255, 1);
}

.blog-detail-banner__breadcrumb span {
    color: rgba(210, 241, 77, 1);
    font-weight: 600;
}

/* Right column — image fills full height, bleeds top */
.blog-detail-banner__img-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    z-index: 1;
}

.blog-detail-banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* ==============================
   RESPONSIVE
============================== */
/* @media (max-width: 992px) {
    .blog-detail-banner {
        min-height: 24rem;
        border-radius: 3rem;
    }

    .blog-detail-banner__title {
        font-size: 3.8rem;
    }

    .blog-detail-banner__left {
        flex: 0 0 52%;
        max-width: 52%;
        padding: 3.5rem 2rem 3.5rem 4rem;
    }

    .blog-detail-banner__img-wrap {
        width: 52%;
    }
}

@media (max-width: 767px) {
    .blog-detail-banner {
        flex-direction: column;
        min-height: auto;
        border-radius: 2.4rem;
    }

    .blog-detail-banner__left {
        flex: none;
        max-width: 100%;
        padding: 3.5rem 3rem 2rem;
        gap: 8rem;
    }

    .blog-detail-banner__title {
        font-size: 3.2rem;
    }

    .blog-detail-banner__img-wrap {
        position: relative;
        width: 100%;
        height: 22rem;
        top: auto;
        right: auto;
        bottom: auto;
    }

    .blog-detail-banner__img {
        object-position: top center;
    }
}

@media (max-width: 480px) {
    .blog-detail-banner__title {
        font-size: 2.8rem;
    }

    .blog-detail-banner__left {
        gap: 6rem;
        padding: 3rem 2.4rem 2rem;
    }
} */

/* ==============================
   BLOG DETAIL SECTION
============================== */
.blog-detail-section {
    padding: 5rem 0 7rem;
}

.blog-detail-layout {
    display: grid;
    grid-template-columns: 6rem 1fr 35rem;
    gap: 3.2rem;
    align-items: start;
}

/* ==============================
   SOCIAL SHARE — COL 1
============================== */
.blog-detail-social {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    position: sticky;
    top: 10rem;
    padding-top: 0.4rem;
}

.blog-social-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    color: rgba(0, 0, 0, 0.6);
}

.blog-social-item--link {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.7);
    transition: color 0.2s;
}

.blog-social-item--link:hover {
    color: rgba(0, 42, 196, 1);
}

.blog-social-label {
    font-size: 1.3rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
    line-height: 1;
}

.blog-social-count {
    font-size: 1.4rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.75);
    line-height: 1;
}

.blog-social-divider {
    width: 0.1rem;
    height: 2.4rem;
    background: rgba(0, 0, 0, 0.12);
    margin: 0.4rem 0;
}

/* ==============================
   ARTICLE — COL 2
============================== */
.blog-detail-article {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.blog-detail-img-wrap {
    border-radius: 3rem;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4/3;
}

.blog-detail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-detail-body {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.blog-detail-body p {
    font-size: 2rem;
    font-weight: 400;
    color: rgba(108, 117, 125, 1);
    line-height: 1.8;
}

/* Blockquote */
.blog-detail-quote {
    position: relative;
    padding: 0 0 0 6rem;
    margin: 0.8rem 0;
    border: none;
}

.blog-detail-quote-mark {
    position: absolute;
    left: -3px;
    top: 0rem;
    line-height: 1;
    color: rgba(0, 0, 0, 0.85);
}
.blog-detail-quote {
    font-size: 3rem;
    font-weight: 400;
    color: rgba(18, 20, 22, 1);
    line-height: 1.45;
    text-transform: uppercase;
    letter-spacing: 0.02rem;
}

/* ==============================
   SIDEBAR — COL 3
   Reuses .blog-sidebar, .blog-sidebar-block,
   .blog-sidebar-title, .blog-sidebar-product,
   .blog-tags, .blog-tag, .blog-categories
   from blog.css — no duplication needed
============================== */
.blog-detail-sidebar {
    position: sticky;
    top: 10rem;
}

/* ==============================
   RESPONSIVE
============================== */
/* @media (max-width: 1200px) {
    .blog-detail-layout {
        grid-template-columns: 6rem 1fr 26rem;
        gap: 2.4rem;
    }

    .hero-banner__title--detail {
        font-size: 4.4rem;
    }
}

@media (max-width: 992px) {
    .blog-detail-layout {
        grid-template-columns: 1fr 26rem;
        gap: 3rem;
    }

    .blog-detail-social {
        display: none;
    }

    .hero-banner--detail {
        min-height: 26rem;
    }

    .hero-banner__text--detail {
        flex: 0 0 55%;
        max-width: 55%;
    }

    .hero-banner__title--detail {
        font-size: 3.8rem;
    }
}

@media (max-width: 767px) {
    .blog-detail-layout {
        grid-template-columns: 1fr;
    }

    .blog-detail-sidebar {
        position: static;
    }

    .hero-banner--detail {
        min-height: auto;
    }

    .hero-banner__text--detail {
        flex: none;
        max-width: 100%;
        padding: 3rem 3rem 3rem;
        gap: 1.2rem;
    }

    .hero-banner__title--detail {
        font-size: 3.2rem;
    }

    .blog-detail-img-wrap {
        border-radius: 2rem;
        aspect-ratio: 16/10;
    }

    .blog-detail-quote {
        font-size: 2rem;
    }

    .blog-detail-para {
        font-size: 1.7rem;
    }
}

@media (max-width: 480px) {
    .hero-banner__title--detail {
        font-size: 2.8rem;
    }

    .blog-detail-quote {
        font-size: 1.8rem;
        padding-left: 2.4rem;
    }

    .blog-detail-quote-mark {
        font-size: 4.8rem;
    }
} */

/* ==============================
   FAQ BANNER — Page-specific
============================== */

/* ==============================
   CARE BEGINS WITH ANSWERS
============================== */

.page-banner--faq .hero-banner__img-wrap {
    right: 11rem;
    bottom: 0;
    top: 3rem;
    width: 100%;
    max-width: 55%;
}
.page-banner--faq .hero-banner__sparks--tr {
    bottom: 4rem;
    right: 18rem;
    top: unset;
    transform: rotate(28deg);
}
.page-banner--faq .hero-banner__sparks--rr {
    top: 45rem;
    right: 8rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
}
.page-banner--faq .hero-banner__sparks--center {
    bottom: 56%;
    left: 52%;
}

/* faq into */

.faq-intro-section {
    padding: 8rem 0 8rem;
    position: relative;
    /* height: 100vh; */
    /* background-image: url(../images/faq/intro-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; */
}
.faq-into-section-bg{
    position: absolute;
    z-index: -1;
    top: 4rem;
}

.faq-intro-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    /* margin-bottom: 10rem; */
}

.faq-intro-title {
    font-size: 6rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    line-height: 1.15;
    letter-spacing: -0.05rem;
}

.faq-intro-pets {
    width: 100%;
    flex-shrink: 0;
}

/* Category Pills Grid */
.faq-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.6rem;
}

.faq-category-pill {
    display: flex;
    align-items: center;
    /* justify-content: center; */
    gap: 3.2rem;
    padding: 3.8rem 2.4rem;
    border: 0.298rem solid rgba(0, 0, 0, 1);
    border-radius: 2.38rem;
    background: rgba(255, 255, 255, 1);
    text-decoration: none;
    font-size: 2.9rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    transition: all 0.2s;
    box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.05);
}

.faq-category-pill img {
    width: 7.2rem;
    height: 8.2rem;
    object-fit: contain;
    flex-shrink: 0;
}

.faq-category-pill:hover {
    border-color: rgba(0, 42, 196, 1);
    color: rgba(0, 42, 196, 1);
    box-shadow: 0 0.4rem 1.6rem rgba(0, 42, 196, 0.12);
}

/* ==============================
   FAQ BLOCK — Accordion + Info
============================== */
.faq-common-bg-sec{
    position: relative;
}
.faq-common-bg{
    position: absolute;
    z-index: -1;
    /* top: 6rem; */
    right: 0;
}
.faq-block {
    padding: 5rem 0;
    /* border-top: 0.15rem solid rgba(0, 0, 0, 0.07); */
}

/* .faq-block--alt {
    background: rgba(248, 248, 248, 0.5);
} */

.faq-block-layout {
    display: grid;
    gap: 5rem;
    align-items: center;
}

.faq-block-layout--normal {
    grid-template-columns: 1fr 1fr;
}

.faq-block-layout--reverse {
    grid-template-columns: 1fr 1fr;
}

/* Info panel */
.faq-block-info {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
}

.faq-block-info__title {
    font-size: 6rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    line-height: 1.2;
}

.faq-block-info__desc {
    font-size: 2rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    line-height: 1.6;
    max-width: 45rem;
}

.faq-block-info__img {
    width: 100%;
    /* max-width: 38rem; */
    height: auto;
    object-fit: contain;
    margin-top: 1.6rem;
    border-radius: 3rem;
}

/* ==============================
   ACCORDION
============================== */
/* ==============================
   FAQ ACCORDION — Styled with open state
============================== */
.faq-accordion-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-accordion {
    border-radius: 3rem;
    overflow: hidden;
    transition:
            background 0.3s ease,
            box-shadow 0.3s ease;
    /* background: rgba(255, 255, 255, 1); */
    border: 0.3rem solid rgba(0, 0, 0, 1);
    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    -ms-border-radius: 3rem;
    -o-border-radius: 3rem;
}

/* Open state — purple bg */
.faq-accordion--open {
    background: rgba(47, 47, 228, 1);
    border-color: rgba(47, 47, 228, 1);
    /* box-shadow: 0 0.8rem 2.4rem rgba(59, 46, 204, 0.25); */
}
.faq-accordion--open .faq-accordion__btn {
    font-weight: 500;
}
.faq-accordion__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 3rem 3.4rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font);
    font-size: 2.8rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    transition: color 0.3s ease;
    line-height: 1.4;
}

/* Open state — white text */
.faq-accordion--open .faq-accordion__btn {
    color: rgba(255, 255, 255, 1);
}

/* Icon wrapper — circle */
.faq-accordion__icon-wrap {
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: transparent;
}

.faq-accordion--open .faq-accordion__icon-wrap {
}

/* Plus icon → X icon via rotation */
.faq-accordion__icon {
    flex-shrink: 0;
    transition:
            transform 0.35s ease,
            color 0.3s ease;
    color: rgba(0, 0, 0, 1);
    width: 2rem;
    height: 2rem;
}

.faq-accordion--open .faq-accordion__icon {
    transform: rotate(45deg);
    color: rgba(255, 255, 255, 1);
}

/* Answer body — smooth slide */
.faq-accordion__body {
    max-height: 0;
    overflow: hidden;
    transition:
            max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.3s ease,
            padding 0.3s ease;
    opacity: 0;
    padding: 0 2.4rem;
}

.faq-accordion--open .faq-accordion__body {
    max-height: 35rem;
    opacity: 1;
    padding: 0 2.4rem 2rem;
}

.faq-accordion__body p {
    font-size: 2rem;
    font-weight: 400;
    color: rgba(246, 246, 246, 1);
    line-height: 1.7;
    /* border-top: 0.1rem solid rgba(255, 255, 255, 0.15); */
    /* padding-top: 1.2rem; */
}

/* ==============================
   CATEGORY PILL — Parallax tilt on hover
============================== */
.faq-category-pill {
    transform-style: preserve-3d;
    transform: perspective(600px) rotateX(0deg) rotateY(0deg);
    transition:
            transform 0.1s ease,
            box-shadow 0.3s ease,
            border-color 0.2s;
    will-change: transform;
    cursor: pointer;
}

/* JS adds inline transform — ensure smooth reset on mouseleave */
.faq-category-pill.parallax-reset {
    transition:
            transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            box-shadow 0.4s ease;
}

/* ==============================
   OFFER BADGE — Parallax float on hover
============================== */
.faq-offer-badge {
    transform-style: preserve-3d;
    will-change: transform;
    transition:
            transform 0.1s ease,
            box-shadow 0.3s ease;
}

.faq-offer-badge.parallax-reset {
    transition:
            transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            box-shadow 0.4s ease;
}
/* ==============================
   WHERE DOUBTS FADE — CTA Banner
============================== */
.faq-cta-banner {
    margin: 0rem 0;
    background: rgba(47, 47, 228, 1);
    padding: 4rem 5rem;
    position: relative;
    overflow: hidden;
    min-height: 55rem;
}

.faq-cta-inner {
    /* padding: 4rem 5rem; */
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 3rem;
}

.faq-cta-left {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    z-index: 1;
    flex-shrink: 0;
}

.faq-cta-title {
    font-size: 6rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 1.2;
}

.faq-cta-desc {
    font-size: 2rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 1.5;
    max-width: 35rem;
}

.faq-cta-contacts {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.4rem;
}

.faq-cta-contact {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 3rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
    transition: color 0.2s;
}

.faq-cta-contact:hover {
    color: #c8e63a;
}
.faq-cta-img-wrap-bg {
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
    bottom: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
    z-index: 0;
}
.faq-cta-img-wrap {
    position: absolute;
    left: 55%;
    transform: translateX(-50%);
    bottom: 0;
    top: 10%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
    z-index: 0;
}

.faq-cta-img {
    height: 100%;
    width: auto;
    object-fit: contain;
    object-position: bottom;
}

.faq-cta-right {
    z-index: 1;
    flex-shrink: 0;
}

.faq-cta-btn {
    white-space: nowrap;
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 1);
    box-shadow: 0 0.6rem 0 0 0 0.6rem 0 0 rgba(0, 0, 0, 1);
}

.faq-cta-btn:hover {
    box-shadow: 0 0.6rem 0 0 rgba(0, 0, 0, 1);
    color: rgba(0, 0, 0, 1);
}

/* ==============================
   PAYMENT AND OFFERS
============================== */
.faq-offers-section {
    padding: 6rem 0 6rem;
    background: rgba(247, 243, 240, 1);
}

.faq-offers-title {
    font-size: 6rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 3.2rem;
}

/* Each offer row */
.faq-offer-block {
    display: grid;
    gap: 3rem;
    margin-bottom: 8.4rem;
    align-items: center;
}

.faq-offer-block--left {
    grid-template-columns: 60rem 1fr;
}

.faq-offer-block--right {
    grid-template-columns: 1fr 60rem;
}

/* Offer badge card */
.faq-offer-badge {
    border-radius: 6.5rem;
    padding: 5.4rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2.4rem;
    position: relative;
    overflow: hidden;
    min-height: 53rem;
    border: 0.3rem solid rgba(0, 0, 0, 1);
    -webkit-border-radius: 6.5rem;
    -moz-border-radius: 6.5rem;
    -ms-border-radius: 6.5rem;
    -o-border-radius: 6.5rem;
}

.faq-offer-badge--blue {
    background: rgba(210, 241, 77, 1);
}
.faq-offer-badge--lime {
    background: rgba(210, 241, 77, 1);
}
.faq-offer-badge--yellow {
    background: rgba(210, 241, 77, 1);
}

.faq-offer-badge__pct {
    font-size: 8.9rem;
    font-weight: 700;
    line-height: 1;
}

.faq-offer-badge--blue .faq-offer-badge__pct {
    color: rgba(63, 56, 234, 1);
}
.faq-offer-badge--lime .faq-offer-badge__pct {
    color: rgba(63, 56, 234, 1);
}
.faq-offer-badge--yellow .faq-offer-badge__pct {
    color: rgba(63, 56, 234, 1);
}

.faq-offer-badge__pct sup {
    font-size: 2.4rem;
    vertical-align: super;
}

.faq-offer-badge__off {
    font-size: 4.6rem;
    font-weight: 700;
    letter-spacing: 0.1rem;
}

.faq-offer-badge--blue .faq-offer-badge__off {
    color: rgba(49, 49, 49, 1);
}
.faq-offer-badge--lime .faq-offer-badge__off {
    color: rgba(0, 0, 0, 0.6);
}
.faq-offer-badge--yellow .faq-offer-badge__off {
    color: rgba(0, 0, 0, 0.6);
}

.faq-offer-badge__label {
    font-size: 4.6rem;
    font-weight: 600;
    line-height: 1;
    margin-top: 0.4rem;
}

.faq-offer-badge--blue .faq-offer-badge__label {
    color: rgba(49, 49, 49, 1);
}
.faq-offer-badge--lime .faq-offer-badge__label {
    color: rgba(0, 0, 0, 1);
}
.faq-offer-badge--yellow .faq-offer-badge__label {
    color: rgba(0, 0, 0, 1);
}

.faq-offer-badge__img {
    position: absolute;
    bottom: 0;
    width: 40rem;
    height: auto;
    object-fit: contain;
}
.faq-offer-badge--lime .faq-offer-badge__img {
    width: 25rem;
}
/* Offer accordion slight tweak */
.faq-accordion-wrap--offer .faq-accordion__btn {
    font-size: 2.8rem;
    font-weight: 400;
}
.faq-accordion-wrap--offer .faq-accordion--open .faq-accordion__btn {
    font-weight: 500;
    color: unset;
}
.faq-accordion-wrap--offer .faq-accordion__body p {
    color: rgba(0, 0, 0, 1);
}
.faq-accordion-wrap--offer .faq-accordion--open {
    background: unset;
    border-color: unset;
}

.faq-intro-pets,
.faq-block-info__img__animation {
    animation: shake-rotate 1.5s ease-in-out infinite;
}
@keyframes shake-rotate {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(-6deg);
    }
    30% {
        transform: rotate(6deg);
    }
    45% {
        transform: rotate(-4deg);
    }
    60% {
        transform: rotate(4deg);
    }
    75% {
        transform: rotate(-2deg);
    }
    90% {
        transform: rotate(2deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
/* ==============================
   RESPONSIVE
============================== */
/* @media (max-width: 1200px) {
    .faq-banner__title {
        font-size: 4rem;
    }
    .faq-intro-title {
        font-size: 4.2rem;
    }
    .faq-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .faq-banner {
        min-height: 24rem;
        border-radius: 3rem;
    }
    .faq-banner__left {
        flex: 0 0 52%;
        max-width: 52%;
        padding: 3.5rem 2rem 3.5rem 4rem;
    }
    .faq-banner__title {
        font-size: 3.4rem;
    }
    .faq-banner__img-wrap {
        width: 52%;
    }

    .faq-block-layout--normal,
    .faq-block-layout--reverse {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .faq-block-layout--reverse .faq-block-info {
        order: -1;
    }

    .faq-offer-block--left,
    .faq-offer-block--right {
        grid-template-columns: 18rem 1fr;
    }

    .faq-offer-block--right {
        grid-template-columns: 1fr 18rem;
    }

    .faq-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
        padding: 3.5rem;
    }

    .faq-cta-img-wrap {
        display: none;
    }
}

@media (max-width: 767px) {
    .faq-banner {
        flex-direction: column;
        min-height: auto;
        border-radius: 2.4rem;
    }

    .faq-banner__left {
        flex: none;
        max-width: 100%;
        padding: 3.5rem 3rem 2rem;
        gap: 8rem;
    }

    .faq-banner__title {
        font-size: 3rem;
    }

    .faq-banner__img-wrap {
        position: relative;
        width: 100%;
        height: 22rem;
        top: auto;
        right: auto;
        bottom: auto;
    }

    .faq-banner__deco {
        display: none;
    }

    .faq-intro-layout {
        flex-direction: column;
        align-items: flex-start;
    }

    .faq-intro-title {
        font-size: 3.4rem;
    }

    .faq-category-grid {
        grid-template-columns: 1fr 1fr;
    }

    .faq-offer-block--left,
    .faq-offer-block--right {
        grid-template-columns: 1fr;
    }

    .faq-offer-block--right .faq-offer-badge {
        order: -1;
    }

    .faq-offer-badge {
        min-height: 14rem;
    }
}

@media (max-width: 480px) {
    .faq-banner__title {
        font-size: 2.6rem;
    }
    .faq-intro-title {
        font-size: 2.8rem;
    }
    .faq-category-grid {
        grid-template-columns: 1fr;
    }
    .faq-offers-title {
        font-size: 2.8rem;
    }
} */

/* ==============================
   ABOUT PAGE
============================== */
/* banner */
.page-banner--about .hero-banner__img-wrap {
    right: 0rem;
}
.page-banner--about .hero-banner__sparks--center {
    left: unset;
    bottom: 80%;
    right: 8%;
}
.page-banner--about .hero-banner__sparks--tr {
    bottom: unset;
    top: 35%;
    right: unset;
    left: 33%;
    transform: rotate(0deg);
}
.page-banner--about .hero-banner__text {
    flex: 0 0 55%;
    max-width: 55%;
}
/* =============================================
   SECTION 1 — WELCOME
============================================= */
.about-welcome {
    padding: 8rem 0 8rem;
    overflow: hidden;
}

.about-welcome__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
}

.about-welcome__label {
    font-size: 3.4rem;
    font-weight: 500;
    color: rgba(16, 16, 16, 1);
    letter-spacing: 0.05rem;
    margin-bottom: 1.2rem;
}

.about-welcome__title {
    font-size: 6rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    line-height: 1.1;
    margin-bottom: 2rem;
}

.about-welcome__desc {
    font-size: 2rem;
    font-weight: 400;
    color: rgba(92, 92, 92, 1);
    line-height: 1.75;
    margin-bottom: 2.4rem;
}

.about-welcome__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.about-welcome__list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 2.4rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
}

.about-welcome__list li svg {
    flex-shrink: 0;
}

/* ── Welcome Right ── */
.about-welcome__right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Blob container — sized to your SVG's natural proportions */
.about-welcome__blob-wrap {
    position: relative;
    width: 100%;
    max-width: 55rem;
    margin-left: auto;
}

/* Blob SVG/PNG background shape */
.about-welcome__blob-bg {
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
    pointer-events: none;
}

/* Photo — sits on top, clipped by the blob shape */
.about-welcome__blob-img {
    position: absolute;
    top: 0%;
    right: 18%;
    bottom: -13%;
}

.about-welcome__blob-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Sparkle stars */
.about-welcome__star {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    display: block;
}

.about-welcome__star--lg {
    top: 0;
    left: 6%;
    width: 4.8rem;
    height: 4.8rem;
}

.about-welcome__star--sm {
    top: 3.5rem;
    left: 18%;
    width: 2.6rem;
    height: 2.6rem;
}

/* ── Responsive ── */
/* @media (max-width: 992px) {
    .about-welcome__blob-wrap {
        max-width: 42rem;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .about-welcome__blob-wrap {
        max-width: 34rem;
    }
    .about-welcome__star--lg {
        width: 3.6rem;
        height: 3.6rem;
    }
    .about-welcome__star--sm {
        width: 2rem;
        height: 2rem;
    }
}

@media (max-width: 480px) {
    .about-welcome__blob-wrap {
        max-width: 28rem;
    }
} */

/* =============================================
   SECTION 2 — FEATURE CARDS
============================================= */
.about-cards {
    padding: 4rem 0 5rem;
}

.about-cards__grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 2rem;
    align-items: end;
}

/* Base card */
.about-card {
    border-radius: 6rem;
    padding: 4.2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    overflow: hidden;
    position: relative;
    transition:
            transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            box-shadow 0.35s ease;
    cursor: default;
    -webkit-border-radius: 6rem;
    -moz-border-radius: 6rem;
    -ms-border-radius: 6rem;
    -o-border-radius: 6rem;
}
.about-cards__grid .about-card.pb-0 {
    padding-bottom: 0;
}

.about-cards__grid .about-card.pt-0 {
    padding-top: 0;
    padding-left: 0;
}
.about-cards__grid .about-card.pb-0 .about-card__img-wrap {
    margin-top: 4.2rem;
}
.about-cards__grid .about-card.pt-0 .about-card-contents {
    padding: 0 4.2rem 4.2rem;
    display: flex;
    gap: 2rem;
    flex-direction: column;
}
.about-cards__grid .about-card.pt-0 .about-card-contents h3 {
    color: rgba(58, 72, 0, 1);
}
.about-cards__grid .about-card.pt-0 .about-card-contents p {
    color: rgba(107, 130, 5, 1);
}

.about-card:hover {
    transform: translateY(-0.6rem);
    box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.12);
}

.about-card--peach {
    background: rgba(247, 243, 240, 1);
    min-height: 36rem;
}

.about-card--lime {
    background: rgba(210, 241, 77, 1);
    min-height: 35rem;
    padding-bottom: 0;
}

.about-card--center {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
}

.about-card__title {
    font-size: 3.8rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
}

.about-card__desc {
    font-size: 2rem;
    font-weight: 400;
    color: rgba(92, 92, 92, 1);
    line-height: 1.6;
}

.about-card__img-wrap {
    margin-top: auto;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex: 1;
}

.about-card__img-wrap img {
    width: 100%;
    /* max-height: 22rem; */
    object-fit: contain;
    display: block;
}

.about-card__img-wrap--center img {
    /* max-height: 28rem; */
    object-fit: cover;
}

/* =============================================
   PLAY WITH PURPOSE
============================================= */
.about-purpose {
    padding: 5rem 0 8rem;
}

.about-purpose__title {
    font-size: 6rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
    text-align: center;
    margin-bottom: 4rem;
    line-height: 1.15;
}

.about-purpose__title-accent {
    color: #2f2fe4;
}

/* 3-col: asterisk | image | swirl */
.about-purpose__layout {
    display: grid;
    grid-template-columns: 10rem 1fr 16rem;
    gap: 3rem;
    align-items: center;
    max-width: 85rem;
    margin: 0 auto;
    position: relative;
}

/* LEFT — asterisk */
.about-purpose__left {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-purpose__asterisk {
    width: 7rem;
    height: 7rem;
    display: block;
    flex-shrink: 0;
}

/* CENTER — image + badge */
.about-purpose__img-wrap {
    position: relative;
}

.about-purpose__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2rem;
}

/* Badge — absolute bottom-right, overlapping */
.about-purpose__badge {
    position: absolute;
    bottom: -3rem;
    right: -13rem;
    width: 20rem;
    height: auto;
    display: block;
    z-index: 2;
}

/* RIGHT — swirl SVG */
.about-purpose__right {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 1rem;
    position: absolute;
    right: 4%;
    top: 12%;
}

.about-purpose__swirl {
    width: 100%;
    max-width: 14rem;
    height: auto;
    display: block;
}

/* ── Responsive ── */
/* @media (max-width: 992px) {
    .about-purpose__layout {
        grid-template-columns: 8rem 1fr 12rem;
        gap: 2rem;
        max-width: 70rem;
    }

    .about-purpose__title {
        font-size: 4rem;
    }
    .about-purpose__asterisk {
        width: 5.5rem;
        height: 5.5rem;
    }
    .about-purpose__badge {
        width: 12rem;
        bottom: -2rem;
        right: -2.5rem;
    }
    .about-purpose__swirl {
        max-width: 11rem;
    }
}

@media (max-width: 767px) {
    .about-purpose__layout {
        grid-template-columns: 6rem 1fr 9rem;
        gap: 1.6rem;
        max-width: 100%;
    }

    .about-purpose__title {
        font-size: 3.2rem;
    }
    .about-purpose__asterisk {
        width: 4.5rem;
        height: 4.5rem;
    }
    .about-purpose__badge {
        width: 10rem;
        bottom: -1.5rem;
        right: -1.5rem;
    }
    .about-purpose__swirl {
        max-width: 8rem;
    }
}

@media (max-width: 480px) {
    .about-purpose__layout {
        grid-template-columns: 4.5rem 1fr 7rem;
        gap: 1rem;
    }

    .about-purpose__title {
        font-size: 2.8rem;
    }
    .about-purpose__asterisk {
        width: 3.5rem;
        height: 3.5rem;
    }
    .about-purpose__badge {
        width: 8.5rem;
        bottom: -1rem;
        right: -1rem;
    }
    .about-purpose__swirl {
        max-width: 6.5rem;
    }
} */

/* =============================================
   SECTION 4 — WHERE CARE BECOMES DESIGN
============================================= */
.about-design {
    padding: 5rem 0 6rem;
    overflow: hidden;
}

.about-design__title {
    font-size: 6rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 3rem;
    letter-spacing: -0.02rem;
}

/* Tabs */
.about-design__tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 4rem;
    padding-bottom: 2rem;
}

.about-design__tab {
    padding: 0.8rem 2rem;
    border-radius: 3.7rem;
    border: 0.15rem solid rgba(242, 242, 242, 1);
    background: none;
    font-family: var(--font);
    font-size: 1.8rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.about-design__tab:hover {
    border-color: rgba(242, 242, 242, 1);
    background-color: rgba(251, 254, 238, 1);
}

.about-design__tab--active {
    border-color: rgba(242, 242, 242, 1);
    background-color: rgba(251, 254, 238, 1);
}

/* Content layout */
.about-design__content {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 5rem;
    align-items: center;
}

.about-design__info {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.about-design__info-title {
    font-size: 3.2rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    line-height: 1.25;
}

.about-design__info-desc {
    font-size: 1.8rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.55);
    line-height: 1.75;
}

.about-design__find-more {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.8rem;
    font-weight: 600;
    color: rgba(0, 42, 196, 1);
    text-decoration: none;
    margin-top: 0.8rem;
    transition:
            gap 0.2s ease,
            opacity 0.2s ease;
}

.about-design__find-more:hover {
    gap: 1.2rem;
    opacity: 0.8;
    color: rgba(0, 42, 196, 1);
}

.about-design__img-wrap {
    border-radius: 4rem;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.about-design__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =============================================
   SECTION 5 — WHERE SMALL PAWS LEAD STORIES
============================================= */
.about-stories-banner {
    padding: 3rem 0;
}

.about-stories-banner__inner {
    border-radius: 5rem;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 36rem;
    /* background: rgba(240, 240, 240, 0.4); */
    background-image: url(../images/about-us/about-tab-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.about-stories-banner__img-wrap {
    overflow: hidden;
}

.about-stories-banner__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.about-stories-banner__inner:hover .about-stories-banner__img-wrap img {
    /* transform: scale(1.04); */
}

.about-stories-banner__text {
    padding: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
}

.about-stories-banner__title {
    font-size: 6rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    line-height: 1.2;
}

.about-stories-banner__desc {
    font-size: 2rem;
    font-weight: 400;
    color: rgba(92, 92, 92, 1);
    line-height: 1.75;
}

/* =============================================
   SECTION 6 — HAPPY HOMES / TESTIMONIALS
============================================= */
.about-testimonials {
    padding: 6rem 0 7rem;
}

.about-testimonials__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: start;
}

.about-testimonials__title {
    font-size: 6rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    line-height: 1.1;
    margin-bottom: 2.2rem;
}

.about-testimonials__subtitle {
    font-size: 2rem;
    font-weight: 400;
    color: rgba(16, 16, 16, 1);
    line-height: 1.7;
    max-width: 45rem;
}

.about-testimonials__pet-imgs {
    margin-top: 3rem;
}

.about-testimonials__pet-imgs img {
    width: 100%;
    border-radius: 3rem;
    object-fit: cover;
    max-width: 55rem;
}

/* Testimonial cards */
/* Right — stacked testimonial cards */
.about-testimonials__right {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Card */
.about-testimonial-card {
    padding: 3rem 0;
    border-bottom: 0.15rem solid rgba(16, 16, 16, 0.1);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.about-testimonial-card:first-child {
    padding-top: 0;
}

.about-testimonial-card:last-child {
    border-bottom: none;
}

/* Top row: avatar | quote icon | title */
.about-testimonial-card__top {
    display: grid;
    grid-template-columns: 7rem 5rem 1fr;
    gap: 1.6rem;
    align-items: flex-start;
}

/* Avatar */
.about-testimonial-card__avatar {
    width: 10rem;
    height: 8rem;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    filter: grayscale(100%);
}

/* Quote SVG icon */
.about-testimonial-card__quote-icon {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.4rem;
    flex-shrink: 0;
}

.about-testimonial-card__quote-icon svg {
    width: 3.6rem;
    height: 3.6rem;
    display: block;
}

/* Title */
.about-testimonial-card__title {
    font-size: 2.8rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 1);
    line-height: 1.3;
    letter-spacing: 0.02rem;
    padding-top: 0.4rem;
}

/* Body */
.about-testimonial-card__body {
    font-size: 2rem;
    font-weight: 400;
    color: rgba(92, 92, 92, 1);
    line-height: 1.75;
}

/* Author */
.about-testimonial-card__author {
    font-size: 2rem;
    font-weight: 700;
    color: rgba(16, 16, 16, 1);
    letter-spacing: 0.08rem;
    text-transform: uppercase;
}
.about-testimonial-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* =============================================
   RESPONSIVE
============================================= */
/* @media (max-width: 1200px) {
    .about-welcome__title {
        font-size: 4.6rem;
    }
    .about-testimonials__title {
        font-size: 4rem;
    }
    .about-cards__grid {
        grid-template-columns: 1fr 1.1fr 1fr;
    }
}

@media (max-width: 992px) {
    .about-welcome__layout {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
    .about-cards__grid {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }
    .about-card--lime {
        min-height: 32rem;
    }
    .about-purpose__layout {
        grid-template-columns: 1fr;
    }
    .about-purpose__deco {
        flex-direction: row;
        justify-content: center;
    }
    .about-design__content {
        grid-template-columns: 1fr;
    }
    .about-stories-banner__inner {
        grid-template-columns: 1fr;
    }
    .about-testimonials__layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .about-welcome__title {
        font-size: 3.6rem;
    }
    .about-purpose__title {
        font-size: 3.6rem;
    }
    .about-design__title {
        font-size: 3rem;
    }
    .about-stories-banner__title {
        font-size: 3rem;
    }
    .about-testimonials__title {
        font-size: 3.2rem;
    }
    .about-design__tabs {
        gap: 0.6rem;
    }
    .about-stories-banner__text {
        padding: 3.5rem;
    }
}

@media (max-width: 480px) {
    .about-welcome__title {
        font-size: 3rem;
    }
    .about-purpose__title {
        font-size: 3rem;
    }
    .about-purpose__badge {
        width: 9rem;
        height: 9rem;
        bottom: 1.5rem;
        right: 1.5rem;
    }
    .about-purpose__badge-pct {
        font-size: 1.6rem;
    }
} */

/* ==============================
   HOME HERO
============================== */
.home-hero {
    padding: 3rem 0;
}

.home-hero__inner {
    background: #3b2ecc;
    border-radius: 9rem;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 90rem;
}

/* ── Title — top center ── */
.home-hero__title {
    grid-column: 1 / -1;
    position: relative;
    z-index: 2;
    padding: 5rem 4rem 0;
    font-size: 7.4rem;
    font-weight: 400;
    color: #fff;
    text-align: center;
    line-height: 0.9;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.home-hero__pets-icon {
    width: 25rem;
    height: auto;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin-top: -1rem;
}

/* ── Decorative shapes ── */
.home-hero__shape {
    position: absolute;
    pointer-events: none;
    z-index: 2;
}

.home-hero__shape--one {
    left: 12rem;
    top: 30%;
    transform: translateY(-50%);
    width: 16rem;
    height: auto;
}

.home-hero__shape--two {
    right: 40rem;
    top: 50%;
    transform: translateY(-35%);
    width: 10rem;
    height: auto;
}

/* ── Bottom area: stats + dog + button ── */
.home-hero__bottom {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 9rem 13rem;
    gap: 2rem;
}

/* ── Stats ── */
.home-hero__stats {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    flex-shrink: 0;
}

.home-hero__stats-label {
    font-size: 2.8rem;
    font-weight: 400;
    color: rgba(237, 237, 237, 1);
    margin-bottom: 0.4rem;
}

.home-hero__stat {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0.8rem;
}

.home-hero__stat-num {
    font-size: 3.8rem;
    font-weight: 500;
    color: #fff;
    line-height: 1.1;
}

.home-hero__stat-desc {
    font-size: 3.8rem;
    font-weight: 500;
    color: #fff;
}

/* ── Dog image — center bottom ── */
.home-hero__img-wrap {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-60%);
    width: 75rem;
    max-width: 75rem;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}

.home-hero__dog {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ── Browse button ── */
.home-hero__browse-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: #fff;
    color: #000;
    font-family: var(--font);
    font-size: 2.2rem;
    font-weight: 600;
    padding: 1.6rem 4rem;
    border-radius: 9rem;
    text-decoration: none;
    border: 0.3rem solid #000;
    box-shadow: 0 0.6rem 0 0 #000;
    transition: all 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
    min-width: 20rem;
}

.home-hero__browse-btn:hover {
    transform: translateY(0.3rem);
    box-shadow: 0 0.2rem 0 0 #000;
    color: #000;
}

/* ==============================
   RESPONSIVE
============================== */

/* ==============================
   PAWPRINTS FIND PARADISE
============================== */
.home-paradise {
    padding: 4rem 0;
}

/* Outer wrapper card */
.home-paradise__outer {
    /*background: rgba(245, 242, 235, 1);
    */
    border: 0.32rem solid rgba(0, 0, 0, 1);
    border-radius: 9rem;
    padding: 4rem 4rem 5rem;
    -webkit-border-radius: 9rem;
    -moz-border-radius: 9rem;
    -ms-border-radius: 9rem;
    -o-border-radius: 9rem;
}

/* Head: title left, desc right */
.home-paradise__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4rem;
    margin-bottom: 3.6rem;
}

.home-paradise__title {
    font-size: 3.8rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    white-space: nowrap;
    flex-shrink: 0;
}

.home-paradise__desc {
    font-size: 2.4rem;
    font-weight: 300;
    color: rgba(0, 0, 0, 1);
    line-height: 1.65;
    max-width: 51rem;
}

/* 3-col grid */
.home-paradise__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    overflow: hidden;
}

/* Individual card */
.home-paradise__card {
    border: 0.32rem solid rgba(0, 0, 0, 1);
    border-radius: 9rem;
    padding: 3.8rem 3.8rem 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    text-decoration: none;
    overflow: hidden;
    transition:
            transform 0.3s ease,
            box-shadow 0.3s ease;
}
.home-paradise__card:hover .home-paradise__card-label, .home-paradise__card:hover .home-paradise__card-desc{
    color: #fff;
}
.home-paradise__card:hover .home-paradise__card-divider{
    background: #fff;
}
.home-paradise__card:hover {
    transform: translateY(-0.4rem);
    box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.1);
    background-color: #2F2FE4;
}

/* Card top: label + arrow */
.home-paradise__card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    margin-bottom: 3.6rem;
}

.home-paradise__card-label {
    font-size: 3rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    line-height: 1.2;
}

/* Arrow button */
.home-paradise__card-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.home-paradise__card-arrow svg {
    width: 8rem;
    height: 7rem;
    display: block;
}

.home-paradise__card:hover .home-paradise__card-arrow {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
}

/* Divider */
.home-paradise__card-divider {
    width: 100%;
    height: 0.32rem;
    background: rgba(0, 0, 0, 1);
    margin-bottom: 3.6rem;
}

/* Description text */
.home-paradise__card-desc {
    font-size: 2.4rem;
    font-weight: 300;
    color: rgba(0, 0, 0, 1);
    line-height: 1.65;
    margin-bottom: 2.4rem;
}

/* Image area — lime green background, rounded top corners */
.home-paradise__card-img-wrap {
    overflow: hidden;
    margin: 23px 0rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.home-paradise__card-img-wrap img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.4s ease;
}

.home-paradise__card:hover .home-paradise__card-img-wrap img {
    /* transform: scale(1.04) translateY(-0.4rem); */
}

/* ==============================
   RESPONSIVE
============================== */

/* ==============================
   FEATURED PRODUCTS
============================== */
.home-featured {
    padding: 5rem 0;
    overflow: hidden;
}

/* Head */
.home-featured__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.8rem;
}

.home-featured__title {
    font-size: 3.8rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
}

.home-featured__see-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 3.3rem;
    font-weight: 600;
    color: rgba(88, 28, 220, 1);
    text-decoration: none;
    transition: gap 0.2s ease;
}

.home-featured__see-all:hover {
    gap: 1rem;
    color: rgba(88, 28, 220, 1);
}

/* Swiper overrides */
.home-featured__swiper {
    overflow: visible !important;
    padding-bottom: 0.5rem;
}

.home-featured__swiper .swiper-wrapper {
    align-items: stretch;
}

.home-featured__swiper .swiper-slide {
    width: 30rem;
    height: auto;
}

/* Card fills slide */
.home-featured__swiper .product-card {
    height: 100%;
}

/* ==============================
   RESPONSIVE
============================== */

/* ==============================
   COMFORT CRAFTED FOR COMPANIONS
============================== */
.home-comfort {
    padding: 4rem 0;
}

.home-comfort__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
}

/* ── LEFT ── */
.home-comfort__left {
    background: rgba(255, 255, 255, 1);
    border: 0.3rem solid rgba(0, 0, 0, 1);
    border-radius: 9rem;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.home-comfort__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
}

.home-comfort__title {
    font-size: 3.8rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    line-height: 1.3;
}

.home-comfort__see-all {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 3.23rem;
    font-weight: 600;
    color: rgba(88, 28, 220, 1);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: gap 0.2s ease;
}

.home-comfort__see-all:hover {
    gap: 0.8rem;
    color: rgba(88, 28, 220, 1);
}

/* 2x2 collar grid */
.home-comfort__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    flex: 1;
}

.home-comfort__collar-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-comfort__collar-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.home-comfort__collar-item img {
    width: 100%;
    max-width: 30rem;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

.home-comfort__collar-item:hover img {
    transform: scale(1.06) translateY(-0.3rem);
}

/* ── RIGHT ── */
.home-comfort__right {
    background: rgba(210, 241, 77, 1);
    border: 0.3rem solid rgba(0, 0, 0, 1);
    border-radius: 9rem;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    min-height: 44rem;
}

.home-comfort__main-img-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.home-comfort__main-img {
    width: 100%;
    max-width: 55rem;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.4s ease;
}

.home-comfort__right:hover .home-comfort__main-img {
    transform: scale(1.03) translateY(-0.4rem);
}

.home-page-btn {
    width: 100%;
    max-width: 40rem;
    justify-content: center;
    color: rgba(0, 0, 0, 1);
    box-shadow: 0 0.8rem 0 0 rgba(0, 0, 0, 1);
}

/* ── Responsive ── */

/* ==============================
   OFFER SLIDER
============================== */
/* ==============================
   OFFER SLIDER
============================== */
.home-offer {
    padding: 4rem 0;
}

.home-offer__swiper {
    width: 100%;
    overflow: visible;
}

.home-offer__swiper .swiper-wrapper {
    align-items: stretch;
}

.home-offer__swiper .swiper-slide {
    width: calc(100% - 6rem) !important;
    border-radius: 9rem;
    overflow: hidden;
}

/* ── Slide inner ── */
.home-offer__slide {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 80rem;
    overflow: hidden;
    border-radius: 9rem;
    padding: 6rem 6rem 0 4rem;
}

.home-offer__slide--purple {
    background: rgba(47, 47, 228, 1);
}

.home-offer__slide--lime {
    background: rgba(210, 241, 77, 1);
    border: 0.3rem solid rgba(0, 0, 0, 1);
}

/* ── BG watermark ── */
.home-offer__bg-text {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 44.7rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.08);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    letter-spacing: 0.5rem;
    z-index: 0;
    line-height: 1;
}

/* ── Paw bg shapes — slide 2 ── */
.home-offer__shape {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.home-offer__shape--01 {
    right: 31%;
    top: 50%;
    --base-transform: translateY(-50%);
    transform: var(--base-transform);
    transition: transform 0.3s ease;
    width: 43rem;
    height: auto;

}
.home-offer__slide--lime:has(.paw-btn:hover) .home-offer__shape--01  {
    transform: var(--base-transform) rotate(30deg);
    -webkit-transform: var(--base-transform) rotate(30deg);
    -moz-transform: var(--base-transform) rotate(30deg);
    -ms-transform: var(--base-transform) rotate(30deg);
    -o-transform: var(--base-transform) rotate(30deg);
}
.home-offer__slide--lime:has(.paw-btn:hover) .home-offer__shape--02  {
    transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
}
.home-offer__shape--02 {
    right: 0%;
    bottom: 19%;
    width: 43rem;
    height: auto;
    transition: transform 0.3s ease;
}

/* ── Animated paw path ── */
.home-offer__paw-path {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.home-offer__paw-stroke {
    transition: stroke-dashoffset 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.swiper-slide-active .home-offer__paw-stroke {
    stroke-dashoffset: 0;
}

/* ── Pet images ── */
.home-offer__pet-wrap {
    position: absolute;
    bottom: 0;
    left: 5%;
    width: 70rem;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    transition: transform 0.3s ease;
}

.home-offer__pet-wrap--right {
    left: auto;
    right: 8%;
    width: 70rem;
}

.home-offer__pet {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}
.home-offer__slide--lime:has(.paw-btn:hover) .home-offer__pet-wrap--right .home-offer__pet{
    transform: scale(1.15);
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -ms-transform: scale(1.15);
    -o-transform: scale(1.15);
}
.home-offer__slide--lime:has(.paw-btn:hover)  .home-offer__badge{
    transform: scale(1.1);
}
/* ── Pet bounce ── */
/* .home-offer__pet-wrap.pet-bounce .home-offer__pet {
    animation: offerPetBounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
} */

@keyframes offerPetBounce {
    0%   { transform: translateY(0) scale(1); }
    30%  { transform: translateY(-2.4rem) scale(1.05); }
    55%  { transform: translateY(-1rem) scale(1.02); }
    75%  { transform: translateY(-1.8rem) scale(1.04); }
    100% { transform: translateY(0) scale(1); }
}

/* ── Content block ── */
.home-offer__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 5rem;
    margin-left: 82rem;
    align-items: flex-start;
    min-width: 30rem;
    padding-right: 4rem;
}

.home-offer__content--lime {
    margin-left: 0;
    margin-right: auto;
    padding-left: 11rem;
    padding-right: 0;
}

/* ── Badge ── */
.home-offer__badge {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    line-height: 1;
    transition: transform 0.3s ease;
}
.home-offer__pet-wrap img {
    transition: transform 0.5s ease;
    -webkit-transition: transform 0.5s ease;
    -moz-transition: transform 0.5s ease;
    -ms-transition: transform 0.5s ease;
    -o-transition: transform 0.5s ease;
}
.home-offer__slide--purple:has(.paw-btn:hover) .home-offer__pet-wrap img {
    transform: translateY(10rem);
    -webkit-transform: translateY(10rem);
    -moz-transform: translateY(10rem);
    -ms-transform: translateY(10rem);
    -o-transform: translateY(10rem);
}

.home-offer__slide--purple:has(.paw-btn:hover) .home-offer__badge {
    transform: scale(1.1);
}
.home-offer__pct {
    font-size: 16.44rem;
    font-weight: 900;
    color: rgba(210, 241, 77, 1);
    line-height: 1;
}

.home-offer__pct sup {
    font-size: 8.4rem;
    vertical-align: super;
}

.home-offer__pct--purple {
    color: rgba(47, 47, 228, 1);
}

.home-offer__off {
    font-size: 6rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
    padding-bottom: 2rem;
    letter-spacing: 0.08rem;
}

.home-offer__off--dark {
    color: rgba(0, 0, 0, 1);
}

/* ── Title ── */
.home-offer__title {
    font-size: 10rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    line-height: 1;
}

.home-offer__title--dark {
    color: rgba(0, 0, 0, 1);
}

/* ── Button ── */
.home-offer__btn:hover {
    transform: translateY(0.3rem);
    box-shadow: 0 0.2rem 0 0 rgba(0, 0, 0, 1);
}

/* ── Pagination ── */
.home-offer__pagination {
    position: relative;
    bottom: auto;
    margin-top: 1.6rem;
    text-align: center;
}

.home-offer__pagination .swiper-pagination-bullet {
    width: 1rem;
    height: 1rem;
    background: rgba(0, 0, 0, 0.2);
    opacity: 1;
    border-radius: 5rem;
    transition: all 0.3s ease;
}

.home-offer__pagination .swiper-pagination-bullet-active {
    background: rgba(0, 0, 0, 1);
    width: 2.8rem;
}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */

/* ── MOBILE: content top, pet bottom ── */

/* ==============================
   FILLING PET LIVES WITH LITTLE WONDERS
============================== */
.home-wonders {
    padding: 4rem 0;
    position: relative;
}

.home-wonders__card {
    border: 0.3rem solid rgba(0, 0, 0, 1);
    border-radius: 9rem;
    padding: 7rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.home-wonders-bg {
    position: absolute;
    top: 25rem;
    z-index: -1;
}

/* ── Paw prints ── */
.home-wonders__paw-left {
    position: absolute;
    top: 18rem;
    left: 3rem;
    width: 13rem;
    height: auto;
    pointer-events: none;
    z-index: 0;
}

.home-wonders__paw-right {
    position: absolute;
    right: 2rem;
    top: 53%;
    transform: translateY(-50%);
    width: 22rem;
    height: auto;
    pointer-events: none;
    z-index: 0;
}

/* ── Title ── */
.home-wonders__title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 2rem;
}

.home-wonders__title-row1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
}

.home-wonders__asterisk {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
}

.home-wonders__title-line1 {
    font-size: 3.2rem;
    font-weight: 700;
    color: rgba(49, 49, 49, 1);
    line-height: 1.2;
}

.home-wonders__title-row2 {
    display: flex;
    justify-content: center;
}

.home-wonders__title-pill {
    display: inline-block;
    font-size: 6rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    border: 0.3rem solid rgba(210, 241, 77, 1);
    border-radius: 9rem;
    padding: 0.6rem 3.2rem;
    line-height: 1.4;
    background: transparent;
}

/* ── Body ── */
.home-wonders__body {
    position: relative;
    width: 100%;
    min-height: 56rem;
    z-index: 2;
}

/* ── Center dog ── */
.home-wonders__center {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    width: 40rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.home-wonders__dog {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ── Features ── */
.home-wonders__feature {
    position: absolute;
    max-width: 40rem;
    z-index: 3;
}

.home-wonders__feature-title {
    font-size: 3.8rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 0.8rem;
}

.home-wonders__feature-desc {
    font-size: 2rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    line-height: 1.65;
}

.home-wonders__feature--tl {
    left: 30rem;
    top: 6rem;
    text-align: center;
}

.home-wonders__feature--bl {
    left: 20rem;
    bottom: 8rem;
    text-align: right;
}

.home-wonders__feature--tr {
    right: 15rem;
    top: 16rem;
    text-align: left;
}

.home-wonders__feature--br {
    right: 10rem;
    bottom: 4rem;
    text-align: left;
}

/* ── CTA ── */
.home-wonders__cta {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
    margin-top: 3rem;
}

.home-wonders__btn {
    padding: 1.8rem 6rem;
    font-size: 2rem;
}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */

/* ==============================
   FEATURED PRODUCT DETAIL
============================== */
.home-fd {
    background: rgba(47, 47, 228, 1);
    padding: 0;
    overflow: hidden;
    margin-top: 4rem;
    position: relative;
}

.home-fd__inner {
    display: grid;
    grid-template-columns: 9rem 1fr 1fr;
    gap: 4rem;
    align-items: center;
    min-height: 80rem;
    padding: 5rem 0;
}

/* ── LEFT: Thumbnails ── */
.home-fd__thumbs {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    align-self: center;
}

.home-fd__thumb {
    width: 8.4rem;
    height: 8.4rem;
    border-radius: 1.6rem;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    flex-shrink: 0;
}

.home-fd__thumb--1 { background: rgba(255, 255, 255, 1); }
.home-fd__thumb--2 { background: rgba(255, 83, 123, 1); }
.home-fd__thumb--3 { background: rgba(255, 255, 255, 1); }

.home-fd__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.home-fd__thumb:hover {
    transform: scale(1.06);
    box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.25);
}

.home-fd__thumb.active {
    box-shadow: 0 0 0 0.3rem rgba(210, 241, 77, 1);
}

/* ── CENTER: Dog image ── */
.home-fd__img-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    align-self: stretch;
}

.home-fd__img {
    width: 100%;
    max-width: 55rem;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
    transition: opacity 0.3s ease;
    position: absolute;
    bottom: 0;
}

/* ── RIGHT: Info ── */
.home-fd__info {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    padding-left: 2rem;
}

.home-fd__see-all {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 3.8rem;
    font-weight: 600;
    color: rgba(210, 241, 77, 1);
    text-decoration: underline;
    text-underline-offset: 1rem;
    transition: opacity 0.2s ease;
}

.home-fd__see-all:hover {
    opacity: 0.8;
    color: #c8e63a;
}

.home-fd__tag {
    font-size: 6.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    line-height: 1;
    letter-spacing: 0.1rem;
}

.home-fd__subtitle {
    font-size: 3.8rem;
    font-weight: 400;
    color: rgba(212, 212, 212, 1);
    margin-top: -0.8rem;
}

.home-fd__name {
    font-size: 3.8rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 1.3;
}

.home-fd__price {
    font-size: 6.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 1;
}

.home-fd__desc {
    font-size: 2rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 1.7;
    max-width: 60rem;
}

.home-fd__btn {
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 1);
    border-color: rgba(0, 0, 0, 1);
    box-shadow: 0 0.6rem 0 0 rgba(0, 0, 0, 1);
    font-size: 2rem;
    padding: 1.8rem 0;
    width: 100%;
    max-width: 42rem;
    justify-content: center;
    margin-top: 0.8rem;
}

.home-fd__btn:hover {
    color: rgba(0, 0, 0, 1);
    box-shadow: 0 0.2rem 0 0 rgba(0, 0, 0, 1);
}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */

/* ==============================
   DEALS SECTION — POSITION FIX
============================== */
.home-deals {
    position: relative;
    padding: 0 0 6rem;
    overflow: hidden;
}

.home-deals__card__whole {
    position: relative;
}

.home-deals__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
    pointer-events: none;
}

.home-deals__bg-img {
    width: 100%;
    height: auto;
    display: block;
}

.home-deals .container {
    position: relative;
    z-index: 1;
}

/* ── Grid ── */
.home-deals__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem;
    align-items: start;
    padding-top: 6rem;
}

/* ── Card base ── */
.home-deals__card {
    background: rgba(255, 255, 255, 1);
    border: 0.3rem solid rgba(0, 0, 0, 1);
    border-radius: 9rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease;
}

.home-deals__card:hover {
    transform: translateY(-0.6rem);
}

/* Side cards pushed down on desktop */
.home-deals__card__whole:nth-child(1),
.home-deals__card__whole:nth-child(3) {
    margin-top: 6rem;
}

.home-deals__card--center {
    margin-top: 0;
    z-index: 2;
}

/* ── Card top ── */
.home-deals__card-top {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 5.8rem 5.8rem 2rem;
    position: relative;
}

.home-deals__badge {
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
}

.home-deals__pct {
    font-size: 8.4rem;
    font-weight: 700;
    color: #2f2fe4;
    line-height: 1;
    display: flex;
    align-items: flex-start;
    gap: 0.2rem;
}

.home-deals__pct sup {
    font-size: 3.2rem;
    font-weight: 700;
    vertical-align: super;
    line-height: 1;
    margin-top: 0.4rem;
}

.home-deals__off {
    font-size: 1.6rem;
    font-weight: 700;
    color: #2f2fe4;
    display: block;
    line-height: 1;
    padding-bottom: 0.4rem;
    align-self: flex-end;
}

.home-deals__title {
    font-size: 3rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    line-height: 1.25;
    flex: 1;
}

/* ── Arrow ── */
.home-deals__arrow {
    position: absolute;
    top: -2.8rem;
    right: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.home-deals__arrow svg {
    width: 8rem;
    height: 8rem;
    display: block;
}

.home-deals__arrow:hover {
    transform: scale(1.1) rotate(5deg);
}

/* ── Card image ── */
.home-deals__card-img-wrap {
    padding: 2rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.home-deals__card-img-wrap img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.home-deals__card:hover .home-deals__card-img-wrap img {
    transform: scale(1.04);
}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */

/* ==============================
   PREMIUM PET VEST SHOWCASE
============================== */
.common-bg-section{
    position: relative;
}
.common-bg{
    position: absolute;
    z-index: -1;
    top: 45%;
}
.home-showcase {
    padding: 5rem 0 6rem;
    position: relative;
}

/* Title */
.home-showcase__title-wrap {
    text-align: center;
    margin-bottom: 3rem;
}

.home-showcase__label {
    font-size: 3.8rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 0.6rem;
}

.home-showcase__title {
    font-size: 6.8rem;
    font-weight: 500;
    color: rgba(47, 47, 228, 1);
    text-decoration: underline;
    text-underline-offset: 0.5rem;
    line-height: 1.2;
}

/* Outer card */
.home-showcase__card {
    border: 0.302rem solid rgba(0, 0, 0, 1);
    border-radius: 9rem;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 50rem;
    align-items: stretch;
    /* background: rgba(255, 255, 255, 1); */
    position: relative;
    gap: 2rem;
    padding: 6rem;
}

/* ── LEFT: Two image cards ── */
.home-showcase__images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

/* Each dog image card */
.home-showcase__img-card {
    /* background: rgba(210, 241, 77, 1); */
    overflow: hidden;
    min-height: 52rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Gap between the two image cards */
.home-showcase__img-card:first-child {
    border-right: 0.15rem solid rgba(255, 255, 255, 0.3);
}

.home-showcase__img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    object-position: top center;
    display: block;
    transition: transform 0.4s ease;
}

.home-showcase__img-card:hover .home-showcase__img {
    /* transform: scale(1.03); */
}

/* ── RIGHT: Info card ── */
.home-showcase__info {
    border: 0.2rem solid rgba(0, 0, 0, 1);
    border-radius: 9rem;
    padding: 4rem 4rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    position: relative;
    background: rgba(255, 255, 255, 1);
    -webkit-border-radius: 9rem;
    -moz-border-radius: 9rem;
    -ms-border-radius: 9rem;
    -o-border-radius: 9rem;
}

/* Purple arrow top-right */
.home-showcase__arrow {
    position: absolute;
    top: -1.8rem;
    right: 2.4rem;
    display: flex;
    text-decoration: none;
    z-index: 3;
    transition: transform 0.3s ease;
}

.home-showcase__arrow svg {
    width: 6rem;
    height: 6rem;
    display: block;
}

.home-showcase__arrow:hover {
    transform: scale(1.1) rotate(5deg);
}

/* Vest product image */
.home-showcase__product-img-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
}

.home-showcase__product-img {
    width: 100%;
    max-width: 35rem;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Details */
.home-showcase__details {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.home-showcase__category {
    font-size: 2rem;
    font-weight: 500;
    color: rgba(132, 132, 132, 1);
}

.home-showcase__name {
    font-size: 3rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    line-height: 1.3;
}

.home-showcase__price {
    font-size: 4rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    line-height: 1;
}

.home-showcase__btn {
    width: 100%;
    justify-content: center;
    font-size: 1.9rem;
    padding: 1.6rem 2rem;
    margin-top: 0.4rem;
}

/* Nav buttons */
.home-showcase__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-top: 3rem;
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.home-showcase__nav-btn {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 1);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.home-showcase__nav-btn:hover {
    background: rgba(47, 47, 228, 1);
    transform: scale(1.08);
}

/* ── Responsive ── */

/* ==============================
   COZY COMPANIONS
============================== */
.home-cozy {
    padding: 4rem 0;
}

/* Outer card */
.home-cozy__card {
    border: 0.3rem solid rgba(0, 0, 0, 1);
    border-radius: 9rem;
    padding: 4rem 4rem 5rem;
    overflow: hidden;
}

/* Head */
.home-cozy__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4rem;
    gap: 2rem;
}

.home-cozy__title {
    font-size: 3.8rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
}

.home-cozy__see-all {
    font-size: 3.3rem;
    font-weight: 600;
    color: #2F2FE4;
    text-decoration: underline;
    text-underline-offset: 0.8rem;
    text-decoration-thickness: 0.2rem;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.home-cozy__see-all:hover {
    opacity: 0.75;
    color: #2F2FE4;
}

/* Products grid — 4 cols */
.home-cozy__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.4rem;
}

/* Each item */
.home-cozy__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

/* ── Image wrap: square ── */
.home-cozy__item-img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 2.4rem;
}

.home-cozy__item-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.home-cozy__item:hover .home-cozy__item-img {
    transform: translateY(-1rem) scale(1.06);
}

/* Name */
.home-cozy__item-name {
    font-size: 2.4rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    line-height: 1.35;
    max-width: 40rem;
}

/* Arrow button */
.home-cozy__item-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.home-cozy__item-arrow svg {
    width: 6rem;
    height: 6rem;
    display: block;
}

.home-cozy__item-arrow:hover {
    transform: scale(1.12) rotate(5deg);
}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */

/* ==============================
   SUNSHINE MEETS PLAYTIME
============================== */
.home-sunshine {
    padding: 4rem 0;
    position: relative;
}

/* Purple outer card */
.home-sunshine__card {
    background: rgba(47, 47, 228, 1);
    border-radius: 9rem;
    padding: 4rem 4rem 5rem;
    overflow: hidden;
}

/* Head */
.home-sunshine__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3.6rem;
    gap: 2rem;
}

.home-sunshine__title {
    font-size: 3.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
}

.home-sunshine__see-all {
    font-size: 3.3rem;
    font-weight: 600;
    color: #c8e63a;
    text-decoration: underline;
    text-underline-offset: 0.8rem;
    text-decoration-thickness: 0.2rem;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.home-sunshine__see-all:hover {
    opacity: 0.8;
    color: #c8e63a;
}

/* Swiper */
.home-sunshine__swiper {
    overflow: hidden;
}

.home-sunshine__swiper .swiper-slide {
    height: auto;
}

/* Each item card */
.home-sunshine__item {
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.home-sunshine__item:hover {
    transform: translateY(-0.5rem);
}

.home-sunshine__item-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 1.5rem;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.home-sunshine__item:hover .home-sunshine__item-img {
    transform: scale(1.05);
}

/* ── Nav buttons — in normal flow below card ── */
.home-sunshine__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-top: 2.4rem;
    position: static; /* removed absolute — stays in flow */
    transform: none;
}

.home-sunshine__nav-btn {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 1);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.home-sunshine__nav-btn:hover {
    background: #2F2FE4;
    transform: scale(1.08);
}

.logout-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.logout-modal-overlay.is-open {
    display: flex;
}

/* ===== BODY SCROLL LOCK (for popups/modals) STYLES START ===== */

body.no-scroll {
    position: fixed;
    top: var(--scroll-lock-offset, 0);
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

/* ===== BODY SCROLL LOCK STYLES END ===== */

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */

/* ==============================
   FURNITURE PRODUCT SECTION
============================== */
.home-furniture {
    padding: 4rem 0 2rem;
}

/* Card */
.home-furniture__card {
    border: 0.2rem solid rgba(0, 0, 0, 1);
    border-radius: 4rem;
    background: rgba(255, 255, 255, 1);
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    align-items: center;
    overflow: hidden;
    min-height: 44rem;
}

/* ── Left: Info ── */
.home-furniture__info {
    padding: 6rem 4rem 6rem 8rem;
    display: flex;
    flex-direction: column;
    gap: 2.6rem;
}

.home-furniture__label {
    font-size: 3.8rem;
    font-weight: 500;
    color: rgba(132, 132, 132, 1);
}

.home-furniture__name {
    font-size: 3.8rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    line-height: 1.25;
}

.home-furniture__price {
    font-size: 6.8rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    line-height: 1;
    margin-top: 0.4rem;
}

.home-furniture__btn {
    font-size: 1.9rem;
    padding: 1.8rem 3rem;
    justify-content: center;
    width: 100%;
    max-width: 38rem;
    margin-top: 0.8rem;
}

/* ── Right: Product image ── */
.home-furniture__img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 5rem 4rem 2rem;
    height: 100%;
}

.home-furniture__img {
    width: 100%;
    max-width: 56rem;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.home-furniture__card:hover .home-furniture__img {
    transform: scale(1.03) translateY(-0.5rem);
}

/* ── Nav buttons ── */
.home-furniture__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-top: -2.8rem;
    position: relative;
    z-index: 2;
}

.home-furniture__nav-btn {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 1);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.home-furniture__nav-btn:hover {
    background: #2F2FE4;
    transform: scale(1.08);
}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */

/* ==============================
   NEWSLETTER — JOIN PAWVERA
============================== */
.home-newsletter {
    padding: 4rem 0 6rem;
    position: relative;
}
.our-blog-newsletter{
    position: absolute;
    z-index: -1;
    top: 0rem;
}

/* Outer card */
.home-newsletter__card {
    border: 0.3rem solid rgba(0, 0, 0, 1);
    border-radius: 3rem;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    background: rgba(255, 255, 255, 1);
}

/* ── LEFT: bg image panel ── */
.home-newsletter__left {
    background-image: url(../images/hero/subscribe-main-image.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 80rem;
    overflow: hidden;
    margin: 2rem;
    border-radius: 2rem;
}

/* PAWVERA brand text */
.home-newsletter__brand {
    position: absolute;
    top: 4rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9.9rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 1);
    letter-spacing: 0.1rem;
    line-height: 1;
    z-index: 2;
    user-select: none;
    white-space: nowrap;
}

/* ── RIGHT: White form area ── */
.home-newsletter__right {
    padding: 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    text-align: center;
    background: rgba(255, 255, 255, 1);
}

/* Title */
.home-newsletter__title {
    font-size: 6rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    line-height: 1.15;
}

/* Description */
.home-newsletter__desc {
    font-size: 2.4rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    line-height: 1.6;
    max-width: 50rem;
}

/* Form */
.home-newsletter__form {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    width: 100%;
    max-width: 60rem;
    margin-top: 1rem;
}

/* Email input */
.home-newsletter__input {
    width: 100%;
    padding: 1.8rem 2.8rem;
    border-radius: 9rem;
    border: 0.3rem solid rgba(0, 0, 0, 1);
    background: rgba(239, 239, 239, 1);
    font-family: var(--font);
    font-size: 2.4rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.home-newsletter__input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.home-newsletter__input:focus {
    border-color: rgba(0, 0, 0, 0.35);
    background: rgba(255, 255, 255, 1);
}

/* Button */
.home-newsletter__btn {
    width: 100%;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    padding: 1.8rem 3rem;
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 1);
    border-color: rgba(0, 0, 0, 1);
    box-shadow: 0 0.6rem 0 0 rgba(0, 0, 0, 1);
}

.home-newsletter__btn:hover {
    color: rgba(0, 0, 0, 1);
    box-shadow: 0 0.2rem 0 0 rgba(0, 0, 0, 1);
}

.product-card-name{
    width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-wonders__title-line1{
    font-weight: 400;
}
/* .home-wonders__center{
        width: 35rem;
} */
.home-cozy__item-name{
    max-width: 30rem;
}

.furniture-common-bg-sec {
    position: relative;
}
.home-furniture-bg {
    position: absolute;
    z-index: -1;
    bottom: 10rem;
    height: 100%;
    width: 100%;

}
.home-furniture__card{
    background-color: unset;
}
.home-newsletter__title{
    max-width: 55rem;
}


.offer-badge{
    display: flex
;
    flex-direction: column;
}
.home-deals__off{
    font-size: 3.2rem;
    align-self: unset;
}

.home-deals-text{
    color: rgba(49, 49, 49, 1);
}
.home-deals__card-top{
    gap: 2.2rem;
}
.home-deals__title{
    font-weight: 600;
    color: rgba(49, 49, 49, 1);
    font-size: 2.8Chase Joyrem;
}
.home-offer__pct{
    display: flex;
    align-items: center;
}
.home-deals_off_percentage{
    font-size: 8.4rem;
}
.percentage-color-change{
    color: rgba(210, 241, 77, 1);
}
.home-paradise-common-bg-sec{
    position: relative;
}
.home-paradise-common-bg{
    position: absolute;
    z-index: -1;
    top: 12%;
}
.home-paradise__card{
    background: rgba(255, 255, 255, 1);
}
.home-wonders__feature{
    max-width: 42rem;
}
.home-wonders__feature-desc{

}
.home-deals__title{
    font-size: 2.6rem;
}
@media (min-width: 1401px) and (max-width: 1600px){
    .home-wonders__feature--tr {
        right: -2rem;
        top: 15rem;
    }
    .home-wonders__feature--bl {
        left: 8rem;
        bottom: 8rem;
    }
    .home-wonders__feature--tl {
        left: 16rem;
        top: 6rem;
    }
    .home-wonders__feature--br{
        right: 3rem;
    }
}

@media (min-width: 1536px) and (max-width: 1695px) {
    .logo img {
        max-width: 180px;
    }
}