/* ==========================================================================
   Amazon-style front-end theme  (v2 — major pass)
   Loaded last (after custom.css) so it wins the cascade. Built entirely on
   top of the existing markup/classes confirmed by reading every partial
   (_header, _footer, _cart, _order-summary, home.blade + its includes,
   product-card partials) — no blade structure changed for this pass, only
   how it's painted. Safe to delete this one file to fully revert the
   visual layer (the business_settings "colors" row is the only non-CSS
   change, and that just goes back through the theme's own color picker).
   ========================================================================== */

:root {
    /* core Amazon palette */
    --amz-navy: #131921;
    --amz-navy-mid: #1b2430;
    --amz-navy-light: #232f3e;
    --amz-navy-lighter: #37475a;
    --amz-navy-border: #3a4553;
    --amz-orange: #ff9900;
    --amz-orange-dark: #e88a00;
    --amz-yellow: #febd69;
    --amz-yellow-light: #f7ca00;
    --amz-page-bg: #eaeded;
    --amz-card-bg: #ffffff;
    --amz-card-border: #d5d9d9;
    --amz-card-border-strong: #c7cdd1;
    --amz-text: #0f1111;
    --amz-text-muted: #565959;
    --amz-text-faint: #767676;
    --amz-link: #007185;
    --amz-link-hover: #c7511f;
    --amz-price: #b12704;
    --amz-star: #ffa41c;
    --amz-success: #067d62;
    --amz-success-bg: #f0f7f2;
    --amz-radius-sm: 4px;
    --amz-radius: 8px;
    --amz-radius-lg: 12px;
    --amz-shadow: 0 2px 5px 0 rgba(15, 17, 17, .08), 0 1px 1px 0 rgba(15, 17, 17, .06);
    --amz-shadow-hover: 0 8px 22px rgba(15, 17, 17, .14), 0 2px 6px rgba(15, 17, 17, .08);
}

/* ---------------------------------------------------------------------- *
 * Base / typography
 * ---------------------------------------------------------------------- */

body {
    background-color: var(--amz-page-bg) !important;
    color: var(--amz-text);
}

a {
    color: var(--amz-link);
}

a:hover {
    color: var(--amz-link-hover);
}

.web-text-primary,
.text-primary {
    color: var(--amz-orange) !important;
}

hr {
    border-color: var(--amz-card-border);
}

/* section titles across the homepage / listing pages */
.feature-product-title,
.arrival-title,
.section-header h2,
.featured_deal_title,
.categories-title,
.seller-list-title h2,
h2.text-black,
.card-body h2 {
    color: var(--amz-text) !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px;
}

.section-header {
    border-bottom: 1px solid var(--amz-card-border);
    padding-bottom: 10px;
    margin-bottom: 12px !important;
}

.view-all-btn-text {
    color: var(--amz-link) !important;
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.view-all-btn-text:hover {
    color: var(--amz-link-hover) !important;
    text-decoration: underline;
}

/* generic white "card" panels used all over the homepage */
.card.__shadow,
.__inline-62 > div > .card,
.seller-card .card,
.deal_of_the_day,
.__featured-deal-wrap {
    border: 1px solid var(--amz-card-border) !important;
    border-radius: var(--amz-radius) !important;
    box-shadow: var(--amz-shadow) !important;
}

/* ---------------------------------------------------------------------- *
 * Buttons — Amazon's signature yellow/orange gradient with dark text
 * ---------------------------------------------------------------------- */

.btn-primary,
.btn--primary,
.product-add-to-cart-button,
.checkout-btn,
.proceed_to_next_button {
    background: linear-gradient(to bottom, var(--amz-yellow-light), var(--amz-yellow) 100%) !important;
    border: 1px solid var(--amz-orange-dark) !important;
    color: var(--amz-text) !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .06);
}

