/* =========================================================
   MIHA — PREMIUM CROCHET WEBSITE
========================================================= */

:root {

    --pink: #f7c7d2;
    --pink-light: #fff0f4;
    --pink-soft: #ffdce5;
    --pink-dark: #d00000;

    --blue: #e77b8d;
    --blue-light: #fff5f7;
    --blue-soft: #ffdce5;
    --blue-dark: #9d0010;

    --cream: #fff8fa;
    --white: #ffffff;

    --text: #3f151b;
    --text-light: #765861;

    --dark: #57000b;

    --shadow:
        0 25px 70px rgba(120, 0, 20, 0.13);

    --shadow-soft:
        0 15px 40px rgba(120, 0, 20, 0.09);

    --radius: 28px;
}


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


html {
    scroll-behavior: smooth;
}


body {

    font-family: "Manrope", "Segoe UI", sans-serif;

    color: var(--text);

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(249,209,217,.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(131,143,88,.16),
            transparent 25%
        ),
        var(--cream);

    letter-spacing: -0.01em;
    line-height: 1.7;

    overflow-x: hidden;
}


h1,
h2,
h3,
h4,
.logo-main,
.logo-sub,
.loading-logo,
.mobile-menu a,
.photo-upload-box strong {
    font-family: "Playfair Display", "Cormorant Garamond", serif !important;
}


button,
input,
textarea {
    font-family: inherit;
}


button {
    cursor: pointer;
}


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


/* =========================================================
   LOADING
========================================================= */

.connection-warning {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 10000;

    background: #8f0012;

    color: white;

    padding: 12px 20px;

    font-size: 12px;

    font-weight: 700;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    text-align: center;
}


.connection-warning-detail {

    font-weight: 400;

    opacity: .8;

    font-size: 11px;
}


.loading-screen {

    position: fixed;

    inset: 0;

    z-index: 9999;

    background:
        linear-gradient(
            135deg,
            var(--pink-light),
            var(--blue-light)
        );

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    transition: opacity .6s ease;
}


.loading-logo {

    font-size: 65px;

    font-weight: 700;

    letter-spacing: 8px;

    color: var(--pink-dark);
}


.loading-screen p {

    margin-top: 20px;

    color: var(--text-light);
}


.loading-yarn {

    width: 55px;
    height: 55px;

    margin-top: 20px;

    border-radius: 50%;

    border: 5px solid rgba(217,154,168,.25);

    border-top-color: var(--pink-dark);

    animation: spin 1s linear infinite;
}


@keyframes spin {

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {

    position: sticky;

    top: 0;

    z-index: 1000;

    height: 84px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 6%;

    background: rgba(255,250,247,.78);

    backdrop-filter: blur(22px);

    border-bottom: 1px solid rgba(100,0,15,.08);
}


.logo {

    display: flex;

    flex-direction: column;
}


.logo-main {

    font-size: 30px;

    font-weight: 700;

    letter-spacing: 5px;
}


.logo-sub {

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: 3px;

    color: var(--pink-dark);

    margin-top: -3px;
    font-weight: 600;
}


.desktop-nav {

    display: flex;

    gap: 38px;
}


.desktop-nav a {

    font-size: 14px;

    font-weight: 600;

    color: var(--text-light);

    transition: .3s;
}


.desktop-nav a:hover {

    color: var(--pink-dark);

    transform: translateY(-2px);
}


.nav-actions {

    display: flex;

    align-items: center;

    gap: 10px;
}


.nav-icon-btn {

    width: 44px;
    height: 44px;

    border: 0;

    border-radius: 50%;

    background: var(--white);

    box-shadow: var(--shadow-soft);

    position: relative;

    font-size: 18px;
}


#cartCount {

    position: absolute;

    top: -4px;
    right: -3px;

    width: 19px;
    height: 19px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--pink-dark);

    color: white;

    font-size: 10px;

    font-weight: 700;
}


.account-btn {

    border: 0;

    padding: 12px 20px;

    border-radius: 50px;

    background: var(--dark);

    color: white;

    font-weight: 600;
}


.menu-btn {

    display: none;

    border: 0;

    background: transparent;

    font-size: 25px;
}


/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu {

    position: fixed;

    inset: 0;

    z-index: 5000;

    background:
        linear-gradient(
            135deg,
            var(--pink-light),
            var(--blue-light)
        );

    display: none;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 30px;
}


.mobile-menu.show {
    display: flex;
}


.mobile-menu a {

    font-family: "Playfair Display", serif;

    font-size: 34px;
}


.mobile-close {

    position: absolute;

    top: 25px;
    right: 30px;

    border: 0;

    background: none;

    font-size: 35px;
}


/* =========================================================
   TAKEAWAY NOTICE
========================================================= */

.takeaway-top {

    min-height: 65px;

    padding: 10px 7%;

    background:
        linear-gradient(
            90deg,
            rgba(249,209,217,.55),
            rgba(131,143,88,.9)
        );

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    text-align: center;
}


.takeaway-icon {

    width: 40px;
    height: 40px;

    border-radius: 50%;

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

    display: grid;

    place-items: center;
}


.takeaway-top div:last-child {

    display: flex;

    flex-direction: column;

    gap: 2px;
}


.takeaway-top strong {

    font-size: 12px;

    letter-spacing: 2px;
}


.takeaway-top span {

    font-size: 12px;
}


/* =========================================================
   HERO
========================================================= */

.hero {

    min-height: calc(100vh - 149px);

    position: relative;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 20px;

    padding: 70px 7%;

    overflow: hidden;
}


.hero-background-shape {

    position: absolute;

    border-radius: 50%;

    filter: blur(2px);

    pointer-events: none;
}


.shape-one {

    width: 480px;
    height: 480px;

    background: rgba(249,209,217,.12);

    top: -180px;
    left: -180px;
}


.shape-two {

    width: 520px;
    height: 520px;

    background: rgba(131,143,88,.25);

    right: -220px;
    bottom: -220px;
}


.hero-content {

    position: relative;

    z-index: 5;

    max-width: 650px;
}


.hero-small-title {

    color: var(--pink-dark);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 24px;
    text-transform: uppercase;
}


.hero h1 {

    font-size: clamp(56px, 6vw, 90px);

    line-height: 0.94;

    letter-spacing: -0.06em;

    color: var(--dark);
    font-weight: 700;
}


.hero h1 span {

    color: var(--pink-dark);

    font-style: italic;
    font-weight: 600;
}


.hero-content > p {

    max-width: 500px;

    margin-top: 27px;

    font-size: 17px;

    line-height: 1.8;

    color: var(--text-light);
}


.hero-buttons {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 32px;
}


.primary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    border: 0;

    padding: 15px 26px;

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            #d00000,
            #9d0010
        );

    color: white;

    font-weight: 700;

    letter-spacing: 0.02em;

    box-shadow:
        0 18px 40px rgba(208,0,0,.24);

    transition: .3s;

    position: relative;

    overflow: hidden;
}


.primary-btn:hover {

    transform: translateY(-4px);

    box-shadow:
        0 20px 45px rgba(208,0,0,.28);
}


.primary-btn span {

    font-size: 20px;
}


.secondary-btn {

    padding: 14px 23px;

    border-radius: 50px;

    border: 1px solid rgba(120,0,20,.16);

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

    font-weight: 600;

    transition: .3s;
}


.secondary-btn:hover {

    background: white;

    transform: translateY(-3px);
}


.hero-trust {

    display: flex;

    gap: 24px;

    margin-top: 38px;

    flex-wrap: wrap;
}


.hero-trust div {

    font-size: 11px;

    color: var(--text-light);
}


.hero-trust span {

    color: var(--pink-dark);

    margin-right: 4px;
}


/* =========================================================
   3D CAT SCENE
========================================================= */

.cat-scene {

    position: relative;

    height: 600px;

    display: flex;

    align-items: center;

    justify-content: center;

    perspective: 1000px;
}


.scene-glow {

    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.95) 0%,
            rgba(249,209,217,.2) 35%,
            rgba(131,143,88,.32) 65%,
            transparent 75%
        );

    filter: blur(5px);

    animation: glowPulse 4s ease-in-out infinite;
}


