/* =================================================================
   PastryByP – Product Catalog & Cart
   Warm cream/rose/gold bakery theme
   ================================================================= */

/* -- CSS Custom Properties ---------------------------------------- */
.pastrybyp-catalog,
.pastrybyp-cart-icon,
.pastrybyp-toast {
    --pbp-rose: #c76b7f;
    --pbp-rose-dark: #a85568;
    --pbp-rose-light: #f9eff1;
    --pbp-rose-glow: rgba(199,107,127,.25);
    --pbp-cream: #fdf8f4;
    --pbp-cream-dark: #f5ede5;
    --pbp-warm-gray: #6b5e58;
    --pbp-warm-gray-light: #a89990;
    --pbp-text: #3d302a;
    --pbp-text-light: #8a7c75;
    --pbp-border: #e8ddd6;
    --pbp-gold: #c4a96a;
    --pbp-gold-light: rgba(196,169,106,.12);
    --pbp-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --pbp-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --pbp-radius: 12px;
    --pbp-radius-sm: 8px;
}


/* =================================================================
   1. CATALOG CONTAINER & TABS
   ================================================================= */

.pastrybyp-catalog {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
    font-family: var(--pbp-font-body) !important;
    color: var(--pbp-text) !important;
    box-sizing: border-box !important;
}

.pastrybyp-catalog *,
.pastrybyp-catalog *::before,
.pastrybyp-catalog *::after {
    box-sizing: border-box !important;
}

/* -- Tabs --------------------------------------------------------- */
.pastrybyp-catalog__tabs {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 28px !important;
    justify-content: center !important;
}

.pastrybyp-catalog__tab {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 28px !important;
    border: 2px solid var(--pbp-border) !important;
    border-radius: 50px !important;
    background: #fff !important;
    font-family: var(--pbp-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--pbp-warm-gray) !important;
    cursor: pointer !important;
    transition: all .3s cubic-bezier(.4,0,.2,1) !important;
    letter-spacing: .3px !important;
    line-height: 1.4 !important;
}

.pastrybyp-catalog__tab:hover {
    border-color: var(--pbp-rose) !important;
    color: var(--pbp-rose) !important;
    background: var(--pbp-rose-light) !important;
}

.pastrybyp-catalog__tab.is-active {
    background: var(--pbp-rose) !important;
    border-color: var(--pbp-rose) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px var(--pbp-rose-glow) !important;
}


/* -- Grid --------------------------------------------------------- */
.pastrybyp-catalog__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}

/* Hidden grid (tab switching) – must beat display:grid !important */
.pastrybyp-catalog__grid.is-hidden {
    display: none !important;
}


/* =================================================================
   2. PRODUCT / MENU CARDS
   ================================================================= */

.pastrybyp-pcard {
    background: #fff !important;
    border-radius: var(--pbp-radius) !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(61,48,42,.07) !important;
    border: 1px solid var(--pbp-border) !important;
    transition: transform .3s cubic-bezier(.4,0,.2,1),
                box-shadow .3s cubic-bezier(.4,0,.2,1) !important;
    display: flex !important;
    flex-direction: column !important;
}

.pastrybyp-pcard:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 28px rgba(61,48,42,.12) !important;
}

/* -- Card adding animation ---------------------------------------- */
.pastrybyp-pcard.is-adding {
    animation: pbp-cardPulse .4s cubic-bezier(.4,0,.2,1) !important;
}

@keyframes pbp-cardPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* -- Card image --------------------------------------------------- */
.pastrybyp-pcard__img {
    position: relative !important;
    width: 100% !important;
    padding-top: 75% !important; /* 4:3 aspect ratio */
    overflow: hidden !important;
    border-radius: var(--pbp-radius) var(--pbp-radius) 0 0 !important;
}

.pastrybyp-pcard__img img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform .4s ease !important;
}

.pastrybyp-pcard:hover .pastrybyp-pcard__img img {
    transform: scale(1.04) !important;
}

/* -- Sold-out badge ----------------------------------------------- */
.pastrybyp-pcard__badge {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    padding: 4px 12px !important;
    background: #d9434f !important;
    color: #fff !important;
    font-family: var(--pbp-font-body) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    border-radius: 50px !important;
    z-index: 2 !important;
    line-height: 1.5 !important;
}

/* -- Menu card accent --------------------------------------------- */
.pastrybyp-pcard--menu {
    border-color: var(--pbp-gold) !important;
}

.pastrybyp-pcard--menu .pastrybyp-pcard__img::after {
    content: attr(data-badge) !important;
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    padding: 4px 14px !important;
    background: var(--pbp-gold) !important;
    color: #fff !important;
    font-family: var(--pbp-font-body) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    border-radius: 50px !important;
    z-index: 2 !important;
    line-height: 1.5 !important;
}

