/* ==========================================================
   PHIUM COMMUNITY / INSTAGRAM SECTION
   ========================================================== */

.phium-community-section {
    position: relative;
    overflow: hidden;

    padding: 88px 24px;

    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(194, 139, 104, 0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 90%,
            rgba(140, 90, 61, 0.05),
            transparent 28%
        ),
        #f8f3ee;
}

.phium-community-inner {
    width: min(1240px, 100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(500px, 1.08fr);

    gap: 68px;

    align-items: center;
}


/* ==========================================================
   LEFT CONTENT
   ========================================================== */

.phium-community-content {
    min-width: 0;
}

.phium-community-eyebrow {
    display: block;

    margin-bottom: 11px;

    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;

    letter-spacing: 0.18em;

    color: #c28b68;
}

.phium-community-content h2 {
    max-width: 620px;

    margin: 0 0 22px;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(46px, 5vw, 68px);
    font-weight: 600;
    line-height: 0.96;

    letter-spacing: -0.025em;

    color: #2d1f1a;
}

.phium-community-lead {
    max-width: 620px;

    margin: 0 0 32px;

    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.85;

    color: #5f4b42;
}


/* ==========================================================
   FEATURE CARDS
   ========================================================== */

.phium-community-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 14px;

    margin-bottom: 30px;
}

.phium-community-card {
    min-height: 132px;

    padding: 20px 14px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    background: rgba(255, 255, 255, 0.78);

    border: 1px solid #eaded4;
    border-radius: 15px;

    box-shadow:
        0 8px 24px rgba(45, 31, 26, 0.055);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.phium-community-card:hover {
    transform: translateY(-4px);

    border-color: rgba(194, 139, 104, 0.60);

    box-shadow:
        0 14px 34px rgba(45, 31, 26, 0.09);
}

.phium-community-icon {
    display: block;

    margin-bottom: 8px;

    font-size: 23px;
    line-height: 1;

    color: #c28b68;
}

.phium-community-card strong {
    display: block;

    font-family: "Cormorant Garamond", serif;
    font-size: 25px;
    font-weight: 600;
    line-height: 1;

    color: #2d1f1a;
}

.phium-community-card > span:last-child {
    display: block;

    margin-top: 6px;

    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;

    letter-spacing: 0.02em;

    color: #8c5a3d;
}


/* ==========================================================
   BENEFITS
   ========================================================== */

.phium-community-benefits {
    display: flex;
    flex-direction: column;

    gap: 12px;

    margin: 0 0 29px;
}

.phium-community-benefits > div {
    display: flex;
    align-items: center;

    gap: 11px;

    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;

    color: #5f4b42;
}

.phium-community-benefits span {
    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 13px;

    border-radius: 50%;

    background: rgba(194, 139, 104, 0.13);

    color: #c28b68;
}


/* ==========================================================
   INSTAGRAM CTA
   ========================================================== */

.phium-instagram-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    min-height: 48px;

    padding: 13px 22px;

    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;

    text-decoration: none !important;

    color: #ffffff !important;
    background: #2d1f1a;

    border: 1px solid #2d1f1a;
    border-radius: 8px;

    box-shadow:
        0 7px 18px rgba(45, 31, 26, 0.12);

    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.phium-instagram-button:hover {
    color: #ffffff !important;

    background: #8c5a3d;
    border-color: #8c5a3d;

    transform: translateY(-2px);

    box-shadow:
        0 10px 24px rgba(45, 31, 26, 0.16);
}

.phium-instagram-button span {
    font-size: 18px;
    line-height: 1;
}


/* ==========================================================
   INSTAGRAM PANEL
   ========================================================== */

.phium-instagram-panel {
    min-width: 0;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #eaded4;
    border-radius: 18px;

    box-shadow:
        0 20px 55px rgba(45, 31, 26, 0.11);
}


/* ==========================================================
   INSTAGRAM HEADER
   ========================================================== */

.phium-instagram-header {
    min-height: 88px;

    padding: 16px 20px;

    display: flex;
    align-items: center;

    gap: 13px;

    text-decoration: none !important;

    color: inherit !important;
    background: #ffffff;

    border-bottom: 1px solid #f0e6de;

    transition: background 0.2s ease;
}

.phium-instagram-header:hover {
    color: inherit !important;

    background: #fdfaf8;
}

.phium-instagram-avatar {
    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "Cormorant Garamond", serif;
    font-size: 29px;
    font-weight: 600;
    line-height: 1;

    color: #2d1f1a;

    background: #f8f3ee;

    border: 2px solid #c28b68;
    border-radius: 50%;
}

.phium-instagram-profile {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.phium-instagram-profile strong {
    overflow: hidden;

    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;

    color: #2d1f1a;

    text-overflow: ellipsis;
    white-space: nowrap;

    transition: color 0.2s ease;
}

.phium-instagram-profile span {
    margin-top: 2px;

    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 400;

    color: #8c776e;
}

.phium-instagram-header:hover
.phium-instagram-profile strong {
    color: #8c5a3d;
}

.phium-instagram-mark {
    margin-left: auto;

    font-size: 26px;
    line-height: 1;

    color: #c28b68;
}


/* ==========================================================
   INSTAGRAM GRID
   ========================================================== */

.phium-instagram-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 2px;

    background: #f8f3ee;
}

.phium-instagram-post {
    position: relative;

    display: block;

    min-width: 0;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    text-decoration: none !important;

    background: #f1ebe6;
}

.phium-instagram-post img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.45s ease,
        filter 0.35s ease;
}

