/* Header */
.ph { position: sticky; top: 0; z-index: 50; background: #fdfafa; border-bottom: 1px solid #f1e6e6; font-family: 'Nunito', system-ui, sans-serif; }
.ph-inner { max-width: 1200px; margin: 0 auto; padding: 0 21px 0 22px; height: 55px; display: flex; align-items: center; justify-content: space-between; }
.ph-actions { display: contents; }
.ph-logo { order: 2; display: flex; text-decoration: none; color: #7a0824; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 22px; }
.ph-logo img { height: 40px; width: auto; display: block; }
.ph-nav, .ph-account { display: none; }
.ph-btn { position: relative; width: 44px; height: 40px; border-radius: 10px; border: 0; background: #f6eded; display: flex; align-items: center; justify-content: center; color: #7a0824; cursor: pointer; text-decoration: none; padding: 0; }
.ph-cart { order: 1; }
#csMenuBtn.ph-btn { order: 3; display: flex; }
.ph-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #7a0824; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

@media (min-width: 900px) {
    .ph-inner { height: 80px; padding: 0 40px; gap: clamp(16px, 2.5vw, 40px); justify-content: flex-start; }
    .ph-logo { order: 0; flex: none; }
    .ph-logo img { height: 44px; }
    .ph-nav { display: flex; flex: 1; align-items: center; justify-content: center; gap: clamp(16px, 2.4vw, 32px); font-size: clamp(14px, 1.4vw, 15.5px); font-weight: 700; white-space: nowrap; }
    .ph-nav a { color: #2b1a1e; text-decoration: none; }
    .ph-nav a:hover { color: #7a0824; }
    .ph-nav .ph-nav-smart { color: #7a0824; display: flex; align-items: center; gap: 6px; }
    .ph-actions { display: flex; gap: 10px; flex: none; }
    .ph-account { display: flex; }
    .ph-cart, #csMenuBtn.ph-btn { order: 0; }
    .ph-btn { height: 42px; }
}

/* Menu drawer */
.cs-menu-panel.pm-panel { top: 0; left: auto; right: 0; bottom: 0; width: min(360px, 100%); max-width: none; max-height: none; margin: 0; border-radius: 0; background: #fcfbf9; transform: translateX(101%); box-shadow: -12px 0 44px rgba(20,5,12,.2); font-family: 'Nunito', system-ui, sans-serif; color: #2b1a1e; }
.cs-menu-panel.pm-panel.is-open { transform: translateX(0); }
.pm-head { flex: none; height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 22px; border-bottom: 1px solid #eee5e4; }
.pm-logo { display: flex; text-decoration: none; color: #7a0824; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 22px; }
.pm-logo img { height: 42px; width: auto; display: block; }
.pm-close { width: 40px; height: 40px; border: 0; border-radius: 10px; background: #f6eded; color: #2b1a1e; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pm-scroll { flex: 1; overflow-y: auto; padding: 0 19px; }
.pm-account { height: 60px; display: flex; align-items: center; gap: 20px; padding: 0 10px 0 21px; border-bottom: 1px solid #eee5e4; color: #2b1a1e; text-decoration: none; }
.pm-account svg:first-child { color: #7a0824; flex: none; }
.pm-name { flex: 1; font-size: 16px; font-weight: 500; }
.pm-chev { flex: none; color: #2b1a1e; }
.pm-smart { margin: 2px -9px 0; padding: 18px 12px 16px 20px; border-radius: 12px; background: #fae6e4; display: flex; align-items: center; gap: 20px; color: #7a0824; text-decoration: none; }
.pm-smart svg { flex: none; }
.pm-smart-text { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.pm-smart-text strong { font-size: 16px; font-weight: 800; color: #6f0524; }
.pm-smart-text small { font-size: 11.5px; line-height: 18px; color: #8a6a70; }
.pm-section { padding: 16px 0 10px; border-bottom: 1px solid #eee5e4; }
.pm-section:first-of-type { padding-top: 24px; }
.pm-title { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: #b06070; padding: 0 0 8px; }
.pm-item { height: 40px; display: flex; align-items: center; gap: 26px; padding: 0 10px 0 13px; color: #2b1a1e; text-decoration: none; }
.pm-item svg:first-child { color: #7a0824; flex: none; }
.pm-item .pm-name { font-size: 16px; font-weight: 400; }
.pm-item:hover { background: #f9f4f6; border-radius: 8px; }
.pm-meta { font-size: 12px; color: #a99ca1; font-weight: 600; }
.pm-foot { flex: none; padding: 12px 19px 18px; }
.pm-contact { height: 60px; border-radius: 12px; background: #f6efef; display: flex; align-items: center; gap: 16px; padding: 0 13px; font-size: 16px; font-weight: 500; color: #2b1a1e; text-decoration: none; }
.pm-contact svg { color: #7a0824; flex: none; }

/* Footer */
.pf { background: #691027; color: #fff; font-family: 'Nunito', system-ui, sans-serif; margin-top: 40px; }
.pf a { color: rgba(255,255,255,.88); text-decoration: none; }
.pf a:hover { color: #fff; }
.pf-inner { max-width: 1200px; margin: 0 auto; padding: 30px 25px; }
.pf-logo { height: 48px; width: auto; display: block; margin-left: -2px; }
.pf-logo-text { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 26px; color: #fff; }
.pf-tagline { margin: 14px 0 0; font-size: 14.5px; line-height: 22px; color: rgba(255,255,255,.88); max-width: 300px; }
.pf-social { display: flex; gap: 14px; margin: 22px 0 32px; flex-wrap: wrap; }
.pf-social a { width: 43px; height: 43px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; color: #fff; }
.pf-col { border-top: 1px solid rgba(255,255,255,.22); padding: 16px 0 6px; }
.pf-col summary { list-style: none; display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 800; cursor: pointer; margin-bottom: 8px; }
.pf-col summary::-webkit-details-marker { display: none; }
.pf-col summary svg { transition: transform .2s; }
.pf-col[open] summary svg { transform: rotate(180deg); }
.pf-links { display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; line-height: 21px; padding-bottom: 16px; align-items: flex-start; }
.pf-links button { background: none; border: 0; padding: 0; color: rgba(255,255,255,.88); font: inherit; cursor: pointer; text-align: left; }
.pf-links button:hover { color: #fff; }
.pf-links span { color: rgba(255,255,255,.88); }
.pf-bottom { border-top: 1px solid rgba(255,255,255,.22); padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pf-copy { font-size: 11.5px; line-height: 20px; color: #fff; }
.pf-pay { display: flex; gap: 8px; align-items: center; }
.pf-pay img { height: 38px; width: auto; display: block; }
.pf-anpc { margin-top: 16px; font-size: 11.5px; line-height: 18px; color: rgba(255,255,255,.75); display: flex; gap: 8px; }
.pf-anpc a { text-decoration: underline; }

@media (min-width: 900px) {
    .pf-inner { padding: 60px 40px 28px; }
    .pf-grid { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 40px; padding-bottom: 44px; }
    .pf-tagline { font-size: 15px; line-height: 23px; }
    .pf-social { margin: 22px 0 0; }
    .pf-col { border-top: 0; padding: 0; }
    .pf-col summary { font-size: 16.5px; cursor: default; pointer-events: none; margin-bottom: 16px; }
    .pf-col summary svg { display: none; }
    .pf-links { gap: 10px; font-size: 15px; }
    .pf-copy { font-size: 13px; }
}

.ph-actions .ph-btn, .ph-actions a.ph-btn, .ph-actions a.ph-btn:hover, .ph-actions a.ph-btn:visited { color: #17181c; }