.btn-primary:hover,
.btn--primary:hover,
.product-add-to-cart-button:hover,
.checkout-btn:hover,
.proceed_to_next_button:hover {
    background: linear-gradient(to bottom, #f5c04a, var(--amz-yellow-light) 100%) !important;
    color: var(--amz-text) !important;
}

.btn-secondary,
.product-buy-now-button {
    background: linear-gradient(to bottom, #f7dfa5, var(--amz-orange) 100%) !important;
    border: 1px solid #a15c00 !important;
    color: var(--amz-text) !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .06);
}

.btn-secondary:hover,
.product-buy-now-button:hover {
    background: linear-gradient(to bottom, #f0cf87, var(--amz-orange-dark) 100%) !important;
    color: var(--amz-text) !important;
}

.btn-outline-primary,
.btn-outline-secondary {
    border-color: var(--amz-navy-lighter) !important;
    color: var(--amz-navy) !important;
    border-radius: 20px !important;
    background: #fff !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    background: var(--amz-page-bg) !important;
    border-color: var(--amz-text-muted) !important;
    color: var(--amz-text) !important;
}

#apply-coupon-code {
    border-radius: 4px !important;
}

/* ---------------------------------------------------------------------- *
 * Header — top utility bar (phone / language / currency)
 * ---------------------------------------------------------------------- */

header.rtl .topbar {
    background: var(--amz-navy-mid) !important;
    border-bottom: 1px solid var(--amz-navy-border);
}

header.rtl .topbar .topbar-link,
header.rtl .topbar .topbar-text > a {
    color: #cdd1d6 !important;
}

header.rtl .topbar .topbar-link i,
header.rtl .topbar .topbar-link .text-primary {
    color: var(--amz-orange) !important;
}

header.rtl .topbar .topbar-link:hover,
header.rtl .topbar .topbar-text > a:hover {
    color: #fff !important;
}

header.rtl .topbar .dropdown-menu {
    background: #fff;
    border: 1px solid var(--amz-card-border);
    box-shadow: var(--amz-shadow-hover);
}

/* ---------------------------------------------------------------------- *
 * Header — main bar: logo / search / account / cart
 * ---------------------------------------------------------------------- */

.navbar-sticky.mobile-head {
    background: var(--amz-navy) !important;
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--amz-navy);
}

.navbar-sticky.mobile-head .navbar-brand img {
    max-height: 60px;
    max-width: 230px;
    object-fit: contain;
}

/* .amz-logo-chip: the header/footer are both navy, and the site logo
   (business_settings "logos") is expected to be a light-on-transparent
   mark designed for that background — no white card behind it (that's
   what Amazon itself does). If a future upload turns out to need more
   contrast, add a background here; for now this just keeps the logo
   vertically centered and gives it breathing room. Deliberately NOT using
   an invert() filter here — that would turn any logo with real color
   (or an opaque "upload a logo" placeholder) into a blank white block. */
/* NOT !important and no forced `display` — this class sits on both the
   mobile-only and desktop-only logo links (Bootstrap's d-sm-none /
   d-none d-sm-block decide which one actually renders per breakpoint);
   forcing display here fought that and showed both logos stacked on
   mobile. */
.amz-logo-chip {
    align-items: center;
    padding: 4px 0;
}

footer.page-footer .footer-web-logo img {
    max-width: 220px;
    max-height: 76px;
    object-fit: contain;
}

/* search bar — full width, rounded, orange button */
.search-form-mobile .search_form,
.search-form-mobile .input-group-overlay {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}

