/* Shared visual system for every storefront and management page. */
:root {
    --ui-paper: #faf8f5;
    --ui-white: #fff;
    --ui-ink: #25352f;
    --ui-muted: #69736c;
    --ui-line: #e5e2da;
    --ui-forest: #203d35;
    --ui-sage: #edf2ed;
    --ui-gold: #987447;
    --primary-emerald: #203d35;
    --emerald-light: #31594c;
    --emerald-subtle: #edf2ed;
    --primary-color: #203d35;
    --primary-light: #31594c;
    --primary: #203d35;
    --secondary-color: #987447;
    --gold-accent: #987447;
    --bg-ivory: #faf8f5;
    --bg-color: #faf8f5;
    --text-charcoal: #25352f;
    --text-dark: #25352f;
}
html { scroll-behavior: smooth; }
body {
    background: var(--ui-paper) !important;
    color: var(--ui-ink);
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
img { max-width: 100%; }
a, button, input, select, textarea { touch-action: manipulation; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--ui-gold) !important;
    outline-offset: 3px;
}
button:disabled { opacity: .55; cursor: not-allowed; }
.announcement-bar, .cart-top-banner {
    background: var(--ui-forest) !important;
    color: #fff !important;
    letter-spacing: 1px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.luxury-header, .pdp-header, .mobile-header-3d, .page-header, .premium-header {
    background: #fff !important;
    border-bottom: 1px solid var(--ui-line) !important;
    box-shadow: none !important;
    padding: 16px 20px;
}
.header-title, .center-brand .title { color: var(--ui-forest); font-weight: 700; }
.btn-luxury-icon, .btn-header-icon, .btn-3d, .btn-back, .back-btn {
    background: var(--ui-paper) !important;
    color: var(--ui-forest) !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
.bottom-nav, .floating-dock, .bottom-dock, .pdp-bottom-bar, .page-footer {
    background: #fff !important;
    border-top: 1px solid var(--ui-line) !important;
    box-shadow: 0 -4px 20px #203d3508 !important;
}
.bottom-nav-item.active { color: var(--ui-forest) !important; }
/* Catalogue and wishlist */
main { width: 100%; }
.hero-banner-wrap { padding: 24px 20px 0; }
.banner-card { border-radius: 8px !important; box-shadow: none !important; }
.categories-shelf { background: transparent !important; border-bottom: 1px solid var(--ui-line); }
.cat-avatar-wrap, .cat-avatar-wrap img { border-radius: 50% !important; box-shadow: none !important; }
.catalog-container { padding: 28px 20px; }
.catalog-heading { gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.catalog-heading h2 { font-size: 30px; }
.product-grid, .mainbody { gap: 18px; }
.couture-card, .productcard, .compact-card {
    background: #fff;
    border: 1px solid var(--ui-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    overflow: hidden;
}
.couture-details, .compact-info { padding: 14px; }
.item-title, .product-name { line-height: 1.55; color: var(--ui-ink); }
.item-title { font-size: 13px; -webkit-line-clamp: 3; min-height: 40px; }
.item-specs { margin: 4px 0 12px; }
.tag-discount, .discount-badge { background: var(--ui-forest) !important; color: #fff !important; border-radius: 3px; }
.sale-price, .selling-price, .price-text, .footer-price { color: var(--ui-forest) !important; }
.img-wrapper { background: var(--ui-paper); }
.products-section { max-width: 1240px; margin: 0 auto; padding: 24px 20px; }
/* Primary actions use the same shape and colour throughout the purchase. */
.btn-add-bag, .add-btn, .shop-btn, .shop-now-btn, .place-order-btn,
.btn-deliver-here, .continue-btn, .btn-bottom-buy, .submit-btn, .btn-shop,
.btn-checkout-luxury, .btn-primary {
    background: var(--ui-forest) !important;
    color: #fff !important;
    border: 1px solid var(--ui-forest) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-weight: 700;
    min-height: 44px;
}
.btn-add-bag { padding: 11px 6px; }
.btn-add-bag:hover, .continue-btn:hover, .submit-btn:hover, .btn-primary:hover {
    background: #31594c !important;
}
.btn-bottom-cart { border-radius: 6px !important; color: var(--ui-forest); border-color: var(--ui-forest); }
/* Product detail */
.carousel-wrap { border-radius: 8px; overflow: hidden; box-shadow: none; }
.product-main-sheet { background: #fff; border: 1px solid var(--ui-line); border-radius: 8px !important; padding: 26px 22px; margin-top: 16px; }
.product-title { font-family: Georgia, serif; font-size: clamp(25px, 3vw, 36px); line-height: 1.25; font-weight: 500; color: var(--ui-forest); }
.brand-badge { color: var(--ui-gold); letter-spacing: 1.5px; }
.size-selection-card, .offers-card, .details-section { border-radius: 8px !important; border-color: var(--ui-line) !important; box-shadow: none !important; }
.size-pill-label { border-radius: 5px !important; min-width: 44px; min-height: 44px; }
.size-radio-input:checked + .size-pill-label { background: var(--ui-forest); border-color: var(--ui-forest); color: #fff; }
.size-radio-input:focus-visible + .size-pill-label { outline: 3px solid var(--ui-gold); outline-offset: 3px; }
.trust-grid { background: var(--ui-sage); border-radius: 8px; }
.review-row { border-color: var(--ui-line); padding-top: 18px; padding-bottom: 18px; }
/* Bag, address, payment, confirmation */
.cart-item-card, .price-details-card, .offer-progress-card, .stepper-card,
.payment-option, .offer-card, .card-main, .empty-cart-container, .empty-state {
    background: #fff;
    border: 1px solid var(--ui-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.cart-item-card { padding: 18px; margin-bottom: 16px; }
.price-details-card { padding: 22px; }
.card-actions, .total-amount-row, .detail-row { border-color: var(--ui-line); }
.qty-pill, .counter-pill { background: var(--ui-forest); border-radius: 6px; }
.payment-intro { background: var(--ui-forest); border-radius: 10px; }
.payment-option:has(input:checked) { background: var(--ui-sage); border-color: var(--ui-forest) !important; }
.form-control, .form-select, .input-floating-group input, .input-floating-group textarea {
    background: #fff !important;
    border: 1px solid #cbd2ca !important;
    border-radius: 6px !important;
    color: var(--ui-ink);
    min-height: 46px;
    box-shadow: none !important;
}
.form-control:focus, .form-select:focus, .input-floating-group input:focus {
    border-color: var(--ui-forest) !important;
}
.form-label { color: var(--ui-ink); font-weight: 600; }
.success-banner { background: var(--ui-sage); color: var(--ui-forest); }
.delivery-strip, .status-pill, .savings-banner { background: #f0f3eb; color: #355238; }
/* Account, order tracking, information and policies */
.story-card, .info-card, .form-card, .policy-container, .menu-card,
.profile-card, .order-card, .tracking-card, .track-card, .search-card {
    background: #fff;
    border: 1px solid var(--ui-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.about-hero, .contact-hero, .policy-header, .profile-hero, .track-hero { background: var(--ui-forest) !important; }
.policy-body { font-size: 14px; line-height: 1.85; padding: 28px; }
.policy-body h3 { margin-top: 28px; color: var(--ui-forest); }
.profile-header { border-radius: 0 !important; box-shadow: none !important; border-bottom: 1px solid var(--ui-line); }
.icon-circle, .icon-box, .empty-icon { background: var(--ui-sage); color: var(--ui-forest); }
.custom-offcanvas, .powerful-offcanvas { background: var(--ui-paper) !important; }
.premium-footer { background: #203d35 !important; }
.pf-trust-strip { background: #eef2ec !important; }
/* Management screens retain their existing controls and table structure. */
body[data-ui-page="admin"] .card,
body[data-ui-page="kalu"] .card,
body[data-ui-page="vc"] .panel { border: 1px solid var(--ui-line); border-radius: 10px; box-shadow: none; }
body[data-ui-page="admin"] .card-header { background: var(--ui-forest) !important; padding: 20px; }
body[data-ui-page="admin"] .card-body { padding: 26px; }
/* Wide screens get room to breathe; checkout stays comfortably readable. */
@media (min-width: 768px) {
    body[data-ui-page="index"] main, body[data-ui-page="shop"] main { max-width: 1280px; margin: auto; }
    .product-grid, .mainbody { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cart-container, .about-content-wrapper, .contact-content-wrapper { max-width: 960px; margin-left: auto; margin-right: auto; }
    .policy-container { max-width: 900px; margin: 32px auto; }
    body[data-ui-page="singlepageview"] main { max-width: 900px; margin: 24px auto; }
    body[data-ui-page="singlepageview"] .carousel-wrap { max-width: 600px; margin: auto; }
    body[data-ui-page="checkout"] main, body[data-ui-page="order-summary"] main { max-width: 760px; margin-left: auto; margin-right: auto; }
    body[data-ui-page="address"] form { max-width: 720px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1100px) {
    .product-grid, .mainbody { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .product-grid, .mainbody { gap: 10px; }
    .couture-details { padding: 10px; }
    .catalog-container { padding: 22px 12px; }
    .catalog-heading h2 { font-size: 26px; }
    .product-main-sheet { padding: 22px 16px; }
    .policy-body { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .announcement-text { animation: none !important; padding-left: 0; }
    .pulsing-dot, .confetti-piece { animation: none !important; }
    .couture-preview img, .productimage { transition: none !important; }
}