@media (max-width: 767px) {
  .mobile-page--magazine-index .journal-page {
    padding-top: 24px;
  }

  .mobile-page--magazine-index .journal-archive {
    margin-top: 18px;
  }

  .mobile-page--magazine-index .journal-categories-scroll {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 10px;
  }

  .mobile-page--magazine-index .journal-categories-scroll > .journal-branch--areas,
  .mobile-page--magazine-index .journal-branch--areas > .journal-children {
    display: contents;
  }

  .mobile-page--magazine-index .journal-categories-scroll > .journal-branch--areas {
    grid-column: auto;
  }

  .mobile-page--magazine-index .journal-categories .journal-branch,
  .mobile-page--magazine-index .journal-categories .journal-branch--areas > .journal-children {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .mobile-page--magazine-index .journal-categories button {
    min-width: 0;
    min-height: 48px;
    padding: 7px 6px;
    border: 0;
    border-bottom: 1px solid #e8edf0;
    border-radius: 0;
    background-color: transparent;
    font-size: 13px;
  }

  .mobile-page--magazine-index .journal-categories button.is-active {
    border-bottom-color: #e6cf82;
    border-radius: 10px;
    background-color: #fff8df;
  }

  .product-card-actions {
    top: 8px;
    left: 8px;
    gap: 6px;
  }

  .product-card-actions > :is(.favorite, .compare-trigger) {
    width: 35px !important;
    min-width: 35px !important;
    height: 35px !important;
    min-height: 35px !important;
    font-size: 14px !important;
  }

  .product-card > .add-cart,
  .search-product.product-card > .search-add-cart,
  .showcase-card-body > .add-cart,
  .rail-card > .add-cart,
  .product-detail-related-card > .add-cart {
    position: relative !important;
    height: 42px;
    min-height: 42px !important;
    flex: 0 0 42px;
    padding: 5px 8px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
  }

  .product-card > .add-cart,
  .search-product.product-card > .search-add-cart,
  .showcase-card-body > .add-cart,
  .rail-card > .add-cart,
  .product-detail-related-card > .add-cart {
    gap: 5px;
    font-size: 0 !important;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .product-card > .add-cart::after,
  .search-product.product-card > .search-add-cart::after,
  .showcase-card-body > .add-cart::after,
  .rail-card > .add-cart::after,
  .product-detail-related-card > .add-cart::after {
    content: "افزودن به سبد";
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
  }

  .product-card > .add-cart > i,
  .search-product.product-card > .search-add-cart > i,
  .showcase-card-body > .add-cart > i,
  .rail-card > .add-cart > i,
  .product-detail-related-card > .add-cart > i {
    flex: 0 0 auto;
    font-size: 14px !important;
  }

  .add-cart-confirmation {
    font-size: 12px;
  }

  .mobile-page--home-index #collection > .container {
    width: 100%;
    max-width: 100%;
    padding-right: 5px;
    padding-left: 5px;
  }

  .mobile-page--home-index #productGrid {
    --bs-gutter-x: 6px;
    --bs-gutter-y: 7px;
    align-items: stretch;
  }

  .mobile-page--home-index #productGrid > .product-col {
    flex: 0 0 50%;
    max-width: 50%;
    min-width: 0;
  }

  .mobile-page--brands-details .brand-detail-page .brand-detail-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .mobile-page--about-index .about-page,
  .mobile-page--contact-index .contact-section,
  .mobile-page--cart-index .cart-page-main,
  .mobile-page--checkout-index .invoice-page,
  .mobile-page--compare-index .compare-page,
  .mobile-page--product-details main.flow-main,
  .mobile-page--profile-index main.flow-main,
  .mobile-page--profile-orders main.flow-main,
  .mobile-page--profile-addresses main.flow-main,
  .mobile-page--profile-favorites main.flow-main,
  .mobile-page--favorites-index main.flow-main,
  .mobile-page--magazine-index .journal-page,
  .mobile-page--magazine-details .article-page,
  .mobile-page--faq-index .customer-service-main,
  .mobile-page--shipping-index .customer-service-main,
  .mobile-page--tracking-index .customer-service-main,
  .mobile-page--warranty-index .customer-service-main,
  .mobile-page--legal-terms .legal-main,
  .mobile-page--legal-returns .legal-main,
  .mobile-page--legal-privacy .legal-main,
  .mobile-page--error-index main {
    min-width: 0;
    max-width: 100%;
  }

  .mobile-page--about-index .about-page .container,
  .mobile-page--contact-index .contact-section .container,
  .mobile-page--contact-index .contact-shortcuts .container,
  .mobile-page--brands-index .brands-catalogue .container,
  .mobile-page--brands-details .brand-detail-page .container,
  .mobile-page--magazine-index .journal-archive,
  .mobile-page--magazine-details .article-content-section > .container {
    width: 100%;
    max-width: 100%;
  }

  .mobile-page--contact-index .contact-layout,
  .mobile-page--contact-index .contact-shortcuts-grid,
  .mobile-page--checkout-index .invoice-page > .flow-grid,
  .mobile-page--magazine-details .article-content-section .article-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .mobile-page--about-index .story-copy p,
  .mobile-page--about-index .about-journey-section .timeline-item p {
    word-spacing: normal;
  }

  .mobile-page--profile-index .account-section .flow-cards,
  .mobile-page--profile-orders .account-section .flow-cards,
  .mobile-page--profile-addresses .account-section .flow-cards,
  .mobile-page--favorites-index #favoritesView .flow-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-page--product-list .search-page .search-page-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .mobile-page--favorites-index main.flow-main.container {
    width: 100%;
    max-width: 100%;
    padding-right: 8px;
    padding-left: 8px;
  }

  .mobile-page--profile-favorites .account-content {
    padding-right: 8px;
    padding-left: 8px;
  }

  .mobile-page--favorites-index #favoritesView .flow-cards {
    grid-template-columns: var(--favorites-card-columns, repeat(2, minmax(0, 1fr))) !important;
  }

  .mobile-page--favorites-index #favoritesView .favorite-item-card,
  .mobile-page--profile-favorites #favoritesView .favorite-item-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .mobile-page--favorites-index #favoritesView .favorite-item-card .list-remove-button,
  .mobile-page--profile-favorites #favoritesView .favorite-item-card .list-remove-button {
    width: calc(100% - 16px);
    min-height: 34px;
    margin: 0 8px 8px;
    padding: 5px;
    font-size: 11px;
  }

  .mobile-page--product-details #productView .product-detail-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .mobile-page--product-details #productView .product-detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .mobile-page--profile-index .account-section .flow-cards,
  .mobile-page--profile-orders .account-section .flow-cards,
  .mobile-page--profile-addresses .account-section .flow-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .mobile-page--favorites-index #favoritesView .flow-cards {
    gap: 8px;
  }

  .mobile-page--about-index .about-page .container,
  .mobile-page--contact-index .contact-section .container,
  .mobile-page--contact-index .contact-shortcuts .container,
  .mobile-page--brands-index .brands-catalogue .container,
  .mobile-page--brands-details .brand-detail-page .container,
  .mobile-page--magazine-index .journal-archive,
  .mobile-page--magazine-details .article-content-section > .container,
  .mobile-page--legal-terms .legal-main,
  .mobile-page--legal-returns .legal-main,
  .mobile-page--legal-privacy .legal-main,
  .mobile-page--error-index main {
    padding-right: 12px;
    padding-left: 12px;
  }
}