.photo-upload-box {

    position: relative;

    z-index: 5;

    width: min(400px, 90%);
    height: 420px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 30px;

    border: 2px dashed var(--blue-dark);

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(249,209,217,.78),
            rgba(131,143,88,.45)
        );

    box-shadow:
        0 25px 50px rgba(80,60,80,.16),
        inset 0 0 0 10px rgba(255,247,248,.22);

    color: var(--dark);

    overflow: hidden;

    transition: transform .3s ease, box-shadow .3s ease;
}


.photo-upload-box:hover {

    box-shadow:
        0 30px 60px rgba(80,60,80,.2),
        inset 0 0 0 10px rgba(255,247,248,.3);
}


.photo-upload-box input {
    display: none;
}


.photo-upload-icon {

    width: 64px;
    height: 64px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--blue-dark);

    color: var(--pink);

    font-size: 38px;

    font-weight: 300;

    line-height: 1;
}


.photo-upload-box strong {

    font-size: 34px;

    font-weight: 700;
    letter-spacing: -0.03em;
}


.photo-upload-box > span:not(.photo-upload-icon) {

    color: var(--text-light);

    font-size: 13px;

    letter-spacing: .4px;
}


.photo-upload-preview {

    position: absolute;

    inset: 12px;

    width: calc(100% - 24px);
    height: calc(100% - 24px);

    object-fit: cover;

    border-radius: 21px;

    opacity: 0;

    transition: opacity .35s ease;
}


.photo-upload-preview.show {
    opacity: 1;
}


.photo-upload-box.has-photo > :not(input):not(.photo-upload-preview) {
    opacity: 0;
}


@keyframes glowPulse {

    0%,100% {
        transform: scale(.95);
    }

    50% {
        transform: scale(1.05);
    }

}


.cat-scene::after {

    content: "";

    position: absolute;

    width: 390px;
    height: 100px;

    bottom: 65px;

    background: rgba(90,70,90,.12);

    filter: blur(25px);

    border-radius: 50%;

    transform: rotate(-5deg);
}


/* yarn */

.yarn-ball {

    position: absolute;

    width: 145px;
    height: 145px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 32% 27%,
            #fff,
            var(--pink-soft) 12%,
            #ef9dad 48%,
            var(--pink-dark) 100%
        );

    box-shadow:
        inset -18px -18px 30px rgba(160,80,110,.18),
        0 25px 35px rgba(90,60,80,.16);

    bottom: 115px;

    right: 8%;

    z-index: 10;

    animation: yarnMove 3s ease-in-out infinite;
}


@keyframes yarnMove {

    0%,100% {
        transform: rotate(-4deg) translateY(0);
    }

    50% {
        transform: rotate(7deg) translateY(-13px);
    }

}


.yarn-line {

    position: absolute;

    border: 3px solid rgba(160,20,40,.42);

    border-radius: 50%;
}


.yarn-line-one {

    inset: 20px 10px 30px 25px;

    transform: rotate(20deg);
}


.yarn-line-two {

    inset: 35px 25px 15px 12px;

    transform: rotate(-30deg);
}


.yarn-line-three {

    inset: 15px 35px 35px 20px;

    transform: rotate(70deg);
}


.yarn-line-four {

    inset: 38px 10px 20px 35px;

    transform: rotate(-65deg);
}


/* yarn string */

.yarn-string {

    position: absolute;

    width: 260px;
    height: 150px;

    border-bottom: 5px solid rgba(208,0,0,.55);

    border-radius: 50%;

    right: 17%;

    bottom: 155px;

    transform: rotate(-20deg);

    z-index: 8;

    pointer-events: none;
}


/* CAT BODY */

.cat {

    position: absolute;

    width: 300px;
    height: 400px;

    bottom: 80px;

    left: 50%;

    transform:
        translateX(-50%)
        rotateY(-8deg);

    z-index: 20;

    animation: catFloat 4s ease-in-out infinite;
}


@keyframes catFloat {

    0%,100% {
        transform:
            translateX(-50%)
            translateY(0)
            rotateY(-8deg)
            rotateZ(-1deg);
    }

    50% {
        transform:
            translateX(-50%)
            translateY(-14px)
            rotateY(8deg)
            rotateZ(1deg);
    }

}


.cat-body {

    position: absolute;

    width: 190px;
    height: 205px;

    bottom: 20px;
    left: 55px;

    border-radius:
        50%
        50%
        42%
        42%;

    background:
        linear-gradient(
            135deg,
            #fff,
            #fff0f4 60%,
            #ffdbe3
        );

    box-shadow:
        inset -20px -25px 30px rgba(140,110,120,.12),
        20px 25px 40px rgba(80,60,80,.13);

    transform: rotate(-5deg);
}


.cat-belly {

    position: absolute;

    width: 120px;
    height: 140px;

    left: 35px;
    top: 35px;

    border-radius: 50%;

    background: rgba(255,250,247,.7);

    box-shadow:
        inset 0 -10px 20px rgba(220,180,190,.15);
}


.cat-leg {

    position: absolute;

    width: 55px;
    height: 85px;

    bottom: -35px;

    border-radius: 40px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #ffe6eb
        );

    box-shadow:
        10px 15px 20px rgba(80,60,80,.12);
}


.cat-leg-left {
    left: 22px;
    transform: rotate(8deg);
}


.cat-leg-right {
    right: 22px;
    transform: rotate(-8deg);
}


.cat-head {

    position: absolute;

    width: 205px;
    height: 180px;

    top: 40px;
    left: 48px;

    border-radius:
        47%
        47%
        44%
        44%;

    background:
        radial-gradient(
            circle at 35% 25%,
            #fff,
            #fff0f4 50%,
            #ffdce4
        );

    box-shadow:
        inset -20px -20px 30px rgba(120,90,100,.12),
        18px 22px 35px rgba(80,60,80,.16);
}


.cat-ear {

    position: absolute;

    width: 72px;
    height: 88px;

    top: -47px;

    background:
        linear-gradient(
            145deg,
            #fff2f5,
            #f2c3cc
        );

    clip-path: polygon(
        50% 0,
        100% 100%,
        0 100%
    );

    z-index: -1;
}


.cat-ear-left {
    left: 5px;
    transform: rotate(-25deg);
}


.cat-ear-right {
    right: 5px;
    transform: rotate(25deg);
}


.cat-ear-inner {

    position: absolute;

    width: 45px;
    height: 55px;

    top: -30px;

    background: #f08fa2;

    clip-path: polygon(
        50% 0,
        100% 100%,
        0 100%
    );

    opacity: .75;
}


.cat-inner-left {
    left: 19px;
    transform: rotate(-25deg);
}


.cat-inner-right {
    right: 19px;
    transform: rotate(25deg);
}


.cat-eye {

    position: absolute;

    width: 27px;
    height: 34px;

    top: 65px;

    border-radius: 50%;

    background: #4a151c;

    box-shadow:
        inset 5px 5px 5px rgba(255,255,255,.45);
}


.cat-eye span {

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: white;

    top: 6px;
    left: 6px;
}


.cat-eye-left {
    left: 49px;
}


.cat-eye-right {
    right: 49px;
}


.cat-nose {

    position: absolute;

    width: 15px;
    height: 12px;

    background: #d00000;

    border-radius:
        50%
        50%
        60%
        60%;

    left: 95px;
    top: 105px;
}


.cat-mouth {

    position: absolute;

    width: 30px;
    height: 20px;

    left: 88px;
    top: 114px;

    border-bottom: 3px solid #6d5962;

    border-radius: 50%;
}


.cat-mouth span {

    position: absolute;

    width: 20px;
    height: 10px;

    left: 5px;
    top: 4px;

    border-bottom: 2px solid #6d5962;

    border-radius: 50%;
}


.cat-whisker {

    position: absolute;

    width: 70px;
    height: 1px;

    background: rgba(90,70,80,.45);

    top: 112px;
}


.whisker-one {
    left: -30px;
    transform: rotate(8deg);
}


.whisker-two {
    left: -30px;
    top: 124px;
}


.whisker-three {
    right: -30px;
    top: 118px;
    transform: rotate(-8deg);
}


.cat-paw {

    position: absolute;

    width: 65px;
    height: 55px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #fff,
            #f5d4dc
        );

    top: 205px;

    box-shadow:
        10px 15px 25px rgba(80,60,80,.12);
}


.paw-left {

    left: 20px;

    transform:
        rotate(35deg);

    animation: pawPlay 2s ease-in-out infinite;
}


.paw-right {

    right: 10px;

    transform:
        rotate(-30deg);

    animation: pawPlayRight 2s ease-in-out infinite;
}