/* -- Placeholder (no image) --------------------------------------- */
.pastrybyp-pcard__placeholder {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 56px !important;
    background: var(--pbp-cream) !important;
    line-height: 1 !important;
}

/* -- Card body ---------------------------------------------------- */
.pastrybyp-pcard__body {
    padding: 18px 20px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.pastrybyp-pcard__name {
    font-family: var(--pbp-font-display) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--pbp-text) !important;
    margin: 0 0 6px !important;
    line-height: 1.3 !important;
}

.pastrybyp-pcard__desc {
    font-family: var(--pbp-font-body) !important;
    font-size: 13px !important;
    color: var(--pbp-text-light) !important;
    line-height: 1.5 !important;
    margin: 0 0 12px !important;
    flex: 1 !important;
}

/* -- Menu card items list ----------------------------------------- */
.pastrybyp-pcard__items {
    list-style: none !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    border-top: 1px solid var(--pbp-border) !important;
    padding-top: 10px !important;
}

.pastrybyp-pcard__items li {
    font-family: var(--pbp-font-body) !important;
    font-size: 12px !important;
    color: var(--pbp-warm-gray-light) !important;
    padding: 3px 0 !important;
    line-height: 1.4 !important;
}

.pastrybyp-pcard__items li::before {
    content: '\2022' !important;
    color: var(--pbp-gold) !important;
    margin-right: 6px !important;
}

/* -- Card footer -------------------------------------------------- */
.pastrybyp-pcard__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: auto !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--pbp-border) !important;
}

/* -- Price -------------------------------------------------------- */
.pastrybyp-pcard__price {
    font-family: var(--pbp-font-body) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--pbp-rose) !important;
    line-height: 1.3 !important;
}

.pastrybyp-pcard__price del {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--pbp-warm-gray-light) !important;
    text-decoration: line-through !important;
    margin-right: 6px !important;
}

/* -- Add button --------------------------------------------------- */
.pastrybyp-pcard__add {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 18px !important;
    background: var(--pbp-rose) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    font-family: var(--pbp-font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all .25s cubic-bezier(.4,0,.2,1) !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}

.pastrybyp-pcard__add:hover {
    background: var(--pbp-rose-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px var(--pbp-rose-glow) !important;
}

.pastrybyp-pcard__add:active {
    transform: translateY(0) !important;
}

/* -- Add button disabled (sold out) ------------------------------- */
.pastrybyp-pcard__add:disabled {
    background: var(--pbp-warm-gray-light) !important;
    cursor: not-allowed !important;
    opacity: .55 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* -- Add button gap for icon + text ------------------------------- */
.pastrybyp-pcard__add svg {
    flex-shrink: 0 !important;
    margin-right: 4px !important;
}

/* -- Add button checkmark state ----------------------------------- */
.pastrybyp-pcard__add.is-added {
    background: #5cb85c !important;
    pointer-events: none !important;
}


/* =================================================================
   3. CART ICON (HEADER)
   ================================================================= */

.pastrybyp-cart-icon {
    position: relative !important;
    display: inline-block !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

.pastrybyp-cart-icon__svg {
    width: 24px !important;
    height: 24px !important;
    color: var(--pbp-text) !important;
    transition: color .2s ease !important;
    display: block !important;
}

.pastrybyp-cart-icon:hover .pastrybyp-cart-icon__svg {
    color: var(--pbp-rose) !important;
}

/* -- Cart badge --------------------------------------------------- */
.pastrybyp-cart-icon__count {
    position: absolute !important;
    top: -8px !important;
    right: -10px !important;
    min-width: 18px !important;
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 5px !important;
    background: var(--pbp-rose) !important;
    color: #fff !important;
    font-family: var(--pbp-font-body) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    line-height: 1 !important;
    box-shadow: 0 2px 6px var(--pbp-rose-glow) !important;
    transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
}

.pastrybyp-cart-icon__count:empty {
    display: none !important;
}

/* Badge bounce when count changes (toggle via JS) */
.pastrybyp-cart-icon__count.is-bumped {
    animation: pbp-badgeBounce .4s cubic-bezier(.4,0,.2,1) !important;
}

@keyframes pbp-badgeBounce {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}


/* =================================================================
   CART DROPDOWN
   ================================================================= */

.pastrybyp-cart-dropdown {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    width: 280px !important;
    background: #fff !important;
    border: 1px solid var(--pbp-border) !important;
    border-radius: var(--pbp-radius) !important;
    box-shadow: 0 10px 40px rgba(61,48,42,.14), 0 2px 10px rgba(61,48,42,.06) !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) !important;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease !important;
    font-family: var(--pbp-font-body) !important;
}

.pastrybyp-cart-icon.is-open .pastrybyp-cart-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* -- Dropdown items area ------------------------------------------ */
.pastrybyp-cart-dropdown__items {
    max-height: 220px !important;
    overflow-y: auto !important;
    padding: 12px 16px !important;
}

.pastrybyp-cart-dropdown__items::-webkit-scrollbar {
    width: 4px;
}

.pastrybyp-cart-dropdown__items::-webkit-scrollbar-track {
    background: transparent;
}

.pastrybyp-cart-dropdown__items::-webkit-scrollbar-thumb {
    background: var(--pbp-border);
    border-radius: 4px;
}

/* -- Single dropdown item ----------------------------------------- */
.pastrybyp-cart-dropdown__item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 0 !important;
    font-size: 13px !important;
    color: var(--pbp-text) !important;
    line-height: 1.4 !important;
}

.pastrybyp-cart-dropdown__item + .pastrybyp-cart-dropdown__item {
    border-top: 1px solid var(--pbp-border) !important;
}

.pastrybyp-cart-dropdown__item-name {
    flex: 1 !important;
    margin-right: 12px !important;
    font-weight: 500 !important;
}

.pastrybyp-cart-dropdown__item-price {
    font-weight: 600 !important;
    color: var(--pbp-rose) !important;
    white-space: nowrap !important;
}

/* -- Empty state -------------------------------------------------- */
.pastrybyp-cart-dropdown__empty {
    padding: 24px 16px !important;
    text-align: center !important;
    font-size: 13px !important;
    color: var(--pbp-warm-gray-light) !important;
}

/* -- Dropdown footer ---------------------------------------------- */
.pastrybyp-cart-dropdown__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    border-top: 1px solid var(--pbp-border) !important;
    background: var(--pbp-cream) !important;
    border-radius: 0 0 var(--pbp-radius) var(--pbp-radius) !important;
}

.pastrybyp-cart-dropdown__total {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--pbp-text) !important;
}