@media (max-width: 389px) {
  .mobile-page--home-index #productGrid > .product-col .product-image {
    height: 175px !important;
    min-height: 175px !important;
    max-height: 175px !important;
  }

  .mobile-page--home-index #productGrid > .product-col .product-info {
    min-height: 112px;
    padding: 9px 8px 7px !important;
  }

  .mobile-page--home-index #productGrid > .product-col > .add-cart {
    display: flex !important;
    width: calc(100% - 16px) !important;
    min-width: 0;
    height: 42px;
    min-height: 42px !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 8px 8px !important;
    padding: 7px 4px;
    font-size: 0 !important;
    line-height: 1.25;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
  }
}

@media (max-width: 575px) {
  footer .footer-main > .col-6 {
    min-width: 0;
    padding: 12px 10px 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    background: linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.018)
    );
  }

  footer .footer-main > .col-6 h4 {
    margin: 0 0 8px;
    padding-bottom: 10px;
    color: #f2cc70;
    font-size: 14px;
    line-height: 1.5;
  }

  footer .footer-main > div:not(:first-child).col-6 a {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 5px 11px 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(244, 247, 249, 0.82) !important;
    font-size: 12.5px;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }

  footer .footer-main > div:not(:first-child).col-6 a::before {
    position: absolute;
    top: 13px;
    right: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #e8c36b;
    content: "";
  }

  footer .footer-main > div:not(:first-child).col-6 a:last-child {
    border-bottom: 0;
  }

  footer .footer-main > div:not(:first-child).col-6 a:hover {
    color: #ffd45a !important;
    transform: none;
  }

  footer .trust-badges {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
  }

  footer .trust-badges .trust-badge-image {
    flex: 0 0 calc((100% - 12px) / 3);
    width: calc((100% - 12px) / 3);
    min-width: 0;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
  }
}

@media (max-width: 359px) {
  footer .footer-main > .col-6 {
    padding: 10px 8px 8px;
  }

  footer .footer-main > .col-6 h4 {
    font-size: 13px;
  }

  footer .footer-main > div:not(:first-child).col-6 a {
    padding-right: 9px;
    font-size: 11.5px;
  }
}

/* Mobile controls use a readable default; compact forms supply their own size. */
@media (max-width: 767px) {
  .home-page .price-old,
  .inner-page main .price-old {
    color: #718196 !important;
    font-size: 11px !important;
  }

  .inner-page main :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
    select,
    textarea
  ) {
    font-size: var(--mobile-control-font-size, 16px) !important;
  }

  .mobile-page--about-index .about-hero,
  .mobile-page--contact-index .contact-hero,
  .mobile-page--faq-index .page-hero,
  .mobile-page--shipping-index .page-hero,
  .mobile-page--tracking-index .page-hero,
  .mobile-page--warranty-index .page-hero,
  .mobile-page--legal-terms .page-hero,
  .mobile-page--legal-returns .page-hero,
  .mobile-page--legal-privacy .page-hero {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .mobile-page--about-index .about-hero h1,
  .mobile-page--contact-index .contact-hero h1,
  .mobile-page--faq-index .page-hero h1,
  .mobile-page--shipping-index .page-hero h1,
  .mobile-page--tracking-index .page-hero h1,
  .mobile-page--warranty-index .page-hero h1,
  .mobile-page--legal-terms .page-hero h1,
  .mobile-page--legal-returns .page-hero h1,
  .mobile-page--legal-privacy .page-hero h1 {
    font-size: clamp(22px, 6vw, 30px);
    line-height: 1.6;
  }
}

/* Keep desktop header action buttons and glyphs identical on home and inner pages. */
@media (min-width: 992px) {
  #mainNav .nav-actions :is(.favorites-toggle, .compare-toggle, .cart-btn.cart-icon-theme) {
    display: grid !important;
    box-sizing: border-box !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    flex: 0 0 46px !important;
    padding: 0 !important;
    place-items: center !important;
  }

  #mainNav .nav-actions :is(.favorites-toggle, .compare-toggle, .cart-btn.cart-icon-theme) > i {
    display: grid !important;
    box-sizing: border-box !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    place-items: center !important;
    font-size: 20px !important;
    line-height: 1 !important;
    transform: translate(-2px, 2px) !important;
  }
}