.phium-instagram-post:hover img {
    transform: scale(1.055);
}

.phium-post-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 28px;

    color: #ffffff;

    background: rgba(45, 31, 26, 0);

    opacity: 0;

    transition:
        opacity 0.25s ease,
        background 0.25s ease;
}

.phium-instagram-post:hover
.phium-post-overlay {
    opacity: 1;

    background: rgba(45, 31, 26, 0.34);
}


/* ==========================================================
   INSTAGRAM FOOTER
   ========================================================== */

.phium-instagram-footer {
    min-height: 60px;

    padding: 15px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    text-decoration: none !important;

    color: inherit !important;
    background: #ffffff;

    transition: background 0.2s ease;
}

.phium-instagram-footer:hover {
    color: inherit !important;

    background: #fdfaf8;
}

.phium-instagram-footer strong {
    font-family: "Cormorant Garamond", serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;

    color: #2d1f1a;

    transition: color 0.2s ease;
}

.phium-instagram-footer:hover strong {
    color: #8c5a3d;
}

.phium-instagram-footer span {
    flex-shrink: 0;

    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 500;

    color: #c28b68;
}


/* ==========================================================
   TABLET / IPAD
   ========================================================== */

@media (max-width: 1024px) {

    .phium-community-section {
        padding: 70px 28px;
    }

    .phium-community-inner {
        grid-template-columns: 1fr;

        gap: 46px;
    }

    .phium-community-content {
        max-width: 760px;
    }

    .phium-community-content h2 {
        max-width: 700px;
    }

    .phium-community-lead {
        max-width: 700px;
    }

    .phium-instagram-panel {
        width: min(720px, 100%);
    }
}


/* ==========================================================
   SMALL TABLET
   ========================================================== */

