/* First-pass premium mobile layout: mobile is a touch-first composition, not a scaled desktop. */
:root { --seafood-ink:#17324d; --seafood-blue:#129fd8; --seafood-orange:#ff9900; }

/* Desktop only: keep the badge clear of the two-line title. */
@media (min-width: 992px) {
  .watch-trend-item .watch-discount-badge { top: 16px !important; right: 12px !important; }
  .watch-trend-item .watch-trend-name { padding-right: 72px !important; min-height: 2.8em !important; }
}
.header__right { position:relative; display:flex !important; align-items:center; justify-content:flex-end; min-width:0; }
.header-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:nowrap; min-width:0; width:100%; }
.header-login, .header-login a { flex:0 0 auto !important; white-space:nowrap !important; word-break:keep-all !important; }
.header-login a { display:inline-flex !important; align-items:center; min-width:max-content; font-size:14px; }
.header-actions .haisan-language { flex:0 0 auto; }
.header-actions .header__right__widget { flex:0 0 auto; display:flex !important; align-items:center; gap:8px; margin:0 !important; }
.header-actions .header__right__widget li { flex:0 0 auto; }
.haisan-language { position:relative; display:inline-flex; align-items:center; z-index:10001; }
.haisan-language-toggle { display:inline-flex; align-items:center; gap:7px; min-width:104px; min-height:38px; padding:7px 11px; border:1px solid #d5e6ef; border-radius:11px; background:#fff; color:var(--seafood-ink); font:700 13px/1.2 inherit; box-shadow:0 6px 18px rgba(23,50,77,.1); cursor:pointer; }
.haisan-language-toggle:focus-visible,.haisan-language-option:focus-visible { outline:3px solid rgba(18,159,216,.28); outline-offset:2px; }
.haisan-language-flag { font-size:20px; line-height:1; }
.haisan-language-flag-img { display:block; width:24px; height:16px; flex:0 0 24px; object-fit:cover; border-radius:2px; }
.haisan-language-chevron { margin-left:auto; font-size:17px; line-height:1; }
.haisan-language-menu { position:absolute; top:calc(100% + 8px); right:0; width:184px; padding:5px; border:1px solid #e2edf2; border-radius:13px; background:#fff; box-shadow:0 14px 36px rgba(23,50,77,.16); }
.haisan-language-option { display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:8px; width:100%; min-height:42px; padding:7px 9px; border:0; border-radius:9px; background:#fff; color:var(--seafood-ink); text-align:left; cursor:pointer; }
.haisan-language-option:hover,.haisan-language-option.is-active { background:#eff9fc; color:#087eae; }
.haisan-language-option strong { font-size:11px; color:#718096; }
.mobile-language-panel { margin-top:22px; padding-top:16px; border-top:1px solid #edf2f5; }
.mobile-language-title { margin-bottom:10px; color:var(--seafood-ink); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.mobile-language-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mobile-language-options button { display:flex; align-items:center; gap:8px; min-height:42px; border:1px solid #e2edf2; border-radius:10px; background:#fff; color:var(--seafood-ink); text-align:left; padding:0 10px; }
.mobile-language-options button.is-active { background:#eef7ff; color:#0b78b8; font-weight:700; }

/* Desktop header: three non-wrapping zones — logo, navigation, actions. */
@media (min-width: 1200px) {
  .header .header-inner {
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    margin-left:-15px;
    margin-right:-15px;
  }
  .header .header-logo {
    flex:0 0 120px;
    width:120px;
    max-width:120px;
    min-width:120px;
  }
  .header .header-nav {
    flex:1 1 auto;
    width:auto;
    max-width:none;
    min-width:0;
  }
  .header .header-actions-zone {
    flex:0 0 auto;
    width:auto;
    max-width:none;
    min-width:0;
  }
  .header .header__logo,
  .header .header__menu,
  .header .header__right { padding-top:12px; padding-bottom:12px; }
  .header .header__menu { white-space:nowrap; }
  .header .header__menu > ul {
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:18px;
    margin:0;
    padding:0;
  }
  .header .header__menu > ul > li {
    flex:0 0 auto;
    margin-right:0 !important;
    white-space:nowrap;
  }
  .header .header__menu > ul > li > a { white-space:nowrap; font-size:14px; }
  .header .header-actions { gap:8px; width:auto; }
  .header .header__right__auth { margin-right:0; max-width:120px; overflow:hidden; text-overflow:ellipsis; }
  .header .header__right__auth a { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .header .haisan-language-toggle { min-width:92px; padding-left:9px; padding-right:9px; }
  .header .header__right__widget { gap:10px; }
  .header .header__right__widget li { margin-right:0; }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .header .header-inner { align-items:center; flex-wrap:nowrap; }
  .header .header-nav { min-width:0; }
  .header .header__menu > ul { display:flex; flex-wrap:nowrap; align-items:center; white-space:nowrap; }
  .header .header__menu > ul > li { flex:0 0 auto; }
}
body { top:0 !important; }
.goog-te-banner-frame, iframe.goog-te-banner-frame, .goog-te-balloon-frame, body > .skiptranslate { display:none !important; }
.goog-te-gadget, .goog-te-gadget-simple, #google_translate_element { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; }
.goog-tooltip, .goog-text-highlight { display:none !important; background:transparent !important; box-shadow:none !important; }
html { margin-top:0 !important; }
@media (max-width: 991px) {
  body { overflow-x:hidden; }
  .haisan-language { display:none; }
  .header { min-height:72px; position:relative; z-index:1000; background:#fff; box-shadow:0 3px 18px rgba(23,50,77,.08); }
  .header .container { padding:0 14px; }
  .header .row { min-height:72px; align-items:center; }
  .header__logo { padding:8px 0 !important; }
  .header__logo img { max-width:150px; max-height:44px !important; object-fit:contain; }
  .header__menu, .header__right { display:none !important; }
  .canvas__open__wrapper { top:18px !important; right:12px !important; }
  .header__cart__mobile { margin-right:12px !important; }
  .header__cart__mobile a, .canvas__open { width:42px; height:42px; border-radius:14px; background:#f2f9fc; }
  .canvas__open { color:var(--seafood-ink); }
  .offcanvas-menu-wrapper { width:min(88vw,360px); padding:24px 20px; }
  .offcanvas__logo img { max-width:180px; }
  .offcanvas__auth a { min-height:44px; display:flex; align-items:center; }
  .mobile-language-panel { display:block; }
  .offcanvas__widget { margin:14px 0; }
  .section-title h2, .section-title h3 { font-size:clamp(21px,6vw,28px); line-height:1.2; }
  .product__item__text h6 { min-height:42px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35; }
  .product__item__pic { aspect-ratio:1/1; height:auto !important; }
  .product__item__pic img { width:100%; height:100%; object-fit:cover; }
  .shop__product__option, .shop__product__option__right { flex-wrap:wrap; gap:10px; }
  .shop__cart__table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .checkout__form input, .checkout__form select, .checkout__form textarea, .contact-form input, .contact-form textarea { min-height:44px; width:100%; }
  .checkout__order { margin-top:22px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .header .col-lg-7 { flex:0 0 56%; max-width:56%; }
  .header .col-lg-3 { flex:0 0 26%; max-width:26%; }
  .header__menu ul { gap:0 !important; }
  .header__menu ul li { margin-right:10px !important; }
  .header-actions { gap:6px; }
  .header-login a { font-size:13px; }
  .haisan-language-toggle { min-width:92px; padding-inline:8px; }
}

/* Final article detail guardrails: route CSS can contain legacy typography,
   so keep these mobile limits at the end of the shared layer. */
@media (max-width: 767px) {
  .blog-details-section { padding: 14px 0 34px !important; }
  .blog-details-section .watch-container { width: 100% !important; max-width: 100% !important; padding-inline: 14px !important; }
  .blog-details-section .blog-layout { display: block !important; }
  .blog-details-main { width: 100% !important; min-width: 0 !important; }
  .blog-post-wrapper { padding: 16px !important; border-radius: 14px !important; box-shadow: 0 5px 18px rgba(23,50,77,.06) !important; }
  .post-header { margin-bottom: 18px !important; }
  .post-category { max-width: 100% !important; margin-bottom: 10px !important; padding: 5px 10px !important; font-size: 13px !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; }
  .post-title, .blog-details-main h1.post-title { max-width: 100% !important; margin: 0 0 12px !important; color: #17324d !important; font-size: clamp(26px, 7vw, 30px) !important; font-weight: 800 !important; line-height: 1.3 !important; letter-spacing: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; }
  .post-meta { flex-wrap: wrap !important; gap: 7px 12px !important; font-size: 13px !important; line-height: 1.4 !important; }
  .post-meta .meta-item { gap: 5px !important; }
  .post-featured-image { margin-bottom: 22px !important; border-radius: 12px !important; box-shadow: none !important; }
  .post-featured-image img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; object-fit: contain !important; }
  .post-content { color: #374151 !important; font-size: 16px !important; line-height: 1.75 !important; overflow-wrap: anywhere !important; }
  .post-content p { margin: 0 0 17px !important; }
  .post-content h2 { margin: 28px 0 12px !important; font-size: 23px !important; line-height: 1.35 !important; }
  .post-content h3 { margin: 24px 0 10px !important; font-size: 20px !important; line-height: 1.4 !important; }
  .post-content h4 { margin: 20px 0 8px !important; font-size: 18px !important; line-height: 1.45 !important; }
  .post-content img, .post-content iframe, .post-content video { max-width: 100% !important; height: auto !important; }
  .post-content table { display: block !important; max-width: 100% !important; overflow-x: auto !important; }
  .post-content ul, .post-content ol { padding-left: 22px !important; }
  .post-signature { margin: 26px 0 !important; padding: 16px !important; font-size: 14px !important; }
  .post-footer { margin-top: 26px !important; padding-top: 20px !important; }
  .share-box { gap: 10px !important; }
  .share-box h5 { font-size: 14px !important; }
  .share-links { gap: 8px !important; }
  .share-icon { width: 38px !important; height: 38px !important; }
  .blog-sidebar { margin-top: 20px !important; gap: 18px !important; }
  .sidebar-sticky { position: static !important; }
  .sidebar-widget { margin-bottom: 18px !important; padding: 14px !important; border: 1px solid #edf0f3 !important; border-radius: 12px !important; }
  .widget-title { margin-bottom: 10px !important; padding-bottom: 8px !important; font-size: 19px !important; }
  .widget-list { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  .widget-list li, .widget-list li:last-child { border: 0 !important; }
  .widget-list li a { gap: 5px !important; padding: 7px 10px !important; border: 1px solid #dbeaf0 !important; border-radius: 999px !important; color: #17324d !important; font-size: 13px !important; }
  .widget-list .count { padding: 1px 5px !important; }
  .recent-posts { display: grid !important; gap: 10px !important; }
  .recent-post-item { display: grid !important; grid-template-columns: 110px minmax(0, 1fr) !important; gap: 10px !important; align-items: center !important; padding: 0 !important; min-width: 0 !important; text-decoration: none !important; }
  .recent-post-thumb { width: 110px !important; height: 80px !important; overflow: hidden !important; border-radius: 8px !important; }
  .recent-post-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .recent-post-info { min-width: 0 !important; }
  .recent-post-info h5 { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; margin: 0 0 4px !important; color: #17324d !important; font-size: 15px !important; line-height: 1.35 !important; font-weight: 700 !important; }
  .recent-post-info .date { color: #6b7280 !important; font-size: 12px !important; }
  .blog-section { padding: 14px 0 32px !important; }
  .blog-section .watch-container { width: 100% !important; max-width: 100% !important; padding-inline: 14px !important; }
  .blog-section .blog-layout { display: block !important; }
  .blog-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; }
  .blog-card { border-radius: 14px !important; box-shadow: 0 5px 16px rgba(23,50,77,.06) !important; }
  .blog-card-image { display: block !important; width: 100% !important; aspect-ratio: 16 / 9 !important; }
  .blog-card-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .blog-card-content { padding: 13px !important; }
  .blog-card-meta { gap: 8px !important; margin-bottom: 7px !important; }
  .blog-card-meta .meta-item { font-size: 12px !important; }
  .blog-card-title, .blog-card-title a { margin: 0 0 8px !important; color: #17324d !important; font-size: 19px !important; line-height: 1.35 !important; letter-spacing: normal !important; }
  .blog-card-more { font-size: 13px !important; }
  .blog-pagination { margin-top: 20px !important; }
  .btn-load-more { padding: 10px 18px !important; font-size: 13px !important; }
  .watch-breadcrumb { max-width: 100% !important; padding: 7px 0 !important; overflow: hidden !important; }
  .watch-breadcrumb .watch-container { max-width: 100% !important; padding-inline: 14px !important; }
  .watch-breadcrumb-list { display: flex !important; max-width: 100% !important; flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; overflow-x: auto !important; white-space: nowrap !important; font-size: 12px !important; line-height: 1.35 !important; scrollbar-width: none !important; }
  .watch-breadcrumb-list::-webkit-scrollbar { display: none !important; }
  .watch-breadcrumb-item, .watch-breadcrumb-current, .watch-breadcrumb-separator { flex: 0 0 auto !important; }
}
@media (min-width: 992px) { .mobile-language-panel { display:none; } }
@media (max-width: 575px) {
  .header__logo img { max-width:132px; }
  .container { max-width:100%; }
  .product__item__text { padding:12px 8px 15px; }
  .product__item__text h6 { font-size:14px; }
  .product__price { font-size:15px; }
  .primary-btn, .site-btn { min-height:44px; }
  .banner__item { min-height:220px; border-radius:16px; background-position:center; }
  .fix-toolbar, .footer-toolbar, .mobile-toolbar, .toolbar-mobile { left:10px; right:10px; bottom:10px; height:64px; border-radius:20px; }
  #arcontactus { bottom:164px !important; transform:scale(.88); transform-origin:bottom right; }
}

/* Mobile rebuild: keep the desktop composition from scaling into an unusable
   long canvas. These rules intentionally target the active homepage classes. */
@media (max-width: 767px) {
  html, body { max-width: 100%; overflow-x: hidden !important; }
  body { padding-bottom: 0 !important; }
  .haisan-language { display: none !important; position: static !important; }

  .section-slider { padding: 10px 0 4px !important; }
  .index-slider--wrap { display: block !important; }
  .index-slider--nav { display: none !important; }
  .index-slider--banner { width: 100% !important; gap: 0 !important; }
  .index-banner--top, #index-slider-carousel { width: 100% !important; }
  #index-slider-carousel .carousel-inner { border-radius: 14px !important; }
  #index-slider-carousel .aspect-ratio { display: block; height: auto !important; aspect-ratio: 16 / 7; overflow: hidden; }
  #index-slider-carousel .aspect-ratio img { width: 100%; height: 100%; object-fit: cover; }
  .banner-nav-btn { width: 34px !important; height: 34px !important; margin: 0 8px !important; opacity: .9 !important; }

  .watch-container { width: 100% !important; max-width: 100% !important; padding-left: 14px !important; padding-right: 14px !important; }
  .watch-products-section, .watch-posts-section { padding: 18px 0 !important; }
  .watch-section-header { margin: 0 0 12px !important; }
  .watch-section-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; }
  .watch-section-title, .watch-posts-main-title {
    font-size: 24px !important; line-height: 1.25 !important; letter-spacing: 0 !important;
    white-space: normal !important; margin: 0 !important;
  }
  .watch-posts-heading { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin-bottom: 12px !important; }
  .watch-posts-heading .watch-posts-main-title { margin: 0 !important; }
  .watch-posts-heading a { color: #087eae !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; white-space: nowrap !important; }
  .watch-section-link { flex: 0 0 auto !important; color: #087eae !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; white-space: nowrap !important; }
  .watch-product-slider-container > .watch-product-slider-arrow { display: none !important; }
  .watch-view-all { display: none !important; }

  #classification-track.watch-products-grid {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important; padding: 0 !important; overflow: visible !important;
  }
  #classification-track .classification-item { min-width: 0 !important; width: auto !important; flex: none !important; }
  #classification-track .watch-cat-card {
    min-height: 142px !important; height: 100% !important; padding: 12px 8px !important;
    border: 1px solid #e5edf2 !important; border-radius: 14px !important;
    box-shadow: 0 5px 18px rgba(23,50,77,.07) !important; background: #fff !important;
  }
  #classification-track .watch-cat-img-box { width: 76px !important; height: 76px !important; }
  #classification-track .watch-cat-title {
    font-size: 14px !important; line-height: 1.3 !important; margin: 8px 0 0 !important;
    min-height: 36px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  #new-products-track.watch-products-grid {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important; overflow: visible !important;
  }
  #new-products-track .watch-product-card { min-width: 0 !important; width: auto !important; border-radius: 14px !important; overflow: hidden; }
  #new-products-track .watch-product-img-wrapper { height: auto !important; aspect-ratio: 1 / 1 !important; }
  #new-products-track .watch-product-img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
  #new-products-track .watch-product-info { padding: 10px 9px 12px !important; }
  #new-products-track .watch-product-name, #new-products-track .watch-product-link {
    font-size: 15px !important; line-height: 1.35 !important; min-height: 40px !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  #new-products-track .watch-price-current { font-size: 16px !important; }
  #new-products-track .watch-price-old { font-size: 13px !important; }
  #new-products-track .watch-discount-badge { font-size: 11px !important; padding: 4px 6px !important; }
  .watch-product-slider-arrow { width: 34px !important; height: 34px !important; }

  .watch-posts-grid { display: block !important; }
  .watch-posts-col { width: 100% !important; margin-bottom: 18px !important; }
  .watch-featured-card { border-radius: 14px !important; overflow: hidden; }
  .watch-featured-img-group { height: auto !important; min-height: 0 !important; margin-bottom: 0 !important; }
  .watch-featured-img-wrapper, .watch-featured-img { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; object-fit: cover !important; }
  .watch-featured-content { padding: 12px !important; }
  .watch-featured-title, .watch-featured-title a { font-size: 20px !important; line-height: 1.35 !important; }
  .watch-featured-excerpt { font-size: 14px !important; line-height: 1.55 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .watch-featured-date { font-size: 13px !important; }
  .watch-featured-nav { position: static !important; padding: 8px 12px 12px !important; }
  .watch-most-viewed-item { display: flex !important; gap: 10px !important; padding: 10px 0 !important; }
  .watch-most-viewed-img-wrapper { flex: 0 0 108px !important; }
  .watch-most-viewed-img { aspect-ratio: 16 / 9 !important; height: auto !important; object-fit: cover !important; }
  .watch-most-viewed-title { font-size: 16px !important; line-height: 1.35 !important; }
  .watch-most-viewed-excerpt { font-size: 13px !important; line-height: 1.45 !important; }

  .addThis_listSharing { right: 12px !important; bottom: calc(14px + env(safe-area-inset-bottom)) !important; }
  .addThis_toggle, .back-to-top { width: 46px !important; height: 46px !important; }
  #backToTopBtn { margin-bottom: 8px !important; }

  /* Shared product card system: homepage, category, search and related items. */
  .watch-products-grid:not(#classification-track) {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important; overflow: visible !important;
  }
  .watch-products-grid .watch-product-card {
    min-width: 0 !important; width: auto !important; display: flex !important; flex-direction: column !important;
    border: 1px solid #edf0f3 !important; border-radius: 14px !important; background: #fff !important;
    box-shadow: 0 5px 16px rgba(23,50,77,.07) !important; overflow: hidden !important;
  }
  .watch-products-grid .watch-product-img-wrapper {
    height: auto !important; aspect-ratio: 1 / 1 !important; padding: 8px !important; position: relative !important;
    background: #fff !important;
  }
  .watch-products-grid .watch-product-img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
  .watch-products-grid .watch-product-overlay { display: none !important; }
  .watch-products-grid .watch-discount-badge {
    top: 8px !important; right: 8px !important; left: auto !important; z-index: 4 !important;
    background: #f97316 !important; color: #fff !important; border-radius: 6px !important;
    padding: 4px 6px !important; font-size: 11px !important; font-weight: 800 !important;
  }
  .watch-products-grid .watch-new-badge { top: 8px !important; left: 8px !important; padding: 4px 6px !important; }
  .watch-products-grid .watch-product-info { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; padding: 10px 9px 11px !important; }
  .watch-products-grid .watch-product-name, .watch-products-grid .watch-product-link {
    color: #17324d !important; font-size: 15px !important; line-height: 1.35 !important; font-weight: 600 !important;
    text-decoration: none !important; min-height: 40px !important; margin: 0 0 7px !important;
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
  }
  .watch-products-grid .watch-product-price { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 6px !important; margin: 0 0 9px !important; }
  .watch-products-grid .watch-price-current { color: #dc2626 !important; font-size: 17px !important; font-weight: 800 !important; }
  .watch-products-grid .watch-price-old { color: #8a8a8a !important; font-size: 13px !important; font-weight: 400 !important; text-decoration: line-through !important; }
  .watch-products-grid .watch-add-cart-btn {
    width: 100% !important; min-height: 40px !important; margin-top: auto !important; padding: 8px 6px !important;
    border: 0 !important; border-radius: 10px !important; background: #17324d !important; color: #fff !important;
    font-size: 14px !important; font-weight: 700 !important;
  }
  .watch-products-grid .watch-action-form { display: none !important; }

  /* Trend / best-selling columns use the same compact card geometry. */
  .watch-trend-section { padding: 18px 0 24px !important; }
  .watch-trend-slider-container { overflow: visible !important; }
  .watch-trend-arrow { display: none !important; }
  #trend-slider-track.watch-trend-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; }
  .watch-trend-col { min-width: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .watch-trend-title { grid-column: 1 / -1 !important; font-size: 22px !important; line-height: 1.25 !important; color: #17324d !important; margin: 0 0 2px !important; }
  .watch-trend-item.watch-product-card { position: relative !important; display: flex !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 1px solid #edf0f3 !important; border-radius: 14px !important; background: #fff !important; overflow: hidden !important; box-shadow: 0 5px 16px rgba(23,50,77,.07) !important; }
  .watch-trend-item .watch-trend-img-wrapper { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; padding: 8px !important; margin: 0 !important; }
  .watch-trend-item .watch-trend-img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
  .watch-trend-item .watch-trend-info { display: flex !important; flex-direction: column !important; padding: 9px !important; min-width: 0 !important; }
  .watch-trend-item .watch-trend-name, .watch-trend-item .watch-trend-name a { color: #17324d !important; font-size: 14px !important; line-height: 1.35 !important; font-weight: 700 !important; margin: 0 0 5px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-decoration: none !important; }
  .watch-trend-item .watch-trend-rating { color: #f59e0b !important; font-size: 11px !important; line-height: 1 !important; margin-bottom: 5px !important; }
  .watch-trend-item .watch-trend-price { display: flex !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 5px !important; margin: 0 0 7px !important; }
  .watch-trend-item .watch-price-current { font-size: 16px !important; color: #dc2626 !important; font-weight: 800 !important; }
  .watch-trend-item .watch-price-old { font-size: 12px !important; color: #8a8a8a !important; text-decoration: line-through !important; }
  .watch-trend-item .watch-discount-badge { position: absolute !important; top: 7px !important; right: 7px !important; z-index: 3 !important; padding: 4px 6px !important; border-radius: 6px !important; background: #f97316 !important; color: #fff !important; font-size: 10px !important; font-weight: 800 !important; }
  .watch-trend-item .watch-trend-buy { display: block !important; width: 100% !important; margin-top: auto !important; padding: 7px 5px !important; min-height: 34px !important; border-radius: 8px !important; background: #17324d !important; color: #fff !important; font-size: 12px !important; text-align: center !important; text-decoration: none !important; }

  /* Category page: collapsed filter drawer + compact toolbar. */
  .watch-shop-section { padding: 12px 0 24px !important; }
  .watch-shop-layout { display: block !important; }
  .watch-sidebar { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; z-index: 11000 !important; width: min(88vw, 360px) !important; max-width: 360px !important; overflow-y: auto !important; transform: translateX(-105%) !important; transition: transform .25s ease !important; background: #fff !important; padding: 18px !important; box-shadow: 10px 0 30px rgba(15,23,42,.18) !important; }
  .watch-sidebar.active { transform: translateX(0) !important; }
  .watch-sidebar-overlay { position: fixed !important; inset: 0 !important; z-index: 10999 !important; background: rgba(15,23,42,.42) !important; opacity: 0 !important; pointer-events: none !important; transition: opacity .25s ease !important; }
  .watch-sidebar-overlay.active { opacity: 1 !important; pointer-events: auto !important; }
  .watch-sidebar-mobile-header { display: flex !important; align-items: center !important; justify-content: space-between !important; }
  .watch-sidebar-mobile-header h4, .watch-sidebar-title h4 { font-size: 20px !important; line-height: 1.25 !important; margin: 0 0 10px !important; }
  .watch-sidebar-block { margin-bottom: 18px !important; }
  .watch-categories-list { display: grid !important; gap: 8px !important; }
  .watch-category-link { font-size: 14px !important; line-height: 1.35 !important; padding: 9px 10px !important; color: #17324d !important; border-radius: 8px !important; }
  .watch-category-link.active { background: #eaf6fb !important; color: #087eae !important; font-weight: 700 !important; }
  .watch-main-content { width: 100% !important; }
  .watch-breadcrumb { padding: 8px 0 !important; overflow: hidden !important; }
  .watch-breadcrumb-list { display: flex !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: auto !important; font-size: 13px !important; }
  .watch-shop-toolbar { display: flex !important; flex-direction: row !important; justify-content: space-between !important; gap: 8px !important; padding: 10px !important; margin: 6px 0 12px !important; border: 1px solid #edf0f3 !important; box-shadow: none !important; }
  .watch-toolbar-left, .watch-toolbar-right, .watch-product-sort { min-width: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 7px !important; }
  .watch-sidebar-toggle-mini { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; border-radius: 10px !important; background: #17324d !important; color: #fff !important; border: 0 !important; }
  .results-count { font-size: 14px !important; white-space: nowrap !important; }
  .sort-label { display: none !important; }
  .sort-select { min-width: 0 !important; width: 140px !important; padding: 9px 28px 9px 10px !important; font-size: 13px !important; }

  /* Product detail */
  .watch-detail-section { padding: 12px 0 28px !important; }
  .watch-detail-grid { display: block !important; }
  .watch-main-image { height: auto !important; aspect-ratio: 1 / 1 !important; max-height: none !important; padding: 10px !important; }
  .watch-main-img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
  .watch-thumbnails { display: flex !important; gap: 8px !important; margin: 10px 0 16px !important; }
  .watch-thumb { width: 56px !important; height: 56px !important; }
  .watch-product-title { color: #17324d !important; font-size: 24px !important; line-height: 1.25 !important; margin: 0 0 8px !important; }
  .watch-price-line { display: flex !important; align-items: baseline !important; gap: 8px !important; flex-wrap: wrap !important; }
  .watch-current-price { font-size: 20px !important; font-weight: 800 !important; color: #dc2626 !important; }
  .watch-original-price { font-size: 14px !important; color: #8a8a8a !important; text-decoration: line-through !important; }
  .watch-button-group { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .watch-btn { min-height: 44px !important; padding: 10px 8px !important; font-size: 14px !important; }
  .watch-tabs-container { display: block !important; }
  .watch-tabs-nav-vertical { display: flex !important; overflow-x: auto !important; gap: 6px !important; }
  .watch-tab-btn { white-space: nowrap !important; font-size: 13px !important; padding: 9px 10px !important; }
}
}

/* ========================================================================== 
   PRODUCT DETAIL + ARTICLE DETAIL — FINAL COMPONENT GUARDRAILS
   Scoped to the detail templates so shared site icons/cards are unaffected.
   ========================================================================== */
.product-detail-page .watch-main-image {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  padding: 12px !important;
  overflow: hidden !important;
  border: 1px solid #eef1f4 !important;
  border-radius: 16px !important;
  background: #fff !important;
}
.product-detail-page .watch-main-img { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: contain !important; display: block !important; }
.product-detail-page .watch-discount-badge { top: 10px !important; left: 10px !important; right: auto !important; z-index: 2 !important; padding: 5px 8px !important; border-radius: 8px !important; background: #ef4444 !important; color: #fff !important; font-size: 13px !important; font-weight: 700 !important; }
.product-detail-page .watch-thumbnails { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; margin: 10px 0 16px !important; overflow-x: auto !important; }
.product-detail-page .watch-thumb { flex: 0 0 60px !important; width: 60px !important; height: 60px !important; padding: 4px !important; border-radius: 10px !important; border: 1px solid #e5e7eb !important; }
.product-detail-page .watch-thumb img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.product-detail-page .watch-thumb.active { border-color: #168ac1 !important; box-shadow: 0 0 0 2px rgba(22,138,193,.12) !important; }
.product-detail-page .watch-product-title { max-width: 100% !important; margin: 0 0 8px !important; color: #15324a !important; font-size: 27px !important; line-height: 1.3 !important; font-weight: 700 !important; }
.product-detail-page .watch-category-line { font-size: 14px !important; color: #475569 !important; }
.product-detail-page .watch-rating-line { display: flex !important; align-items: center !important; gap: 8px !important; margin: 8px 0 14px !important; }
.product-detail-page .watch-rating-label { font-weight: 600; color: #15324a; }
.product-detail-page .watch-stars-neutral { color: #9aa7b5; font-size: 18px; letter-spacing: 1px; line-height: 1; }
.product-detail-page .tab-review-count-badge { margin-left: auto; color: #64748b; font-size: 13px; font-weight: 500; }
.product-rating-form { margin: 14px 0 20px; padding: 16px; border: 1px solid #e8eef3; border-radius: 14px; background: #fff; }
.product-rating-form fieldset { border: 0; margin: 0; padding: 0; }
.product-rating-form legend { color: #15324a; font-weight: 700; margin-bottom: 8px; }
.product-rating-stars { display: inline-flex; flex-direction: row-reverse; gap: 3px; margin-bottom: 10px; }
.product-rating-star { border: 0; background: transparent; color: #c4ccd5; cursor: pointer; font-size: 25px; line-height: 1; padding: 2px 4px; }
.product-rating-star:hover, .product-rating-star.selected, .product-rating-star:hover ~ .product-rating-star { color: #f59e0b; }
.product-rating-form textarea, .product-rating-form input, .product-rating-form select { width: 100%; margin-top: 8px; border: 1px solid #dce5ec; border-radius: 9px; padding: 10px 12px; font: inherit; }
.product-low-rating-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.product-low-rating-fields .product-low-rating-copy { grid-column: 1 / -1; color: #526273; font-size: 14px; line-height: 1.55; margin: 4px 0 0; }
.product-low-rating-fields select { grid-column: 1 / -1; }
.watch-rating-notice { margin: 10px 0; padding: 10px 12px; border-radius: 9px; background: #effaf5; color: #176b4b; font-size: 14px; }

/* Product detail mobile polish: keep the breadcrumb usable without widening the page. */
.product-breadcrumb .watch-breadcrumb-list { overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.product-breadcrumb .watch-breadcrumb-list::-webkit-scrollbar { display: none; }

@media (max-width: 767px) {
  .product-breadcrumb { overflow: hidden !important; }
  .product-breadcrumb .watch-breadcrumb-list { gap: 6px !important; font-size: 13px !important; }
  .product-breadcrumb .watch-breadcrumb-current { display: inline-block; max-width: min(220px, 58vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
  .product-detail-page .watch-rating-line { align-items: center !important; flex-wrap: wrap; row-gap: 6px; }
  .product-detail-page .watch-rating-label { flex-basis: 100%; font-size: 18px; }
  .product-detail-page .watch-stars-neutral { font-size: 21px; }
  .product-detail-page .tab-review-count-badge { font-size: 13px; }
  .product-rating-form { padding: 14px; }
  .product-low-rating-fields { grid-template-columns: 1fr; }
  .product-low-rating-fields .product-low-rating-copy, .product-low-rating-fields select { grid-column: auto; }

  /* The sticky purchase bar occupies the lower edge on product pages. Keep the
     shared chat/back-to-top stack above it instead of covering the CTA. */
  body:has(.product-detail-page) .addThis_listSharing { bottom: calc(92px + env(safe-area-inset-bottom)) !important; }
}
.product-detail-page .watch-stars i { color: #cbd5e1 !important; font-size: 17px !important; }
.product-detail-page .watch-review-text { color: #64748b !important; font-size: 13px !important; }
.product-detail-page .watch-price-line { display: flex !important; align-items: baseline !important; gap: 10px !important; flex-wrap: wrap !important; padding: 10px 0 !important; margin-bottom: 14px !important; border-top: 1px solid #eef1f4 !important; border-bottom: 1px solid #eef1f4 !important; }
.product-detail-page .watch-current-price { color: #dc2626 !important; font-size: 24px !important; font-weight: 800 !important; }
.product-detail-page .watch-original-price { color: #94a3b8 !important; font-size: 15px !important; text-decoration: line-through !important; }
.product-detail-page .watch-short-desc { margin-bottom: 14px !important; color: #4b5563 !important; font-size: 15px !important; line-height: 1.6 !important; }
.product-detail-page .watch-quantity-box { margin-bottom: 14px !important; padding: 14px !important; border: 1px solid #edf2f7 !important; border-radius: 12px !important; background: #f8fafc !important; }
.product-detail-page .watch-stock-badge { display: block !important; margin-bottom: 10px !important; color: #16a34a !important; font-size: 14px !important; }
.product-detail-page .watch-stock-badge.watch-stock-empty { color: #dc2626 !important; }
.product-detail-page .watch-qty-label { display: block !important; margin-bottom: 8px !important; color: #334155 !important; font-size: 14px !important; }
.product-detail-page .watch-qty-controls { display: inline-flex !important; align-items: center !important; width: max-content !important; margin: 0 !important; border: 1px solid #e5e7eb !important; border-radius: 10px !important; overflow: hidden !important; background: #fff !important; }
.product-detail-page .watch-qty-btn { flex: 0 0 42px !important; width: 42px !important; height: 42px !important; padding: 0 !important; border: 0 !important; background: #fff !important; color: #15324a !important; font-size: 20px !important; }
.product-detail-page .watch-qty-input { flex: 0 0 52px !important; width: 52px !important; height: 42px !important; padding: 0 !important; border: 0 !important; border-right: 1px solid #e5e7eb !important; border-left: 1px solid #e5e7eb !important; text-align: center !important; font-size: 16px !important; }
.product-detail-page .watch-button-group { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin-bottom: 10px !important; }
.product-detail-page .watch-btn { min-height: 48px !important; padding: 10px 12px !important; border-radius: 11px !important; font-size: 15px !important; font-weight: 600 !important; }
.product-detail-page .watch-btn-outline { border: 1px solid #15324a !important; background: #fff !important; color: #15324a !important; }
.product-detail-page .watch-btn-solid { border: 1px solid #15324a !important; background: #15324a !important; color: #fff !important; }
.product-detail-page .watch-extra-actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.product-detail-page .watch-extra-btn { min-height: 40px !important; padding: 8px 12px !important; border: 1px solid #e2e8f0 !important; border-radius: 9px !important; background: #fff !important; color: #475569 !important; }
.product-detail-page .watch-similar-heading { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 14px !important; }
.product-detail-page .watch-similar-title { margin: 0 !important; text-align: left !important; color: #15324a !important; font-size: 24px !important; line-height: 1.3 !important; }
.product-detail-page .watch-similar-heading > a { color: #168ac1 !important; font-size: 13px !important; white-space: nowrap !important; }
.product-detail-page .watch-products-grid .watch-discount-badge { top: 8px !important; left: 8px !important; padding: 4px 6px !important; border-radius: 7px !important; font-size: 11px !important; }
.product-detail-page .watch-product-img-wrapper { aspect-ratio: 1 / 1 !important; }
.product-detail-page .watch-product-name { display: -webkit-box !important; overflow: hidden !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; font-size: 15px !important; line-height: 1.35 !important; }
.product-detail-page .watch-empty-state-card { min-height: 180px !important; padding: 24px 16px !important; border: 1px solid #edf2f7 !important; border-radius: 12px !important; background: #f8fafc !important; text-align: center !important; }
.product-detail-page .watch-empty-state-card .watch-empty-icon { margin: 0 auto 12px !important; }
.product-detail-page .watch-empty-icon, .product-detail-page .watch-login-icon, .product-detail-page .watch-btn-icon { display: block !important; width: 48px !important; height: 48px !important; max-width: 48px !important; max-height: 48px !important; }
.product-detail-page .watch-comments-section { padding: 16px !important; border: 1px solid #edf2f7 !important; border-radius: 14px !important; }

.blog-details-section .widget-list { list-style: none !important; margin: 0 !important; padding-left: 0 !important; }
.blog-details-section .widget-list li::marker { content: none !important; }
.blog-details-section .share-links { display: flex !important; align-items: center !important; gap: 8px !important; }
.blog-details-section .share-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border-radius: 10px !important; }
.blog-details-section .share-x-icon { font-size: 18px !important; font-weight: 800 !important; line-height: 1 !important; }
.blog-details-section .post-meta { min-width: 0 !important; flex-wrap: wrap !important; }
.blog-details-section .article-rating-summary i { color: #f59e0b !important; }
.blog-details-section .article-rating-box { margin-top: 22px !important; padding: 14px 16px !important; border: 1px solid #edf2f7 !important; border-radius: 12px !important; background: #f8fafc !important; }
.blog-details-section .article-rating-heading { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; color: #15324a !important; }
.blog-details-section .article-rating-heading span { color: #64748b !important; font-size: 13px !important; }
.blog-details-section .article-rating-form { margin-top: 8px !important; }
.blog-details-section .article-rating-stars { display: inline-flex !important; flex-direction: row-reverse !important; gap: 2px !important; }
.blog-details-section .article-rating-star { min-width: 36px !important; min-height: 36px !important; padding: 0 3px !important; border: 0 !important; background: transparent !important; color: #cbd5e1 !important; font-size: 24px !important; line-height: 1 !important; cursor: pointer !important; }
.blog-details-section .article-rating-star:hover, .blog-details-section .article-rating-star:focus-visible, .blog-details-section .article-rating-star:hover ~ .article-rating-star { color: #f59e0b !important; }
.blog-details-section .article-rating-notice { margin: 8px 0 0 !important; color: #15803d !important; font-size: 13px !important; }

@media (max-width: 767px) {
  .product-detail-page .watch-detail-grid { display: block !important; margin-bottom: 20px !important; }
  .product-detail-page .watch-product-title { font-size: 26px !important; }
  .product-detail-page .watch-tabs-container { display: block !important; padding: 12px !important; border-radius: 14px !important; }
  .product-detail-page .watch-tabs-left { width: 100% !important; padding: 0 !important; border: 0 !important; }
  .product-detail-page .watch-tabs-nav-vertical { display: block !important; overflow: visible !important; }
  .product-detail-page .watch-tab-btn { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; margin: 0 !important; padding: 14px 4px !important; border: 0 !important; border-bottom: 1px solid #e5e7eb !important; border-radius: 0 !important; background: #fff !important; color: #15324a !important; font-size: 15px !important; text-align: left !important; white-space: normal !important; }
  .product-detail-page .watch-tab-btn::after { content: '+'; color: #64748b !important; font-size: 20px !important; }
  .product-detail-page .watch-tab-btn.active::after { content: '−'; }
  .product-detail-page .watch-tabs-right { margin-top: 0 !important; }
  .product-detail-page .watch-tab-panel { padding: 14px 4px !important; border-bottom: 1px solid #eef1f4 !important; }
  .product-detail-page .watch-tab-panel:not(.active) { display: none !important; }
  .product-detail-page .watch-tab-header { margin-bottom: 8px !important; font-size: 18px !important; }
  .product-detail-page .watch-tab-body, .product-detail-page .watch-description-inner { font-size: 15px !important; line-height: 1.7 !important; }
  .product-detail-page .watch-similar-title { font-size: 23px !important; }
  .product-detail-page .watch-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .product-detail-page .watch-button-group { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .blog-details-section .post-title { font-size: 27px !important; line-height: 1.28 !important; }
  .blog-details-section .meta-divider { display: none !important; }
  .blog-details-section .post-meta { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; font-size: 13px !important; }
  .blog-details-section .article-rating-box { padding: 12px !important; }
  .blog-details-section .post-content { font-size: 16px !important; line-height: 1.75 !important; }
  .blog-details-section .share-box { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; }
  .blog-details-section .recent-post-item { gap: 12px !important; }
  .blog-details-section .recent-post-thumb { width: 108px !important; height: 80px !important; }
  .blog-details-section .recent-post-info h5 { font-size: 15px !important; line-height: 1.35 !important; }
}

@media (max-width: 379px) {
  .product-detail-page .watch-button-group { grid-template-columns: 1fr !important; }
}

/* Detail content media must stay inside its own column on narrow screens. */
.product-detail-page .watch-tabs-right,
.product-detail-page .watch-tab-body,
.blog-details-section .blog-details-main,
.blog-details-section .post-content { min-width: 0 !important; max-width: 100% !important; }
.product-detail-page .watch-tab-body img,
.product-detail-page .watch-description-inner img,
.blog-details-section .post-content img { max-width: 100% !important; height: auto !important; }
.product-detail-page .watch-tab-body table,
.product-detail-page .watch-description-inner table,
.blog-details-section .post-content table { display: block !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
.product-detail-page .watch-tab-body iframe,
.product-detail-page .watch-description-inner iframe,
.blog-details-section .post-content iframe,
.blog-details-section .post-content video { display: block !important; width: 100% !important; max-width: 100% !important; aspect-ratio: 16 / 9 !important; height: auto !important; }
.product-detail-page .watch-tab-body ul,
.product-detail-page .watch-tab-body ol,
.blog-details-section .post-content ul,
.blog-details-section .post-content ol { padding-left: 1.25rem !important; }
.product-detail-page .watch-btn:focus-visible,
.product-detail-page .watch-extra-btn:focus-visible,
.blog-details-section .share-icon:focus-visible { outline: 3px solid rgba(22,138,193,.35) !important; outline-offset: 2px !important; }

.is-out-of-stock { opacity: .72 !important; cursor: not-allowed !important; }
.haisan-purchase-notice { position: fixed; right: 24px; top: 88px; z-index: 10050; max-width: min(420px, calc(100vw - 32px)); padding: 13px 16px; border-radius: 12px; background: #15324a; color: #fff; box-shadow: 0 12px 28px rgba(15,23,42,.22); font-size: 14px; line-height: 1.45; transition: opacity .25s ease, transform .25s ease; }
.haisan-purchase-notice.is-hidden { opacity: 0; transform: translateY(-8px); }
@media (max-width: 767px) { .haisan-purchase-notice { right: 16px; left: 16px; top: auto; bottom: 112px; max-width: none; } }

/* SafeSeaFood responsive brand mark.  The source artwork is nearly square,
   so constrain it by height and preserve its intrinsic aspect ratio. */
.site-brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 100% !important;
  line-height: 0 !important;
}
.site-logo {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 92px !important;
  max-height: 76px !important;
  object-fit: contain !important;
}
.header__logo,
.offcanvas__logo {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}
.header__logo .site-brand { flex: 0 1 auto !important; }

@media (max-width: 1199px) {
  .site-logo { max-width: 82px !important; max-height: 68px !important; }
}
@media (max-width: 767px) {
  .offcanvas__logo .site-logo,
  .header__logo .site-logo { max-width: 64px !important; max-height: 54px !important; }
  .offcanvas__logo .site-brand,
  .header__logo .site-brand { max-width: 55vw !important; }
}

/* Final desktop action polish: shared 42px control language for the right group. */
@media (min-width: 1200px) {
  .header .header-actions { align-items:center; gap:12px; }
  .header .header__right__auth {
    display:flex;
    align-items:center;
    height:42px;
    min-width:132px;
    max-width:150px;
    padding:0 14px;
    border:1px solid rgba(23,50,77,.12);
    border-radius:10px;
    background:rgba(255,255,255,.94);
    box-shadow:0 4px 14px rgba(23,50,77,.08);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .header .header__right__auth:hover { transform:translateY(-1px); box-shadow:0 7px 18px rgba(23,50,77,.13); }
  .header .header-login:not(.acount) { min-width:145px; max-width:160px; }
  .header .header-login:not(.acount) a {
    justify-content:center;
    max-width:none;
    min-width:145px;
    padding:0 14px;
    font-size:13px;
    gap:8px;
  }
  .header .header-login-icon { color:#0ea5e9; font-size:17px; line-height:1; }
  .header .header-login:not(.acount):hover .header-login-icon { color:#0284c7; }
  .header .header-login:not(.acount) a + a { margin-left:6px; }
  .header .header__right__auth a,
  .header .header__right__auth a:last-child {
    display:flex !important;
    align-items:center;
    gap:7px;
    height:40px;
    max-width:120px;
    margin:0;
    font-size:14px;
    font-weight:600;
    line-height:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .header .header__right__auth a:after { display:none !important; }
  .header .header__right__auth img {
    width:28px;
    height:28px;
    flex:0 0 28px;
    border-radius:50%;
    object-fit:cover;
  }
  .header .haisan-language-toggle {
    width:96px;
    height:42px;
    min-width:96px;
    min-height:42px;
    padding:0 12px;
    border-radius:10px;
    box-shadow:0 4px 14px rgba(23,50,77,.08);
  }
  .header .haisan-language-chevron { margin-left:auto; font-size:11px; color:#5f6b7a; transition:transform .2s ease; }
  .header .haisan-language-toggle[aria-expanded="true"] .haisan-language-chevron { transform:rotate(180deg); }
  .header .header__right__widget { display:flex !important; align-items:center; gap:12px; }
  .header .header__right__widget li { display:flex; align-items:center; justify-content:center; width:42px; height:42px; margin:0; }
  .header .header__right__widget li > .search-switch,
  .header .header__right__widget li > a.js-cart-mini {
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:10px;
    line-height:1;
    transition:background-color .2s ease, color .2s ease;
  }
  .header .header__right__widget li > .search-switch:hover,
  .header .header__right__widget li > a.js-cart-mini:hover { background:#f1f8fb; }
  .header .header__right__widget li > a.js-cart-mini { position:relative; }
  .header .header__right__widget li > a.js-cart-mini .tip {
    position:absolute;
    top:1px;
    right:1px;
    width:17px;
    height:17px;
    line-height:17px;
    margin:0;
    font-size:10px;
  }
}

@media (min-width: 1200px) and (max-width: 1299px) {
  .header .header__right__auth { min-width:120px; max-width:132px; padding-left:12px; padding-right:12px; }
  .header .header__right__auth a { max-width:108px; }
  .header .header-actions { gap:10px; }
}

/* Keep the Products mega menu centered to the header content area and inside
   the viewport. The category grid and its links remain unchanged. */
@media (min-width: 1200px) {
  .header .h-megamenu-dropdown {
    left:50% !important;
    right:auto !important;
    width:min(1100px, calc(100vw - 48px)) !important;
    max-width:calc(100vw - 32px) !important;
    transform:translateX(-50%) !important;
    box-sizing:border-box;
    overflow:hidden;
  }
}

/* A restrained, CSS-only light sweep over the desktop brand mark. */
.logo-shine {
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.logo-shine::after {
  position:absolute;
  z-index:2;
  top:-35%;
  left:0;
  width:38%;
  height:170%;
  content:"";
  pointer-events:none;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.15) 42%, rgba(255,255,255,.65) 50%, rgba(255,255,255,.15) 58%, transparent 65%);
  transform:translateX(-230%) skewX(-10deg);
  animation:logoShine 6s ease-in-out infinite;
}
.logo-shine .site-logo { position:relative; z-index:1; }
@keyframes logoShine {
  0%, 18% { opacity:0; transform:translateX(-230%) skewX(-10deg); }
  30% { opacity:1; }
  45% { opacity:.85; transform:translateX(330%) skewX(-10deg); }
  100% { opacity:0; transform:translateX(330%) skewX(-10deg); }
}
@media (max-width: 991px), (prefers-reduced-motion: reduce) {
  .logo-shine::after { animation:none; }
}