/* Let product grids gain columns as tablet-sized phones have more room. */
@media (min-width: 600px) and (max-width: 767px) {
  .mobile-page--home-index #productGrid > .product-col {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
  }

  .mobile-page--product-list .search-page .search-page-results {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .mobile-page--favorites-index #favoritesView .flow-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .mobile-page--product-details #productView .product-detail-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  .mobile-page--home-index #productGrid > .product-col {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
  }

  .mobile-page--favorites-index #favoritesView .flow-cards,
  .mobile-page--product-details #productView .product-detail-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 900px) and (max-width: 991px) {
  .mobile-page--home-index #productGrid > .product-col {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }

  .mobile-page--favorites-index #favoritesView .flow-cards,
  .mobile-page--product-details #productView .product-detail-related-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Mobile footer: give the shared footer a clear, compact reading order. */
@media (max-width: 767px) {
  footer {
    border-top: 4px solid #d8b64e !important;
    background: #f5f5f1 !important;
    color: #5e6b78 !important;
    padding-bottom: 0 !important;
  }

  footer > .container {
    width: 100%;
    max-width: 100%;
    padding: 0 14px;
  }

  footer .footer-main {
    --bs-gutter-x: 14px;
    --bs-gutter-y: 12px;
    margin-bottom: 12px;
    padding: 0 0 16px;
    border: 0;
    border-bottom: 1px solid rgba(20, 48, 73, .13);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  footer .footer-main > .col-lg-4:first-child {
    margin-bottom: 4px;
    padding: 19px 16px 17px !important;
    border: 1px solid rgba(221, 186, 79, .23) !important;
    border-radius: 20px !important;
    background:
      radial-gradient(circle at 6% 0%, rgba(221, 186, 79, .13), transparent 34%),
      linear-gradient(140deg, #102b43 0%, #193b58 100%) !important;
    box-shadow: 0 12px 28px rgba(16, 43, 67, .14) !important;
    text-align: right;
  }

  footer .footer-main > .col-lg-4:first-child .footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 19px;
    font-weight: 800;
    color: #fff !important;
  }

  .home-page footer .footer-main > .col-lg-4:first-child .footer-brand {
    display: flex;
    width: min(210px, 100%);
    justify-content: center;
    margin-inline: auto;
  }

  footer .footer-main > .col-lg-4:first-child > p {
    max-width: 52ch;
    margin: 0;
    color: rgba(244, 247, 249, .82);
    font-size: 13.5px;
    line-height: 1.95;
    text-align: right !important;
  }

  footer .footer-main > .col-lg-4:first-child .socials {
    justify-content: center;
    gap: 7px;
    margin: 15px 0 14px;
  }

  footer .footer-main > .col-lg-4:first-child .socials > a,
  footer .footer-main > .col-lg-4:first-child .socials > .social-placeholder {
    display: grid;
    width: 40px;
    min-width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 50%;
    background: rgba(255,255,255,.08) !important;
    color: #f0c94f !important;
    box-shadow: none;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
  }

  footer .footer-main > .col-lg-4:first-child .socials > a:is(:hover, :focus-visible) {
    border-color: #e6c14a !important;
    background: rgba(230,193,74,.17) !important;
    transform: translateY(-2px) !important;
  }

  footer .footer-main > .col-lg-4:first-child .trust-badges {
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
  }

  footer .footer-main > .col-lg-4:first-child .trust-badges .trust-badge-image {
    flex: 0 0 70px;
    width: 70px;
    height: 72px;
    aspect-ratio: auto;
    padding: 4px;
    border: 1px solid #e0e5e8;
    border-radius: 11px;
    background: #fff;
    object-fit: contain;
    box-shadow: 0 4px 12px rgba(18, 47, 73, .06);
  }

  footer .footer-main > .col-6 {
    align-self: flex-start;
    min-width: 0;
    padding: 10px 8px 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  footer .footer-main > .col-6 h4 {
    display: block;
    min-height: 0;
    margin: 0 0 8px;
    padding: 0 0 9px;
    border: 0;
    color: #173550 !important;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.55;
  }

  footer .footer-main > .col-6 h4::after {
    width: 32px;
    height: 2px;
    background: linear-gradient(90deg, rgba(216,180,86,.25), #c59b2d);
  }

  footer .footer-main > div:not(:first-child).col-6 a {
    min-height: 35px;
    margin: 0;
    padding: 7px 11px 7px 0;
    border: 0;
    border-bottom: 1px solid rgba(20, 48, 73, .1);
    border-radius: 0;
    background: transparent;
    color: #526273 !important;
    font-size: 12.5px !important;
    line-height: 1.7;
    position: relative;
  }

  footer .footer-main > div:not(:first-child).col-6 a::before {
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #c99d31;
    content: "";
    transform: translateY(-50%);
  }

  footer .footer-main > div:not(:first-child).col-6 a:is(:hover, :focus-visible) {
    color: #9b741c !important;
  }

  footer .footer-main > div:not(:first-child).col-6 a:last-child {
    margin-bottom: 0;
    border-bottom: 0;
  }

  footer .footer-main > .col-6:last-child a {
    display: block !important;
    width: 100% !important;
    min-height: 35px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  footer .footer-main > .col-6:last-child {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 10px 8px 6px !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  footer .footer-main > .col-6:last-child h4 {
    color: #173550 !important;
  }

  footer .footer-main > div:not(:first-child).col-6:last-child a {
    color: #526273 !important;
    border-bottom: 1px solid rgba(20, 48, 73, .1);
  }

  footer .footer-main > div:not(:first-child).col-6:last-child a::before {
    background: #c99d31;
  }

  footer .copyright {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: calc(100% + 28px);
    margin: 0 -14px;
    padding: 15px 18px 16px;
    border-top: 3px solid #d8b64e;
    background: #102b43;
    color: rgba(255,255,255,.74);
    font-size: 11.5px;
    line-height: 1.8;
    text-align: center;
  }

  footer .copyright > span:first-child {
    order: 2;
  }

  footer .copyright > span:nth-child(2) {
    order: 1;
  }
}

/* Search keeps two cards beside its filter panel until the result area is wide enough. */
@media (min-width: 992px) and (max-width: 1199px) {
  .mobile-page--product-list .search-page .search-page-results {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Keep mobile home cards and their two-line sale prices on shared baselines. */
@media (max-width: 767px) {
  .mobile-page--product-list .search-page {
    padding-top: 12px !important;
    padding-bottom: 20px !important;
  }

  .search-page .search-page-card-price.has-discount {
    gap: 2px;
  }

  .search-page .search-page-card-price .product-price-discount {
    min-height: 20px;
    font-size: 11px;
  }

  .mobile-page--home-index #productGrid > .product-col .product-info > p {
    min-height: 46px;
    margin-bottom: 6px !important;
    font-size: 14px;
  }

  .mobile-page--home-index #productGrid > .product-col .product-price-current {
    font-size: 14px;
  }

  .mobile-page--home-index #productGrid > .product-col .price-old {
    font-size: 10px;
  }

  .mobile-page--home-index #productGrid > .product-col .product-price-discount {
    min-height: 20px;
    font-size: 11px;
  }

  .mobile-page--favorites-index #favoritesView .favorite-item-card .list-remove-button,
  .mobile-page--profile-favorites #favoritesView .favorite-item-card .list-remove-button {
    margin: 0 7px 7px;
  }
}

@media (max-width: 389px) {
  :root {
    --product-card-image-height: 175px;
  }
}

/* Keep profile navigation and favorite-product grids aligned to the RTL start. */
.inner-page[class*="mobile-page--profile-"] .account-welcome > .profile-breadcrumb {
  right: 20px;
  left: auto;
}

.inner-page[class*="mobile-page--profile-"] #favoritesView,
.inner-page[class*="mobile-page--profile-"] #favoritesView .flow-cards {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  direction: rtl;
}

.inner-page[class*="mobile-page--profile-"] #favoritesView .flow-cards {
  justify-items: stretch;
}