.search-form-mobile {
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.search-form-mobile .search-bar-input {
    border: none !important;
    background: #fff !important;
    height: 42px;
    border-radius: 4px 0 0 4px !important;
    color: var(--amz-text);
}

.search-form-mobile .search-bar-input:focus {
    outline: 3px solid var(--amz-yellow);
    outline-offset: -1px;
}

.search-form-mobile .search_button,
.search-form-mobile .input-group-append-overlay {
    background: var(--amz-orange) !important;
    border: none !important;
    border-radius: 0 4px 4px 0 !important;
    transition: background-color .1s ease;
}

.search-form-mobile .search_button:hover,
.search-form-mobile .input-group-append-overlay:hover {
    background: var(--amz-orange-dark) !important;
}

.search-form-mobile .search_button .input-group-text,
.search-form-mobile .input-group-append-overlay .input-group-text {
    background: transparent !important;
}

.search-form-mobile .search_button i,
.search-form-mobile .czi-search {
    color: var(--amz-navy) !important;
}

/* account / wishlist / cart icon buttons in the navbar — the blade markup
   now sets .navbar-dark (was .navbar-light) on this bar, which routes
   through the theme's own dark-header rules (theme.css ~15204) for a
   correctly-legible translucent-white icon box; we only add the radius +
   hover ring on top of that. */
.navbar-tool {
    border-radius: 4px;
}

.navbar-dark .navbar-tool-icon-box.bg-secondary {
    border-radius: 4px;
}

.navbar-toolbar .navbar-tool:hover,
.navbar-toolbar .dropdown:hover {
    outline: 1px solid #fff;
    outline-offset: 2px;
    border-radius: 4px;
}

/* custom.css ties this badge's background to the site's "secondary" brand
   color (.navbar-tool .navbar-tool-label{background-color:var(--web-secondary)
   !important}) at (0,2,0) specificity — beats a plain .navbar-tool-label
   rule. Now that secondary = navy (matches the header), that made the badge
   navy-on-navy with navy text = invisible "black dot". Match its specificity. */
.navbar-tool .navbar-tool-label,
.navbar-tool-label {
    background: var(--amz-orange) !important;
    color: var(--amz-navy) !important;
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--amz-navy);
}

.navbar-toolbar .navbar-tool-text,
.navbar-toolbar .navbar-tool-text small {
    color: #e7e9ec !important;
}

.navbar-toolbar .navbar-tool-text {
    font-weight: 700;
}

.navbar-toolbar .cart-total-price {
    color: #fff !important;
}

.navbar-tool-icon-box img.img-profile {
    border: 2px solid rgba(255, 255, 255, .5);
}

/* cart hover dropdown (_cart.blade.php) — the product-detail page has a
   FIXED sticky "add to cart" bar at the bottom (.product-details-sticky,
   theme.css, z-index:9999) that stayed above this dropdown (z-index:990)
   whenever both were visible at once, covering part of the open dropdown.
   An open dropdown menu should always be the topmost interactive layer. */
.cart-dropdown {
    border: 1px solid var(--amz-card-border);
    box-shadow: var(--amz-shadow-hover);
    border-radius: 10px !important;
    overflow: hidden;
    z-index: 10000 !important;
}

.widget-cart-top {
    background: var(--amz-page-bg);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--amz-card-border);
}

.dropdown-saved-amount {
    background: var(--amz-success-bg);
    border-radius: var(--amz-radius-sm);
    padding: 8px;
    color: var(--amz-success) !important;
}

.dropdown-saved-amount .text-accent,
.dropdown-saved-amount span {
    color: var(--amz-success) !important;
}

.widget-product-title a {
    color: var(--amz-text) !important;
}

/* ---------------------------------------------------------------------- *
 * Header — category strip / mega menu ("All departments" style)
 * ---------------------------------------------------------------------- */

.navbar-stuck-menu {
    background: var(--amz-navy-light) !important;
}

.navbar-stuck-menu .navbar-nav > .nav-item > .nav-link {
    color: #fff !important;
    font-weight: 500;
    font-size: 13.5px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid transparent;
}

.navbar-stuck-menu .navbar-nav > .nav-item > .nav-link:hover,
.navbar-stuck-menu .navbar-nav > .nav-item.active > .nav-link {
    border: 1px solid #fff;
    border-radius: 2px;
}

.navbar-stuck-menu .btn.dropdown-toggle {
    color: #fff !important;
    font-weight: 500;
    font-size: 13.5px;
}

.navbar-stuck-menu .btn.dropdown-toggle:hover {
    border: 1px solid #fff;
    border-radius: 2px;
}

/* the shipped theme gives the "Categories" toggle's *parent* <ul> (.mega-nav)
   a hardcoded white background (theme.css ~18861) — was invisible on the old
   light header, but paints an opaque white box over our navy category bar.
   Match it to the row instead of leaving the default. */
.navbar-stuck-menu .mega-nav {
    background: transparent !important;
    width: auto;
}

.category-menu-toggle-btn {
    color: #fff !important;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px !important;
    border-radius: 2px;
}

.category-menu-toggle-btn:hover {
    border: 1px solid #fff;
}

.category-menu-toggle-btn:hover {
    color: var(--amz-orange) !important;
}