@keyframes pawPlay {

    0%,100% {
        transform: rotate(35deg) translate(0,0);
    }

    50% {
        transform: rotate(15deg) translate(12px,10px);
    }

}


@keyframes pawPlayRight {

    0%,100% {
        transform: rotate(-30deg);
    }

    50% {
        transform: rotate(-12deg) translate(-10px,12px);
    }

}


.cat-tail {

    position: absolute;

    width: 135px;
    height: 190px;

    right: -20px;
    bottom: 35px;

    border:
        25px solid #eadbdd;

    border-left: 0;

    border-bottom: 0;

    border-radius:
        0
        70%
        0
        0;

    transform: rotate(15deg);

    z-index: -1;

    animation: tailMove 2.8s ease-in-out infinite;
}


@keyframes tailMove {

    0%,100% {
        transform: rotate(15deg);
    }

    50% {
        transform: rotate(30deg);
    }

}


.scene-caption {

    position: absolute;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    text-align: center;

    display: flex;

    flex-direction: column;

    gap: 4px;

    z-index: 30;
}


.scene-caption span {

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: var(--text-light);
}


.scene-caption strong {

    font-family: "Playfair Display", serif;

    font-size: 18px;
}


.floating-heart,
.floating-star {

    position: absolute;

    z-index: 50;

    color: var(--pink-dark);

    animation: floatAround 4s ease-in-out infinite;
}


.heart-one {

    top: 80px;
    right: 25%;

    font-size: 40px;
}


.heart-two {

    bottom: 170px;
    left: 8%;

    font-size: 28px;

    animation-delay: 1s;
}


.star-one {

    top: 150px;
    left: 14%;

    font-size: 23px;

    color: var(--blue-dark);
}


.star-two {

    top: 60px;
    right: 7%;

    font-size: 18px;

    color: var(--blue-dark);

    animation-delay: 1.5s;
}


@keyframes floatAround {

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

    50% {
        transform: translateY(-15px) rotate(10deg);
    }

}


/* =========================================================
   GENERAL SECTIONS
========================================================= */

.shop-section,
.about-section,
.contact-section {

    padding: 120px 7%;
}


.section-heading {

    max-width: 720px;

    margin: 0 auto 60px;

    text-align: center;
}


.eyebrow {

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2.5px;

    color: var(--pink-dark);
}


.section-heading h2 {

    font-family: "Playfair Display", serif;

    font-size: clamp(40px, 5vw, 65px);

    line-height: 1.05;

    margin: 15px 0;
}


.section-heading h2 em {

    color: var(--pink-dark);
}


.section-heading p {

    color: var(--text-light);

    line-height: 1.8;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.product-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 24px;

    max-width: 1450px;

    margin: auto;
}


.product-card {

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

    border:
        1px solid rgba(100,0,15,.08);

    border-radius: var(--radius);

    overflow: hidden;

    box-shadow: var(--shadow-soft);

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

    position: relative;
}


.product-card:hover {

    transform:
        translateY(-10px)
        rotateX(2deg);

    box-shadow: var(--shadow);
}


.product-card {
    cursor: pointer;
}


.product-card .add-cart-btn {
    position: relative;
    z-index: 1;
}


.product-image {

    height: 300px;

    background:
        linear-gradient(
            135deg,
            var(--pink-light),
            var(--blue-light)
        );

    position: relative;

    overflow: hidden;
}


.product-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .6s ease;
}


.product-card:hover .product-image img {

    transform: scale(1.07);
}


.product-placeholder {

    height: 100%;

    display: grid;

    place-items: center;

    font-size: 75px;
}


.product-info {

    padding: 22px;
}


.product-info h3 {

    font-family: "Playfair Display", serif;

    font-size: 24px;

    margin-bottom: 8px;
}


.product-info p {

    min-height: 45px;

    color: var(--text-light);

    font-size: 13px;

    line-height: 1.6;
}


.product-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 20px;
}


.product-price {

    font-size: 19px;

    font-weight: 800;
}


.product-price del,
.product-detail-price del,
.admin-product-card-bottom del {
    color: var(--text-light);
    font-size: 13px;
    font-weight: 500;
    margin-right: 5px;
}


.sale-label {
    padding: 5px 8px;
    border-radius: 8px;
    background: var(--pink-soft);
    color: var(--pink-dark);
    font-size: 10px;
    font-weight: 800;
}


.customer-sale-banner {
    max-width: 680px;
    margin: 22px auto 0;
    padding: 13px 18px;
    border: 1px solid rgba(208,0,0,.18);
    border-radius: 14px;
    background: rgba(255,240,245,.65);
}


.customer-sale-banner strong {
    display: block;
    margin-top: 4px;
    font-size: 13px;
}


.add-cart-btn {

    width: 43px;
    height: 43px;

    border: 0;

    border-radius: 50%;

    background: var(--pink-soft);

    color: var(--pink-dark);

    font-size: 22px;

    transition: .3s;
}


.add-cart-btn:hover {

    background: var(--pink-dark);

    color: white;

    transform: rotate(90deg);
}


.no-products {

    grid-column: 1/-1;

    padding: 80px;

    text-align: center;

    background: white;

    border-radius: 30px;

    box-shadow: var(--shadow-soft);
}


.no-products div {

    font-size: 60px;

    margin-bottom: 15px;
}


.product-detail-modal {
    max-width: 820px;
}


.product-detail-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 34px;
    align-items: center;
}


.product-detail-image {
    min-height: 330px;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(145deg, var(--pink-light), var(--blue-light));
    display: grid;
    place-items: center;
}


.product-detail-image img {
    width: 100%;
    height: 100%;
    min-height: 330px;
    object-fit: cover;
}


.product-detail-info h2 {
    margin: 12px 0 8px;
}


.product-detail-info p {
    color: var(--text-light);
    line-height: 1.7;
    margin: 20px 0;
}


.product-detail-price {
    color: var(--pink-dark);
    font-size: 24px;
}


.sale-idea {
    margin-top: 20px;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--pink-light), var(--blue-light));
}


.sale-idea strong {
    display: block;
    margin: 6px 0;
}


.sale-idea p {
    color: var(--text-light);
    font-size: 12px;
    line-height: 1.6;
}


.sale-idea input {
    width: 100%;
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid rgba(120,0,20,.14);
    border-radius: 10px;
    background: white;
}


#addProductModal {
    z-index: 8000;
}


.product-sale-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}


/* =========================================================
   ABOUT
========================================================= */

.about-card {

    max-width: 1300px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    background:
        linear-gradient(
            135deg,
            var(--pink-light),
            var(--blue-light)
        );

    border-radius: 45px;

    overflow: hidden;

    box-shadow: var(--shadow);
}


.about-image {

    min-height: 520px;

    position: relative;

    overflow: hidden;

    display: grid;

    place-items: center;
}


.about-yarn {

    position: absolute;

    border-radius: 50%;

    box-shadow:
        inset -20px -20px 30px rgba(80,60,80,.1),
        15px 20px 35px rgba(80,60,80,.12);
}


.yarn-pink {

    width: 210px;
    height: 210px;

    background:
        radial-gradient(
            circle at 30% 25%,
            white,
            #f6b4ca,
            var(--pink-dark)
        );

    left: 18%;
    top: 20%;
}


.yarn-blue {

    width: 160px;
    height: 160px;

    background:
        radial-gradient(
            circle at 30% 25%,
            white,
            #bce8f1,
            #75b9c9
        );

    right: 15%;
    top: 32%;
}


.yarn-white {

    width: 120px;
    height: 120px;

    background:
        radial-gradient(
            circle at 30% 25%,
            white,
            #f4e8e9,
            #d8c8ca
        );

    bottom: 15%;
    left: 40%;
}


.about-floating {

    position: absolute;

    font-size: 80px;

    color: white;

    text-shadow:
        0 10px 30px rgba(80,60,80,.15);

    animation: floatAround 3s ease-in-out infinite;
}