.inner-page[class*="mobile-page--profile-"] #favoritesView .favorite-item-card {
  width: 100%;
  min-width: 0;
  margin-inline: 0;
  justify-self: stretch;
  direction: rtl;
}

@media (max-width: 767px) {
  .inner-page[class*="mobile-page--profile-"] .account-welcome > .profile-breadcrumb {
    right: 12px;
    left: auto;
  }
}



/* Keep the discount chip beside the current price on every mobile card. */
@media (max-width: 767px) {
  .product-card-sale-price.has-discount,
  .product-card .product-info > p.has-discount,
  .search-product .search-page-card-price.has-discount,
  #favoritesView .favorite-item-price.has-discount,
  #compareView .compare-price-values.has-discount,
  #productView .product-detail-related-card .product-info > p.has-discount {
    display: grid !important;
    min-height: 46px !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-rows: minmax(22px, auto) minmax(18px, auto) !important;
    grid-template-areas:
      "current current"
      "old discount" !important;
    align-content: center !important;
    align-items: center !important;
    column-gap: 5px !important;
    row-gap: 0 !important;
    white-space: nowrap;
  }

  .product-card-sale-price.has-discount .product-price-current,
  .product-card .product-info > p.has-discount > .product-price-current,
  .search-product .search-page-card-price.has-discount > .product-price-current,
  #favoritesView .favorite-item-price.has-discount > .product-price-current,
  #compareView .compare-price-values.has-discount > .product-price-current,
  #productView .product-detail-related-card .product-info > p.has-discount > .product-price-current {
    grid-area: current;
    justify-self: start;
    margin: 0 !important;
  }

  .product-card-sale-price.has-discount .product-price-deal,
  .product-card .product-info > p.has-discount .product-price-deal,
  .search-product .search-page-card-price.has-discount .product-price-deal,
  #favoritesView .favorite-item-price.has-discount .product-price-deal,
  #compareView .compare-price-values.has-discount .product-price-deal,
  #productView .product-detail-related-card .product-info > p.has-discount .product-price-deal {
    display: contents !important;
  }

  .product-card-sale-price.has-discount .price-old,
  .product-card .product-info > p.has-discount .price-old,
  .search-product .search-page-card-price.has-discount .price-old,
  #favoritesView .favorite-item-price.has-discount .price-old,
  #compareView .compare-price-values.has-discount .price-old,
  #productView .product-detail-related-card .product-info > p.has-discount .price-old {
    grid-area: old;
    justify-self: start;
    margin: 0 !important;
  }

  .product-card-sale-price.has-discount .product-price-discount,
  .product-card .product-info > p.has-discount .product-price-discount,
  .search-product .search-page-card-price.has-discount .product-price-discount,
  #favoritesView .favorite-item-price.has-discount .product-price-discount,
  #compareView .compare-price-values.has-discount .product-price-discount,
  #productView .product-detail-related-card .product-info > p.has-discount .product-price-discount {
    grid-area: discount;
    align-self: center !important;
    justify-self: end;
  }
}