@media (max-width: 767px) {

    .phium-community-section {
        padding: 54px 18px;
    }

    .phium-community-inner {
        gap: 36px;
    }

    .phium-community-eyebrow {
        margin-bottom: 9px;

        font-size: 11px;
    }

    .phium-community-content h2 {
        margin-bottom: 18px;

        font-size: 43px;
        line-height: 0.98;
    }

    .phium-community-lead {
        margin-bottom: 26px;

        font-size: 14px;
        line-height: 1.75;
    }


    /* Feature cards */

    .phium-community-cards {
        grid-template-columns: 1fr;

        gap: 10px;

        margin-bottom: 26px;
    }

    .phium-community-card {
        min-height: 82px;

        padding: 13px 16px;

        display: grid;
        grid-template-columns: 38px 1fr;
        grid-template-rows: auto auto;

        column-gap: 10px;

        text-align: left;
    }

    .phium-community-icon {
        grid-row: 1 / 3;

        margin: 0;

        align-self: center;

        font-size: 22px;
    }

    .phium-community-card strong {
        font-size: 22px;
    }

    .phium-community-card > span:last-child {
        margin-top: 2px;
    }


    /* Benefits */

    .phium-community-benefits {
        gap: 10px;

        margin-bottom: 25px;
    }

    .phium-community-benefits > div {
        align-items: flex-start;

        font-size: 13px;
    }


    /* CTA */

    .phium-instagram-button {
        width: 100%;

        min-height: 49px;
    }


    /* Instagram panel */

    .phium-instagram-panel {
        width: 100%;

        border-radius: 14px;
    }

    .phium-instagram-header {
        min-height: 76px;

        padding: 13px 14px;
    }

    .phium-instagram-avatar {
        width: 46px;
        height: 46px;

        flex-basis: 46px;

        font-size: 25px;
    }

    .phium-instagram-mark {
        font-size: 23px;
    }

    .phium-instagram-footer {
        min-height: 55px;

        padding: 13px 14px;
    }

    .phium-instagram-footer strong {
        font-size: 17px;
    }

    .phium-instagram-footer span {
        font-size: 10px;
    }
}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 420px) {

    .phium-community-section {
        padding-left: 15px;
        padding-right: 15px;
    }

    .phium-community-content h2 {
        font-size: 38px;
    }

    .phium-instagram-profile strong {
        font-size: 12px;
    }

    .phium-instagram-profile span {
        font-size: 11px;
    }

    .phium-instagram-footer {
        gap: 8px;
    }

    .phium-instagram-footer strong {
        font-size: 16px;
    }

    .phium-instagram-footer span {
        font-size: 9px;
    }
}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

.phium-instagram-button:focus-visible,
.phium-instagram-header:focus-visible,
.phium-instagram-post:focus-visible,
.phium-instagram-footer:focus-visible {
    outline: 2px solid #c28b68;
    outline-offset: 3px;
}
/* ==========================================================
   PHIUM COMMUNITY — FINAL DESKTOP REFINEMENT
   ========================================================== */

@media (min-width: 1025px) {

    .phium-community-section {
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .phium-community-inner {
        width: min(1280px, 100%);

        grid-template-columns:
            minmax(0, 0.88fr)
            minmax(520px, 1.12fr);

        gap: 52px;
    }

    .phium-community-lead {
        margin-bottom: 27px;
    }

    .phium-community-cards {
        margin-bottom: 25px;
    }

    .phium-community-card {
        min-height: 124px;
    }

    .phium-community-card > span:last-child {
        font-size: 12px;
    }

    .phium-community-benefits {
        margin-bottom: 25px;
    }

    .phium-instagram-panel {
        max-width: 650px;
        justify-self: end;
    }
}
/* ==========================================================
   PHIUM COMMUNITY — FINAL MOBILE REFINEMENT
   ========================================================== */

@media (max-width: 767px) {

    .phium-community-section {
        padding: 42px 16px 46px;
    }

    .phium-community-inner {
        gap: 28px;
    }

    .phium-community-eyebrow {
        margin-bottom: 8px;

        font-size: 9px;
        letter-spacing: 0.16em;
    }

    .phium-community-content h2 {
        max-width: 100%;

        margin-bottom: 14px;

        font-size: clamp(31px, 9vw, 39px);
        line-height: 0.94;
        letter-spacing: -0.025em;
    }

    .phium-community-lead {
        margin-bottom: 20px;

        font-size: 12px;
        line-height: 1.65;
    }


    /* Keep the 3 features side-by-side on mobile */

    .phium-community-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 7px;

        margin-bottom: 20px;
    }

    .phium-community-card {
        min-height: 76px;

        padding: 10px 5px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        text-align: center;

        border-radius: 10px;
    }

    .phium-community-icon {
        margin: 0 0 5px;

        font-size: 15px;
        line-height: 1;
    }

    .phium-community-card strong {
        font-size: 17px;
        line-height: 1;
    }

    .phium-community-card > span:last-child {
        margin-top: 4px;

        font-size: 8px;
        line-height: 1.2;
    }


    /* Benefits */

    .phium-community-benefits {
        gap: 7px;

        margin-bottom: 18px;
    }

    .phium-community-benefits > div {
        gap: 8px;

        font-size: 10px;
        line-height: 1.4;
    }

    .phium-community-benefits span {
        width: 22px;
        height: 22px;

        flex-basis: 22px;

        font-size: 9px;
    }


    /* CTA */

    .phium-instagram-button {
        width: auto;

        min-height: 40px;

        padding: 10px 15px;

        gap: 10px;

        font-size: 10px;

        border-radius: 6px;
    }

    .phium-instagram-button span {
        font-size: 14px;
    }


    /* Instagram panel */

    .phium-instagram-panel {
        border-radius: 12px;
    }

    .phium-instagram-header {
        min-height: 60px;

        padding: 9px 11px;

        gap: 9px;
    }

    .phium-instagram-avatar {
        width: 38px;
        height: 38px;

        flex-basis: 38px;

        font-size: 21px;
    }

    .phium-instagram-profile strong {
        font-size: 10px;
    }

    .phium-instagram-profile span {
        margin-top: 1px;

        font-size: 8px;
    }

    .phium-instagram-mark {
        font-size: 18px;
    }

    .phium-instagram-grid {
        gap: 1px;
    }

    .phium-instagram-footer {
        min-height: 45px;

        padding: 10px 11px;
    }

    .phium-instagram-footer strong {
        font-size: 14px;
    }

    .phium-instagram-footer span {
        font-size: 8px;
    }
}