.about-content {

    padding: 80px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.about-content h2 {

    font-family: "Playfair Display", serif;

    font-size: clamp(40px, 4vw, 58px);

    line-height: 1.05;

    margin: 16px 0 25px;
}


.about-content h2 em {

    color: var(--pink-dark);
}


.about-content p {

    color: var(--text-light);

    line-height: 1.9;

    margin-bottom: 15px;
}


.signature {

    margin-top: 20px;

    font-family: "Playfair Display", serif;

    font-style: italic;

    font-size: 22px;

    color: var(--pink-dark);
}


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

.instagram-section {

    padding: 70px 7%;
}


.instagram-card {

    max-width: 950px;

    margin: auto;

    padding: 70px 30px;

    text-align: center;

    border-radius: 40px;

    background:
        linear-gradient(
            135deg,
            rgba(249,209,217,.45),
            rgba(131,143,88,.8)
        );

    box-shadow: var(--shadow);
}


.instagram-icon {

    font-size: 50px;

    margin-bottom: 15px;
}


.instagram-card > span {

    font-size: 10px;

    letter-spacing: 3px;

    font-weight: 800;
}


.instagram-card h2 {

    font-family: "Playfair Display", serif;

    font-size: 50px;

    margin: 15px 0;
}


.instagram-card p {

    max-width: 550px;

    margin: auto;

    color: var(--text-light);

    line-height: 1.7;
}


.instagram-btn {

    display: inline-flex;

    margin-top: 25px;

    padding: 14px 24px;

    background: var(--dark);

    color: white;

    border-radius: 50px;

    font-weight: 700;
}


/* =========================================================
   CONTACT
========================================================= */

.contact-grid {

    max-width: 1100px;

    margin: auto;

    display: grid;

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

    gap: 20px;
}


.contact-box {

    padding: 30px;

    border-radius: 25px;

    background: white;

    box-shadow: var(--shadow-soft);

    display: flex;

    flex-direction: column;

    gap: 8px;
}


.contact-box span {

    font-size: 10px;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--pink-dark);

    font-weight: 800;
}


.contact-box a,
.contact-box strong {

    font-size: 16px;
}


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

footer {

    padding: 45px 7%;

    background: var(--dark);

    color: white;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    flex-wrap: wrap;
}


.footer-logo {

    font-family: "Playfair Display", serif;

    font-size: 28px;

    letter-spacing: 5px;
}


.footer-logo span {

    display: block;

    font-family: "DM Sans", sans-serif;

    font-size: 8px;

    letter-spacing: 2px;

    color: var(--pink);
}


footer p {

    color: rgba(255,255,255,.55);

    font-size: 12px;
}


.admin-footer-btn {

    background: transparent;

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

    color: rgba(255,255,255,.7);

    padding: 10px 16px;

    border-radius: 50px;

    font-size: 11px;
}


/* =========================================================
   MODALS
========================================================= */

.modal-overlay {

    position: fixed;

    inset: 0;

    z-index: 8000;

    background: rgba(40,30,40,.38);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;
}


.modal-overlay.show {

    display: flex;
}


.modal-box {

    width: 100%;

    max-width: 510px;

    max-height: 90vh;

    overflow-y: auto;

    padding: 42px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #fff8fa
        );

    border-radius: 32px;

    box-shadow:
        0 40px 100px rgba(30,20,30,.3);

    position: relative;

    animation: modalIn .35s ease;
}


@keyframes modalIn {

    from {
        opacity: 0;
        transform: translateY(25px) scale(.96);
    }

    to {
        opacity: 1;
        transform: none;
    }

}


.modal-close {

    position: absolute;

    right: 20px;
    top: 18px;

    width: 38px;
    height: 38px;

    border: 0;

    border-radius: 50%;

    background: #f7eff2;

    font-size: 23px;

    color: var(--text);
}


.modal-logo {

    font-family: "Playfair Display", serif;

    font-size: 35px;

    letter-spacing: 5px;

    color: var(--pink-dark);

    margin-bottom: 20px;
}


.modal-box h2 {

    font-family: "Playfair Display", serif;

    font-size: 36px;

    margin: 10px 0;
}


.modal-description {

    color: var(--text-light);

    font-size: 13px;

    line-height: 1.7;

    margin-bottom: 25px;
}


.profile-box {

    max-width: 560px;
}


.profile-details {

    display: flex;

    flex-direction: column;

    gap: 10px;

    padding: 16px 18px;

    border-radius: 18px;

    background: var(--pink-light);

    margin: 15px 0 25px;
}


.profile-detail-row {

    display: flex;

    justify-content: space-between;

    gap: 12px;

    font-size: 13px;
}


.profile-detail-row span {

    color: var(--text-light);
}


.profile-orders-heading {

    display: block;

    margin-bottom: 12px;
}


.profile-orders-list {

    display: flex;

    flex-direction: column;

    gap: 14px;

    max-height: 320px;

    overflow-y: auto;

    margin-bottom: 20px;
}


.profile-logout-btn {

    width: 100%;

    text-align: center;

    color: var(--text-light);
}


.confirm-box {

    max-width: 380px;

    text-align: center;
}


.confirm-icon {

    width: 60px;
    height: 60px;

    margin: 0 auto 16px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background: #ffd6df;

    color: #8f0012;

    font-size: 26px;
}


.confirm-box h3 {

    font-family: "Playfair Display", serif;

    font-size: 20px;

    margin-bottom: 24px;
}


.confirm-actions {

    display: flex;

    gap: 12px;
}


.confirm-actions button {

    flex: 1;

    min-height: 46px;

    border-radius: 12px;

    font-size: 13px;
}


.input-group {

    margin-bottom: 18px;
}


.input-group label {

    display: block;

    font-size: 11px;

    font-weight: 800;

    margin-bottom: 7px;

    color: var(--text);
}


.input-group input,
.input-group textarea {

    width: 100%;

    border: 1px solid rgba(120,0,20,.14);

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

    border-radius: 14px;

    padding: 14px 15px;

    outline: none;

    font-size: 14px;

    transition: .3s;
}


.input-group textarea {

    min-height: 120px;

    resize: vertical;
}


.input-group input:focus,
.input-group textarea:focus {

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

    box-shadow:
        0 0 0 4px rgba(249,209,217,.16);
}


.full-btn {

    width: 100%;

    margin-top: 5px;
}


.text-btn {

    border: 0;

    background: none;

    color: var(--pink-dark);

    font-weight: 700;

    margin: 20px auto 0;

    display: block;
}


.admin-login-link {

    display: block;

    margin: 22px auto 0;

    border: 0;

    background: none;

    color: var(--text-light);

    font-size: 11px;
}


.admin-lock {

    width: 55px;
    height: 55px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background: var(--pink-soft);

    font-size: 25px;

    margin-bottom: 20px;
}


.demo-login {

    text-align: center;

    margin-top: 15px;

    font-size: 10px;

    color: #999;
}


.form-message {

    min-height: 18px;

    margin-top: 13px;

    font-size: 12px;

    text-align: center;

    color: var(--pink-dark);
}


/* =========================================================
   CHECKOUT
========================================================= */

.takeaway-checkout {

    padding: 18px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            var(--pink-light),
            var(--blue-light)
        );

    margin-bottom: 22px;
}


.takeaway-checkout strong {

    font-size: 11px;

    letter-spacing: 1.5px;
}


.takeaway-checkout p {

    margin-top: 6px;

    font-size: 12px;

    line-height: 1.6;

    color: var(--text-light);
}


.checkout-icon {

    font-size: 45px;

    margin-bottom: 10px;
}


.order-mini-total {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 18px;

    margin-bottom: 12px;

    border-radius: 16px;

    background: var(--pink-light);
}


.order-mini-total strong {

    font-size: 20px;
}


/* =========================================================
   SUCCESS
========================================================= */

.success-box {

    text-align: center;
}


.success-animation {

    width: 90px;
    height: 90px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    margin: 0 auto 20px;

    background:
        linear-gradient(
            135deg,
            var(--pink-soft),
            var(--blue-soft)
        );

    color: var(--pink-dark);

    font-size: 50px;

    animation: successPop .7s ease;
}


@keyframes successPop {

    from {
        transform: scale(.3) rotate(-20deg);
    }

    70% {
        transform: scale(1.1);
    }

    to {
        transform: scale(1);
    }

}


.success-box > p {

    color: var(--text-light);

    margin: 15px 0 20px;
}


.success-note {

    padding: 20px;

    border-radius: 18px;

    background: var(--blue-light);

    margin-bottom: 20px;
}


.success-note strong {

    font-size: 12px;
}


.success-note p {

    color: var(--text-light);

    font-size: 12px;

    line-height: 1.6;

    margin: 8px 0;
}