/* Keep mobile product-card grids on the same symmetric horizontal gutter. */
@media (max-width: 767px) {
  .mobile-page--home-index > main > section > .container,
  .mobile-page--home-index #collection > .container,
  .mobile-page--home-index .category-showcase > .container {
    box-sizing: border-box;
    width: calc(100% - 12px) !important;
    max-width: none !important;
    padding-right: 4px !important;
    padding-left: 4px !important;
  }

  .mobile-page--home-index #productGrid {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .mobile-page--product-list .search-page {
    box-sizing: border-box;
    width: calc(100% - 12px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .mobile-page--product-list .search-page-results,
  .inner-page .product-results {
    box-sizing: border-box;
    width: 100%;
    margin-right: 0 !important;
    margin-left: 0 !important;
    gap: 6px !important;
  }

  .mobile-page--favorites-index #favoritesView .flow-cards,
  .mobile-page--profile-favorites #favoritesView .flow-cards {
    box-sizing: border-box;
    width: 100%;
    margin-right: 0 !important;
    margin-left: 0 !important;
    gap: 6px !important;
  }

  .mobile-page--home-index .product-card,
  .mobile-page--home-index .showcase-card,
  .mobile-page--product-list .search-page-card,
  .inner-page .product-card,
  .inner-page .search-product.product-card,
  .inner-page .favorite-item-card {
    box-sizing: border-box;
    min-width: 0;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .mobile-page--home-index .category-showcase .showcase-card {
    min-height: 0 !important;
  }

  .mobile-page--home-index .category-showcase .showcase-card .product-image {
    height: 175px !important;
    min-height: 175px !important;
    max-height: 175px !important;
  }

  .mobile-page--home-index .category-showcase .showcase-card-body {
    min-height: 148px !important;
    padding: 9px 8px 10px !important;
  }

  .mobile-page--home-index .category-showcase .showcase-card-body h3 {
    min-height: 3em;
    margin: 5px 0 7px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  .mobile-page--home-index .category-showcase .showcase-card-body > strong {
    min-height: 38px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .mobile-page--home-index #amazing > .container > .row {
    --bs-gutter-x: 6px;
    --bs-gutter-y: 8px;
  }

  .mobile-page--home-index #amazing > .container > .row > [class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    min-width: 0;
  }
}

/* Product card breakpoints and touch controls live in the mobile stylesheet. */
@media (min-width: 992px) and (max-width: 1199px) {
  :root {
    --product-card-image-height: 290px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  :root {
    --product-card-image-height: 190px;
  }
}

@media (max-width: 575px) {
  .product-card .product-image > :is(.badge-best, .badge-new, .badge-offer),
  .search-product.product-card .search-product-image > span {
    top: 13px;
    right: 12px;
    min-width: 56px;
    height: 30px;
    min-height: 30px;
    padding: 3px 12px;
    font-size: 12px;
  }

  .home-page .showcase-card-body h3,
  .home-page .rail-card h3 {
    min-height: 3.4em !important;
  }
}

/* Keep the mobile cart sheet heading readable and provide a visible close action. */
@media (max-width: 991px) {
  html body > #cartPanel.cart-panel .cart-head {
    position: relative !important;
    display: flex !important;
    height: 88px !important;
    min-height: 88px !important;
    padding: 14px 16px 0 !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px;
    box-sizing: border-box;
  }

  html body > #cartPanel .cart-head .cart-head-title {
    display: flex !important;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px !important;
  }

  html body > #cartPanel .cart-head .cart-head-icon {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px;
  }

  html body > #cartPanel .cart-head .cart-head-title > span:last-child {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
  }

  html body > #cartPanel .cart-head .cart-head-title strong {
    display: block;
    margin: 0;
    font-size: 18px !important;
    line-height: 1.35 !important;
    white-space: nowrap;
  }

  html body > #cartPanel .cart-head .cart-head-title small {
    display: block;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    white-space: nowrap;
  }

  html body > #cartPanel .cart-head > .cart-panel-close {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    z-index: 2;
    display: grid !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 36px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffdb4c !important;
    font-size: 15px !important;
    line-height: 1;
  }

  html body > #cartPanel .cart-head > .cart-panel-close:is(:hover, :focus-visible) {
    border-color: rgba(255, 219, 76, 0.8) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    transform: none !important;
  }

  html body > :is(#favoritesPanel, #comparePanel) .compare-panel-head {
    position: relative !important;
    display: flex !important;
    height: 88px !important;
    min-height: 88px !important;
    padding: 14px 16px 0 !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px;
    box-sizing: border-box;
  }

  html body > :is(#favoritesPanel, #comparePanel) .compare-panel-head > span {
    display: flex !important;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px !important;
  }

  html body > :is(#favoritesPanel, #comparePanel) .compare-panel-head > span > i {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px;
  }

  html body > :is(#favoritesPanel, #comparePanel) .compare-panel-head .compare-panel-title-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
  }

  html body > :is(#favoritesPanel, #comparePanel) .compare-panel-head strong {
    display: block;
    line-height: 1.35 !important;
    white-space: nowrap;
  }

  html body > :is(#favoritesPanel, #comparePanel) .compare-panel-head .compare-panel-count {
    display: block;
    margin: 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap;
  }

  html body > :is(#favoritesPanel, #comparePanel) .compare-panel-head > .compare-panel-close {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    z-index: 2;
    display: grid !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 36px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffdb4c !important;
    font-size: 15px !important;
    line-height: 1;
  }

  html body > :is(#favoritesPanel, #comparePanel) .compare-panel-head > .compare-panel-close:is(:hover, :focus-visible) {
    border-color: rgba(255, 219, 76, 0.8) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    transform: none !important;
  }
}