.pastrybyp-cart-dropdown__checkout {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 16px !important;
    background: var(--pbp-rose) !important;
    color: #fff !important;
    font-family: var(--pbp-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    transition: background .25s ease !important;
    white-space: nowrap !important;
}

.pastrybyp-cart-dropdown__checkout:hover {
    background: var(--pbp-rose-dark) !important;
    color: #fff !important;
    text-decoration: none !important;
}


/* =================================================================
   4. CHECKOUT MODAL
   ================================================================= */

/* -- Overlay backdrop --------------------------------------------- */
.pastrybyp-checkout-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(61,48,42,.5) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 999999998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .35s ease, visibility .35s ease !important;
}

.pastrybyp-checkout-overlay.is-active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* -- Modal panel -------------------------------------------------- */
.pastrybyp-checkout-modal {
    --pbp-rose: #c76b7f;
    --pbp-rose-dark: #a85568;
    --pbp-rose-light: #f9eff1;
    --pbp-rose-glow: rgba(199,107,127,.25);
    --pbp-cream: #fdf8f4;
    --pbp-cream-dark: #f5ede5;
    --pbp-warm-gray: #6b5e58;
    --pbp-warm-gray-light: #a89990;
    --pbp-text: #3d302a;
    --pbp-text-light: #8a7c75;
    --pbp-border: #e8ddd6;
    --pbp-gold: #c4a96a;
    --pbp-gold-light: rgba(196,169,106,.12);
    --pbp-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --pbp-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --pbp-radius: 12px;
    --pbp-radius-sm: 8px;

    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(.95) !important;
    width: 520px !important;
    max-width: 94vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 36px !important;
    background: #fff !important;
    border-radius: var(--pbp-radius) !important;
    box-shadow: 0 20px 60px rgba(61,48,42,.2), 0 4px 20px rgba(61,48,42,.08) !important;
    z-index: 999999999 !important;
    font-family: var(--pbp-font-body) !important;
    color: var(--pbp-text) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .35s cubic-bezier(.22,1,.36,1),
                visibility .35s cubic-bezier(.22,1,.36,1),
                transform .35s cubic-bezier(.22,1,.36,1) !important;
}

.pastrybyp-checkout-modal.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

.pastrybyp-checkout-modal *,
.pastrybyp-checkout-modal *::before,
.pastrybyp-checkout-modal *::after {
    box-sizing: border-box !important;
}

/* Custom scrollbar inside modal */
.pastrybyp-checkout-modal::-webkit-scrollbar {
    width: 6px;
}
.pastrybyp-checkout-modal::-webkit-scrollbar-track {
    background: transparent;
}
.pastrybyp-checkout-modal::-webkit-scrollbar-thumb {
    background: var(--pbp-border);
    border-radius: 6px;
}

/* -- Close button ------------------------------------------------- */
.pastrybyp-checkout__close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,.7) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid var(--pbp-border) !important;
    border-radius: var(--pbp-radius-sm) !important;
    color: var(--pbp-warm-gray-light) !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all .2s !important;
    z-index: 2 !important;
}