.success-note a {

    color: var(--pink-dark);

    font-weight: 800;

    font-size: 13px;
}


.success-order-summary {

    text-align: left;

    padding: 18px 20px;

    border-radius: 18px;

    background: var(--pink-light);

    margin-bottom: 16px;
}


.success-order-id {

    font-size: 12px;

    color: var(--text-light);

    margin-bottom: 10px;
}


.success-order-id strong {

    color: var(--text);
}


.success-order-line {

    display: flex;

    justify-content: space-between;

    gap: 10px;

    padding: 6px 0;

    font-size: 13px;

    border-bottom: 1px dashed rgba(120,0,20,.14);
}


.success-order-total {

    display: flex;

    justify-content: space-between;

    padding-top: 12px;

    font-size: 14px;

    font-weight: 700;
}


/* =========================================================
   CART DRAWER
========================================================= */

#cartOverlay {
    z-index: 5000;
    background: rgba(35, 26, 32, 0.2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


.cart-drawer {

    position: fixed;

    top: 0;
    right: 0;

    z-index: 5001;

    width: min(500px, 100%);

    height: 100vh;

    background: var(--cream);

    transform: translateX(100%);

    transition: .4s;

    display: flex;

    flex-direction: column;

    box-shadow: -30px 0 70px rgba(40,30,40,.15);
}


.cart-drawer.show {

    transform: translateX(0);
}


.drawer-header {

    padding: 30px;

    display: flex;

    justify-content: space-between;

    border-bottom: 1px solid rgba(60,52,64,.07);
}


.drawer-header h2 {

    font-family: "Playfair Display", serif;

    font-size: 32px;
}


.drawer-eyebrow {

    font-size: 9px;

    letter-spacing: 2px;

    color: var(--pink-dark);

    font-weight: 800;
}


.close-btn {

    width: 42px;
    height: 42px;

    border: 0;

    border-radius: 50%;

    background: white;

    font-size: 25px;
}


.cart-items {

    flex: 1;

    overflow-y: auto;

    padding: 20px 30px;
}


.cart-item {

    display: grid;

    grid-template-columns: 75px 1fr auto;

    gap: 15px;

    align-items: center;

    padding: 15px 0;

    border-bottom: 1px solid rgba(60,52,64,.07);
}


.cart-item-image {

    width: 75px;
    height: 75px;

    border-radius: 17px;

    overflow: hidden;

    background: var(--pink-light);
}


.cart-item-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.cart-item-placeholder {

    width: 100%;
    height: 100%;

    display: grid;

    place-items: center;

    font-size: 30px;
}


.cart-item h4 {

    font-family: "Playfair Display", serif;

    font-size: 17px;
}


.cart-item-price {

    color: var(--pink-dark);

    font-size: 12px;

    font-weight: 800;

    margin-top: 5px;
}


.quantity-control {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 8px;
}


.quantity-control button {

    width: 24px;
    height: 24px;

    border: 0;

    border-radius: 50%;

    background: var(--pink-light);
}


.cart-remove {

    border: 0;

    background: none;

    color: #aaa;

    font-size: 16px;
}


.empty-cart {

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: var(--text-light);

    text-align: center;
}


.empty-cart div {

    font-size: 60px;

    margin-bottom: 15px;
}


.cart-bottom {

    padding: 25px 30px;

    border-top: 1px solid rgba(60,52,64,.07);

    background: white;
}


.cart-total-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 18px;
}


.cart-total-row strong {

    font-size: 22px;
}


/* =========================================================
   ADMIN DASHBOARD
========================================================= */

.admin-dashboard {

    position: fixed;

    inset: 0;

    z-index: 6000;

    background: #f9f6f6;

    display: none;
}


.admin-dashboard.show {

    display: flex;
}


.admin-sidebar {

    width: 250px;

    flex-shrink: 0;

    padding: 30px 20px;

    background:
        linear-gradient(
            180deg,
            var(--pink-light),
            var(--blue-light)
        );

    display: flex;

    flex-direction: column;
}


.admin-brand {

    padding: 0 15px 40px;
}


.admin-brand strong {

    display: block;

    font-family: "Playfair Display", serif;

    font-size: 30px;

    letter-spacing: 4px;
}


.admin-brand span {

    font-size: 8px;

    letter-spacing: 2px;

    color: var(--pink-dark);
}


.admin-sidebar nav {

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.admin-nav {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 14px 15px;

    border: 0;

    border-radius: 15px;

    background: transparent;

    text-align: left;

    color: var(--text-light);

    font-weight: 600;
}


.admin-nav:hover,
.admin-nav.active {

    background: white;

    color: var(--pink-dark);

    box-shadow: var(--shadow-soft);
}


.admin-nav span {

    width: 25px;
}


.admin-logout {

    margin-top: auto;

    border: 0;

    padding: 14px;

    border-radius: 15px;

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

    color: var(--text-light);

    font-weight: 700;
}


.admin-main {

    flex: 1;

    overflow-y: auto;

    padding: 40px 5%;
}


.admin-topbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 35px;
}


.admin-topbar h1 {

    font-family: "Playfair Display", serif;

    font-size: 38px;

    margin-top: 7px;
}


.admin-top-logout {

    border: 0;

    padding: 11px 18px;

    border-radius: 50px;

    background: white;

    box-shadow: var(--shadow-soft);
}


.admin-topbar-right {

    display: flex;

    align-items: center;

    gap: 14px;
}


.cloud-sync-status {

    font-size: 12px;

    font-weight: 700;

    padding: 8px 14px;

    border-radius: 50px;

    opacity: 0;

    transition: opacity .2s ease;
}


.cloud-sync-status.saving {

    opacity: 1;

    color: var(--text-light);

    background: var(--pink-light);
}


.cloud-sync-status.saved {

    opacity: 1;

    color: var(--pink-dark);

    background: var(--pink-light);
}


.cloud-sync-status.error {

    opacity: 1;

    color: #8f0012;

    background: #ffd6df;
}


.admin-section {

    display: none;
}


.admin-section.active {

    display: block;
}


.stats-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;

    margin-bottom: 25px;
}


.stat-card {

    padding: 25px;

    background: white;

    border-radius: 23px;

    box-shadow: var(--shadow-soft);

    display: flex;

    gap: 15px;

    align-items: center;
}


.stat-icon {

    width: 52px;
    height: 52px;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            var(--pink-light),
            var(--blue-light)
        );

    display: grid;

    place-items: center;

    font-weight: 800;

    color: var(--pink-dark);
}


.stat-card small {

    display: block;

    color: var(--text-light);

    font-size: 10px;

    margin-bottom: 5px;
}


.stat-card strong {

    font-size: 22px;
}


.admin-content-grid {

    display: grid;

    grid-template-columns:
        1.5fr 1fr;

    gap: 20px;
}


.dashboard-panel {

    background: white;

    border-radius: 25px;

    padding: 25px;

    box-shadow: var(--shadow-soft);
}


.panel-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;
}


.panel-header h2,
.admin-section-title h2 {

    font-family: "Playfair Display", serif;

    font-size: 28px;

    margin-top: 5px;
}


.small-btn {

    border: 0;

    background: var(--pink-light);

    color: var(--pink-dark);

    padding: 9px 13px;

    border-radius: 50px;

    font-weight: 700;

    font-size: 11px;
}


.quick-action {

    width: 100%;

    border: 1px solid rgba(60,52,64,.07);

    background: #fffafa;

    padding: 17px;

    border-radius: 18px;

    margin-bottom: 12px;

    display: flex;

    align-items: center;

    gap: 15px;

    text-align: left;
}


.quick-action > span {

    width: 45px;
    height: 45px;

    border-radius: 14px;

    background: var(--pink-light);

    color: var(--pink-dark);

    display: grid;

    place-items: center;

    font-size: 20px;
}


.quick-action strong {

    display: block;

    font-size: 13px;
}


.quick-action small {

    display: block;

    color: #999;

    margin-top: 4px;
}


.admin-section-title {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;
}


/* admin products */

.admin-product-list {

    display: grid;

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

    gap: 18px;
}


.admin-product-card {

    background: white;

    border-radius: 22px;

    overflow: hidden;

    box-shadow: var(--shadow-soft);
}


.admin-product-card-image {

    height: 210px;

    background: var(--pink-light);
}


.admin-product-card-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.admin-product-card-info {

    padding: 20px;
}


