/* Base responsive helpers */
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, body { font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 1.45; }
button, input, select, textarea { font-family: inherit; }

/* Ensure tap targets are comfortably large on small screens */
.add-to-cart, .checkout-btn, .cart-back-btn { min-height: 44px; }

@media (max-width: 600px) {
    .cart-section.cart-advanced,
    .checkout-section.checkout-advanced,
    .contact-section.contact-advanced {
        max-width: 99vw;
        width: 99vw;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
    .products-page .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
.brand-curve {
    font-family: 'Pacifico', cursive !important;
    font-size: 2.1rem;
    color: #d63384;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 8px #ffe6f2;
    font-weight: normal;
    display: inline-block;
    vertical-align: middle;
}
/* Logo ở footer lớn 80x80px */
.footer-logo-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--light-pink);
    box-shadow: var(--main-shadow);
    object-fit: cover;
}
/* Responsive nâng cao cho mọi thiết bị */
@media (max-width: 1200px) {
    .featured-products, .footer-content {
        max-width: 98vw;
        padding-left: 1vw;
        padding-right: 1vw;
    }
}
@media (max-width: 900px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .footer-content {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    .featured-products, .checkout-section.checkout-advanced, .cart-section.cart-advanced, .contact-section.contact-advanced {
        padding: 1.2rem 0.5rem 1.2rem 0.5rem;
        max-width: 98vw;
    }
    .main-title {
        font-size: 2rem;
    }
    header {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
    }
    nav {
        gap: 0.7rem;
    }
}
@media (max-width: 600px) {
    /* Chỉ áp dụng cho trang sản phẩm */
    .products-page .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .form-group input, .form-group select, .form-group textarea {
        font-size: 0.95rem;
        padding: 0.4rem 0.7rem;
    }
    .checkout-btn, .cart-back-btn {
        font-size: 0.95rem;
        padding: 0.5rem 1.2rem;
    }
    .hero-images img {
        width: 90px;
    }
    .subtitle {
        font-size: 1rem;
    }
    header, .footer-content, .featured-products {
        padding: 0.5rem;
    }
    :root {
        /* Final tuned main column width for consistent framing */
        --site-max-width: 1000px;
        --page-padding: 1rem;
        --card-gap: 1rem;
    }
    .main-title {
        font-size: 1.2rem;
    }
    .brand {
        font-size: 1.2rem;
    }
    header > .container {
        padding: 0.6rem var(--page-padding) !important;
        max-width: var(--site-max-width) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .brand-store {
        font-size: 1rem;
    }
    .logo img {
        width: 32px;
        height: 32px;
    }
    /* small-screen tweaks for header icons and nav links */
    .cart-header-icon, .checkout-header-icon, .contact-header-icon {
        width: 28px;
        height: 28px;
        padding: 2px;
        object-fit: cover;
    }
    /* nav-link is defined globally; tweak slightly for narrow screens */
    .nav-link {
        text-decoration: none;
        color: #d63384;
        font-weight: 600;
        font-size: 0.98rem; /* slightly smaller to help fit */
        position: relative;
        transition: color 0.2s;
    }
    nav {
        display: flex;
        gap: 0.95rem; /* slightly reduced gap so items fit */
    }
    .cart-item img {
        width: 36px;
        height: 36px;
    }
    .cart-item, .product-card {
        padding: 0.5rem;
        font-size: 0.95rem;
    }
    .footer-bottom {
        font-size: 0.8rem;
    }
    .form-group input, .form-group select, .form-group textarea {
        font-size: 0.95rem;
        padding: 0.4rem 0.7rem;
    }
    .checkout-btn, .cart-back-btn {
        font-size: 0.95rem;
        padding: 0.5rem 1.2rem;
    }
    .hero-images img {
        width: 90px;
    }
    .subtitle {
        font-size: 1rem;
    }
}
@media (max-width: 400px) {
    .main-title, .brand, .brand-store {
        font-size: 0.9rem;
    }
    .footer-content, .featured-products, .checkout-section.checkout-advanced, .cart-section.cart-advanced, .contact-section.contact-advanced {
        padding: 0.2rem;
    }
}
.brand-store {
    font-family: 'Pacifico', cursive;
    color: #ff8fcf;
    font-size: 1.5rem;
    margin-left: 0.5rem;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px #ffe6f2;
    vertical-align: middle;
    position: relative;
    top: 2px;
}
/* --- CONTACT ADVANCED --- */
.contact-section.contact-advanced {
    background: #fff;
    border-radius: var(--main-radius);
    box-shadow: 0 8px 32px 0 rgba(248,182,210,0.18);
    max-width: 520px;
    margin: 2rem auto 2rem auto;
    padding: 2.5rem 2rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.contact-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.contact-header-icon {
    width: 40px;
    height: 40px;
    background: var(--light-pink);
    border-radius: 50%;
    box-shadow: 0 2px 8px #ffe6f2;
    padding: 6px;
    object-fit: cover;
}
.contact-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-bottom: 1.2rem;
}
.contact-success-advanced {
    width: 100%;
    background: #fff0fa;
    color: #d63384;
    border-radius: 12px;
    padding: 1.2rem 1.2rem 1.2rem 1.2rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    margin-top: 1.2rem;
    box-shadow: 0 2px 8px #ffe6f2;
    animation: fadeInPop 0.7s;
}
.contact-success-icon {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 0.5rem;
}
@media (max-width: 700px) {
    .contact-section.contact-advanced {
        padding: 1.2rem 0.5rem 1.2rem 0.5rem;
    }
}

/* Make quantity selector always appear on its own line on small screens
   so every cart item looks uniform (thumbnail + title on first line,
   qty on second line, price/remove on following line). */
@media (max-width: 700px) {
    .cart-item {
        display: flex;
        flex-wrap: wrap; /* allow children to wrap to the next line */
        align-items: center;
        gap: 0.6rem;
    }
    .cart-item img {
        flex: 0 0 56px; /* fixed thumbnail column */
        width: 56px;
        height: 56px;
        margin-right: 0.6rem;
    }
    .cart-item-title {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
    }
    .cart-item-qty {
        order: 2;
        /* qty stays on the second row, left-aligned under the title */
        flex: 0 0 auto;
        display: flex;
        gap: 0.6rem;
        align-items: center;
        justify-content: flex-start;
        margin-top: 0.4rem;
        margin-left: 56px; /* align with title start */
    }
    .remove-btn {
        order: 2; /* same row as qty, placed immediately after qty */
        flex: 0 0 auto;
        margin-left: 8px;
        margin-top: 0.35rem;
        align-self: center;
    }
    .cart-item-price {
        order: 2; /* same row as qty and remove button */
        flex: 0 0 auto;
        margin-left: 12px; /* small gap from qty/X */
        margin-right: 12px;
        margin-top: 0.35rem;
        text-align: right;
        align-self: center;
    }
}
/* --- CHECKOUT ADVANCED --- */
.checkout-section.checkout-advanced {
    background: #fff;
    border-radius: var(--main-radius);
    box-shadow: 0 8px 32px 0 rgba(248,182,210,0.18);
    max-width: 520px;
    margin: 2rem auto 2rem auto;
    padding: 2.5rem 2rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.checkout-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}
/* Cart header - center icon + title */
.cart-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1.5rem;
        order: 3; /* remove (X) appears after the price */
}
.cart-header h2, .checkout-header h2, .contact-header h2 {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.2;
}
        order: 2; /* price comes immediately after qty on the same row */
    width: 40px;
    height: 40px;
    background: var(--light-pink);
    border-radius: 50%;
    box-shadow: 0 2px 8px #ffe6f2;
    padding: 6px;
}
.checkout-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-bottom: 1.2rem;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.form-group label {
    font-weight: 600;
    color: #d63384;
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.4em;
}
.form-group input, .form-group select, .form-group textarea {
    padding: 0.6rem 1rem;
    border-radius: 8px;
    border: 1.5px solid #f8b6d2;
    font-size: 1.05rem;
    background: #fff0fa;
    transition: border 0.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border: 1.5px solid #d63384;
    outline: none;
}
.checkout-summary {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 1.2rem;
    margin-bottom: 1.2rem;
    gap: 0.5rem;
}
.checkout-summary-label {
    color: #a9446a;
    font-weight: 600;
}
.checkout-summary-total {
    color: #d63384;
    font-weight: 700;
    font-size: 1.3rem;
}
.checkout-btn {
    background: linear-gradient(90deg, #f8b6d2 0%, #ff8fcf 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.7rem 2.2rem;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px #ffe6f2;
    transition: background 0.2s, transform 0.2s;
    margin-top: 0.5rem;
}
.checkout-btn:hover {
    background: #d63384;
    transform: scale(1.05);
}
.checkout-guide {
    width: 100%;
    background: #fff0fa;
    color: #a9446a;
    border-radius: 10px;
    padding: 1rem 1.2rem;
    font-size: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 2px 8px #ffe6f2;
}
.checkout-guide ul {
    margin: 0.5rem 0 0.5rem 1.2rem;
}
.checkout-guide-note {
    background: #ffe6f2;
    color: #d63384;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    margin-top: 0.7rem;
    font-size: 0.98rem;
    font-style: italic;
}

/* Payment method tiles */
.payment-methods {
    display:flex;
    gap:0.6rem;
    width:100%;
    margin-top:0.4rem;
    flex-wrap:wrap;
}
.payment-method {
    flex:1 1 30%;
    min-width:140px;
    background:#fff8fb;
    border-radius:10px;
    padding:0.6rem 0.8rem;
    display:flex;
    align-items:center;
    gap:0.6rem;
    border:1px solid rgba(214,51,132,0.06);
    cursor:pointer;
    transition:transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    text-align:left;
}
.payment-method .payment-icon {
    width:44px;
    height:44px;
    border-radius:10px;
    background:linear-gradient(180deg,#ffdce9 0%,#ffe6f2 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    box-shadow:0 4px 14px rgba(214,51,132,0.06);
}
.payment-method .payment-label { font-weight:800; color:#6b1230; display:block; }
.payment-method .payment-desc { font-size:0.9rem; color:#a9446a; opacity:0.9; }
.payment-method:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(214,51,132,0.08); }
.payment-method.active {
    background: linear-gradient(90deg,#ffb6dd 0%,#ff8fcf 100%);
    color:#fff;
    border-color: rgba(0,0,0,0.06);
    box-shadow:0 12px 36px rgba(214,51,132,0.18);
}
.payment-method.active .payment-icon { background: linear-gradient(90deg,#fff 0%,rgba(255,255,255,0.2)100%); color:#d63384; }

@media (max-width:600px) {
    .payment-methods { gap:0.4rem; }
    .payment-method { flex:1 1 48%; }
}
.checkout-success-advanced {
    width: 100%;
    background: #fff0fa;
    color: #d63384;
    border-radius: 12px;
    padding: 1.2rem 1.2rem 1.2rem 1.2rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    margin-top: 1.2rem;
    box-shadow: 0 2px 8px #ffe6f2;
    animation: fadeInPop 0.7s;
}
.checkout-success-icon {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 0.5rem;
}
@keyframes fadeInPop {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}
@media (max-width: 700px) {
    .checkout-section.checkout-advanced {
        padding: 1.2rem 0.5rem 1.2rem 0.5rem;
    }
}
/* --- CART ADVANCED --- */
.cart-section.cart-advanced {
    background: #fff;
    border-radius: var(--main-radius);
    box-shadow: 0 8px 32px 0 rgba(248,182,210,0.18);
    max-width: 600px;
    margin: 2rem auto;
    /* Use the site page padding so inner content lines up with header/footer */
    padding: 2.2rem var(--page-padding) 2rem var(--page-padding);
    display: flex;
    flex-direction: column;
    align-items: stretch; /* allow inner elements to take full width with padding */
    box-sizing: border-box;
    position: relative;
}
.cart-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.cart-header-icon {
    width: 40px;
    height: 40px;
    background: var(--light-pink);
    border-radius: 50%;
    box-shadow: 0 2px 8px #ffe6f2;
    padding: 6px;
}
.cart-items-list {
    width: 100%;
    min-height: 80px;
    margin-bottom: 1.2rem;
}
.cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between; /* keep controls at the right edge */
    background: var(--light-pink);
    border-radius: 12px;
    box-shadow: 0 2px 12px 0 rgba(248,182,210,0.10);
    margin-bottom: 1rem;
    padding: 0.7rem 1rem;
    gap: 1rem;
    position: relative;
    transition: box-shadow 0.2s, transform 0.2s;
}
.cart-item:hover {
    box-shadow: 0 4px 24px 0 rgba(248,182,210,0.18);
    transform: scale(1.02);
}
.cart-item img {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 8px #ffe6f2;
}
.cart-item-title {
    flex: 1 1 auto;
    font-weight: 700;
    color: #d63384;
    font-size: 1.1rem;
    min-width: 0; /* allow title to shrink instead of forcing line breaks */
}
.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 1.1rem;
    flex: 0 0 auto; /* keep quantity controls from growing */
    white-space: nowrap;
}
.qty-btn {
    background: linear-gradient(90deg, #f8b6d2 0%, #ff8fcf 100%);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 8px #ffe6f2;
    transition: background 0.2s, transform 0.2s;
}
.qty-btn:hover {
    background: #d63384;
    transform: scale(1.1);
}
.cart-item-price {
    font-weight: 600;
    color: #a9446a;
    min-width: 70px;
    text-align: right;
    flex: 0 0 auto; /* keep price compact on the right */
    white-space: nowrap;
}
.remove-btn {
    /* Make remove (X) look and behave like the qty buttons */
    background: linear-gradient(90deg, #f8b6d2 0%, #ff8fcf 100%);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px #ffe6f2;
    transition: background 0.18s, transform 0.12s, color 0.12s;
    margin-left: 0.5rem;
}
.remove-btn:hover {
    background: #d63384;
    transform: scale(1.05);
}

/* Provide a lighter 'ghost' look when the remove button is placed inline as text (if needed) */
.remove-btn.ghost {
    background: transparent;
    color: #d63384;
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}
.cart-summary {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 1.2rem;
    margin-bottom: 1.2rem;
    gap: 0.5rem;
}
.cart-summary-label {
    color: #a9446a;
    font-weight: 600;
}
.cart-summary-total {
    color: #d63384;
    font-weight: 700;
    font-size: 1.3rem;
}
.cart-actions {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
}
.cart-back-btn {
    color: #d63384;
    background: none;
    border: none;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.2s;
}
.cart-back-btn:hover {
    color: #ff8fcf;
}
.checkout-btn {
    background: linear-gradient(90deg, #f8b6d2 0%, #ff8fcf 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.7rem 2.2rem;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px #ffe6f2;
    transition: background 0.2s, transform 0.2s;
    margin-left: 1rem;
}
.checkout-btn:hover {
    background: #d63384;
    transform: scale(1.05);
}
.cart-note {
    width: 100%;
    background: #fff0fa;
    color: #a9446a;
    border-radius: 8px;
    padding: 0.7rem 1rem;
    font-size: 1rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 8px #ffe6f2;
}
/* Trạng thái rỗng */
.cart-items-list:empty::before {
    content: "🛒 Giỏ hàng trống. Hãy chọn sản phẩm yêu thích!";
    display: block;
    text-align: center;
    color: #d63384;
    font-size: 1.1rem;
    padding: 2.5rem 0 2rem 0;
    opacity: 0.8;
}
@media (max-width: 700px) {
    .cart-section.cart-advanced {
        /* keep consistent horizontal gutters with the rest of the site */
        padding: 1rem var(--page-padding);
        max-width: 99vw;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
    /* Mobile: layout as two rows using CSS grid so each card matches the design
       Row1: thumbnail | title (spans)                
       Row2: thumbnail | qty controls | price | remove
    */
    .cart-item {
        display: grid;
        /* columns: thumbnail | content | controls */
        grid-template-columns: 56px 1fr auto;
        grid-template-rows: auto auto;
        grid-column-gap: 12px;
        grid-row-gap: 6px;
        align-items: center;
        padding: 0.9rem 0.9rem;
        box-sizing: border-box;
    }
    .cart-item img {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        width: 56px;
        height: 56px;
    }
    /* Title on row 1, spans the content column */
    .cart-item-title {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        font-size: 1.05rem;
        margin-left: 4px;
    }
    /* Qty controls positioned at the right on the first row */
    .cart-item-qty {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        display: flex;
        gap: 0.6rem;
        align-items: center;
        justify-self: end;
    }
    /* Price on the second row, left under the title */
    .cart-item-price {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        text-align: left;
        margin-left: 4px;
    }
    /* Remove button on the second row at the right */
    .remove-btn {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
        justify-self: end;
        margin-left: 8px;
    }
    .cart-items-list { display: flex; flex-direction: column; gap: 1rem; }
    .cart-summary, .cart-actions, .cart-note {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }
}

/* Fix cart overflow on small screens: ensure cards fit inside the white container
   and allow elements to shrink/wrap instead of pushing the layout wide. */
@media (max-width: 700px) {
    .cart-section.cart-advanced {
        width: 100%;
        max-width: 99vw;
        padding-left: 0.8rem;
        padding-right: 0.8rem;
        box-sizing: border-box;
    }
    .cart-items-list {
        padding: 0; /* avoid extra horizontal inset */
    }
    .cart-item {
        width: 100%;
        box-sizing: border-box;
        overflow: hidden; /* clip any accidental overflow */
        flex-wrap: wrap; /* allow inner content to wrap on narrow screens */
        align-items: center;
        gap: 0.6rem;
    }
    .cart-item img {
        flex: 0 0 auto; /* keep thumbnail size stable */
    }
    .cart-item-title {
        flex: 1 1 auto;
        min-width: 0; /* critical: allow flex children to shrink */
        white-space: normal;
        word-break: break-word;
    }
    .cart-item-qty, .cart-item-price, .remove-btn {
        flex: 0 0 auto; /* keep controls from growing unexpectedly */
    }
    .cart-item-price { min-width: 70px; text-align: right; }
    .qty-btn { width: 30px; height: 30px; }
}

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap');
:root {
    /* global theme tokens */
    --main-pink: #f8b6d2;
    --light-pink: #ffe6f2;
    --hover-pink: #ff8fcf;
    --main-gray: #f7f7fa;
    --main-shadow: 0 4px 24px 0 rgba(248,182,210,0.15);
    --main-radius: 18px;
    /* layout tokens (ensure containers don't overflow the page) */
    --site-max-width: 1100px; /* global max width for centered content */
    --page-padding: 1.25rem;  /* horizontal padding used inside containers */
    --card-gap: 1rem;
}
* {
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
}
/* Generic centered container used throughout the site.
   Ensures inner content is padded and doesn't touch viewport edges. */
.container {
    width: 100%;
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
    box-sizing: border-box;
}
body {
    margin: 0;
    background: var(--main-gray);
    color: #333;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* prevent horizontal scroll from transforms or wide elements */
}
header {
    background: var(--main-pink);
    box-shadow: var(--main-shadow);
    display: flex;
    align-items: center;
    padding: 0.6rem var(--page-padding);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Make header content balanced: logo left, nav center, cart right */
header > .container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
}
header > .container .logo { justify-self: start; }
header > .container nav { justify-self: center; }
/* Ensure nav items themselves are centered and have a sensible max width */
header > .container nav {
    display: flex; /* reinforce flex */
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 720px; /* prevents nav from growing too wide */
}
header > .container .cart-icon { justify-self: end; }
.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.logo img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--light-pink);
    box-shadow: var(--main-shadow);
}
.brand {
    font-size: 2rem;
    font-weight: 700;
    color: #d63384;
    letter-spacing: 1px;
    transition: transform 0.2s;
}
.brand .pink {
    color: var(--hover-pink);
}
.nav-link {
    text-decoration: none;
    color: #d63384;
    font-weight: 600;
    font-size: 1.02rem; /* slightly smaller to help fit */
    position: relative;
    transition: color 0.2s;
}

nav {
    display: flex;
    gap: 1.1rem; /* slightly reduced gap so items fit */
}
.nav-link.active, .nav-link:hover {
    color: #fff;
}
.cart-icon {
    position: relative;
    cursor: pointer;
    transition: transform 0.2s;
}
.cart-icon img {
    width: 32px;
    height: 32px;
}
#cartCount {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #fff;
    color: #d63384;
    border-radius: 50%;
    padding: 2px 7px;
    font-size: 0.9rem;
    font-weight: bold;
    box-shadow: var(--main-shadow);
}
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem 0 0 0;
}
.hero {
    text-align: center;
    margin-bottom: 2rem;
}
.main-title {
    font-size: 2.5rem;
    color: #d63384;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
    text-shadow: 0 2px 8px #ffe6f2;
    animation: titleFadeIn 1.2s;
}
@keyframes titleFadeIn {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}
.subtitle {
    font-size: 1.3rem;
    color: #a9446a;
    margin-bottom: 1.5rem;
}
.hero-images {
    display: flex;
    justify-content: center;
    gap: 2rem;
}
.hero-images img {
    width: min(220px, 40vw);
    height: auto;
    border-radius: var(--main-radius);
    box-shadow: var(--main-shadow);
    background: var(--light-pink);
    transition: transform 0.3s;
}
.hero-images img:hover {
    transform: scale(1.08) rotate(-3deg);
}
.featured-products {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--main-radius);
    box-shadow: var(--main-shadow);
    padding: 2rem 2rem 1.5rem 2rem;
    margin-bottom: 2rem;
}
.featured-products h2 {
    color: #d63384;
    margin-bottom: 1.2rem;
    text-align: center;
    font-size: 2rem;
    letter-spacing: 1px;
}
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.product-card {
    background: var(--light-pink);
    border-radius: var(--main-radius);
    box-shadow: var(--main-shadow);
    padding: 1rem;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 32px 0 rgba(248,182,210,0.20);
}
.product-card .product-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #d63384;
    margin: 0.7rem 0 0.3rem 0;
    transition: transform 0.2s;
}
.product-card .product-title.animated {
    animation: jumpTilt 0.5s;
}
@keyframes jumpTilt {
    0% { transform: scale(1) rotate(0); }
    30% { transform: scale(1.2) rotate(-8deg); }
    60% { transform: scale(0.95) rotate(8deg); }
    100% { transform: scale(1) rotate(0); }
}
.product-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
    background: #fff;
    margin-bottom: 0.5rem;
    box-shadow: 0 2px 8px #ffe6f2;
    transition: transform 0.2s;
}
.product-card .add-to-cart {
    background: #d63384;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1.2rem;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0.7rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 2px 8px #ffe6f2;
    position: relative;
    z-index: 1;
}
.product-card .add-to-cart:active {
    background: var(--hover-pink);
    transform: scale(1.08) rotate(-3deg);
}
.cart-fly {
    position: absolute;
    pointer-events: none;
    z-index: 100;
    transition: transform 0.7s cubic-bezier(.68,-0.55,.27,1.55), opacity 0.7s;
    opacity: 1;
}
.cart-fly.hide {
    opacity: 0;
}
footer {
    background: var(--main-pink);
    color: #fff;
    padding: 2rem 0 1rem 0;
    margin-top: auto;
    box-shadow: var(--main-shadow);
    border-radius: var(--main-radius) var(--main-radius) 0 0;
}
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1100px;
    margin: 0 auto 1rem auto;
    gap: 2rem;
}
.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.footer-links a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}
.footer-links a:hover {
    color: #d63384;
}
.footer-contact p {
    margin: 0.2rem 0;
    font-size: 1rem;
}
.footer-bottom {
    text-align: center;
    font-size: 0.95rem;
    color: #fff;
    opacity: 0.8;
}
@media (max-width: 900px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-content {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
}
@media (max-width: 600px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
    /* gentle padding for narrow screens */
    header, .footer-content, .featured-products {
        padding: 0.5rem;
    }
    .main-title {
        font-size: 1.5rem;
    }
}

/* On narrow screens stack header elements and keep nav centered */
@media (max-width: 700px) {
    header > .container {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        row-gap: 0.4rem;
    }
    header > .container .logo { justify-self: center; }
    /* Make nav span full row under logo and stay centered */
    header > .container nav { justify-self: center; grid-column: 1 / -1; }
    header > .container .cart-icon { justify-self: center; }
    nav { flex-wrap: wrap; gap: 0.8rem; }
}

/* Improve mobile nav: keep items in a centered row when possible */
@media (max-width: 520px) {
    /* Force nav into a centered horizontal row and make it span entire header width */
    header > .container nav {
        display: inline-flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.85rem;
        width: 100%;
        padding: 0.2rem 0;
        grid-column: 1 / -1;
    }
    .nav-link {
        display: inline-block;
        padding: 0.18rem 0.4rem;
        font-size: 0.98rem;
        line-height: 1.1;
        text-align: center;
        white-space: nowrap;
    }
    /* If nav still wraps to 2 rows, keep the block centered */
    header > .container nav { text-align: center; }
    .cart-icon { margin-top: 0.25rem; }
}

/* --- Responsive harmonization (desktop / laptop / tablet / mobile) --- */
:root {
    /* Slightly narrower main column for better balance */
    --site-max-width: 1100px;
    --page-padding: 1rem;
    --card-gap: 1rem;
}

/* Ensure primary content areas share the same centered column and padding */
main, .site-inner, .products-section, .featured-products,
.checkout-section, .cart-section, .contact-section, .footer-content {
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--page-padding);
    box-sizing: border-box;
}

