/* Final shared presentation: loaded after page styles so every breakpoint uses the same system. */
.storefront-shell .main-details-page .product-gallery-column { top: 0 !important; }
.storefront-shell .main-details-page .details_slider { margin-top: 0 !important; }
.storefront-shell .main-details-page .details_slider .dimage_item { padding: 4px; }
.storefront-shell .main-details-page .details_slider .dimage_item img { width: 100%; height: 100% !important; object-fit: contain; }
.storefront-shell .main-details-page .product-purchase-panel { padding: 24px; }
.storefront-shell .main-details-page .product-actions-row { margin-inline: 0; --bs-gutter-x: 0; }
.storefront-shell .main-details-page .product-actions-row > * { padding-inline: 0; }
.storefront-shell .main-details-page .product-details-discount-badge { top: 16px; left: 28px; }
.storefront-shell .main-details-page .product-details-discount-badge .sale-badge-box { padding: 10px 14px; border-radius: 8px; background: var(--store-primary) !important; color: var(--store-on-primary) !important; border: 2px solid var(--store-surface); }
.storefront-shell .main-details-page .product-details-discount-badge .sale-badge-text { font-size: 16px; font-weight: 700; line-height: 1.3; }
.storefront-shell .main-details-page .indicator_thumb { gap: 8px; margin-top: 8px; padding: 0 1px 2px; }
.storefront-shell .main-details-page .indicator_thumb .indicator-item {
    width: 82px;
    height: 82px;
    flex: 0 0 82px;
    padding: 4px;
}
.storefront-shell .main-details-page .indicator_thumb .indicator-item img { display: block; width: 100%; height: 100% !important; object-fit: contain; border-radius: 6px; }
.storefront-shell .main-details-page .single_product :is(.order_now_btn, .add_cart_btn) { margin: 0; padding: 10px 12px !important; height: auto; min-height: 46px; font-weight: 600; border-radius: 8px; }
.storefront-shell .main-details-page .single_product .add_cart_btn { color: var(--store-text) !important; background: var(--store-surface) !important; }
.storefront-shell .main-details-page .single_product .add_cart_btn:hover { background: var(--store-primary) !important; border-color: var(--store-primary) !important; color: var(--store-on-primary) !important; }
.storefront-shell .main-details-page .single_product .order_now_btn { background: var(--store-primary) !important; color: var(--store-on-primary) !important; }
.storefront-shell .main-details-page .single_product .order_now_btn:hover { background: var(--store-secondary) !important; color: var(--store-on-secondary) !important; border-color: var(--store-secondary) !important; }
.storefront-shell .main-details-page .product-contact-action .product-whatsapp { background: #25d366 !important; border-color: #25d366 !important; color: #073b20 !important; }
.storefront-shell .main-details-page .product-contact-action .product-whatsapp:hover { background: #075e54 !important; border-color: #075e54 !important; color: #fff !important; }
.storefront-shell .main-details-page .product-contact-action .btn i { color: inherit !important; }
@media (max-width: 767px) { .storefront-shell .main-details-page .product-purchase-panel { padding: 16px; } }
.storefront-shell { --ui-radius: 8px; --ui-gap: 24px; }
.storefront-shell { --store-on-primary: #fff; --store-on-secondary: #fff; }
.storefront-shell :where(a, button, input, select, textarea) { -webkit-tap-highlight-color: transparent; }
.storefront-shell :where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--store-primary); outline-offset: 3px;
}
.storefront-shell :where(button, a.btn, .submit-btn, .view_more_btn) {
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.storefront-shell :where(button, .btn, .submit-btn, .view_more_btn):hover { transform: none; box-shadow: none; }
.storefront-shell :where(button, .btn, .submit-btn) > :where(i, svg) { color: inherit; }

/* Filled storefront actions always use a high-contrast white label. Brand
   colors remain dynamic; this intentionally affects text/icon color only. */
.storefront-shell :where(
    .order-btn,
    .order_now_btn,
    .addcartbutton,
    .submit-btn,
    .order_place,
    .btn-primary,
    .btn-secondary
) {
    color: #fff !important;
}
.storefront-shell :where(
    .order-btn,
    .order_now_btn,
    .addcartbutton,
    .submit-btn,
    .order_place,
    .btn-primary,
    .btn-secondary
) :where(i, svg, span) {
    color: inherit !important;
}
.storefront-shell :where(.form-control, .form-select, select.page-sort) {
    min-height: 44px; border: 1px solid var(--store-border); border-radius: 6px;
    background-color: var(--store-surface); color: var(--store-text); font-size: 14px;
}
.storefront-shell textarea.form-control { min-height: 120px; }
.storefront-shell :where(.form-control, .form-select):focus { border-color: var(--store-primary); box-shadow: none; }
.storefront-shell :where(.form-control.is-invalid, .form-select.is-invalid) { border-color: var(--bs-danger, #dc3545); }
.storefront-shell :where(.form-group label, .form-label) { margin-bottom: 8px; line-height: 1.5; }
.storefront-shell :where(.row > *, .input-group, .form-group, .auth-form-panel, .customer-content) { min-width: 0; }
.storefront-shell :where(.auth-section, .customer-section, .contact-section, .createpage-section, .transaction-page) > .container { max-width: 1240px; }
.storefront-shell :where(.auth-section, .customer-section, .contact-section, .createpage-section) { padding: 32px 0 48px; }
.storefront-shell :where(.form-content, .customer-content, .customer-auth, .checkout-shipping, .cart-summary, .vcart-inner, .page-content, .contact-form, .cont_item) {
    border-color: var(--store-border); border-radius: var(--ui-radius); box-shadow: none;
}
.storefront-shell :where(.auth-story, .auth-story--register) {
    background: var(--store-primary); color: var(--store-on-primary);
}
.storefront-shell .auth-story :where(h1, p, .auth-eyebrow, .auth-benefits span, i) { color: var(--store-on-primary); }
.storefront-shell .auth-story::before, .storefront-shell .auth-story::after { display: none; }
.storefront-shell :where(.auth-section, .customer-section, .contact-section) .submit-btn {
    min-height: 44px; padding: 10px 18px; border: 1px solid var(--store-primary); border-radius: 6px;
    background: var(--store-primary); color: var(--store-on-primary); box-shadow: none;
}
.storefront-shell :where(.auth-section, .customer-section, .contact-section) .submit-btn:hover {
    background: var(--store-secondary); border-color: var(--store-secondary); color: var(--store-on-secondary);
}
.storefront-shell :where(.account-page-head, .transaction-page-head) { gap: 16px; flex-wrap: wrap; }
.storefront-shell :where(.account-detail-card, .cont_item) { border-radius: var(--ui-radius); box-shadow: none; }
.storefront-shell :where(.account-detail-card strong, .page-description, .contact-form) { overflow-wrap: anywhere; }
.storefront-shell .account-detail-card > :where(i, svg) { grid-column: 1; grid-row: 1 / 4; display: flex; align-items: center; justify-content: center; align-self: center; width: 40px; height: 40px; padding: 0; border-radius: 6px; color: var(--store-primary); background: var(--store-canvas); }
.storefront-shell .account-detail-card > :where(span, strong, small) { grid-column: 2; }
.storefront-shell .customer-section { background: var(--store-canvas); }
.storefront-shell .transaction-page { background: var(--store-canvas); }
.storefront-shell .vcart-section.transaction-page { margin-top: 0; }
.storefront-shell .vcart-qty .quantity { display: inline-flex; align-items: center; width: auto; height: 44px; border: 1px solid var(--store-border); overflow: hidden; }
.storefront-shell .vcart-qty .quantity :is(button, input) { position: static; flex: 0 0 36px; width: 36px; height: 42px; margin: 0; padding: 0; border: 0; text-align: center; background: var(--store-surface); color: var(--store-text); line-height: 42px; }
.storefront-shell .breadcrumb-section { padding: 16px 0 0; }
.storefront-shell .transaction-page .vcart-inner { padding: 20px; border: 1px solid var(--store-border); }
.storefront-shell .transaction-page .cart-title h4 { font-size: 20px; margin-bottom: 16px; text-transform: none; }
.storefront-shell .transaction-page :where(.checkout-shipping, .cart_details, .card, .cart-summary, .vcart-inner) { border-radius: 8px; box-shadow: none; }
.storefront-shell .transaction-page .card { border: 1px solid var(--store-border); overflow: hidden; }
.storefront-shell .transaction-page .card-header { padding: 16px 20px; border-bottom: 1px solid var(--store-border); background: var(--store-surface); }
.storefront-shell .transaction-page .card-header :where(h5, h6) { margin: 0; font-size: 16px; line-height: 1.6; }
.storefront-shell .transaction-page .coupon-section { margin: 16px; background: var(--store-canvas); box-shadow: none; }
.storefront-shell .transaction-page .coupon-section .btn { min-height: 44px; border-radius: 6px; background: var(--store-primary); border-color: var(--store-primary); color: var(--store-on-primary); }
.storefront-shell .transaction-page .coupon-section .btn:hover { background: var(--store-secondary); border-color: var(--store-secondary); color: var(--store-on-secondary); }
.storefront-shell .transaction-page .order_place { border-radius: 6px; box-shadow: none; background: var(--store-primary); color: var(--store-on-primary); }
.storefront-shell .transaction-page .order_place:hover { background: var(--store-secondary); color: var(--store-on-secondary); }
.storefront-shell .transaction-page .cart_table { table-layout: auto; font-size: 14px; }
.storefront-shell .transaction-page .cart_table th { font-size: 14px; }
.storefront-shell .transaction-page .cart_table :where(th, td) { padding: 12px !important; vertical-align: middle; }
.storefront-shell .transaction-page .cart_table td:last-child { white-space: nowrap; }
.storefront-shell .transaction-page .cart_remove { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; cursor: pointer; border-radius: 6px; }
.storefront-shell .customer-section .customer-content, .storefront-shell .customer-section .customer-sidebar { border: 1px solid var(--store-border); border-radius: 8px; background: var(--store-surface); box-shadow: none; padding: 24px; }
.storefront-shell .customer-section .customer-sidebar { padding: 16px; }
.storefront-shell .customer-section .customer-content { min-height: 0; }
.storefront-shell .success-img { margin: 0 0 16px; padding: 0; text-align: center; }
.storefront-shell .success-img i { font-size: 48px; color: var(--store-primary); }
.storefront-shell .success-title { margin: 0 auto 28px; max-width: 600px; text-align: center; }
.storefront-shell .success-title h1 { margin-bottom: 12px; font-size: 30px; color: var(--store-text); }
.storefront-shell .success-title p { font-size: 17px; line-height: 1.7; color: var(--store-muted); }
.storefront-shell .success-table { padding: 20px; border: 1px solid var(--store-border); border-radius: 8px; box-shadow: none; background: var(--store-surface); overflow-x: auto; }
.storefront-shell .success-table table { margin: 0; }
.storefront-shell .invoice-scroll { overflow-x: auto; }
@media print { .storefront-shell .invoice-scroll { overflow: visible; } .storefront-shell .footer_nav { display: none !important; } }
.storefront-shell .store-empty-state { grid-column: 1 / -1; width: 100%; padding: 40px 20px; text-align: center; border: 1px solid var(--store-border); border-radius: 8px; background: var(--store-surface); }
.storefront-shell .store-empty-state > i { display: block; margin-bottom: 16px; color: var(--store-primary); font-size: 30px; }
.storefront-shell .store-empty-state h2 { margin-bottom: 8px; color: var(--store-text); font-size: 22px; }
.storefront-shell .store-empty-state p { margin-bottom: 20px; color: var(--store-muted); }
.storefront-shell .store-empty-state .view_more_btn, .storefront-shell .page-content .view_more_btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--store-primary); border-radius: 6px; background: var(--store-primary); color: var(--store-on-primary); }
.storefront-shell .store-empty-state .view_more_btn:hover, .storefront-shell .page-content .view_more_btn:hover { background: var(--store-secondary); color: var(--store-on-secondary); border-color: var(--store-secondary); }
.storefront-shell .customer-sidebar .sidebar-menu a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 6px; }
.storefront-shell .customer-sidebar .sidebar-menu a i { position: static; float: none; order: 0; width: 20px; text-align: center; color: inherit !important; }
.storefront-shell .customer-sidebar .sidebar-menu a:hover { box-shadow: none; transform: none; }
.storefront-shell :where(.cmn_menu ul) { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 0; }
.storefront-shell .cmn_menu ul li a { display: inline-flex; align-items: center; min-height: 40px; color: var(--store-text); }
.storefront-shell .cmn_menu ul li a:hover { color: var(--store-primary); }
.storefront-shell .page-content { padding: clamp(20px, 3vw, 36px); background: var(--store-surface); border: 1px solid var(--store-border); }
.storefront-shell .page-description { line-height: 1.8; }
.storefront-shell .page-description :where(img, iframe, video) { max-width: 100%; }
.storefront-shell .page-description :where(ul, ol) { padding-left: 24px; }
.storefront-shell .contact-section .row { row-gap: 24px; }
.storefront-shell .contact-form { margin: 0; padding: 24px; border: 1px solid var(--store-border); background: var(--store-surface); }
.storefront-shell .cont_item { height: 100%; padding: 24px; background: var(--store-surface); border: 1px solid var(--store-border); }
.storefront-shell .cont_item :where(a, i) { color: var(--store-primary); }
.storefront-shell .main-details-page .product-gallery-column { position: relative !important; }
.storefront-shell .main-details-page .product-detail-shell > .container > .row { --bs-gutter-x: 24px; margin: 0; }
.storefront-shell .main-details-page .product-code { color: var(--store-on-primary); }
.storefront-shell :where(.main-search, .mobile-search) form button :where(i, svg) { color: currentColor !important; }
.storefront-shell .header-list-items a:hover :where(i, .margin-shopping, strong) { color: var(--store-primary) !important; }
#content .homeproduct :where(.cart-icon-btn, .cart-icon-link) :where(i, svg) { color: inherit !important; }
#content .catalog-page .pro_btn :is(.cart-icon-btn, .cart-icon-link),
#content .related-product-section .pro_btn :is(.cart-icon-btn, .cart-icon-link) {
    background: transparent !important; border: 1px solid var(--store-border) !important; color: var(--store-primary) !important; box-shadow: none !important;
}
#content .catalog-page .pro_btn :is(.cart-icon-btn, .cart-icon-link):hover,
#content .related-product-section .pro_btn :is(.cart-icon-btn, .cart-icon-link):hover {
    border-color: var(--store-secondary) !important; color: var(--store-secondary) !important;
}
#content .catalog-page .pro_btn :is(.cart-icon-btn, .cart-icon-link) :is(i, svg),
#content .related-product-section .pro_btn :is(.cart-icon-btn, .cart-icon-link) :is(i, svg) { color: inherit !important; font-size: 16px; }
.storefront-shell :where(.catalog-page, .related-product-section) .cart-icon-link:hover { border-color: var(--store-secondary) !important; color: var(--store-secondary) !important; }
.storefront-shell .main_slider, .storefront-shell .main_slider .slider-item { height: auto !important; min-height: 0 !important; }
.storefront-shell .main_slider .slider-item { aspect-ratio: 1060 / 395; }
.storefront-shell .main_slider .slider-item img { display: block; width: 100%; height: 100% !important; min-height: 0; object-fit: contain !important; }
.storefront-shell .home-slider-container { box-shadow: none; }
.storefront-shell .site-footer .footer-grid { margin-left: 0; margin-right: 0; --bs-gutter-x: 24px; }
.storefront-shell .related-product-section .owl-nav .owl-prev { left: 8px !important; }
.storefront-shell .related-product-section .owl-nav .owl-next { right: 8px !important; }
.storefront-shell .details_slider .owl-nav .owl-prev { left: 8px !important; }
.storefront-shell .details_slider .owl-nav .owl-next { right: 8px !important; }
.storefront-shell :where(.main_slider, .main_slider .slider-item, .main_slider .slider-item img, .home-slider-container) { border-radius: var(--ui-radius); }
.storefront-shell .top_header { background: var(--store-surface); border-bottom: 1px solid var(--store-border); }
.storefront-shell .announcement-track span { color: var(--store-text); font-size: 12px; font-weight: 500; line-height: 36px; }
.storefront-shell .announcement-track i { color: var(--store-primary); }
.storefront-shell .announcement-marquee:focus-within .announcement-track, .storefront-shell .announcement-marquee:hover .announcement-track { animation-play-state: paused; }
.storefront-shell .footer_nav { padding-bottom: env(safe-area-inset-bottom); background: var(--store-surface); border-top: 1px solid var(--store-border); box-shadow: none; }
.storefront-shell .footer_nav li a { color: var(--store-muted); }
.storefront-shell .footer_nav li a:hover { color: var(--store-primary); background: transparent; }
.storefront-shell .footer_nav li a i { color: inherit !important; }
.storefront-shell .footer_nav .mobile_home a { background: transparent; color: var(--store-primary); border: 0; border-radius: 0; box-shadow: none; transform: none; }
.storefront-shell .footer_nav .mobile_home { margin: 0; top: auto; padding: 0; width: auto; height: auto; border: 0; border-radius: 0; background: transparent; }
.storefront-shell .footer_nav .mobile_home a { width: 100%; }
.storefront-shell .select2-container { width: 100% !important; max-width: 100%; min-width: 0; }
.storefront-shell .select2-container .select2-selection--single { height: 44px; border-color: var(--store-border); border-radius: 6px; }
.storefront-shell .select2-container .select2-selection__rendered { line-height: 42px; color: var(--store-text); }
.storefront-shell .select2-container .select2-selection__arrow { height: 42px; }
.storefront-shell .customer-sidebar .sidebar-menu { display: block; }
.storefront-shell .footer_nav .mobile_home a span { color: inherit; }
@media (max-width: 991px) {
    .storefront-shell .mobile-menu { display: block !important; position: fixed; top: 0; left: -100%; width: min(88vw, 360px); height: 100vh; height: 100dvh; padding: 0 0 24px; z-index: 99999; overflow-y: auto; visibility: hidden; background: var(--store-surface); border-right: 1px solid var(--store-border); transition: left .2s ease, visibility .2s ease; }
    .storefront-shell .mobile-menu.active { left: 0; visibility: visible; }
    .storefront-shell .mobile-menu-logo { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--store-border); }
    .storefront-shell .mobile-menu-logo img { width: 130px; height: 48px; object-fit: contain; }
    .storefront-shell .mobile-menu-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; color: var(--store-text); border: 1px solid var(--store-border); border-radius: 50%; }
    .storefront-shell .mobile-menu li { position: relative; display: block; }
    .storefront-shell .mobile-menu :is(.menu-category-name, .menu-subcategory-name, .menu-childcategory-name) { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 52px 10px 20px; font-size: 14px; line-height: 1.5; color: var(--store-text); }
    .storefront-shell .mobile-menu .menu-subcategory-name { padding-left: 36px; }
    .storefront-shell .mobile-menu .menu-childcategory-name { padding-left: 52px; }
    .storefront-shell .mobile-menu .side_cat_img { width: 32px; height: 32px; object-fit: contain; }
    .storefront-shell .mobile-menu :is(.menu-category-toggle, .menu-subcategory-toggle) { position: absolute; top: 0; right: 4px; display: flex; align-items: center; justify-content: center; width: 44px; height: 48px; color: var(--store-primary); cursor: pointer; }
    .storefront-shell .mobile-menu :is(.second-nav, .third-nav) { padding: 0; background: var(--store-canvas); }
    .storefront-shell .mobile-menu a:hover { background: transparent; color: var(--store-primary); }
    .storefront-shell .catalog-page .filter_sidebar { position: fixed; top: 0; left: -100%; z-index: 99999; width: min(88vw, 360px); height: 100vh; height: 100dvh; padding: 16px; overflow-y: auto; visibility: hidden; opacity: 0; background: var(--store-surface); transition: left .2s, opacity .2s, visibility .2s; }
    .storefront-shell .catalog-page .filter_sidebar.active { left: 0; visibility: visible; opacity: 1; }
    .storefront-shell .catalog-page .filter_sidebar > form { position: static; }
    .storefront-shell .catalog-page .filter_close { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px; margin: 0 0 16px; border: 1px solid var(--store-border); border-radius: 6px; background: var(--store-surface); color: var(--store-primary); cursor: pointer; }
    .storefront-shell .catalog-page--filtered > .container > .row > .col-sm-9 { width: 100%; }
    .storefront-shell .catalog-page .sorting-section > .row > .col-sm-6 { width: 100%; }
    .storefront-shell .catalog-page .showing-data { justify-content: flex-start; }
    .storefront-shell .catalog-page .sorting-section .col-sm-6 > .row { --bs-gutter-x: 0; }
    .storefront-shell .transaction-page > .container > .row > [class*="col-"] { width: 100%; }
    .storefront-shell .transaction-page > .container > .row { row-gap: 20px; }
    .storefront-shell .main-header { display: none !important; }
    .storefront-shell .mobile-header, .storefront-shell .mobile-search { display: block !important; }
    .storefront-shell .storefront-header { padding-bottom: 0; background: var(--store-canvas); box-shadow: none; }
    .storefront-shell .top_header .announcement-hotline { display: none !important; }
    .storefront-shell .top_header, .storefront-shell .top_header .container { min-height: 36px; }
    .storefront-shell .mobile-header { position: relative; top: auto; margin: 12px 16px 0; padding: 0; border: 1px solid var(--store-border); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--store-surface); }
    .storefront-shell .mobile-logo { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; height: 68px; padding: 0 16px; }
    .storefront-shell .menu-logo { text-align: center; }
    .storefront-shell .menu-logo img { width: 140px; height: 48px; object-fit: contain; }
    .storefront-shell .menu-bar, .storefront-shell .menu-bag { margin: 0; }
    .storefront-shell .menu-bar .toggle { margin: 0 !important; }
    .storefront-shell .menu-bag .mobilecart-qty { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 1px 4px; border: 2px solid var(--store-surface); border-radius: 50%; background: var(--store-primary); color: var(--store-on-primary); font-size: 10px; line-height: 12px; }
    .storefront-shell .menu-bar .toggle, .storefront-shell .menu-bag .margin-shopping {
        display: inline-flex; align-items: center; justify-content: center; position: relative;
        width: 44px; height: 44px; padding: 0; border: 1px solid var(--store-border); border-radius: 50%;
        background: transparent; color: var(--store-text); box-shadow: none; font-size: 19px;
    }
    .storefront-shell .menu-bag .margin-shopping i, .storefront-shell .menu-bar .toggle i { color: inherit; }
    .storefront-shell .mobile-search { margin: 0 16px; padding: 0 16px 16px; border: 1px solid var(--store-border); border-top: 0; border-radius: 0 0 8px 8px; background: var(--store-surface); }
    .storefront-shell .mobile-search form { display: flex; align-items: center; height: 44px; padding: 0; border: 1px solid var(--store-border); border-radius: 6px; background: var(--store-canvas); box-shadow: none; }
    .storefront-shell .mobile-search form input { flex: 1; width: 0; min-width: 0; height: 42px; padding: 0 12px; border: 0; outline-offset: -2px; background: transparent; color: var(--store-text); font-size: 14px; text-align: left; }
    .storefront-shell .mobile-search form button { position: static; flex: 0 0 44px; width: 44px; height: 42px; margin: 0; padding: 0; border: 0; border-radius: 0 6px 6px 0; background: transparent; color: var(--store-primary); }
    .storefront-shell .mobile-search form button:hover { color: var(--store-secondary); }
    .storefront-shell .footer_nav { display: block; }
    .storefront-shell .footer_nav ul li a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 60px; min-height: 60px; padding: 8px 2px; font-size: 11px; }
    .storefront-shell .footer_nav ul li a i { font-size: 19px; }
    .storefront-shell { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
    .storefront-shell .main-details-page .product-detail-shell > .container > .row > [class*="col-"] { width: 100%; padding: 0; }
    .storefront-shell .main-details-page .product-detail-shell > .container > .row { gap: 20px; }
    .storefront-shell .product-purchase-panel { margin: 0; }
    .storefront-shell .auth-story { padding: 28px; }
    .storefront-shell .auth-form-panel { padding: 28px; }
    .storefront-shell .customer-section > .container > .row > :where(.col-sm-3, .col-sm-9) { width: 100%; }
    .storefront-shell .customer-section .customer-sidebar { position: static; margin-bottom: 20px; }
    .storefront-shell .customer-sidebar .sidebar-menu ul { display: flex; flex-wrap: wrap; gap: 4px; }
    .storefront-shell .customer-sidebar .sidebar-menu li { flex: 1 1 150px; }
}