.category-menu-toggle-btn svg path {
    fill: #fff;
}

.category-menu-toggle-btn:hover svg path {
    fill: var(--amz-orange);
}

.navbar-stuck-menu .dropdown-menu {
    border: 1px solid var(--amz-card-border);
    box-shadow: var(--amz-shadow-hover);
    border-radius: var(--amz-radius-sm) !important;
}

.navbar-stuck-menu .dropdown-item:hover {
    background: var(--amz-page-bg);
    color: var(--amz-link-hover);
}

/* the flyout "categories" panel (left-hand column on desktop / dropdown on
   mobile) and the mega-menu flyout that appears off each category */
.category-menu-wrap {
    background: #fff;
    border: 1px solid var(--amz-card-border);
    border-radius: var(--amz-radius-sm);
}

.category-menu > li > a {
    color: var(--amz-text) !important;
    font-weight: 500;
    font-size: 13.5px;
    padding: 9px 14px;
}

.category-menu > li > a:hover {
    background: var(--amz-page-bg);
    color: var(--amz-link-hover) !important;
}

.category-menu > li:last-child a {
    color: var(--amz-link) !important;
    font-weight: 700;
}

.megamenu-wrap {
    background: #fff;
    border-top: 3px solid var(--amz-orange);
    box-shadow: var(--amz-shadow-hover);
}

.mega_menu {
    background: #fff;
    border: 1px solid var(--amz-card-border);
    box-shadow: var(--amz-shadow-hover);
    border-radius: var(--amz-radius-sm);
}

.mega_menu_inner h6 a {
    color: var(--amz-text) !important;
    font-weight: 700;
    border-bottom: 1px solid var(--amz-card-border);
    display: block;
    padding-bottom: 6px;
    margin-bottom: 6px;
}

.mega_menu_inner > div > a {
    color: var(--amz-text-muted) !important;
}

.mega_menu_inner > div > a:hover {
    color: var(--amz-link-hover) !important;
    text-decoration: underline;
}

/* ---------------------------------------------------------------------- *
 * Homepage — "Shop by category" circular icon grid
 * ---------------------------------------------------------------------- */

.__cate-item a {
    transition: transform .12s ease;
}

.__cate-item:hover a {
    transform: translateY(-3px);
}

.__cate-item .__img {
    background: var(--amz-page-bg);
    border-radius: 50%;
    padding: 10px;
    border: 1px solid var(--amz-card-border);
}

.__cate-item:hover .__img {
    border-color: var(--amz-orange);
    box-shadow: 0 0 0 3px rgba(255, 153, 0, .18);
}

.__cate-item h3 {
    color: var(--amz-text) !important;
    font-weight: 600 !important;
}

/* ---------------------------------------------------------------------- *
 * Product cards (grid) — .product-single-hover
 * ---------------------------------------------------------------------- */

.product-single-hover {
    background: var(--amz-card-bg);
    border: 1px solid var(--amz-card-border) !important;
    border-radius: var(--amz-radius) !important;
    padding: 10px;
    transition: box-shadow .15s ease, transform .1s ease, border-color .15s ease;
}

.product-single-hover:hover {
    box-shadow: var(--amz-shadow-hover);
    border-color: var(--amz-card-border-strong) !important;
}

/* two card variants share .product-single-hover: "style--category"
   (h3 title) used on the homepage, and "style--card" (h4 title) used on
   the listing/search page's _filter-single-product partial — both need
   the same title-color treatment */