.pastrybyp-checkout__close:hover {
    color: var(--pbp-rose) !important;
    border-color: var(--pbp-rose) !important;
    background: var(--pbp-rose-light) !important;
}

/* -- Checkout title ----------------------------------------------- */
.pastrybyp-checkout__title {
    font-family: var(--pbp-font-display) !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    color: var(--pbp-text) !important;
    margin: 0 0 24px !important;
    line-height: 1.3 !important;
}

/* -- Checkout items ----------------------------------------------- */
.pastrybyp-checkout__items {
    margin-bottom: 20px !important;
}

.pastrybyp-checkout__item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--pbp-border) !important;
}

.pastrybyp-checkout__item:last-child {
    border-bottom: none !important;
}

/* -- Item info ---------------------------------------------------- */
.pastrybyp-checkout__item-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.pastrybyp-checkout__item-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--pbp-text) !important;
    line-height: 1.3 !important;
}

.pastrybyp-checkout__item-price {
    font-size: 13px !important;
    color: var(--pbp-text-light) !important;
    line-height: 1.3 !important;
}

/* -- Quantity controls -------------------------------------------- */
.pastrybyp-checkout__item-qty {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.pastrybyp-checkout__qty-btn {
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: var(--pbp-cream) !important;
    border: 1px solid var(--pbp-border) !important;
    border-radius: 50% !important;
    font-family: var(--pbp-font-body) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--pbp-warm-gray) !important;
    cursor: pointer !important;
    transition: all .2s ease !important;
    line-height: 1 !important;
}

.pastrybyp-checkout__qty-btn:hover {
    background: var(--pbp-rose-light) !important;
    border-color: var(--pbp-rose) !important;
    color: var(--pbp-rose) !important;
}

.pastrybyp-checkout__qty-value {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--pbp-text) !important;
    min-width: 20px !important;
    text-align: center !important;
    line-height: 1 !important;
}

/* -- Remove item button ------------------------------------------- */
.pastrybyp-checkout__item-remove {
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    font-size: 18px !important;
    color: var(--pbp-warm-gray-light) !important;
    cursor: pointer !important;
    transition: color .2s ease !important;
    line-height: 1 !important;
    border-radius: 50% !important;
}

.pastrybyp-checkout__item-remove:hover {
    color: #d9434f !important;
    background: rgba(217,67,79,.08) !important;
}

/* -- Checkout total ----------------------------------------------- */
.pastrybyp-checkout__total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 0 !important;
    margin-bottom: 20px !important;
    border-top: 2px solid var(--pbp-border) !important;
    font-family: var(--pbp-font-body) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--pbp-text) !important;
}

.pastrybyp-checkout__total strong {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--pbp-rose) !important;
}