/* Centered inner container used across header/main/footer to align content */
.container {
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--page-padding);
    box-sizing: border-box;
}

/* Make header use a horizontal container (logo / nav / cart) */
header > .container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
}

/* Header / nav layout */
header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1rem var(--page-padding);
    box-sizing:border-box;
}
.logo { display:flex; align-items:center; gap:0.6rem; }
nav { display:flex; gap:0.9rem; align-items:center; flex-wrap:wrap; flex:1; justify-content:center; }
.cart-icon { display:flex; align-items:center; gap:0.4rem; }

/* Product grid: harmonious breakpoints */
.products-grid {
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--card-gap);
}
.product-card { padding: 1rem; }
.product-card img { height: 180px; }

/* Typography scaling */
/* ===== Header centering final override ===== */
/* Ensure header background spans full width while inner .container aligns with main content */
header {
    padding: 0 !important;
}
header > .container {
    padding: 0.75rem var(--page-padding) !important;
    max-width: var(--site-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Make sure nav occupies full inner width and is centered */
header > .container nav {
    width: 100% !important;
    justify-content: center !important;
}

.main-title { font-size: clamp(1.4rem, 2.8vw, 2.6rem); }
.subtitle { font-size: clamp(0.95rem, 1.6vw, 1.15rem); }

/* Checkout stepper + payment tiles responsive tweaks */
.checkout-steps { gap:0.6rem; }
.payment-methods { gap:0.6rem; }

/* Breakpoints */
@media (max-width: 1199px) {
    .products-grid { grid-template-columns: repeat(3, 1fr); }
    .product-card img { height: 170px; }
}
@media (max-width: 899px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); }
    header { padding:0.9rem 1rem; }
    .product-card img { height: 150px; }
    .brand-curve { font-size: 1.6rem; }
}
@media (max-width: 599px) {
    .products-grid { grid-template-columns: 1fr; }
    header { flex-direction:column; align-items:center; gap:0.5rem; padding:0.6rem var(--page-padding); }
    nav { width:100%; order:3; display:flex; justify-content:center; align-items:center; gap:0.8rem; flex-wrap:wrap; }
    .logo { order:1; }
    .cart-icon { order:2; }
    .product-card img { height: 140px; }
    .product-card { padding: 0.8rem; }
    .payment-method { flex:1 1 100%; }
    .checkout-steps { flex-direction:column; gap:0.5rem; }
}