.admin-product-card-info h3 {

    font-family: "Playfair Display", serif;

    font-size: 21px;
}


.admin-product-card-info p {

    color: var(--text-light);

    font-size: 12px;

    line-height: 1.6;

    margin: 8px 0;
}


.admin-product-card-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 15px;
}


.delete-btn {

    border: 0;

    background: #fff0f0;

    color: #c66;

    padding: 8px 12px;

    border-radius: 10px;

    font-size: 11px;

    font-weight: 700;
}


/* orders */

.orders-list {

    display: flex;

    flex-direction: column;

    gap: 15px;
}


.order-card {

    background: white;

    padding: 25px;

    border-radius: 22px;

    box-shadow: var(--shadow-soft);
}


.order-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    margin-bottom: 20px;
}


.order-number {

    font-weight: 800;

    color: var(--pink-dark);
}


.order-date {

    color: #999;

    font-size: 11px;
}


.order-customer {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 10px;

    margin-bottom: 20px;
}


.customer-detail {

    padding: 13px;

    border-radius: 13px;

    background: #faf7f8;
}


.customer-detail small {

    display: block;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: #999;

    margin-bottom: 5px;
}


.customer-detail strong {

    font-size: 12px;

    word-break: break-word;
}


.order-products {

    border-top: 1px solid rgba(60,52,64,.07);

    padding-top: 15px;
}


.order-product-line {

    display: flex;

    justify-content: space-between;

    font-size: 12px;

    padding: 7px 0;
}


.order-total {

    display: flex;

    justify-content: space-between;

    margin-top: 10px;

    padding-top: 12px;

    border-top: 1px dashed rgba(60,52,64,.1);

    font-weight: 800;
}


.order-status {

    padding: 7px 12px;

    border-radius: 50px;

    background: var(--blue-light);

    color: var(--blue-dark);

    font-size: 10px;

    font-weight: 800;
}


/* customers */

.customers-list {

    display: grid;

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

    gap: 18px;
}


.customer-card {

    background: white;

    border-radius: 22px;

    padding: 22px;

    box-shadow: var(--shadow-soft);
}


.customer-avatar {

    width: 50px;
    height: 50px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--pink-soft),
            var(--blue-soft)
        );

    display: grid;

    place-items: center;

    font-family: "Playfair Display", serif;

    font-size: 20px;

    margin-bottom: 13px;
}


.customer-card h3 {

    font-family: "Playfair Display", serif;

    font-size: 20px;
}


.customer-card p {

    font-size: 11px;

    color: var(--text-light);

    margin-top: 6px;
}


/* settings */

.settings-card {

    max-width: 650px;

    background: white;

    padding: 30px;

    border-radius: 25px;

    box-shadow: var(--shadow-soft);
}


.settings-card h3 {

    font-family: "Playfair Display", serif;

    font-size: 26px;

    margin-bottom: 25px;
}


/* =========================================================
   IMAGE UPLOAD
========================================================= */

.image-upload {

    min-height: 180px;

    border:
        2px dashed rgba(217,154,168,.35);

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            var(--pink-light),
            var(--blue-light)
        );

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    cursor: pointer;

    overflow: hidden;

    text-align: center;
}


.image-upload input {

    display: none;
}


.image-upload span {

    color: var(--pink-dark);

    font-size: 13px;

    font-weight: 700;
}


.order-controls {

    display: flex;

    align-items: end;

    gap: 12px;

    margin-top: 22px;

    padding-top: 18px;

    border-top: 1px solid rgba(60,52,64,.08);
}


.order-controls label {

    display: flex;

    flex-direction: column;

    gap: 6px;

    min-width: 145px;
}