/* Very small phones */

@media (max-width: 380px) {

    .phium-community-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .phium-community-content h2 {
        font-size: 30px;
    }

    .phium-community-card strong {
        font-size: 15px;
    }

    .phium-community-card > span:last-child {
        font-size: 7px;
    }
}

/* ==========================================================
   PHIUM A11Y CONTRAST V1
   Homepage accessibility contrast corrections
   ========================================================== */

/* Header cart count */
body.home #header .ct-dynamic-count-cart {
    background: #8c5a3d !important;
    color: #ffffff !important;
}

/* Mobile current / hover menu */
@media (max-width: 999.98px) {
    body.home #offcanvas .mobile-menu li.current-menu-item > a,
    body.home #offcanvas .mobile-menu li.current_page_item > a,
    body.home #offcanvas .mobile-menu a:hover,
    body.home #offcanvas .ct-menu-link:hover {
        color: #8c5a3d !important;
    }
}

/* Product card promotional badge */
body.home .wp-block-woocommerce-product-collection
.wc-block-product
.phium-card-promo-badge {
    background: #8c5a3d !important;
    color: #ffffff !important;
}

/* Quick Buy muted labels */
body.home .wp-block-woocommerce-product-collection
.wc-block-product
.phium-quick-buy-label {
    color: #5f4b42 !important;
}

/* Selected Quick Buy option */
body.home .wp-block-woocommerce-product-collection
.wc-block-product
button.phium-quick-buy-size.is-selected,
body.home .wp-block-woocommerce-product-collection
.wc-block-product
button.phium-quick-buy-size.is-selected .phium-quick-buy-size-name,
body.home .wp-block-woocommerce-product-collection
.wc-block-product
.phium-quick-buy-size-check,
body.home .wp-block-woocommerce-product-collection
.wc-block-product
.phium-quick-buy-best-value {
    color: #8c5a3d !important;
}

/* Main Quick Buy CTA */
body.home .wp-block-woocommerce-product-collection
.wc-block-product
button.phium-quick-buy-add {
    background: #8c5a3d !important;
    border-color: #8c5a3d !important;
    color: #ffffff !important;
}

/* PHIUM Community accent text/icons */
body.home .phium-community-eyebrow,
body.home .phium-community-icon,
body.home .phium-instagram-mark,
body.home .phium-instagram-profile span {
    color: #8c5a3d !important;
}

/* Newsletter CTA */
body.home #wpforms-submit-34 {
    background: #8c5a3d !important;
    border-color: #8c5a3d !important;
    color: #ffffff !important;
}

/* Explore Collections CTA */
body.home .wp-block-buttons .wp-block-button__link {
    background: #8c5a3d !important;
    border-color: #8c5a3d !important;
    color: #ffffff !important;
}

/* Keyboard skip link */
body.home a.skip-link {
    color: #5f4b42 !important;
}