@media (max-width: 767px) {
  .mobile-page--home-index #productGrid > .product-col .product-info h3 {
    min-height: 3em;
    line-clamp: 2;
  }

  .mobile-page--home-index #productGrid > .product-col .product-info > p {
    display: flex;
    margin: 4px 0 6px !important;
    align-items: center;
    justify-content: flex-start;
    line-height: 1.45;
  }

  .mobile-page--home-index #productGrid > .product-col .product-info > p.has-discount {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 23px 20px;
    grid-template-areas:
      "current current"
      "old discount";
    column-gap: 5px;
    row-gap: 0;
    align-content: center;
    white-space: nowrap;
  }

  .mobile-page--home-index #productGrid > .product-col .product-price-current {
    grid-area: current;
    justify-self: start;
    max-width: 100%;
    line-height: 1.45;
    white-space: nowrap;
  }

  .mobile-page--home-index #productGrid > .product-col .product-price-current small {
    font-size: 12px !important;
  }

  .mobile-page--home-index #productGrid > .product-col .product-price-deal {
    display: contents;
  }

  .mobile-page--home-index #productGrid > .product-col .price-old {
    grid-area: old;
    justify-self: start;
    line-height: 1.4;
    white-space: nowrap;
  }

  .mobile-page--home-index #productGrid > .product-col .product-price-discount {
    grid-area: discount;
    align-self: center;
    justify-self: end;
    padding: 2px 7px;
  }
}

/* Keep every two-column mobile product card compact and visually consistent. */
@media (max-width: 767px) {
  :root {
    --product-card-radius: 14px;
    --product-card-image-height: 175px;
  }

  .product-card,
  .search-page .search-page-card,
  #favoritesView .favorite-item-card {
    border: 1px solid var(--color-card-border, #dce4ea) !important;
    border-radius: var(--product-card-radius, 14px) !important;
    background: #fff !important;
    box-shadow: 0 5px 14px rgba(16, 42, 67, 0.07) !important;
  }

  .product-card .product-image,
  .search-page .search-page-card-media {
    height: var(--product-card-image-height, 144px) !important;
    min-height: var(--product-card-image-height, 144px) !important;
    max-height: var(--product-card-image-height, 144px) !important;
  }

  .product-card .product-info {
    min-height: 0 !important;
    padding: 9px 9px 6px !important;
  }

  .search-page .search-page-card-title {
    line-height: 1.5 !important;
  }


  .product-card > .add-cart,
  .search-page .search-page-card-action,
  #favoritesView .favorite-item-card .list-remove-button {
    width: calc(100% - 14px) !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 7px 7px !important;
    padding: 5px 6px !important;
    border-radius: 9px !important;
  }

  .mobile-page--home-index #productGrid > .product-col > .product-card > .add-cart {
    width: calc(100% - 14px) !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 7px 7px !important;
  }

  .search-page .search-page-card {
    grid-template-rows: var(--product-card-image-height, 144px) minmax(106px, 1fr) 42px !important;
  }

  .search-page .search-page-card-price,
  .search-page .search-page-card-price .product-price-current {
    font-size: 14px !important;
  }

}
/* Normalize mobile header control and glyph heights across all pages. */
@media (max-width: 767px) {
  #mainNav .navbar-toggler,
  #mainNav .nav-tools .account-btn,
  #mainNav .nav-actions .nav-shortcut,
  #mainNav .nav-actions .cart-btn.cart-icon-theme {
    box-sizing: border-box !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  #mainNav .navbar-toggler,
  #mainNav .nav-actions .nav-shortcut,
  #mainNav .nav-actions .cart-btn.cart-icon-theme {
    width: 40px !important;
    min-width: 40px !important;
    flex: 0 0 40px !important;
    padding: 0 !important;
  }

  #mainNav .navbar-toggler > i,
  #mainNav .nav-tools .account-btn > .bi-person,
  #mainNav .nav-actions .nav-shortcut > i,
  #mainNav .nav-actions .cart-btn.cart-icon-theme > i {
    display: grid !important;
    width: 22px !important;
    height: 22px !important;
    place-items: center !important;
    font-size: 19px !important;
    line-height: 1 !important;
    transform: none !important;
  }

  #mainNav .nav-actions :is(.favorites-toggle, .compare-toggle, .cart-btn.cart-icon-theme) > i {
    transform: translate(-5px, 6px) !important;
  }
}

/* Keep the desktop cart popover heading on one clean row. */
@media (min-width: 992px) {
  html body #cartPanel.cart-panel .cart-head {
    display: flex !important;
    min-height: 82px !important;
    height: 82px !important;
    padding: 12px 18px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box;
  }

  html body #cartPanel.cart-panel .cart-head .cart-head-title {
    display: flex !important;
    min-width: 0;
    flex: 0 0 auto;
    align-items: center !important;
    gap: 12px !important;
  }

  html body #cartPanel.cart-panel .cart-head .cart-head-icon {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px;
  }

  html body #cartPanel.cart-panel .cart-head .cart-head-title > span:last-child {
    display: flex !important;
    min-width: max-content;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 3px;
  }

  html body #cartPanel.cart-panel .cart-head .cart-head-title :is(strong, small) {
    display: block;
    margin: 0 !important;
    white-space: nowrap;
  }
}

/* Mobile interaction baseline for page-specific controls. Keep these scoped
   to the existing MVC page classes so desktop layouts and embedded widgets
   retain their own sizing. */