/* Filled storefront actions retain a white label/icon in active interaction states. */
.storefront-shell :where(
    .btn-primary,
    .submit-btn,
    .order_now_btn,
    .order_place,
    .coupon-section .btn,
    button.active,
    .btn.active,
    [aria-pressed="true"]
),
.storefront-shell :where(
    .btn-primary,
    .submit-btn,
    .order_now_btn,
    .order_place,
    .coupon-section .btn
):is(:hover, :focus, :active) {
    color: #fff !important;
}
.storefront-shell :where(
    .btn-primary,
    .submit-btn,
    .order_now_btn,
    .order_place,
    .coupon-section .btn,
    button.active,
    .btn.active,
    [aria-pressed="true"]
) :where(i, svg, span) {
    color: #fff !important;
    stroke: currentColor;
}

/* Search interactions: clear focus cue, calm icon motion, and no placeholder/caret overlap. */
.storefront-shell :where(.main-search, .mobile-search) form {
    position: relative;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.storefront-shell :where(.main-search, .mobile-search) form input[type="search"] {
    min-width: 0;
    caret-color: var(--store-primary);
    appearance: none;
    -webkit-appearance: none;
}
.storefront-shell :where(.main-search, .mobile-search) form input[type="search"]::-webkit-search-cancel-button {
    cursor: pointer;
    opacity: .55;
}
.storefront-shell :where(.main-search, .mobile-search) form input::placeholder {
    opacity: 1;
    transition: opacity .15s ease;
}
.storefront-shell :where(.main-search, .mobile-search) form input:focus::placeholder {
    opacity: 0;
}
.storefront-shell :where(.main-search, .mobile-search) form.search-empty-focus::before {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 16px;
    width: 1px;
    height: 18px;
    background: var(--store-primary);
    content: "";
    pointer-events: none;
    transform: translateY(-50%);
    animation: storefront-search-caret 1s steps(1, end) infinite;
}
.storefront-shell :where(.main-search, .mobile-search) form.search-empty-focus input {
    caret-color: transparent;
    cursor: default;
}
@keyframes storefront-search-caret {
    0%, 48% { opacity: 1; }
    49%, 100% { opacity: 0; }
}
@media (max-width: 991px) {
    .storefront-shell .mobile-search form.search-empty-focus::before {
        left: 12px;
    }
}
.storefront-shell :where(.main-search, .mobile-search) form button {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: 3px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--store-primary);
    transition: color .18s ease;
}
.storefront-shell :where(.main-search, .mobile-search) form button :where(i, svg) {
    font-size: 15px;
    transition: transform .18s ease;
}
.storefront-shell :where(.main-search, .mobile-search) form button:hover {
    background: transparent;
    color: var(--store-secondary);
}
.storefront-shell :where(.main-search, .mobile-search) form button:hover :where(i, svg) {
    transform: scale(1.08);
}
.storefront-shell :where(.main-search, .mobile-search) form button:active {
    background: transparent;
}
.storefront-shell :where(.main-search, .mobile-search) form button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--store-primary) 55%, transparent);
    outline-offset: 1px;
}
@media (min-width: 992px) {
    .storefront-shell .main-search form input[type="search"] {
        width: 100%;
        padding-right: 50px;
    }
    .storefront-shell .main-search form button {
        position: absolute;
        top: 50%;
        right: 4px;
        width: 36px;
        height: 36px;
        margin: 0;
        padding: 0;
        transform: translateY(-50%);
    }
    .storefront-shell .main-search form button:active :where(i, svg) {
        transform: scale(.92);
    }
}
@media (min-width: 992px) { .storefront-shell .catalog-page .filter_btn { display: none; } }
@media (max-width: 767px) {
    .storefront-shell .main-details-page .details_slider .dimage_item { padding: 3px; }
    .storefront-shell .main-details-page .indicator_thumb .indicator-item { width: 72px; height: 72px; flex-basis: 72px; padding: 4px; }
    .storefront-shell .transaction-page .vcart-content tbody td { padding: 0; height: auto; }
    .storefront-shell .transaction-page .vcart-content tbody tr { row-gap: 12px; }
    .storefront-shell .transaction-page .vcart-content .remove-cart { width: 36px; height: 40px; }
    .storefront-shell .transaction-page .vcart-content .quantity { display: inline-flex; border: 1px solid var(--store-border); border-radius: 6px; overflow: hidden; }
    .storefront-shell .transaction-page .vcart-content .quantity :where(button, input) { width: 36px; height: 40px; padding: 0; border: 0; margin: 0; border-radius: 0; background: var(--store-surface); color: var(--store-text); }
    .storefront-shell .container { padding-left: 16px; padding-right: 16px; }
    .storefront-shell .mobile-header { margin-right: 16px; margin-left: 16px; }
    .storefront-shell :where(.auth-section, .customer-section, .contact-section, .createpage-section) { padding: 24px 0 36px; }
    .storefront-shell .auth-story { min-height: 0; padding: 24px; }
    .storefront-shell .auth-story h1 { font-size: 28px; }
    .storefront-shell .auth-benefits { margin-top: 16px; }
    .storefront-shell .auth-form-panel { padding: 24px; }
    .storefront-shell .auth-story > p { margin: 12px 0; }
    .storefront-shell :where(.customer-sidebar, .customer-auth) { margin-bottom: 20px; }
    .storefront-shell .contact-form { padding: 20px; }
    .storefront-shell .contact-section .col-sm-10 { width: 100%; }
    .storefront-shell .form-control { font-size: 16px; }
    .storefront-shell .footer_nav ul li a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 60px; min-height: 60px; padding: 8px 2px; font-size: 11px; }
    .storefront-shell .footer_nav ul li a i { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    .storefront-shell *, .storefront-shell *::before, .storefront-shell *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Keep every storefront brand slot faithful to the recommended 250x100 source. */
@media (min-width: 1200px) {
    .storefront-shell .main-header .logo-header {
        grid-template-columns: 200px minmax(320px, 1fr) auto;
    }
    .storefront-shell .main-logo,
    .storefront-shell .main-logo a,
    .storefront-shell .main-logo img {
        width: 200px !important;
        max-width: 200px !important;
        height: 80px !important;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .storefront-shell .main-header .logo-header {
        grid-template-columns: 150px minmax(260px, 1fr) auto;
    }
    .storefront-shell .main-logo,
    .storefront-shell .main-logo a,
    .storefront-shell .main-logo img {
        width: 150px !important;
        max-width: 150px !important;
        height: 60px !important;
    }
}
.storefront-shell .main-logo,
.storefront-shell .main-logo a,
.storefront-shell .menu-logo a,
.storefront-shell .mobile-menu-logo .logo-image,
.storefront-shell .site-footer .footer-brand-column > a {
    display: flex;
    align-items: center;
}
.storefront-shell .main-logo img,
.storefront-shell .menu-logo img,
.storefront-shell .mobile-menu-logo img,
.storefront-shell .site-footer .footer-about a img {
    display: block;
    aspect-ratio: 5 / 2;
    object-fit: contain !important;
}
.storefront-shell .main-logo img,
.storefront-shell .mobile-menu-logo img,
.storefront-shell .site-footer .footer-about a img {
    object-position: left center;
}
.storefront-shell .site-footer .footer-about a img {
    width: 200px !important;
    max-width: 100% !important;
    height: 80px !important;
    max-height: 80px !important;
    margin: 0 0 22px;
}
@media (max-width: 991px) {
    .storefront-shell .mobile-logo { height: 76px; }
    .storefront-shell .menu-logo a {
        justify-content: center;
        width: 150px;
        max-width: 100%;
        height: 60px;
        margin: 0 auto;
    }
    .storefront-shell .menu-logo img,
    .storefront-shell .mobile-menu-logo img {
        width: 150px !important;
        max-width: 100% !important;
        height: 60px !important;
    }
}
@media (max-width: 420px) {
    .storefront-shell .mobile-logo { grid-template-columns: 44px minmax(0, 1fr) 44px; padding: 0 10px; }
    .storefront-shell .menu-logo a,
    .storefront-shell .menu-logo img { width: 140px !important; height: 56px !important; }
    .storefront-shell .site-footer .footer-about a img { width: 175px !important; height: 70px !important; }
}

/* Keep the header, hero, and primary page cards on one visual grid. */
@media (min-width: 992px) {
    .storefront-shell .main-details-page .product-gallery-column {
        padding-left: 0;
        padding-right: 12px;
    }
    .storefront-shell .main-details-page .product-info-column {
        padding-left: 12px;
        padding-right: 0;
    }
}

@media (max-width: 991px) {
    .storefront-shell {
        --store-mobile-section-gutter: 12px;
    }
    .storefront-shell .mobile-header,
    .storefront-shell .mobile-search {
        margin-left: var(--store-mobile-section-gutter);
        margin-right: var(--store-mobile-section-gutter);
    }
    .storefront-shell .slider-section > .container,
    .storefront-shell .main-details-page > .container {
        padding-left: var(--store-mobile-section-gutter) !important;
        padding-right: var(--store-mobile-section-gutter) !important;
    }
    .storefront-shell .slider-section > .container > .row,
    .storefront-shell .main-details-page > .container > .row {
        margin-left: 0;
        margin-right: 0;
    }
    .storefront-shell .slider-section > .container > .row > [class*="col-"],
    .storefront-shell .main-details-page > .container > .row > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }

    /* Borderless header actions and a compact, modern mobile navigation dock. */
    .storefront-shell .menu-bar .toggle,
    .storefront-shell .menu-bag .margin-shopping {
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--store-text);
        font-size: 21px;
    }
    .storefront-shell .menu-bar .toggle:hover,
    .storefront-shell .menu-bar .toggle:focus-visible,
    .storefront-shell .menu-bag .margin-shopping:hover,
    .storefront-shell .menu-bag .margin-shopping:focus-visible {
        background: color-mix(in srgb, var(--store-primary) 10%, transparent);
        color: var(--store-primary);
        outline: none;
    }
    .storefront-shell .footer_nav {
        right: 10px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        left: 10px;
        width: auto;
        padding: 6px;
        border: 1px solid color-mix(in srgb, var(--store-border) 82%, transparent);
        border-radius: 18px;
        background: color-mix(in srgb, var(--store-surface) 96%, transparent);
        box-shadow: 0 10px 30px rgba(20, 33, 48, .14);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
    .storefront-shell .footer_nav ul {
        align-items: stretch;
        gap: 2px;
    }
    .storefront-shell .footer_nav ul li.mobile-nav-item {
        position: relative;
        flex: 1 1 20%;
        min-width: 0;
    }
    .storefront-shell .footer_nav ul li .mobile-nav-link,
    .storefront-shell .footer_nav .mobile_home .mobile-nav-link {
        position: relative;
        gap: 3px;
        width: 100%;
        height: 56px;
        min-height: 56px;
        padding: 5px 2px;
        border: 0;
        border-radius: 13px;
        background: transparent;
        color: var(--store-muted);
        box-shadow: none;
        transform: none;
    }
    .storefront-shell .footer_nav .mobile-nav-icon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 27px;
    }
    .storefront-shell .footer_nav .mobile-nav-icon i {
        font-size: 19px;
        line-height: 1;
    }
    .storefront-shell .footer_nav .mobile-nav-label {
        overflow: hidden;
        max-width: 100%;
        color: inherit;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .storefront-shell .footer_nav .mobile-nav-item.is-active .mobile-nav-link {
        background: color-mix(in srgb, var(--store-primary) 12%, transparent);
        color: var(--store-primary);
    }
    .storefront-shell .footer_nav .mobile-nav-item.is-active .mobile-nav-link::before {
        position: absolute;
        top: 4px;
        left: 50%;
        width: 18px;
        height: 3px;
        border-radius: 999px;
        background: var(--store-primary);
        content: "";
        transform: translateX(-50%);
    }
    .storefront-shell .footer_nav .mobile-nav-badge {
        position: absolute;
        top: -3px;
        right: -7px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border: 2px solid var(--store-surface);
        border-radius: 999px;
        background: var(--store-primary);
        color: var(--store-on-primary);
        font-size: 9px;
        font-weight: 700;
        line-height: 1;
    }
    .storefront-shell {
        padding-bottom: calc(82px + env(safe-area-inset-bottom));
    }
}