/* -- Threshold warning -------------------------------------------- */
.pastrybyp-checkout__threshold {
    padding: 20px !important;
    margin-bottom: 20px !important;
    background: var(--pbp-cream) !important;
    border: 1px solid var(--pbp-gold) !important;
    border-radius: var(--pbp-radius-sm) !important;
    font-family: var(--pbp-font-body) !important;
    font-size: 14px !important;
    color: var(--pbp-warm-gray) !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

.pastrybyp-checkout__threshold-icon {
    font-size: 28px !important;
    margin-bottom: 8px !important;
    line-height: 1 !important;
}

.pastrybyp-checkout__threshold p {
    margin: 0 0 8px !important;
}

.pastrybyp-checkout__threshold-hint {
    font-size: 13px !important;
    color: var(--pbp-text-light) !important;
    margin-bottom: 16px !important;
}

.pastrybyp-checkout__threshold .pastrybyp-trigger--btn {
    display: inline-flex !important;
    margin-top: 4px !important;
    font-size: 14px !important;
    padding: 12px 28px !important;
}

/* -- Checkout form ------------------------------------------------ */
.pastrybyp-checkout__form {
    margin-top: 8px !important;
}

/* -- Field styles (mirrored from frontend.css for standalone use) - */
.pastrybyp-checkout-modal .pastrybyp-field {
    margin-bottom: 20px !important;
}

.pastrybyp-checkout-modal .pastrybyp-field label {
    display: block !important;
    font-family: var(--pbp-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--pbp-warm-gray) !important;
    margin-bottom: 6px !important;
    letter-spacing: .6px !important;
    text-transform: uppercase !important;
}

.pastrybyp-checkout-modal .pastrybyp-field label .required {
    color: var(--pbp-rose) !important;
    font-weight: 400 !important;
}

.pastrybyp-checkout-modal .pastrybyp-field input,
.pastrybyp-checkout-modal .pastrybyp-field select,
.pastrybyp-checkout-modal .pastrybyp-field textarea {
    width: 100% !important;
    padding: 14px 18px !important;
    border: 1px solid var(--pbp-border) !important;
    border-radius: var(--pbp-radius-sm) !important;
    font-family: var(--pbp-font-body) !important;
    font-size: 15px !important;
    color: var(--pbp-text) !important;
    background: #fff !important;
    transition: border-color .25s, box-shadow .25s, background .25s !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
}

.pastrybyp-checkout-modal .pastrybyp-field input:hover,
.pastrybyp-checkout-modal .pastrybyp-field select:hover,
.pastrybyp-checkout-modal .pastrybyp-field textarea:hover {
    border-color: #d4c4bb !important;
}

.pastrybyp-checkout-modal .pastrybyp-field input:focus,
.pastrybyp-checkout-modal .pastrybyp-field select:focus,
.pastrybyp-checkout-modal .pastrybyp-field textarea:focus {
    outline: none !important;
    border-color: var(--pbp-rose) !important;
    box-shadow: 0 0 0 3px var(--pbp-rose-glow) !important;
    background: #fff !important;
}

.pastrybyp-checkout-modal .pastrybyp-field input::placeholder,
.pastrybyp-checkout-modal .pastrybyp-field textarea::placeholder {
    color: #c4b8b0 !important;
    font-weight: 400 !important;
}

.pastrybyp-checkout-modal .pastrybyp-field textarea {
    resize: vertical !important;
    min-height: 100px !important;
}

/* -- Submit button (mirrored from frontend.css) ------------------- */
.pastrybyp-checkout-modal .pastrybyp-form__submit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 24px !important;
    background: var(--pbp-rose) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    font-family: var(--pbp-font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: .4px !important;
    cursor: pointer !important;
    margin-top: 6px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all .3s cubic-bezier(.4,0,.2,1) !important;
    box-shadow: 0 4px 20px var(--pbp-rose-glow) !important;
    box-sizing: border-box !important;
}

.pastrybyp-checkout-modal .pastrybyp-form__submit::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 50%) !important;
    pointer-events: none !important;
}