/* Small polish: equalize footer and spacing on narrow screens */
@media (max-width: 480px) {
    .footer-content { padding: 0.6rem; }
    .footer-contact p { font-size: 0.92rem; }
    .footer-bottom { font-size: 0.85rem; }
}


/* --- Modern product card and checkout stepper styles --- */
.products-section {
    max-width: var(--site-max-width);
    margin: 2rem auto;
    padding: 0 var(--page-padding);
}
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.product-card {
    background: linear-gradient(180deg, #fff 0%, #fff8fb 100%);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 6px 18px rgba(214,51,132,0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 34px rgba(214,51,132,0.14);
}
.product-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
}
.product-title {
    font-weight: 700;
    color: #6b1230;
    font-size: 1rem;
}
.product-price {
    color: #d63384;
    font-weight: 800;
}
.add-to-cart {
    margin-top: auto;
    background: linear-gradient(90deg,#ff8fcf 0%,#d63384 100%);
    color: white;
    border: none;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
}
.add-to-cart:hover { opacity: 0.95; transform: translateY(-2px); }
.cart-fly { transition: transform 0.7s cubic-bezier(.2,.9,.3,1), opacity 0.5s; z-index:9999; pointer-events:none; }
.product-title.animated { transform: scale(1.04); color: #ff6fa3; transition: transform 0.25s; }

/* Category headings and tabs */
.category-row { display:flex; align-items:center; justify-content:space-between; margin: 0.6rem 0; gap:1rem; }
.category-tabs { display:flex; gap:0.5rem; }
.category-tab { padding:0.45rem 0.8rem; border-radius:999px; background:#fff0fa; color:#a9446a; font-weight:700; cursor:pointer; border:1px solid transparent; }
.category-tab.active { background: linear-gradient(90deg,#ffd9ea 0%,#ffb6dd 100%); color:#6b1230; box-shadow:0 6px 18px rgba(214,51,132,0.07); }

/* Responsive adjustments */
@media (max-width: 1100px) { .products-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 800px) { .products-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 500px) { .products-grid { grid-template-columns: 1fr; } .product-card img { height: 140px; } }

/* Checkout stepper */
.checkout-steps { display:flex; gap:0.6rem; width:100%; margin-bottom:1rem; }
.checkout-step { flex:1; background:#fff8fb; border-radius:10px; padding:0.6rem 0.8rem; text-align:center; font-weight:700; color:#a9446a; border:1px solid rgba(214,51,132,0.06); position:relative; }
.checkout-step::after { content:''; position:absolute; right:-10px; top:50%; transform:translateY(-50%); width:20px; height:20px; background:transparent; }
.checkout-step.active { background:linear-gradient(90deg,#ffb6dd 0%,#ff8fcf 100%); color:#fff; box-shadow:0 8px 26px rgba(214,51,132,0.12); }
.checkout-step.completed { background:linear-gradient(90deg,#dbeffe 0%,#c8f1ff 100%); color:#114d6d; }
.checkout-step .step-number { display:block; font-size:0.85rem; opacity:0.9; }
.checkout-step .step-label { display:block; font-size:0.95rem; }

/* Desktop-specific: make the three header icons and the checkout stepper slightly smaller
   to improve framing on wide screens (targets cart/checkout/contact page headers). */
@media (min-width: 900px) {
    .checkout-step {
        padding: 0.45rem 0.6rem; /* reduce pill size */
        font-size: 0.95rem;
        border-radius: 8px;
    }
    .checkout-step .step-number { font-size: 0.8rem; }
    .checkout-step .step-label { font-size: 0.9rem; }

    /* Header icons on cart/checkout/contact pages */
    .cart-header-icon, .checkout-header-icon, .contact-header-icon {
        width: 72px;
        height: 72px;
        padding: 8px;
        object-fit: contain;
    }
    .cart-header h2, .checkout-header h2, .contact-header h2 {
        font-size: 1.15rem;
    }
}

/* Ensure advanced page cards are centered on narrower viewports so the white
   card doesn't appear shifted to the left. This keeps the inner card centered
   regardless of header padding or outer layout quirks. */
@media (max-width: 900px) {
    .cart-section.cart-advanced,
    .checkout-section.checkout-advanced,
    .contact-section.contact-advanced {
        display: flex;
        justify-content: center; /* center the inner .container */
        box-sizing: border-box;
        width: 100%;
        padding-left: var(--page-padding);
        padding-right: var(--page-padding);
        margin-left: 0; /* make sure outer margin doesn't offset */
        margin-right: 0;
    }
    .cart-section.cart-advanced > .container,
    .checkout-section.checkout-advanced > .container,
    .contact-section.contact-advanced > .container {
        width: 100%;
        max-width: 600px; /* keep inner card a comfortable width */
        padding: 0; /* outer section provides padding now */
        box-sizing: border-box;
    }
}