.order-controls label span {

    color: var(--text-light);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.order-controls select {

    min-height: 40px;

    padding: 0 12px;

    border: 1px solid rgba(104,115,67,.25);

    border-radius: 10px;

    background: var(--pink-light);

    color: var(--text);

    font: inherit;
}


.order-cancel-btn,
.order-delete-btn {

    min-height: 40px;

    padding: 0 14px;

    border: 0;

    border-radius: 10px;

    font: inherit;

    font-size: 12px;

    font-weight: 700;
}


.order-cancel-btn {

    background: var(--pink-soft);

    color: var(--dark);
}


.order-delete-btn {

    background: #ffd6df;

    color: #8f0012;
}


.image-preview {

    display: none;

    max-width: 100%;

    max-height: 170px;

    object-fit: contain;

    border-radius: 12px;
}


.price-input {

    position: relative;
}


.price-input > span {

    position: absolute;

    left: 15px;

    top: 50%;

    transform: translateY(-50%);

    font-weight: 800;

    color: var(--pink-dark);
}


.price-input input {

    padding-left: 35px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

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

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

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

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

}


@media (max-width: 900px) {

    .product-detail-content {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .product-detail-image,
    .product-detail-image img {
        min-height: 230px;
    }

    .desktop-nav {
        display: none;
    }

    .menu-btn {
        display: block;
    }

    .hero {
        grid-template-columns: 1fr;

        text-align: center;

        padding-top: 60px;
    }

    .hero-content {
        margin: auto;
    }

    .hero-buttons,
    .hero-trust {
        justify-content: center;
    }

    .cat-scene {
        height: 520px;
    }

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

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

    .admin-sidebar {
        width: 80px;
        padding: 20px 10px;
    }

    .admin-brand span,
    .admin-brand strong {
        font-size: 0;
    }

    .admin-brand strong::after {
        content: "M";
        font-family: "Playfair Display", serif;
        font-size: 25px;
    }

    .admin-nav {
        justify-content: center;
        padding: 14px 5px;
    }

    .admin-nav span {
        width: auto;
    }

    .admin-nav {
        font-size: 0;
    }

    .admin-logout {
        font-size: 0;
    }

    .admin-logout::after {
        content: "↪";
        font-size: 20px;
    }

    .admin-content-grid {
        grid-template-columns: 1fr;
    }

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

}


@media (max-width: 650px) {

    .navbar {
        padding: 0 20px;
    }

    .account-btn {
        display: none;
    }

    .takeaway-top {
        padding: 10px 20px;
    }

    .takeaway-top span {
        font-size: 10px;
    }

    .hero {
        padding: 50px 20px;
    }

    .hero h1 {
        font-size: 54px;
    }

    .cat-scene {
        height: 450px;
        transform: scale(.8);
    }

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

        gap: 12px;
    }

    .product-image {
        height: 220px;
    }

    .product-info {
        padding: 15px;
    }

    .product-info h3 {
        font-size: 19px;
    }

    .shop-section,
    .about-section,
    .contact-section {
        padding: 80px 20px;
    }

    .about-content {
        padding: 40px 25px;
    }

    .instagram-card h2 {
        font-size: 35px;
    }

    .modal-box {
        padding: 30px 22px;
    }

    .admin-main {
        padding: 25px 15px;
    }

    .admin-topbar h1 {
        font-size: 27px;
    }

    .admin-section-title {
        align-items: flex-start;
        gap: 15px;
    }

    .admin-product-list,
    .customers-list {
        grid-template-columns: 1fr;
    }

    .order-customer {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 430px) {

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

    .product-image {
        height: 280px;
    }

    .hero h1 {
        font-size: 48px;
    }

    .cat-scene {
        transform: scale(.65);
        margin: -40px;
    }

}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 8px;
}


::-webkit-scrollbar-track {
    background: #fff7f9;
}


::-webkit-scrollbar-thumb {

    background: var(--pink-soft);

    border-radius: 20px;
}


::-webkit-scrollbar-thumb:hover {

    background: var(--pink-dark);
}
/* =========================================================
   MIHA BRAND REFRESH — RED / BLUSH / CREAM / GOLD
========================================================= */

:root {
    --gold: #d9a400;
}

.navbar {
    background: rgba(255, 248, 250, .88);
    box-shadow: 0 8px 30px rgba(110, 0, 20, .06);
}

.logo {
    position: relative;
    align-items: flex-start;
}

.logo-main {
    color: var(--pink-dark);
    line-height: 1;
}

.logo-sub {
    color: var(--gold);
}

.nav-brand-image {
    width: 42px;
    height: 42px;
    object-fit: cover;
    object-position: center;
    border-radius: 11px;
    margin-right: 9px;
    box-shadow: 0 8px 20px rgba(120,0,20,.12);
}

.logo {
    flex-direction: row;
    align-items: center;
}

.logo .logo-sub {
    position: absolute;
    left: 52px;
    top: 34px;
    white-space: nowrap;
}

.loading-brand-image {
    width: 190px;
    height: 190px;
    object-fit: cover;
    object-position: center;
    border-radius: 28px;
    box-shadow: 0 22px 60px rgba(120, 0, 20, .18);
}

.loading-screen {
    background:
        radial-gradient(circle at 50% 35%, rgba(255,255,255,.95), transparent 30%),
        linear-gradient(145deg, #fff0f4 0%, #ffd2dc 48%, #fff7f8 100%);
}

.loading-yarn {
    border-color: rgba(208,0,0,.18);
    border-top-color: var(--pink-dark);
}

.hero {
    background:
        radial-gradient(circle at 82% 30%, rgba(208,0,0,.07), transparent 28%),
        radial-gradient(circle at 18% 75%, rgba(217,164,0,.08), transparent 24%);
}

.hero h1 span,
.section-heading h2 em,
.eyebrow {
    color: var(--pink-dark);
}

.hero-small-title {
    color: var(--gold);
}

.primary-btn {
    background: linear-gradient(135deg, #d90000, #a80012);
    box-shadow: 0 18px 40px rgba(180,0,20,.24);
}

.primary-btn:hover {
    box-shadow: 0 22px 48px rgba(180,0,20,.30);
}

.secondary-btn:hover {
    border-color: rgba(208,0,0,.25);
}

.photo-upload-box {
    border-color: rgba(208,0,0,.48);
    background:
        linear-gradient(145deg, rgba(255,235,241,.92), rgba(255,205,216,.72));
    box-shadow:
        0 30px 70px rgba(120,0,20,.16),
        inset 0 0 0 10px rgba(255,255,255,.34);
}

.photo-upload-icon {
    background: var(--pink-dark);
    color: #fff0f4;
}

.photo-upload-preview {
    object-fit: contain;
    background: #fbcbd5;
}

.product-image {
    background: linear-gradient(135deg, #fff0f4, #ffd9e2);
}

.product-card:hover {
    box-shadow: 0 30px 75px rgba(120,0,20,.15);
}

.sale-label {
    background: #fff0b8;
    color: #8d6500;
}

.customer-sale-banner {
    border-color: rgba(217,164,0,.28);
    background: rgba(255,247,216,.72);
}

.instagram-card {
    background:
        linear-gradient(135deg, rgba(255,205,216,.72), rgba(255,242,205,.88));
}

.instagram-card h2 {
    color: var(--pink-dark);
}

.contact-box {
    border: 1px solid rgba(208,0,0,.07);
}

.contact-box span {
    color: var(--pink-dark);
}

footer {
    background:
        radial-gradient(circle at 10% 0%, rgba(208,0,0,.22), transparent 35%),
        var(--dark);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    letter-spacing: 2px;
}

.footer-logo img {
    width: 58px;
    height: 58px;
    object-fit: cover;
    object-position: center;
    border-radius: 15px;
}

.footer-logo span {
    color: #ffd36b;
}

.modal-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--pink-dark);
}

.modal-logo img {
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: 14px;
}

.modal-logo span {
    font-family: "Playfair Display", serif;
    font-size: 35px;
    letter-spacing: 5px;
}

.admin-brand strong {
    color: var(--pink-dark);
}

.admin-nav.active,
.admin-nav:hover {
    color: var(--pink-dark);
}

.admin-sidebar {
    background: linear-gradient(180deg, #fff8fa, #fff0f4);
    border-right: 1px solid rgba(208,0,0,.08);
}

@media (max-width: 650px) {
    .loading-brand-image {
        width: 155px;
        height: 155px;
    }

    .nav-brand-image {
        width: 38px;
        height: 38px;
    }

    .logo .logo-sub {
        left: 47px;
        top: 31px;
    }

    .footer-logo img {
        width: 50px;
        height: 50px;
    }
}

/* =========================================================
   MIHA V3 — MINIMAL NAV + MULTI-IMAGE HERO SLIDESHOW
========================================================= */

:root {
    --miha-red: #c90016;
    --miha-red-dark: #8f0010;
    --miha-pink: #ffc9d6;
    --miha-pink-light: #fff1f5;
    --miha-pink-soft: #ffe0e8;
    --miha-gold: #d99a00;
}

/* Small circular logo + store name */
.miha-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    min-width: 180px;
}

.miha-brand-circle {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #fff;
    border: 2px solid rgba(201, 0, 22, .20);
    box-shadow: 0 7px 18px rgba(120, 0, 20, .10);
}

.miha-brand-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.miha-brand-name {
    color: var(--miha-red-dark);
    font-family: "Playfair Display", serif;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 1.8px;
    white-space: nowrap;
}

/* Clean pink navbar — no large logo */
.navbar {
    height: 74px;
    padding: 0 5.5%;
    background: rgba(255, 249, 251, .94);
    border-bottom: 1px solid rgba(201, 0, 22, .08);
    box-shadow: 0 7px 25px rgba(120, 0, 20, .045);
}

.logo,
.logo-main,
.logo-sub {
    display: none !important;
}

.desktop-nav a {
    color: #6b3c45;
}

.desktop-nav a:hover,
.desktop-nav a.active {
    color: var(--miha-red);
}

.account-btn {
    background: var(--miha-red-dark);
}

/* Remove old green/olive visual influence */
.hero {
    background:
        radial-gradient(circle at 15% 25%, rgba(255, 190, 207, .32), transparent 27%),
        radial-gradient(circle at 85% 65%, rgba(255, 210, 222, .42), transparent 30%),
        linear-gradient(135deg, #fff9fb 0%, #fff0f4 50%, #ffe4eb 100%);
}

.hero-background-shape.shape-one,
.hero-background-shape.shape-two {
    background: #ffc8d6 !important;
    opacity: .24 !important;
}

.hero-small-title {
    color: var(--miha-red) !important;
}

.hero h1 {
    color: var(--miha-red-dark);
}

.hero h1 span {
    color: var(--miha-red) !important;
}

.primary-btn {
    background: linear-gradient(135deg, #d30018, #a90012) !important;
}

/* =========================================================
   HERO MULTI-IMAGE SLIDESHOW
========================================================= */

.miha-slideshow {
    width: min(470px, 100%);
    height: 470px;
    min-height: 470px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    border: 2px solid rgba(201, 0, 22, .20);
    border-radius: 28px;
    background: rgba(255, 249, 251, .80);
    box-shadow: 0 28px 65px rgba(120, 0, 20, .12);
    overflow: hidden;
}

.slideshow-header {
    height: 72px;
    flex: 0 0 72px;
    padding: 13px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    background: rgba(255, 255, 255, .55);
    border-bottom: 1px solid rgba(201, 0, 22, .08);
    z-index: 5;
}

.slideshow-header .photo-upload-icon {
    width: 43px;
    height: 43px;
    min-width: 43px;
    font-size: 23px;
    background: var(--miha-red);
    color: #fff;
}

.slideshow-header strong {
    display: block;
    font-size: 17px;
    color: var(--miha-red-dark);
    line-height: 1.2;
}

.slideshow-header span:not(.photo-upload-icon) {
    display: block;
    margin-top: 3px;
    color: #86606a;
    font-size: 11px;
}

.slideshow-viewport {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    touch-action: pan-y;
    user-select: none;
    background: linear-gradient(145deg, #fff2f6, #ffdbe4);
}

.hero-slides-track {
    width: 100%;
    height: 100%;
    position: relative;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.025);
    transition: opacity .55s ease, transform .75s ease;
    pointer-events: none;
}

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

.hero-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    -webkit-user-drag: none;
}

.slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(143, 0, 16, .78);
    box-shadow: 0 8px 20px rgba(100, 0, 15, .18);
    font-size: 31px;
    line-height: 1;
    cursor: pointer;
    z-index: 4;
    transition: transform .2s ease, background .2s ease;
}

.slide-arrow:hover {
    transform: translateY(-50%) scale(1.06);
    background: var(--miha-red);
}

.slide-prev { left: 14px; }
.slide-next { right: 14px; }

.slide-dots {
    position: absolute;
    left: 50%;
    bottom: 15px;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .68);
    backdrop-filter: blur(8px);
    z-index: 5;
}

.slide-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(143, 0, 16, .30);
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
}

.slide-dot.active {
    width: 22px;
    border-radius: 10px;
    background: var(--miha-red);
}