.pastrybyp-checkout-modal .pastrybyp-form__submit:hover {
    background: var(--pbp-rose-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 24px rgba(199,107,127,.35) !important;
}

.pastrybyp-checkout-modal .pastrybyp-form__submit:active {
    transform: translateY(0) !important;
}

.pastrybyp-checkout-modal .pastrybyp-form__submit:disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* -- Checkout success state --------------------------------------- */
.pastrybyp-checkout__success {
    text-align: center !important;
    padding: 40px 20px !important;
}

.pastrybyp-checkout__success h3 {
    font-family: var(--pbp-font-display) !important;
    font-size: 24px !important;
    color: var(--pbp-text) !important;
    margin: 0 0 8px !important;
}

.pastrybyp-checkout__success p {
    font-family: var(--pbp-font-body) !important;
    font-size: 15px !important;
    color: var(--pbp-text-light) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}


/* -- Checkout feedback -------------------------------------------- */
.pastrybyp-checkout__feedback,
.pastrybyp-form__feedback {
    font-family: var(--pbp-font-body) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    min-height: 0 !important;
    margin-bottom: 8px !important;
}

.pastrybyp-checkout__feedback.is-error,
.pastrybyp-form__feedback.is-error {
    color: #d9434f !important;
    padding: 10px 14px !important;
    background: rgba(217,67,79,.07) !important;
    border-radius: var(--pbp-radius-sm) !important;
}

/* -- Checkout empty state ----------------------------------------- */
.pastrybyp-checkout__empty {
    text-align: center !important;
    padding: 24px 0 !important;
    color: var(--pbp-warm-gray-light) !important;
    font-size: 15px !important;
}

/* -- "Coming soon" state (store closed) --------------------------- */
.pastrybyp-coming-soon {
    text-align: center !important;
    padding: 48px 24px !important;
}

.pastrybyp-coming-soon__icon {
    font-size: 56px !important;
    margin-bottom: 16px !important;
    line-height: 1 !important;
}

.pastrybyp-coming-soon__title {
    font-family: var(--pbp-font-display) !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    color: var(--pbp-text) !important;
    margin: 0 0 12px !important;
}

.pastrybyp-coming-soon__date {
    font-family: var(--pbp-font-body) !important;
    font-size: 17px !important;
    color: var(--pbp-rose) !important;
    margin: 0 0 8px !important;
}

.pastrybyp-coming-soon__date strong {
    font-weight: 700 !important;
}

.pastrybyp-coming-soon__text {
    font-family: var(--pbp-font-body) !important;
    font-size: 15px !important;
    color: var(--pbp-warm-gray) !important;
    margin: 0 !important;
}

/* -- Body scroll lock (when modal is open) ------------------------ */
body.pastrybyp-no-scroll {
    overflow: hidden !important;
}


/* =================================================================
   5. TOAST NOTIFICATION
   ================================================================= */

.pastrybyp-toast {
    position: fixed !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(20px) !important;
    padding: 12px 24px !important;
    background: var(--pbp-text) !important;
    color: #fff !important;
    font-family: var(--pbp-font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 50px !important;
    box-shadow: 0 6px 24px rgba(61,48,42,.25) !important;
    z-index: 100000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

.pastrybyp-toast.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}


/* =================================================================
   6. RESPONSIVE
   ================================================================= */

/* -- Disable hover lift on touch devices -------------------------- */
@media (hover: none) {
    .pastrybyp-pcard:hover {
        transform: none !important;
        box-shadow: 0 2px 12px rgba(61,48,42,.07) !important;
    }
    .pastrybyp-pcard:hover .pastrybyp-pcard__img img {
        transform: none !important;
    }
}

/* -- Tablet (max-width: 768px) ------------------------------------ */
@media (max-width: 768px) {
    .pastrybyp-catalog__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }

    .pastrybyp-pcard__name {
        font-size: 16px !important;
    }

    .pastrybyp-pcard__desc {
        font-size: 12px !important;
    }

    .pastrybyp-pcard__add {
        padding: 10px 16px !important;
        font-size: 13px !important;
        min-height: 44px !important; /* iOS touch target */
    }

    /* -- Checkout modal tablet ──────────────────────────────────── */
    .pastrybyp-checkout-modal {
        width: 94vw !important;
        padding: 28px 24px !important;
    }

    .pastrybyp-checkout__title {
        font-size: 24px !important;
    }

    /* -- Cart dropdown tablet ───────────────────────────────────── */
    .pastrybyp-cart-dropdown {
        width: 280px !important;
    }
}

/* -- Mobile (max-width: 600px) ------------------------------------ */
@media (max-width: 600px) {
    /* -- Cart icon: white on mobile ──────────────────────────────── */
    .pastrybyp-cart-icon__svg {
        color: #fff !important;
    }

    .pastrybyp-cart-icon:hover .pastrybyp-cart-icon__svg {
        color: #fff !important;
    }

    .pastrybyp-catalog {
        padding: 12px 0 !important;
    }

    /* -- Tabs: full-width pills ──────────────────────────────────── */
    .pastrybyp-catalog__tabs {
        gap: 0 !important;
        margin-bottom: 20px !important;
        background: var(--pbp-cream-dark) !important;
        border-radius: 50px !important;
        padding: 4px !important;
    }

    .pastrybyp-catalog__tab {
        flex: 1 !important;
        justify-content: center !important;
        padding: 10px 8px !important;
        font-size: 14px !important;
        border: none !important;
        border-radius: 50px !important;
        background: transparent !important;
        min-height: 44px !important;
    }

    .pastrybyp-catalog__tab:hover {
        background: transparent !important;
        border: none !important;
    }

    .pastrybyp-catalog__tab.is-active {
        background: var(--pbp-rose) !important;
        border: none !important;
        box-shadow: 0 2px 8px var(--pbp-rose-glow) !important;
    }

    /* -- Grid: single column ─────────────────────────────────────── */
    .pastrybyp-catalog__grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* -- Card image: shorter on mobile ───────────────────────────── */
    .pastrybyp-pcard__img {
        padding-top: 60% !important; /* shorter ratio for mobile */
    }

    .pastrybyp-pcard__placeholder {
        font-size: 44px !important;
    }

    /* -- Card body ────────────────────────────────────────────────── */
    .pastrybyp-pcard__body {
        padding: 14px 16px 16px !important;
    }

    .pastrybyp-pcard__name {
        font-size: 16px !important;
    }

    .pastrybyp-pcard__desc {
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }

    /* -- Footer: stack price + button on narrow screens ──────────── */
    .pastrybyp-pcard__footer {
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding-top: 12px !important;
    }

    .pastrybyp-pcard__add {
        flex: 1 !important;
        justify-content: center !important;
        min-height: 44px !important;
        padding: 10px 18px !important;
        font-size: 14px !important;
    }

    /* -- Menu badge smaller on mobile ─────────────────────────────── */
    .pastrybyp-pcard--menu .pastrybyp-pcard__img::after {
        padding: 3px 10px !important;
        font-size: 10px !important;
    }

    /* -- Menu items list ──────────────────────────────────────────── */
    .pastrybyp-pcard__items {
        margin-bottom: 10px !important;
        padding-top: 8px !important;
    }

    .pastrybyp-pcard__items li {
        font-size: 12px !important;
        padding: 2px 0 !important;
    }

    /* ── Checkout modal: full-screen on mobile ────────────────────── */
    .pastrybyp-checkout-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
        transform: translateY(100%) !important;
        border-radius: 0 !important;
        padding: 24px 20px 32px !important;
        transition: opacity .3s ease,
                    visibility .3s ease,
                    transform .3s cubic-bezier(.22,1,.36,1) !important;
    }

    .pastrybyp-checkout-modal.is-open {
        transform: translateY(0) !important;
    }

    .pastrybyp-checkout__close {
        top: 12px !important;
        right: 12px !important;
        width: 44px !important;
        height: 44px !important;
    }

    .pastrybyp-checkout__title {
        font-size: 22px !important;
        margin-bottom: 16px !important;
    }

    .pastrybyp-checkout__item {
        gap: 10px !important;
        padding: 12px 0 !important;
    }

    .pastrybyp-checkout__item-name {
        font-size: 14px !important;
    }

    .pastrybyp-checkout__qty-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
    }

    .pastrybyp-checkout__item-remove {
        width: 36px !important;
        height: 36px !important;
        font-size: 20px !important;
    }

    .pastrybyp-checkout__total {
        font-size: 16px !important;
        padding: 14px 0 !important;
        margin-bottom: 16px !important;
    }

    .pastrybyp-checkout__total strong {
        font-size: 18px !important;
    }

    /* -- Threshold on mobile ──────────────────────────────────────── */
    .pastrybyp-checkout__threshold {
        padding: 16px !important;
        font-size: 13px !important;
    }

    .pastrybyp-checkout__threshold .pastrybyp-trigger--btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 20px !important;
        min-height: 48px !important;
    }

    /* -- Form fields on mobile ────────────────────────────────────── */
    .pastrybyp-checkout-modal .pastrybyp-field input,
    .pastrybyp-checkout-modal .pastrybyp-field textarea {
        padding: 14px 16px !important;
        font-size: 16px !important; /* prevents iOS zoom on focus */
    }

    .pastrybyp-checkout-modal .pastrybyp-form__submit {
        padding: 16px 20px !important;
        font-size: 16px !important;
        min-height: 52px !important;
    }

    /* ── Cart dropdown: bottom sheet ──────────────────────────────── */
    .pastrybyp-cart-dropdown {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: 70vh !important;
        border-radius: var(--pbp-radius) var(--pbp-radius) 0 0 !important;
        transform: translateY(100%) !important;
        box-shadow: 0 -4px 30px rgba(61,48,42,.15) !important;
        z-index: 999999990 !important;
    }

    .pastrybyp-cart-icon.is-open .pastrybyp-cart-dropdown {
        transform: translateY(0) !important;
    }

    /* Backdrop behind bottom sheet */
    .pastrybyp-cart-icon.is-open::before {
        content: '' !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0,0,0,.35) !important;
        z-index: 999999989 !important;
    }

    .pastrybyp-cart-dropdown__items {
        max-height: 50vh !important;
    }

    .pastrybyp-cart-dropdown__item {
        padding: 12px 0 !important;
    }

    .pastrybyp-cart-dropdown__footer {
        padding: 16px !important;
    }

    .pastrybyp-cart-dropdown__checkout {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        min-height: 48px !important;
    }

    /* ── Toast: full-width on mobile ──────────────────────────────── */
    .pastrybyp-toast {
        left: 16px !important;
        right: 16px !important;
        transform: translateX(0) translateY(20px) !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .pastrybyp-toast.is-visible {
        transform: translateX(0) translateY(0) !important;
    }
}