@media (max-width: 767px) {
  .mobile-page--product-list :is(input, select, textarea),
  .mobile-page--contact-index :is(input, select, textarea),
  .mobile-page--tracking-index :is(input, select, textarea),
  .mobile-page--cart-index :is(input, select, textarea),
  .mobile-page--checkout-index :is(input, select, textarea),
  .mobile-page--profile-index :is(input, select, textarea),
  .mobile-page--profile-addresses :is(input, select, textarea) {
    min-width: 0;
    font-size: 16px;
  }

  .mobile-page--compare-index .compare-category-group .compare-product-grid {
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    grid-template-columns: none;
    justify-content: start;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 2px;
    -webkit-overflow-scrolling: touch;
    padding: 0 2px 8px;
    scrollbar-width: thin;
  }

  .mobile-page--compare-index .compare-category-group .compare-product-card {
    min-width: 0;
    scroll-snap-align: start;
  }

  .mobile-page--compare-index .compare-category-group,
  .mobile-page--compare-index .compare-product-card,
  .mobile-page--tracking-index .tracking-card,
  .mobile-page--contact-index .contact-form,
  .mobile-page--checkout-index .flow-card,
  .mobile-page--cart-index .flow-card {
    min-width: 0;
  }

  .mobile-page--compare-index .compare-product-card :is(h2, dd, a),
  .mobile-page--tracking-index .tracking-card :is(h2, p, label),
  .mobile-page--magazine-details .article-content-section,
  .mobile-page--legal-terms .legal-main,
  .mobile-page--legal-returns .legal-main,
  .mobile-page--legal-privacy .legal-main {
    overflow-wrap: anywhere;
  }

  .mobile-page--compare-index .compare-remove-icon,
  .mobile-page--tracking-index .tracking-submit,
  .mobile-page--tracking-index .tracking-support-action,
  .mobile-page--contact-index :is(button, a),
  .mobile-page--profile-index .account-tabs a,
  .mobile-page--profile-orders .account-tabs a,
  .mobile-page--profile-addresses .account-tabs a,
  .mobile-page--profile-favorites .account-tabs a {
    min-height: 44px;
  }
}

@media (max-width: 389px) {
  .mobile-page--compare-index .compare-category-heading {
    flex-wrap: wrap;
  }

  .mobile-page--compare-index .compare-category-heading > b {
    margin-inline-start: 45px;
  }

  .mobile-page--tracking-index .tracking-card {
    padding: 18px 14px;
  }
}

@media (max-width: 575px) {
  html body #cartView .cart-summary-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  html body #cartView .cart-summary-actions .ui-inline-action {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    white-space: nowrap;
  }

  html body #cartView .cart-summary-actions .ui-inline-action > i {
    flex: 0 0 auto;
  }

  html body #cartView .cart-summary-actions .ui-inline-action > span {
    min-width: 0;
    font-size: 12px !important;
    white-space: nowrap;
  }

  html body #cartView .cart-summary-lines > .flow-total {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }

  html body #cartView .cart-summary-lines > .flow-total:nth-child(2) .cart-line-label {
    min-width: 0;
    gap: 6px;
    font-size: inherit;
    white-space: nowrap;
  }

  html body #cartView .cart-summary-lines > .flow-total:nth-child(2) .cart-line-label > .bi {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }

  html body #cartView .cart-summary-lines > .flow-total:nth-child(2) > strong {
    font-size: 15px;
    white-space: nowrap;
  }

  html body #cartView .cart-summary-lines > .flow-payable {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 12px 10px;
  }

  html body #cartView .flow-payable .cart-line-label {
    min-width: 0;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    white-space: nowrap;
  }

  html body #cartView .flow-payable .cart-line-label > .bi {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }

  html body #cartView .flow-payable .cart-line-label > span {
    min-width: 0;
    font-size: 13px;
  }

  html body #cartView .flow-payable .cart-line-label small {
    margin-top: 2px;
    font-size: 11px;
    white-space: nowrap;
  }

  html body #cartView .cart-summary-lines .flow-payable > strong {
    font-size: 17px;
    white-space: nowrap;
  }

  html body > #cartPanel .cart-item {
    align-items: start;
    gap: 10px;
    padding: 12px !important;
  }

  html body > #cartPanel .cart-item-info,
  html body > #cartPanel .cart-item-info > strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  html body > #cartPanel .cart-item-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }

  html body > #cartPanel .cart-item-option-chip {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 575px) {
  #productView .product-detail-gallery-open {
    min-height: 36px;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 10px;
    font-size: 12px !important;
  }

  #productView .product-detail-gallery-open > i {
    font-size: 13px;
  }

  #productView .product-detail-gallery-open > b {
    min-width: 18px;
    height: 18px;
    padding-inline: 4px;
    font-size: 10px !important;
  }

  #productView .product-detail-gallery-caption {
    min-height: 36px;
    gap: 6px;
    padding: 4px 2px 0;
    font-size: 11px !important;
    line-height: 1.4;
  }

  #productView .product-detail-gallery-caption > i {
    font-size: 14px;
  }

  #productView .product-detail-gallery-caption > span {
    font-size: 11px !important;
    line-height: 1.4;
  }

  #productView .product-detail-gallery-caption > small {
    padding: 4px 8px;
    font-size: 11px !important;
    line-height: 1.3;
    white-space: nowrap;
  }
}

@media (max-width: 700px) {
  .product-gallery-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 32px);
  }

  .product-gallery-dialog-shell {
    height: min(620px, 72dvh);
    min-height: 0;
  }

  .product-gallery-dialog-head {
    min-height: 56px;
    gap: 10px;
    padding: 7px 10px;
  }

  .product-gallery-dialog-head h2 {
    max-width: 58vw;
    font-size: 13px;
  }

  .product-gallery-dialog-count {
    padding: 5px 9px;
    font-size: 12px;
  }

  .product-gallery-rail-title > span {
    font-size: 12px;
    font-weight: 700;
  }

  .product-gallery-dialog-tools button {
    width: 32px;
    height: 32px;
  }

  .product-gallery-dialog-body {
    grid-template-rows: minmax(0, 1fr) 112px;
  }

  .product-gallery-full-stage {
    padding: 8px;
  }

  .product-gallery-dialog-rail {
    grid-template-rows: 28px minmax(0, 1fr);
  }

  .product-gallery-full-thumbs {
    gap: 7px;
    padding: 2px 8px 6px;
  }

  .product-gallery-full-thumb {
    width: 105px;
    flex-basis: 105px;
  }
}
@media (max-width: 575px) {
  #productView .product-feedback-admin-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
  }

  #productView .product-feedback-admin-meta > span {
    display: inline-flex;
    min-width: 0;
    flex: 1 1 100%;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    white-space: nowrap;
  }

  #productView .product-feedback-admin-meta > span > i {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
  }

  #productView .product-feedback-admin-meta > small {
    flex: 0 0 auto;
    padding: 3px 6px;
    font-size: 9px;
    white-space: nowrap;
  }

  #productView .product-feedback-admin-datetime {
    margin-inline-start: 27px;
    font-size: 10px;
  }
}