/* Admin slideshow thumbnails */
.admin-slides-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    margin-top: 12px;
}

.admin-slide-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(201, 0, 22, .16);
    background: #ffe6ec;
}

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

.admin-slide-thumb span {
    position: absolute;
    left: 5px;
    bottom: 5px;
    min-width: 20px;
    padding: 2px 6px;
    border-radius: 10px;
    color: white;
    background: rgba(143, 0, 16, .80);
    font-size: 10px;
    text-align: center;
}

.admin-slide-thumb button {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: var(--miha-red-dark);
    cursor: pointer;
    font-size: 15px;
    line-height: 20px;
}

.admin-help-text {
    display: block;
    margin-top: 8px;
    color: #7a5a62;
    font-size: 11px;
    line-height: 1.5;
}

/* Admin brand logo controls */
.brand-setting-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    padding: 12px;
    border-radius: 16px;
    background: #fff1f5;
}

.brand-setting-circle {
    width: 58px;
    height: 58px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid rgba(201, 0, 22, .18);
    background: #fff;
}

.brand-setting-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brand-setting-preview strong {
    color: var(--miha-red-dark);
    font-family: "Playfair Display", serif;
    font-size: 20px;
}

@media (max-width: 900px) {
    .navbar {
        height: 68px;
    }

    .miha-brand {
        min-width: 0;
    }

    .miha-brand-name {
        font-size: 18px;
        letter-spacing: 1px;
    }

    .desktop-nav {
        display: none;
    }

    .miha-slideshow {
        width: min(450px, 100%);
        height: 430px;
        min-height: 430px;
    }
}

@media (max-width: 600px) {
    .miha-brand-circle {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .miha-brand-name {
        font-size: 17px;
    }

    .miha-slideshow {
        height: 360px;
        min-height: 360px;
        border-radius: 22px;
    }

    .slideshow-header {
        height: 60px;
        flex-basis: 60px;
        padding: 9px 12px;
    }

    .slideshow-header .photo-upload-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 19px;
    }

    .slide-arrow {
        width: 36px;
        height: 36px;
        font-size: 26px;
    }
}

/* =========================================================
   MIHA UPDATE — CLEAN HERO SLIDESHOW + PINK TAKEAWAY
========================================================= */
.takeaway-top {
    background: linear-gradient(90deg, #ffd7e1 0%, #ffe7ed 50%, #ffd1dc 100%) !important;
    border-top: 1px solid rgba(201,0,22,.06);
    border-bottom: 1px solid rgba(201,0,22,.08);
    color: var(--text);
}
.takeaway-icon {
    background: rgba(255,255,255,.82) !important;
    color: var(--pink-dark);
    box-shadow: 0 8px 20px rgba(120,0,20,.08);
}
.takeaway-top strong { color: var(--pink-dark); }
.takeaway-top span { color: #70464f; }
.miha-slideshow { padding: 0 !important; }
.miha-slideshow .slideshow-header { display: none !important; }
.miha-slideshow .slideshow-viewport {
    width: 100%; height: 100%; min-height: 100%; flex: 1 1 auto;
    border-radius: 28px; background: #ffdce5;
}
.miha-slideshow .hero-slide img { width:100%; height:100%; object-fit:cover; display:block; }
.miha-slideshow .slide-arrow {
    background: rgba(201,0,22,.88) !important; color:#fff !important;
    border:2px solid rgba(255,255,255,.65) !important;
    box-shadow:0 8px 22px rgba(120,0,20,.18);
}
.miha-slideshow .slide-arrow:hover { background:#a90012 !important; }
.miha-slideshow .slide-dot { background:rgba(255,255,255,.70) !important; border:1px solid rgba(201,0,22,.15); }
.miha-slideshow .slide-dot.active { background:var(--pink-dark) !important; }
footer .admin-footer-btn { display:none !important; }
.footer-logo { display:flex; align-items:center; gap:14px; }
.footer-logo img {
    width:58px; height:58px; border-radius:50%; object-fit:cover;
    background:#ffdce5; border:2px solid rgba(255,255,255,.25);
    box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.footer-logo span { color:#fff; }
.hero {
    background: radial-gradient(circle at 15% 25%, rgba(255,190,207,.32), transparent 27%),
                radial-gradient(circle at 85% 65%, rgba(255,210,222,.42), transparent 30%),
                linear-gradient(135deg,#fff9fb 0%,#fff0f4 50%,#ffe4eb 100%) !important;
}
.hero-background-shape.shape-one,.hero-background-shape.shape-two { background:#ffc8d6 !important; opacity:.24 !important; }
.scene-glow { background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(249,209,217,.35) 38%,rgba(255,190,207,.35) 65%,transparent 75%) !important; }
@media (max-width:900px) { .miha-slideshow { width:min(470px,100%); height:470px; min-height:470px; } }
@media (max-width:600px) { .miha-slideshow { width:100%; height:360px; min-height:360px; border-radius:24px; } .miha-slideshow .slideshow-viewport { border-radius:24px; } .footer-logo img { width:50px; height:50px; } }

/* =========================================================
   MIHA FINAL PRODUCT / CATEGORY / SLIDESHOW UPDATES
========================================================= */

/* Keep product cards completely still on hover. */
.product-card,
.product-card:hover {
    transform: none !important;
}

.product-card:hover {
    box-shadow: var(--shadow-soft) !important;
}

.product-card .product-image img,
.product-card:hover .product-image img {
    transform: none !important;
}

.add-cart-btn,
.add-cart-btn:hover {
    transform: none !important;
}

.add-cart-btn:hover {
    background: var(--pink-dark);
    color: #fff;
}

/* Category filters */
.category-filters {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px auto 0;
}

.category-filter {
    border: 1px solid rgba(201, 0, 22, .16);
    background: rgba(255, 255, 255, .72);
    color: var(--pink-dark);
    border-radius: 999px;
    padding: 9px 16px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.category-filter:hover,
.category-filter.active {
    background: var(--pink-dark);
    color: #fff;
    border-color: var(--pink-dark);
}

.product-category-tag {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--pink-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

/* Hero images can be linked to a product from Admin. */
.hero-slide-clickable {
    cursor: pointer;
}

.hero-slide-clickable img {
    cursor: pointer;
}

/* Product detail: manual gallery only — no autoplay. */
.product-detail-gallery-wrap {
    width: 100%;
}

.product-detail-main-image {
    position: relative;
    width: 100%;
    height: 430px;
    border-radius: 22px;
    overflow: hidden;
    background: var(--pink-light);
    touch-action: pan-y;
}

.product-detail-main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
}

.product-detail-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(201, 0, 22, .9);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.product-detail-arrow:hover {
    background: var(--pink-dark);
}

.detail-prev { left: 14px; }
.detail-next { right: 14px; }

.product-detail-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 2px 3px;
}

.detail-thumb {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
}

.detail-thumb.active {
    border-color: var(--pink-dark);
}

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

.product-detail-counter {
    text-align: center;
    color: var(--text-light);
    font-size: 11px;
    margin-top: 7px;
}

/* Multiple product-photo preview in Admin. */
.product-images-preview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-top: 10px;
}

.product-images-preview img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(201, 0, 22, .12);
}

/* Admin category creator. */
.category-manager {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid rgba(201, 0, 22, .10);
    border-radius: 18px;
    background: rgba(255, 245, 248, .62);
}

.category-create-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.category-create-row input {
    flex: 1;
}

.admin-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.admin-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(201, 0, 22, .12);
    color: var(--pink-dark);
    font-size: 11px;
    font-weight: 700;
}

.admin-category-chip button {
    width: 19px;
    height: 19px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--pink-soft);
    color: var(--pink-dark);
    cursor: pointer;
    line-height: 1;
}

.admin-photo-count {
    display: block;
    color: var(--text-light);
    font-size: 10px;
    margin-top: 7px;
}

/* Footer credit uses the exact same footer font and size. */
.footer-created-by {
    margin-left: 12px;
    font: inherit;
    color: inherit;
}

/* The sale box disappears completely when Admin clears it. */
.customer-sale-banner[style*="display: none"] {
    display: none !important;
}

@media (max-width: 700px) {
    .category-create-row {
        flex-direction: column;
    }

    .product-detail-main-image {
        height: 340px;
    }

    .product-images-preview {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-created-by {
        display: block;
        margin: 4px 0 0;
    }
}