/* -- Small phones (max-width: 360px) ------------------------------ */
@media (max-width: 360px) {
    .pastrybyp-catalog__tab {
        padding: 8px 6px !important;
        font-size: 13px !important;
    }

    .pastrybyp-pcard__img {
        padding-top: 55% !important;
    }

    .pastrybyp-pcard__body {
        padding: 12px 14px 14px !important;
    }

    .pastrybyp-pcard__name {
        font-size: 15px !important;
    }

    .pastrybyp-checkout-modal {
        padding: 20px 16px 28px !important;
    }

    .pastrybyp-checkout__title {
        font-size: 20px !important;
    }
}

/* ==================================================================
   v2.7: Category pills, featured sidebar & special-cake modal
   ================================================================== */

/* -- Pills wrap when there are many categories --------------------- */
.pastrybyp-catalog__tabs {
    flex-wrap: wrap !important;
}

/* -- Layout with featured sidebar ---------------------------------- */
.pastrybyp-catalog__layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    align-items: start !important;
}

.pastrybyp-catalog__layout.has-featured {
    grid-template-columns: 220px 1fr !important;
}

.pastrybyp-catalog__featured {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    position: sticky !important;
    top: 24px !important;
}

/* -- Featured category card ---------------------------------------- */
.pastrybyp-fcard {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    background: #fff !important;
    border: 2px solid transparent !important;
    border-radius: var(--pbp-radius) !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(61,48,42,.07) !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all .3s cubic-bezier(.4,0,.2,1) !important;
    font-family: var(--pbp-font-body) !important;
}