.product-single-hover .single-product-details h3 a,
.product-single-hover .single-product-details h4 a {
    color: var(--amz-text) !important;
    font-weight: 400 !important;
    font-size: 14px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-single-hover .single-product-details h3 a:hover,
.product-single-hover .single-product-details h4 a:hover {
    color: var(--amz-link-hover) !important;
    text-decoration: underline;
}

.rating-show .tio-star,
.rating-show .tio-star-half,
.flash-product-review .tio-star,
.flash-product-review .tio-star-half,
.text-warning {
    color: var(--amz-star) !important;
}

.rating-show .tio-star-outlined,
.flash-product-review .tio-star-outlined {
    color: #d5d9d9 !important;
}

.badge-style,
.badge-style2 {
    color: var(--amz-link) !important;
    font-weight: 400;
    font-size: 12px;
}

.product-price .text-accent,
.flash-product-price,
.text-accent {
    color: var(--amz-text) !important;
    font-weight: 700 !important;
}

.product-price .text-accent,
.flash-product-price {
    font-size: 19px !important;
}

.category-single-product-price {
    color: var(--amz-text-faint) !important;
}

.for-discount-value {
    background: var(--amz-price) !important;
    color: #fff !important;
    border-radius: 3px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.out_fo_stock {
    background: var(--amz-navy) !important;
    color: #fff !important;
    border-radius: 3px;
}

.quick-view .btn-circle,
.quick-view a.btn-circle {
    background: #fff !important;
    border: 1px solid var(--amz-card-border);
    box-shadow: var(--amz-shadow);
}

.quick-view .btn-circle:hover {
    border-color: var(--amz-orange);
    color: var(--amz-orange) !important;
}

/* Card hover overlay: the quick-view/add-to-cart icons used to sit
   dead-center over the product photo via style.css's `place-items: center`,
   covering the image while a shopper is trying to look at it. Move the
   product-type badge to the top corner and the action icons to the bottom
   corner instead, so the photo stays visible; the darken tint on hover is
   enough of an "interactive" cue on its own. Loads after style.css so this
   wins on equal specificity without needing !important. inset-inline-end
   (not `right`) keeps this on the correct side in RTL sessions too. */
.product-single-hover .quick-view {
    display: block;
    pointer-events: none;
}

.product-single-hover .quick-view-tag {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    pointer-events: auto;
}

.product-single-hover .quick-view-actions {
    position: absolute;
    bottom: 8px;
    inset-inline-end: 8px;
    pointer-events: auto;
}

/* flash-deal style horizontal cards used in "featured deal" / "new arrivals" strips */
.flash_deal_product {
    background: var(--amz-card-bg);
    border: 1px solid var(--amz-card-border) !important;
    border-radius: var(--amz-radius) !important;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.flash_deal_product:hover {
    box-shadow: var(--amz-shadow-hover);
    border-color: var(--amz-card-border-strong) !important;
}

.flash-product-title {
    color: var(--amz-text) !important;
    font-weight: 400 !important;
}

.flash-product-title:hover {
    color: var(--amz-link-hover) !important;
    text-decoration: underline;
}

/* ---------------------------------------------------------------------- *
 * Homepage section cards / carousels
 * ---------------------------------------------------------------------- */

.bg--light {
    background: #fff !important;
    border: 1px solid var(--amz-card-border);
    border-radius: var(--amz-radius);
    padding: 16px !important;
}

/* Deal of the day highlight panel */
.deal_of_the_day {
    overflow: hidden;
}

.deal_of_the_day .web-text-primary {
    background: var(--amz-navy);
    color: #fff !important;
    margin: -1px -1px 0;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    letter-spacing: .5px;
}

/* Top sellers */
.others-store-card {
    border: 1px solid var(--amz-card-border);
    border-radius: var(--amz-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--amz-shadow);
    transition: box-shadow .15s ease;
}

.others-store-card:hover {
    box-shadow: var(--amz-shadow-hover);
}

/* Company reliability strip (shipping / returns / support icons) */
.shopping-method-icon {
    border: 1px solid var(--amz-card-border) !important;
    box-shadow: var(--amz-shadow);
}

.shipping-policy-web p {
    color: var(--amz-text) !important;
    font-weight: 600;
}

/* Free-delivery progress bar in the cart dropdown */
.progress.__progress {
    background: #e5e5e5 !important;
    border-radius: 20px;
    overflow: hidden;
    height: 6px !important;
}

.progress.__progress .progress-bar {
    background: var(--amz-success) !important;
}

.amount-fill-up,
.amount-need-to-fill-up .free_delivery_amount_need {
    color: var(--amz-success) !important;
}

/* "Quick access" tiles above the footer (about us / contact / FAQ / blog) */
.footer-slide-item {
    border: 1px solid var(--amz-card-border);
    border-radius: var(--amz-radius);
    background: #fff;
    box-shadow: var(--amz-shadow);
    transition: box-shadow .15s ease, transform .1s ease;
}

.footer-slide-item:hover {
    box-shadow: var(--amz-shadow-hover);
    transform: translateY(-2px);
}

.footer-slide-item .heading,
.footer-slide-item p {
    color: var(--amz-text) !important;
    font-weight: 700;
}

/* ---------------------------------------------------------------------- *
 * Listing / search-results page (category, brand, search, flash-deal…)
 * ---------------------------------------------------------------------- */

.search-page-header {
    background: #fff;
    border: 1px solid var(--amz-card-border);
    border-radius: var(--amz-radius);
    padding: 14px 16px;
    box-shadow: var(--amz-shadow);
}

.search-page-header h5 {
    color: var(--amz-text) !important;
    font-weight: 700 !important;
}

.view-page-item-count {
    color: var(--amz-link);
    font-weight: 700;
}

.sorting-item {
    background: #fff;
    border: 1px solid var(--amz-card-border);
    border-radius: 20px;
    padding: 4px 10px;
}

.product-list-filter-input {
    border: none !important;
    background: transparent !important;
    font-weight: 600;
    color: var(--amz-text) !important;
}

.search-page-button-input {
    border: 1px solid var(--amz-card-border) !important;
    border-radius: var(--amz-radius-sm) !important;
}

.search-page-button {
    background: var(--amz-orange) !important;
    border-radius: 0 var(--amz-radius-sm) var(--amz-radius-sm) 0 !important;
}

.search-page-button i {
    color: var(--amz-navy) !important;
}

/* left-hand filter sidebar */
.cz-sidebar {
    background: #fff;
    border: 1px solid var(--amz-card-border);
    border-radius: var(--amz-radius);
    box-shadow: var(--amz-shadow);
}

.cz-sidebar h5,
.cz-sidebar h6 {
    color: var(--amz-text) !important;
}

.menu--caret-accordion > .card-header {
    padding: 6px 0;
}

.menu--caret-accordion .for-hover-label {
    color: var(--amz-text-muted);
}

.menu--caret-accordion .for-hover-label:hover,
.menu--caret-accordion .for-hover-label.text-primary {
    color: var(--amz-link-hover) !important;
}

.cz-sidebar .form-control,
.cz-sidebar select.product-list-filter-input {
    border-color: var(--amz-card-border) !important;
    border-radius: var(--amz-radius-sm) !important;
}

#price_range_slider {
    background: #e5e5e5;
    height: 4px;
}

#price_range_slider .slider-range {
    background: var(--amz-orange);
}

#price_range_slider .slider-thumb {
    background: #fff;
    border: 2px solid var(--amz-orange);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.filter-show-btn {
    border-radius: var(--amz-radius-sm) !important;
}

/* ---------------------------------------------------------------------- *
 * Product details — emphasise the buy box (price/qty/add-to-cart block)
 * ---------------------------------------------------------------------- */

.product-quantity,
.product-add-and-buy-section {
    margin-top: 8px;
}

.discounted-unit-price {
    color: var(--amz-price) !important;
    font-weight: 700 !important;
}

.product-total-unit-price {
    color: var(--amz-text-faint) !important;
}

.quantity-box {
    border-color: var(--amz-card-border) !important;
    border-radius: 20px !important;
}

/* Amazon-style "buy box": price / qty / delivery-estimate / buy-buttons,
   moved (products/details.blade.php) into the right-hand sidebar column
   above seller-info/trust-badges instead of sitting under the title, and
   wrapped in .buy-box-card so it reads as its own card, sticky while the
   page scrolls (a real Bootstrap column, so the "3 columns" here are really
   gallery+info sharing col-lg-9 vs. this col-lg-3 — a lighter-risk stand-in
   for a full independent 3-column grid, achieving the same buy-box result). */
.buy-box-card {
    background: #fff;
    border: 1px solid var(--amz-card-border);
    border-radius: var(--amz-radius);
    padding: 18px;
    box-shadow: var(--amz-shadow);
    top: 90px;
}

/* the form itself sits inside .buy-box-card now — no second nested card */
form.add-to-cart-details-form {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.buy-box-card .discounted-unit-price {
    font-size: 26px !important;
}

/* .__btn-grp (.product-add-and-buy-section-parent) is the actual flex row —
   it wraps the buy/cart button pair AND the separate wishlist button as
   siblings, so column-ing just the inner pair still left them shrink-fit
   next to the heart button. Stack the whole group instead. */
.buy-box-card .product-add-and-buy-section-parent {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.buy-box-card .product-add-and-buy-section {
    flex-direction: column;
    align-items: stretch !important;
    width: 100%;
}

.buy-box-card .product-add-and-buy-section .btn,
.buy-box-card > form > .product-add-and-buy-section-parent > .product-action-add-wishlist {
    width: 100%;
}

.buy-box-card .product-action-add-wishlist {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.star-rating i {
    color: var(--amz-star) !important;
}

/* ---------------------------------------------------------------------- *
 * Cart / checkout / order summary
 * ---------------------------------------------------------------------- */

.order-summery-aside .__cart-total,
.__cart-total {
    background: #fff;
    border: 1px solid var(--amz-card-border) !important;
    border-radius: var(--amz-radius) !important;
    box-shadow: var(--amz-shadow);
    padding: 18px !important;
}

.cart_title {
    color: var(--amz-text-muted);
}

.cart_value,
.cart-total-price {
    color: var(--amz-text);
    font-weight: 600;
}

.order-summery-aside hr {
    border-color: var(--amz-card-border);
}

.light-box {
    background: var(--amz-page-bg) !important;
    border-radius: var(--amz-radius);
}

.light-box .bg-white {
    border: 1px solid var(--amz-card-border);
}

.coupon-code-form .form-control,
.needs-validation.coupon-code-form > div {
    border-color: var(--amz-card-border) !important;
}

.widget-cart-item .quantity__minus,
.widget-cart-item .quantity__plus {
    border-color: var(--amz-card-border) !important;
}

/* ---------------------------------------------------------------------- *
 * Footer
 * ---------------------------------------------------------------------- */

footer.page-footer {
    background: var(--amz-navy) !important;
    color: #ddd;
}

/* the shipped theme already ships a light-tinted band here designed for a
   dark footer background — swap the tint for a subtle navy-on-navy band
   instead of the primary-orange tint so it doesn't clash */
footer.page-footer .custom-light-primary-color-20 {
    background-color: rgba(255, 255, 255, .03) !important;
}

footer.page-footer .footer-header {
    color: #fff !important;
    font-weight: 700;
    letter-spacing: .3px;
    font-size: 13px;
}

footer.page-footer p,
footer.page-footer small,
footer.page-footer span,
footer.page-footer .start_address span {
    color: #cfd3d6 !important;
}

footer.page-footer .widget-list-item {
    margin-bottom: 6px;
}

footer.page-footer .widget-list-link:hover {
    text-decoration: underline;
}

/* logo chip styling lives up top near .amz-logo-chip; this old rule was
   superseded by the white-chip approach (see there for the rationale) */

.__inline-9 .subscribe-button {
    background: var(--amz-orange) !important;
    color: var(--amz-navy) !important;
    font-weight: 700;
}

.__inline-9 .subscribe-button:hover {
    background: var(--amz-orange-dark) !important;
}

footer.page-footer .bg-white-overlay-50 {
    background: rgba(0, 0, 0, .18) !important;
    border-top: 1px solid var(--amz-navy-border);
}

footer.page-footer .bg-white-overlay-50 p,
footer.page-footer .bg-white-overlay-50 span {
    color: #9fa6ac !important;
}

/* ---------------------------------------------------------------------- *
 * Back-to-top
 * ---------------------------------------------------------------------- */

.btn-scroll-top {
    background: var(--amz-navy-lighter) !important;
    border-color: var(--amz-navy-lighter) !important;
}

.btn-scroll-top:hover {
    background: var(--amz-navy) !important;
}

/* ---------------------------------------------------------------------- *
 * Small screens — keep the density but don't let the search bar crowd out
 * the toolbar icons on a narrow phone width
 * ---------------------------------------------------------------------- */

@media (max-width: 576px) {
    .navbar-sticky.mobile-head .navbar-brand img {
        max-height: 38px;
    }

    .section-header {
        padding-bottom: 6px;
    }
}