/* Keep related-product cards readable in the narrow two-column mobile grid. */
@media (max-width: 575px) {
  #productView .product-detail-related-card .product-info > p {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 0 !important;
    margin: 4px 0 8px !important;
    color: #16324f;
    font-size: 12px !important;
    line-height: 1.45 !important;
    text-align: center;
  }

  #productView .product-detail-related-card .product-info > p:not(.has-discount) {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  #productView .product-detail-related-card .product-info > p > .product-price-current {
    display: block;
    min-width: 0;
    max-width: 100%;
    font-size: 12px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: normal;
    text-align: center;
  }

  #productView .product-detail-related-card .product-info > p.has-discount {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: "current" "deal" !important;
    align-content: center !important;
    justify-items: stretch;
    gap: 3px !important;
    white-space: normal !important;
  }

  #productView .product-detail-related-card .product-info > p.has-discount > .product-price-current {
    grid-area: current;
    justify-self: stretch;
  }

  #productView .product-detail-related-card .product-info > p.has-discount .product-price-deal {
    display: flex !important;
    grid-area: deal;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
  }

  #productView .product-detail-related-card .product-info > p.has-discount .price-old {
    min-width: 0;
    font-size: 9px !important;
    line-height: 1.3 !important;
  }

  #productView .product-detail-related-card .product-info > p.has-discount .product-price-discount {
    min-height: 18px !important;
    padding: 2px 5px !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
  }
}

/* Keep all four secondary product actions aligned in a mobile two-column grid. */
@media (max-width: 575px) {
  #productView .product-detail-secondary-actions {
    align-items: stretch;
    gap: 8px;
    margin-top: 10px;
  }

  #productView .product-detail-secondary-actions > a,
  #productView .product-detail-favorite,
  #productView .product-detail-secondary-actions > .product-detail-compare,
  #productView .product-detail-secondary-actions > .product-share-control > .product-detail-share {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    min-width: 0;
    height: 60px;
    min-height: 60px;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px;
    border-radius: 11px;
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
  }

  #productView .product-detail-secondary-actions > a > i,
  #productView .product-detail-favorite > i,
  #productView .product-detail-compare > i,
  #productView .product-detail-share > i {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    place-items: center;
    font-size: 16px;
  }

  #productView .product-detail-favorite > span,
  #productView .product-detail-compare > span,
  #productView .product-detail-share > span {
    max-width: 100%;
    white-space: normal;
  }

  #productView .product-detail-secondary-actions > .product-share-control {
    display: flex;
    width: 100%;
    min-width: 0;
  }
}

/* Keep trust-card copy short, legible, and on one line on narrow screens. */
@media (max-width: 575px) {
  #productView .product-purchase-trust-list > li {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 3px;
  }

  #productView .product-purchase-trust-list > li > i {
    grid-column: 1;
    grid-row: 1;
  }

  #productView .product-purchase-trust-list > li > span {
    display: contents;
  }

  #productView .product-purchase-trust-list > li > span > strong {
    grid-column: 2;
    grid-row: 1;
    font-size: 12px;
    line-height: 1.4;
  }

  #productView .product-purchase-trust-list > li > span > small {
    grid-column: 1 / -1;
    grid-row: 2;
    display: block;
    min-width: 0;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Keep the product hero's three key facts together on one mobile row. */
@media (max-width: 575px) {
  .product-detail-hero > .container > .hero-trail {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    gap: 5px;
    margin-top: 8px;
  }

  .product-detail-hero > .container > .hero-trail > span {
    min-width: 0;
    min-height: 38px;
    flex: 1 1 0;
    padding: 6px 4px;
    font-size: 11px;
    line-height: 1.6;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

#productView .product-meta-brand-logo {
  display: block;
  width: 36px;
  height: 26px;
  flex: 0 0 36px;
  padding: 3px;
  border: 1px solid rgba(22, 50, 79, 0.08);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.9);
  object-fit: contain;
  object-position: center;
}

@media (min-width: 992px) {
  #productView .product-meta-brand-logo {
    width: 58px;
    height: 48px;
    flex: 0 0 58px;
    padding: 4px;
    border-color: rgba(22, 50, 79, 0.12);
    border-radius: 9px;
    box-shadow: 0 2px 6px rgba(22, 50, 79, 0.06);
  }
}

@media (max-width: 640px) {
  #productView .product-meta-brand-logo {
    width: 40px;
    height: 30px;
    flex-basis: 40px;
  }
}

@media (max-width: 575px) {
  .product-detail-page > .flow-main.container {
    padding-inline: 8px !important;
  }

  #productView .product-detail-layout {
    gap: 10px;
    margin-bottom: 28px;
  }

  #productView .product-detail-gallery {
    padding: 9px;
  }

  #productView .product-detail-summary {
    padding: 14px;
  }

  #productView :is(.product-detail-content-panel, .product-detail-related) {
    padding: 14px 11px;
  }

  #productView .product-detail-price,
  #productView .product-accessories,
  #productView .product-purchase-trust,
  #productView .product-variant-options {
    padding-inline: 11px;
  }

}