.pastrybyp-fcard:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 28px rgba(61,48,42,.12) !important;
}

.pastrybyp-fcard.is-active {
    border-color: var(--pbp-rose) !important;
    box-shadow: 0 4px 16px var(--pbp-rose-glow) !important;
}

.pastrybyp-fcard__img {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    padding-top: 75% !important;
    background: var(--pbp-cream-dark) !important;
    overflow: hidden !important;
}

.pastrybyp-fcard__img img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform .4s ease !important;
}

.pastrybyp-fcard:hover .pastrybyp-fcard__img img {
    transform: scale(1.05) !important;
}

.pastrybyp-fcard__placeholder {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 40px !important;
}

.pastrybyp-fcard__name {
    display: block !important;
    padding: 12px 10px !important;
    font-family: var(--pbp-font-display) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--pbp-text) !important;
}

/* -- Per-card category filtering ----------------------------------- */
.pastrybyp-pcard.is-filtered {
    display: none !important;
}

/* -- Special cake card --------------------------------------------- */
.pastrybyp-pcard__per-person {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--pbp-text-light) !important;
    margin-left: 2px !important;
}

.pastrybyp-pcard__order {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 8px 18px !important;
    background: var(--pbp-gold) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    font-family: var(--pbp-font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all .25s cubic-bezier(.4,0,.2,1) !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}

.pastrybyp-pcard__order:hover {
    background: #b29555 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px var(--pbp-gold-light) !important;
}

.pastrybyp-pcard__order:disabled {
    background: var(--pbp-warm-gray-light) !important;
    cursor: not-allowed !important;
    opacity: .55 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* -- Special order modal ------------------------------------------- */
.pastrybyp-special__product {
    margin: -8px 0 18px !important;
    font-family: var(--pbp-font-display) !important;
    font-size: 17px !important;
    color: var(--pbp-rose-dark) !important;
}

.pastrybyp-special__stepper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 4px !important;
    background: var(--pbp-cream) !important;
    border: 1px solid var(--pbp-border) !important;
    border-radius: 50px !important;
}

.pastrybyp-special__stepper-btn {
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    border: 1px solid var(--pbp-border) !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    color: var(--pbp-text) !important;
    cursor: pointer !important;
    transition: all .2s ease !important;
    line-height: 1 !important;
}

.pastrybyp-special__stepper-btn:hover {
    background: var(--pbp-rose) !important;
    border-color: var(--pbp-rose) !important;
    color: #fff !important;
}

.pastrybyp-special__stepper-value {
    min-width: 44px !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--pbp-text) !important;
}

.pastrybyp-special__hint {
    margin: 6px 0 0 !important;
    font-size: 12px !important;
    color: var(--pbp-text-light) !important;
}

.pastrybyp-special__delivery {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.pastrybyp-special__radio {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    background: var(--pbp-cream) !important;
    border: 1px solid var(--pbp-border) !important;
    border-radius: var(--pbp-radius-sm) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    transition: border-color .2s ease !important;
}

.pastrybyp-special__radio:has(input:checked) {
    border-color: var(--pbp-rose) !important;
    background: var(--pbp-rose-light) !important;
}

.pastrybyp-special__radio input {
    accent-color: var(--pbp-rose) !important;
    margin: 0 !important;
}

.pastrybyp-special__prepay-note {
    margin: 14px 0 0 !important;
    padding: 12px 14px !important;
    background: var(--pbp-gold-light) !important;
    border-left: 3px solid var(--pbp-gold) !important;
    border-radius: 0 var(--pbp-radius-sm) var(--pbp-radius-sm) 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--pbp-warm-gray) !important;
}

/* -- Mobile: featured sidebar becomes horizontal scroller ---------- */
@media (max-width: 768px) {
    .pastrybyp-catalog__layout.has-featured {
        grid-template-columns: 1fr !important;
    }

    .pastrybyp-catalog__featured {
        position: static !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 12px !important;
        padding-bottom: 8px !important;
    }

    .pastrybyp-fcard {
        flex: 0 0 140px !important;
        scroll-snap-align: start !important;
    }

    .pastrybyp-fcard__name {
        font-size: 14px !important;
        padding: 8px 8px !important;
    }

    /* Pills: allow wrapping instead of squeezing into one row */
    .pastrybyp-catalog__tabs {
        flex-wrap: wrap !important;
        background: transparent !important;
        gap: 8px !important;
    }

    .pastrybyp-catalog__tab {
        flex: 0 1 auto !important;
        background: var(--pbp-cream-dark) !important;
    }
}