@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    margin: 0;
    overflow-x: hidden;
    color: #222;
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
  }

  body {
    font-size: 14px;
    line-height: 1.45;
  }

  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    display: grid !important;
    grid-template-columns: 54px 1fr 54px !important;
    align-items: center !important;
    min-height: 58px !important;
    padding: 0 14px !important;
    background: #fff !important;
    border-bottom: 1px solid #e5e5e5 !important;
    box-shadow: none !important;
  }

  .topbar::before {
    content: "\2630";
    grid-column: 1;
    justify-self: start;
    font-size: 30px;
    line-height: 1;
    color: #202020;
  }

  .topbar .back-link,
  .topbar .topbar-button,
  .topbar .account-icon,
  .topbar .language-select,
  .topbar .nav,
  .topbar .main-nav {
    display: none !important;
  }

  .topbar .logo,
  .topbar .centered-logo {
    grid-column: 2 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    background: transparent !important;
  }

  .topbar .logo-mark {
    display: none !important;
  }

  .topbar .logo-text {
    display: block !important;
    max-width: 100% !important;
    color: #111 !important;
    font-size: 23px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 8px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .topbar .header-tools {
    grid-column: 3 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
  }

  .topbar .search-icon {
    display: block !important;
    width: 34px !important;
    height: 34px !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
    position: relative !important;
  }

  .topbar .search-icon::before {
    content: "\2315";
    position: absolute;
    inset: 0;
    color: #202020;
    font-size: 30px;
    line-height: 32px;
    text-align: center;
  }

  .hero.clone-section {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: #000 !important;
  }

  .hero-inner.single-image-hero {
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    min-height: 430px !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  .hero-inner.single-image-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 270px;
    background-image: url("assets/home-hero-crochet-dress.jpg?v=20260710");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    background-color: #000;
  }

  .hero-inner.single-image-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 150px;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000 42%, #000 100%);
  }

  .hero-copy.hero-overlay {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 230px 18px 26px !important;
    margin: 0 !important;
    text-align: center !important;
    color: #fff !important;
    background: transparent !important;
  }

  .hero-copy .crumb {
    margin: 0 0 10px !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.8px !important;
    font-weight: 800 !important;
  }

  .hero-copy h1 {
    max-width: 340px !important;
    margin: 0 auto 12px !important;
    color: #fff !important;
    font-size: 28px !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    font-weight: 900 !important;
  }

  .hero-copy .lead {
    max-width: 340px !important;
    margin: 0 auto 18px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .hero-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
  }

  .hero-actions .button {
    min-width: 132px !important;
    height: 48px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
  }

  .hero-actions .button.dark {
    display: none !important;
  }

  .hero-actions .button.light {
    background: #fff !important;
    color: #111 !important;
    border: 0 !important;
  }

  .cert-strip {
    padding: 14px 10px !important;
    background: #fff !important;
  }

  .cert-row {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .cert-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #111 !important;
  }

  .cert-logo b {
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: -0.2px !important;
    white-space: nowrap !important;
  }

  .cert-logo small {
    display: none !important;
  }

  .clone-section,
  .intro-block,
  .service,
  .promise,
  .contact {
    padding: 34px 18px !important;
  }

  .intro-block .two-column,
  .two-column,
  .two-column.reverse {
    display: block !important;
    gap: 0 !important;
  }

  .image-panel,
  .video-panel {
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto 20px !important;
    overflow: hidden !important;
  }

  .video-panel::before,
  .image-panel::before {
    inset: 0 !important;
  }

  .content-panel {
    padding: 0 !important;
    text-align: left !important;
  }

  .content-panel h2,
  .section-title h2,
  .section-title h1 {
    margin: 0 0 14px !important;
    color: #222 !important;
    font-size: 30px !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  .content-panel p,
  .section-title p,
  .section-title .lead {
    margin: 0 0 14px !important;
    color: #555 !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
  }

  .quote-block {
    padding: 26px 14px !important;
  }

  .quote-block blockquote {
    font-size: 20px !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }

  .category-grid.four {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 0 !important;
  }

  .placeholder-card.overlay-card {
    min-width: 0 !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    background: #111820 !important;
  }

  .collection-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    background: #101820 !important;
  }

  .collection-media {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 185px !important;
    padding: 12px !important;
    background: linear-gradient(#232b31, #0f161a) !important;
  }

  .collection-media img,
  .collection-card img {
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .collection-copy {
    position: static !important;
    min-height: 124px !important;
    padding: 16px 14px !important;
    background: linear-gradient(#222a2f, #071014) !important;
    color: #fff !important;
  }

  .collection-copy h3 {
    margin: 0 0 8px !important;
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
  }

  .collection-copy p {
    margin: 0 !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
  }

  #products {
    padding: 42px 0 !important;
    background: #fff !important;
  }

  #products .section-title {
    padding: 0 18px !important;
    text-align: center !important;
  }

  .style-tabs {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 40px !important;
    overflow-x: auto !important;
    padding: 0 18px 16px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
  }

  .style-tabs button {
    flex: 0 0 auto !important;
    padding: 0 0 7px !important;
    border: 0 !important;
    background: transparent !important;
    color: #999 !important;
    font-size: 14px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
  }

  .style-tabs button.active {
    color: #111 !important;
    border-bottom: 1px solid #111 !important;
  }

  .product-strip,
  .product-grid,
  .category-list,
  .recommend-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 10px !important;
    padding: 0 12px !important;
    overflow: visible !important;
  }

  .product-tile,
  .category-product-card,
  .recommend-card {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #fff !important;
    color: #333 !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  .product-photo,
  .recommend-photo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    aspect-ratio: 1 / 1.25 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #f7f7f7 !important;
  }

  .product-photo img,
  .recommend-photo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .product-tile span,
  .recommend-card span {
    display: -webkit-box !important;
    min-height: 38px !important;
    margin: 7px 0 8px !important;
    padding: 0 2px !important;
    overflow: hidden !important;
    color: #64604f !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-align: left !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  .mobile-card-quote {
    display: flex !important;
    width: calc(100% - 16px) !important;
    height: 42px !important;
    margin: 0 8px 8px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: #a8a8a8 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  .more-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 190px !important;
    height: 50px !important;
    margin: 24px auto 0 !important;
    padding: 0 22px !important;
    border: 2px solid #111 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #111 !important;
    font-size: 15px !important;
  }

  .metric-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 0 18px !important;
  }

  .metric-grid article {
    min-height: 116px !important;
    padding: 18px 16px !important;
    border: 1px solid #e5e5e5 !important;
    background: #fff !important;
  }

  .metric-grid strong {
    color: #111 !important;
    font-size: 33px !important;
    line-height: 1 !important;
  }

  .metric-grid span {
    color: #4a77ba !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  .metric-grid p {
    margin-top: 16px !important;
    color: #777 !important;
    font-size: 11px !important;
    letter-spacing: 1.4px !important;
  }

  #advantages .advantage-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 0 18px !important;
  }

  #advantages .advantage-card {
    min-height: 210px !important;
    padding: 20px 16px !important;
    border: 1px solid #e6e6e6 !important;
    background: #fff !important;
  }

  #process .timeline {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 0 18px !important;
  }

  #process .timeline article {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 104px 1fr !important;
    min-height: 104px !important;
    border: 1px solid #e6e6e6 !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  #process .process-card-bg {
    position: relative !important;
    inset: auto !important;
    width: 104px !important;
    height: 104px !important;
    min-height: 0 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  #process .timeline article > span,
  #process .timeline article h3,
  #process .timeline article p {
    position: relative !important;
    z-index: 2 !important;
    grid-column: 2 !important;
    margin-left: 18px !important;
  }

  #process .timeline article > span {
    margin-top: 16px !important;
    color: #7da2c4 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  #process .timeline article h3 {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    color: #111 !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
  }

  #process .timeline article p {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    color: #666 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  .service-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .service-card {
    padding: 24px 20px !important;
    min-height: 0 !important;
    background: #f8f8f8 !important;
  }

  .extra-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  .extra-grid a {
    min-height: 72px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 0 !important;
    border-bottom: 1px solid #ececec !important;
    color: #333 !important;
    font-size: 18px !important;
    text-align: left !important;
  }

  .extra-grid a::after {
    content: ">";
    color: #777;
  }

  .promise {
    padding: 38px 0 !important;
  }

  .promise-head h2 {
    padding: 0 24px !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  .testimonial-marquee {
    min-height: 120px !important;
    padding: 18px 0 !important;
  }

  .brand-marquee {
    min-height: 96px !important;
  }

  .contact {
    padding: 42px 18px !important;
  }

  .contact-inner {
    display: block !important;
  }

  .contact-copy h2 {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }

  .contact-form {
    margin-top: 22px !important;
    padding: 20px !important;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea,
  .about-form input,
  .about-form textarea {
    min-height: 44px !important;
    font-size: 14px !important;
  }

  .site-footer {
    padding: 34px 22px 0 !important;
    background: #fff !important;
    color: #222 !important;
  }

  .footer-columns {
    display: block !important;
  }

  .footer-columns section {
    margin-bottom: 24px !important;
  }

  .footer-columns h3 {
    font-size: 17px !important;
    letter-spacing: 0.5px !important;
  }

  .footer-columns a,
  .footer-columns p {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  .footer-brand {
    font-size: 68px !important;
    line-height: 0.9 !important;
    letter-spacing: 10px !important;
    overflow: hidden !important;
  }

  .category-page main .clone-section {
    padding: 34px 0 !important;
  }

  .category-page .section-title {
    padding: 0 18px 18px !important;
  }

  .category-page .section-title h1 {
    font-size: 28px !important;
  }

  .product-detail-page .product-detail {
    display: block !important;
    padding: 28px 0 0 !important;
  }

  .product-detail-page .gallery {
    padding: 0 !important;
  }

  .main-product-photo {
    display: flex !important;
    width: 100% !important;
    aspect-ratio: 1 / 1.05 !important;
    min-height: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .main-product-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .thumb-row {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 12px 14px !important;
  }

  .thumb-row button {
    flex: 0 0 62px !important;
    width: 62px !important;
    height: 74px !important;
    padding: 0 !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
  }

  .thumb-row img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .product-info {
    padding: 22px 18px 0 !important;
  }

  .product-info h1 {
    margin: 0 0 22px !important;
    font-size: 26px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.5px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
  }

  .icon-list {
    margin: 0 0 22px !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .icon-list li {
    margin: 0 0 18px !important;
    padding-left: 42px !important;
    min-height: 30px !important;
    color: #444 !important;
    font-size: 17px !important;
    line-height: 1.3 !important;
    position: relative !important;
  }

  .icon-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: -2px;
    width: 28px;
    height: 28px;
    border: 2px solid #333;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    font-size: 16px;
  }

  .quote-actions {
    display: grid !important;
    gap: 10px !important;
    margin: 18px 0 24px !important;
  }

  .quote-actions a {
    display: flex !important;
    min-height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    background: #f4f1df !important;
    color: #333 !important;
    font-size: 16px !important;
    text-decoration: none !important;
  }

  .quote-actions a.dark-link {
    background: #000 !important;
    color: #fff !important;
  }

  .product-info details {
    border: 0 !important;
    border-top: 1px solid #ededed !important;
    margin: 0 !important;
    padding: 18px 0 !important;
  }

  .product-info summary {
    font-size: 19px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
  }

  .product-info h2,
  .size-chart-block h3 {
    margin: 26px 0 14px !important;
    font-size: 21px !important;
    line-height: 1.2 !important;
  }

  .spec-table,
  .size-spec-table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    font-size: 13px !important;
  }

  .spec-table td,
  .spec-table th {
    padding: 9px 8px !important;
    border: 1px solid #cfcfcf !important;
    word-break: break-word !important;
  }

  .recommend-section {
    padding: 42px 0 !important;
  }

  .recommend-section h2 {
    margin: 0 0 22px !important;
    font-size: 23px !important;
    letter-spacing: 1px !important;
    text-align: center !important;
  }

  .floating-tools {
    position: fixed !important;
    right: 13px !important;
    bottom: 76px !important;
    z-index: 1200 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .floating-button {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: #555963 !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18) !important;
  }

  .floating-button.top-button {
    display: none !important;
  }

  .quote-modal-content,
  .inquiry-modal-content {
    width: calc(100vw - 34px) !important;
    max-height: 82vh !important;
    padding: 26px 20px !important;
    overflow-y: auto !important;
  }

  .quote-modal-content h2,
  .inquiry-modal-content h2 {
    font-size: 30px !important;
  }

  .remove-quote-item {
    min-width: 34px !important;
    min-height: 34px !important;
  }

  .about-page .about-hero {
    min-height: 260px !important;
    background-size: contain !important;
    background-position: center top !important;
  }

  .about-page .about-hero h1 {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }

  .about-feature,
  .about-contact-block {
    display: block !important;
    padding: 0 18px 34px !important;
  }

  .about-photo {
    min-height: 240px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }

  .about-black {
    padding: 30px 22px !important;
  }

  .about-black h2 {
    font-size: 30px !important;
  }

  .about-black p {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }
}

/* REAL EOF OVERRIDE 2026-07-10 fix9 */
@media (max-width: 768px) {
  body > header.topbar,
  header.topbar {
    position: sticky !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 88px 0 54px !important;
    overflow: visible !important;
  }

  body > header.topbar::before,
  body > header.topbar::after,
  header.topbar::before,
  header.topbar::after,
  header.topbar .header-tools,
  header.topbar .search-icon {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
  }

  header.topbar .mobile-menu-button {
    position: absolute !important;
    left: 12px !important;
    top: 10px !important;
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
  }

  header.topbar .logo,
  header.topbar .centered-logo {
    position: static !important;
    display: flex !important;
    max-width: 100% !important;
    transform: none !important;
  }

  header.topbar .logo-text {
    font-size: 23px !important;
    letter-spacing: 6px !important;
  }

  header.topbar .mobile-whatsapp-link {
    position: fixed !important;
    right: 8px !important;
    top: 11px !important;
    display: inline-flex !important;
    width: 74px !important;
    height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: #1fae5b !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    z-index: 1400 !important;
  }

  body.mobile-menu-open header.topbar nav.nav,
  body.mobile-menu-open header.topbar .main-nav {
    top: 58px !important;
  }

  #products .product-tile,
  #products .product-grid .product-tile,
  #products .product-showcase.product-grid .product-tile {
    flex: 0 0 178px !important;
    width: 178px !important;
    min-width: 178px !important;
    max-width: 178px !important;
  }

  #products .product-tile span,
  #products .product-grid .product-tile span {
    height: 72px !important;
    max-height: 72px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }
}

/* REAL EOF OVERRIDE 2026-07-10 fix13 */
@media (max-width: 768px) {
  body.mobile-menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }

  header.topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1500 !important;
    overflow: visible !important;
  }

  header.topbar .mobile-menu-button {
    position: absolute !important;
    left: 12px !important;
    top: 10px !important;
    z-index: 1700 !important;
  }

  header.topbar .mobile-menu-button span {
    transition: transform .2s ease, opacity .2s ease !important;
    transform-origin: center !important;
  }

  body.mobile-menu-open header.topbar .mobile-menu-button span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }

  body.mobile-menu-open header.topbar .mobile-menu-button span:nth-child(2) {
    opacity: 0 !important;
  }

  body.mobile-menu-open header.topbar .mobile-menu-button span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  body.mobile-menu-open header.topbar nav.nav,
  body.mobile-menu-open header.topbar .main-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 58px !important;
    max-height: calc(100vh - 58px) !important;
    overflow-y: auto !important;
    background: #fff !important;
    z-index: 1490 !important;
  }

  .mobile-whatsapp-link,
  header.topbar .mobile-whatsapp-link {
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 1800 !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 88px !important;
    height: 36px !important;
    padding: 0 12px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #1fb15e !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .floating-tools .whatsapp-float,
  .whatsapp-float {
    display: none !important;
  }

  .floating-tools {
    position: fixed !important;
    top: 186px !important;
    right: 14px !important;
    bottom: auto !important;
    z-index: 1200 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .floating-tools .quote-button,
  .floating-tools .inquiry-button,
  .floating-tools .top-button {
    display: flex !important;
  }

  .floating-button {
    width: 58px !important;
    height: 58px !important;
    border-radius: 999px !important;
    background: #565b67 !important;
  }

  #certs,
  .cert-strip,
  .cert-row {
    overflow: hidden !important;
  }

  .cert-row {
    display: flex !important;
    width: max-content !important;
    gap: 42px !important;
    align-items: center !important;
    animation: mobileCertMarquee 16s linear infinite !important;
  }

  .cert-row > * {
    flex: 0 0 auto !important;
    min-width: 70px !important;
    text-align: center !important;
  }

  @keyframes mobileCertMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  #products .product-showcase.product-grid,
  #products .product-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 84px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 24px 18px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #products .product-showcase.product-grid::-webkit-scrollbar,
  #products .product-grid::-webkit-scrollbar {
    display: none !important;
  }

  #products .product-tile,
  #products .product-grid .product-tile,
  #products .product-showcase.product-grid .product-tile {
    flex: 0 0 188px !important;
    width: 188px !important;
    min-width: 188px !important;
    max-width: 188px !important;
    scroll-snap-align: start !important;
    overflow: hidden !important;
  }

  #products .product-tile img,
  #products .product-photo img {
    width: 100% !important;
    height: 230px !important;
    object-fit: cover !important;
  }

  #products .product-tile span {
    display: block !important;
    height: 66px !important;
    overflow: hidden !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  #process .timeline {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 !important;
  }

  #process .timeline article {
    display: grid !important;
    grid-template-columns: 112px 42px minmax(0, 1fr) !important;
    min-height: 104px !important;
    align-items: center !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #eee !important;
    border-radius: 5px !important;
    background: #fff !important;
  }

  #process .process-card-bg {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    width: 112px !important;
    height: 104px !important;
    min-height: 104px !important;
    background-size: cover !important;
    background-position: center !important;
    opacity: 1 !important;
  }

  #process .process-content {
    display: contents !important;
  }

  #process .process-number,
  #process .timeline article > span {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    display: flex !important;
    width: 30px !important;
    height: 30px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    background: #222 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #process .process-number::before,
  #process .process-number::after,
  #process .timeline article > span::before,
  #process .timeline article > span::after {
    content: none !important;
  }

  #process h3,
  #process .timeline article h3 {
    grid-column: 3 !important;
    margin: 0 10px 4px 0 !important;
    color: #111 !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  #process p,
  #process .timeline article p {
    grid-column: 3 !important;
    margin: 0 10px 0 0 !important;
    color: #666 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}

/* REAL EOF OVERRIDE 2026-07-10 fix12 */
@media (max-width: 768px) {
  body.mobile-menu-open {
    overflow: hidden !important;
  }

  body.mobile-menu-open header.topbar .mobile-menu-button {
    z-index: 1500 !important;
  }

  body.mobile-menu-open header.topbar .mobile-menu-button span {
    transition: transform .2s ease, opacity .2s ease !important;
  }

  body.mobile-menu-open header.topbar .mobile-menu-button span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }

  body.mobile-menu-open header.topbar .mobile-menu-button span:nth-child(2) {
    opacity: 0 !important;
  }

  body.mobile-menu-open header.topbar .mobile-menu-button span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  body.mobile-menu-open header.topbar nav.nav,
  body.mobile-menu-open header.topbar .main-nav {
    position: fixed !important;
    top: 58px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    z-index: 1300 !important;
    display: block !important;
    max-height: calc(100vh - 58px) !important;
    overflow-y: auto !important;
    background: #fff !important;
  }

  .floating-tools .whatsapp-float,
  .floating-tools > .whatsapp-float,
  .whatsapp-float {
    display: none !important;
  }

  .floating-tools {
    position: fixed !important;
    top: 186px !important;
    right: 14px !important;
    bottom: auto !important;
    z-index: 1100 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .floating-tools .quote-button,
  .floating-tools .inquiry-button,
  .floating-tools .top-button {
    display: flex !important;
  }

  .floating-button {
    width: 58px !important;
    height: 58px !important;
  }

  .mobile-whatsapp-link,
  header.topbar .mobile-whatsapp-link {
    position: fixed !important;
    top: 11px !important;
    right: 10px !important;
    z-index: 1600 !important;
    display: inline-flex !important;
    width: 96px !important;
    height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #1faf5b !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
  }

  #products .product-showcase.product-grid,
  #products .product-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    padding: 0 18px 8px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  #products .product-showcase.product-grid::-webkit-scrollbar,
  #products .product-grid::-webkit-scrollbar {
    display: none !important;
  }

  #products .product-tile,
  #products .product-grid .product-tile,
  #products .product-showcase.product-grid .product-tile {
    flex: 0 0 176px !important;
    width: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;
    scroll-snap-align: start !important;
    overflow: hidden !important;
  }

  #products .product-photo,
  #products .product-grid .product-photo {
    width: 100% !important;
    height: 230px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
  }

  #products .product-tile span,
  #products .product-grid .product-tile span {
    height: 70px !important;
    max-height: 70px !important;
    overflow: hidden !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    -webkit-line-clamp: 3 !important;
  }

  #process .timeline {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #process .timeline article {
    display: block !important;
    min-height: 0 !important;
    border: 1px solid #eee !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  #process .process-card-bg {
    display: grid !important;
    grid-template-columns: 96px 42px 1fr !important;
    grid-template-rows: auto auto !important;
    min-height: 98px !important;
    align-items: center !important;
    gap: 8px 12px !important;
    padding: 10px 12px !important;
    background: #fff !important;
  }

  #process .process-card-bg::before {
    content: "" !important;
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: block !important;
    width: 86px !important;
    height: 70px !important;
    margin: 0 !important;
    background: var(--process-mobile-image, url("/assets/process-inquiry.jpg")) center / cover no-repeat !important;
  }

  #process .process-card-bg span {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    width: 34px !important;
    height: 34px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #6d98bb !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  #process .process-card-bg span::before,
  #process .process-card-bg span::after {
    content: none !important;
    display: none !important;
  }

  #process .process-card-bg h3 {
    grid-column: 3 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    color: #000 !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  #process .process-card-bg p {
    grid-column: 3 !important;
    grid-row: 2 !important;
    display: block !important;
    margin: 0 !important;
    color: #666 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}

/* 2026-07-10 annotated mobile fixes. Keep this final so it wins over older passes. */
@media (max-width: 768px) {
  body {
    padding-bottom: 0 !important;
  }

  header.topbar::after {
    display: none !important;
    content: none !important;
  }

  header.topbar .header-tools {
    grid-column: 2 !important;
    display: flex !important;
    visibility: visible !important;
    justify-content: center !important;
  }

  header.topbar .header-tools > :not(.search-icon) {
    display: none !important;
  }

  header.topbar .search-icon {
    position: relative !important;
    display: block !important;
    width: 34px !important;
    height: 34px !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  header.topbar .search-icon::before {
    content: "" !important;
    position: absolute !important;
    left: 6px !important;
    top: 5px !important;
    width: 16px !important;
    height: 16px !important;
    border: 3px solid #111 !important;
    border-radius: 50% !important;
    background: transparent !important;
  }

  header.topbar .search-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 23px !important;
    top: 24px !important;
    width: 12px !important;
    height: 3px !important;
    background: #111 !important;
    transform: rotate(45deg) !important;
    transform-origin: left center !important;
  }

  header.topbar nav.nav,
  header.topbar .main-nav {
    display: none !important;
  }

  body.mobile-menu-open header.topbar nav.nav,
  body.mobile-menu-open header.topbar .main-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 56px !important;
    z-index: 999 !important;
    display: block !important;
    width: 100vw !important;
    max-height: calc(100vh - 56px) !important;
    overflow-y: auto !important;
    padding: 0 !important;
    background: #fff !important;
    border-top: 1px solid #eee !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .08) !important;
  }

  body.mobile-menu-open header.topbar nav.nav a,
  body.mobile-menu-open header.topbar .main-nav a {
    display: block !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 15px 22px !important;
    border-bottom: 1px solid #eee !important;
    color: #111 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-decoration: none !important;
  }

  .cert-strip {
    overflow: hidden !important;
    padding: 24px 0 56px !important;
  }

  .cert-row {
    display: flex !important;
    width: max-content !important;
    min-width: 100% !important;
    gap: 28px !important;
    align-items: center !important;
    padding: 0 18px !important;
    animation: certMarquee 16s linear infinite !important;
  }

  .cert-logo {
    flex: 0 0 auto !important;
    min-width: 86px !important;
    min-height: 36px !important;
    border: 0 !important;
    background: transparent !important;
  }

  .cert-logo b {
    display: block !important;
    color: #111 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    transform: none !important;
  }

  .cert-logo small {
    display: block !important;
    color: #555 !important;
    font-size: 7px !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  @keyframes certMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-45%); }
  }

  #products .product-tile {
    flex-basis: 46% !important;
    width: 46% !important;
    min-width: 170px !important;
    overflow: hidden !important;
  }

  #products .product-tile span {
    height: 62px !important;
    padding: 9px 8px !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #advantages .section-title h2 {
    font-size: 30px !important;
    line-height: 1.18 !important;
    letter-spacing: 2px !important;
  }

  .mobile-core-grid article {
    min-height: 260px !important;
    padding: 24px 18px !important;
  }

  .mobile-line-icon {
    width: 46px !important;
    height: 46px !important;
    margin: 0 0 22px !important;
    color: transparent !important;
    font-size: 0 !important;
    background: none !important;
  }

  .mobile-line-icon::before {
    content: "" !important;
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    border: 3px solid #111 !important;
    border-radius: 8px !important;
  }

  .mobile-core-grid article:nth-child(2) .mobile-line-icon::before {
    border-radius: 50% !important;
    background: linear-gradient(135deg, transparent 44%, #111 45% 55%, transparent 56%) !important;
  }

  .mobile-core-grid article:nth-child(3) .mobile-line-icon::before {
    border-radius: 50% !important;
  }

  .mobile-core-grid article:nth-child(4) .mobile-line-icon::before {
    transform: rotate(45deg) !important;
    border-radius: 0 !important;
  }

  .mobile-core-grid h3 {
    margin-bottom: 28px !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
    word-break: normal !important;
  }

  .mobile-core-grid ul {
    padding-left: 20px !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  #process .timeline article {
    min-height: 118px !important;
  }

  #process .process-card-bg {
    display: grid !important;
    grid-template-columns: 128px minmax(0, 1fr) !important;
    min-height: 116px !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0 16px 0 0 !important;
    background: #fff !important;
    color: #111 !important;
  }

  #process .process-card-bg::before {
    content: "" !important;
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    width: 112px !important;
    height: 84px !important;
    margin: 16px !important;
    border-radius: 0 !important;
    background: var(--process-mobile-image, url("/assets/process-inquiry.jpg")) center / cover no-repeat !important;
    opacity: 1 !important;
  }

  #process .process-card-bg span,
  #process .process-card-bg h3,
  #process .process-card-bg p {
    grid-column: 2 !important;
    position: static !important;
    z-index: 1 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  #process .process-card-bg span {
    color: #6d98bb !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  #process .process-card-bg span::before {
    content: "0" !important;
  }

  #process .process-card-bg span::after {
    content: " / STEP" !important;
    color: #bfd0dd !important;
    font-size: 13px !important;
  }

  #process .process-card-bg h3 {
    color: #000 !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
  }

  #process .process-card-bg p {
    color: #666 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  .application-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .application-grid span {
    display: grid !important;
    min-height: 68px !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    padding: 0 18px !important;
    border: 1px solid #eadfd2 !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-size: 20px !important;
    font-weight: 800 !important;
  }

  .application-grid span::after {
    grid-column: 2 !important;
    content: ">" !important;
    color: #9b8d80 !important;
    font-size: 26px !important;
  }

  .application-detail {
    display: none !important;
    grid-column: 1 / -1 !important;
    padding: 14px 0 18px !important;
  }

  .application-grid span.active .application-detail {
    display: block !important;
  }

  .application-detail img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    margin-bottom: 12px !important;
  }

  .application-detail p {
    margin: 0 !important;
    color: #666 !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
  }

  .floating-tools {
    right: 14px !important;
    bottom: 24px !important;
    gap: 10px !important;
  }

  .floating-button {
    display: flex !important;
    width: 58px !important;
    height: 58px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #565b67 !important;
    color: #fff !important;
    text-decoration: none !important;
  }

  .floating-tools .top-button {
    display: flex !important;
  }

  .whatsapp-float {
    background: #1fae5b !important;
  }

  .floating-whatsapp-mark {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  .site-footer .social-links a,
  .social-links a {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    overflow: hidden !important;
    border: 2px solid #000 !important;
    border-radius: 50% !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  .social-links a::before {
    color: #000 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  .social-links .facebook::before { content: "f" !important; }
  .social-links .twitter::before { content: "X" !important; }
  .social-links .instagram::before { content: "IG" !important; }
  .social-links .tiktok::before { content: "TT" !important; }
  .social-links .youtube::before { content: "YT" !important; }
  .social-links .linkedin::before { content: "in" !important; }

  .footer-logo,
  .site-footer .footer-logo {
    width: 100% !important;
    max-width: 100% !important;
    margin: 30px 0 0 !important;
    overflow: visible !important;
    font-size: clamp(44px, 16vw, 86px) !important;
    line-height: .92 !important;
    letter-spacing: clamp(4px, 2vw, 12px) !important;
    white-space: nowrap !important;
  }

  header.topbar .search-icon {
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3Ccircle%20cx='13'%20cy='13'%20r='8'%20fill='none'%20stroke='%23111'%20stroke-width='3'/%3E%3Cpath%20d='M19%2019%20L28%2028'%20stroke='%23111'%20stroke-width='3'%20stroke-linecap='round'/%3E%3C/svg%3E") center / 30px 30px no-repeat !important;
  }

  header.topbar .search-icon::before,
  header.topbar .search-icon::after {
    display: none !important;
    content: none !important;
  }
}

/* FINAL pass 2 from marked screenshots. */
@media (max-width: 768px) {
  body > header.topbar,
  header.topbar {
    grid-template-columns: 48px 1fr auto !important;
    min-height: 58px !important;
    padding: 0 12px !important;
  }

  header.topbar .mobile-menu-button {
    grid-column: 1 !important;
    width: 38px !important;
    height: 38px !important;
    justify-self: start !important;
  }

  body.mobile-menu-open header.topbar .mobile-menu-button span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }

  body.mobile-menu-open header.topbar .mobile-menu-button span:nth-child(2) {
    opacity: 0 !important;
  }

  body.mobile-menu-open header.topbar .mobile-menu-button span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  header.topbar .header-tools,
  header.topbar .search-icon {
    display: none !important;
  }

  header.topbar .logo,
  header.topbar .centered-logo {
    grid-column: 2 !important;
    justify-self: center !important;
    transform: none !important;
  }

  header.topbar .logo-text {
    font-size: 24px !important;
    letter-spacing: 7px !important;
  }

  .mobile-whatsapp-link {
    grid-column: 3 !important;
    display: inline-flex !important;
    height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: #1fae5b !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  body.mobile-menu-open header.topbar nav.nav,
  body.mobile-menu-open header.topbar .main-nav {
    top: 58px !important;
    max-height: calc(100vh - 58px) !important;
  }

  body.mobile-menu-open header.topbar nav.nav a,
  body.mobile-menu-open header.topbar .main-nav a {
    min-height: 50px !important;
    padding: 15px 18px !important;
    font-size: 16px !important;
    overflow: visible !important;
  }

  .cert-strip {
    position: relative !important;
    padding: 22px 0 42px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  .cert-row {
    display: flex !important;
    width: max-content !important;
    gap: 34px !important;
    align-items: center !important;
    padding: 0 !important;
    animation: certSmoothLoop 24s linear infinite !important;
    will-change: transform !important;
  }

  .cert-logo {
    flex: 0 0 auto !important;
    min-width: 92px !important;
    height: 34px !important;
  }

  .cert-logo b {
    font-size: 12px !important;
  }

  @keyframes certSmoothLoop {
    from { transform: translateX(0); }
    to { transform: translateX(-33.333%); }
  }

  #products {
    overflow: hidden !important;
  }

  #products .product-showcase.product-grid,
  #products .product-grid {
    display: flex !important;
    gap: 18px !important;
    padding: 0 18px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
  }

  #products .product-tile {
    flex: 0 0 178px !important;
    width: 178px !important;
    min-width: 178px !important;
    max-width: 178px !important;
    border: 1px solid #d8d8d8 !important;
    background: #fff !important;
    overflow: hidden !important;
    scroll-snap-align: start !important;
  }

  #products .product-photo {
    width: 100% !important;
    height: 236px !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  #products .product-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  #products .product-tile span {
    display: -webkit-box !important;
    height: 72px !important;
    padding: 10px 8px !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #222 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
  }

  #products .mobile-card-quote,
  #products .product-tile::after {
    display: none !important;
  }

  .floating-tools {
    right: 12px !important;
    top: 74px !important;
    bottom: auto !important;
    z-index: 1200 !important;
    gap: 10px !important;
  }

  .floating-button {
    width: 56px !important;
    height: 56px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.16) !important;
  }

  .whatsapp-float {
    display: none !important;
  }

  #process .timeline {
    gap: 14px !important;
  }

  #process .timeline article {
    display: block !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #process .process-card-bg {
    display: grid !important;
    grid-template-columns: 110px minmax(0, 1fr) !important;
    min-height: 104px !important;
    gap: 14px !important;
    padding: 12px 14px 12px 0 !important;
    background: #fff !important;
  }

  #process .process-card-bg::before {
    width: 90px !important;
    height: 76px !important;
    margin: 0 0 0 14px !important;
    grid-row: 1 / span 3 !important;
  }

  #process .process-card-bg span {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  #process .process-card-bg h3 {
    font-size: 18px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #process .process-card-bg p {
    display: block !important;
    color: #666 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .social-links {
    gap: 10px !important;
  }

  .site-footer .social-links a,
  .social-links a {
    width: 42px !important;
    height: 42px !important;
    border: 2px solid #111 !important;
    background: #fff !important;
  }

  .social-links .facebook::before { content: "f" !important; font-family: Arial, Helvetica, sans-serif !important; }
  .social-links .twitter::before { content: "X" !important; font-family: Arial, Helvetica, sans-serif !important; }
  .social-links .instagram::before { content: "鈼? !important; font-size: 22px !important; }
  .social-links .tiktok::before { content: "鈾? !important; font-size: 22px !important; }
  .social-links .youtube::before { content: "鈻? !important; font-size: 18px !important; }
  .social-links .linkedin::before { content: "in" !important; font-family: Arial, Helvetica, sans-serif !important; }
}

/* FINAL pass 3: remove broken search and keep WhatsApp in header. */
@media (max-width: 768px) {
  body > header.topbar,
  header.topbar {
    position: sticky !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 88px 0 54px !important;
    overflow: visible !important;
  }

  header.topbar::before,
  header.topbar::after,
  header.topbar .header-tools,
  header.topbar .search-icon {
    display: none !important;
    content: none !important;
  }

  header.topbar .mobile-menu-button {
    position: absolute !important;
    left: 12px !important;
    top: 10px !important;
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
  }

  header.topbar .logo,
  header.topbar .centered-logo {
    position: static !important;
    display: flex !important;
    max-width: 100% !important;
    transform: none !important;
  }

  header.topbar .logo-text {
    font-size: 23px !important;
    letter-spacing: 6px !important;
  }

  header.topbar .mobile-whatsapp-link {
    position: absolute !important;
    right: 8px !important;
    top: 11px !important;
    display: inline-flex !important;
    width: 74px !important;
    height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: #1fae5b !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }

  body.mobile-menu-open header.topbar nav.nav,
  body.mobile-menu-open header.topbar .main-nav {
    top: 58px !important;
  }

  #products .product-tile,
  #products .product-grid .product-tile,
  #products .product-showcase.product-grid .product-tile {
    flex: 0 0 178px !important;
    width: 178px !important;
    min-width: 178px !important;
    max-width: 178px !important;
  }

  #products .product-tile span,
  #products .product-grid .product-tile span {
    height: 72px !important;
    max-height: 72px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }
}

.mobile-core-advantages,
.mobile-service-cards,
.mobile-extra-info,
.mobile-consultation-card,
.mobile-intro-points,
.mobile-category-toolbar {
  display: none;
}

/* Reference mobile rebuild: homepage, category listing and product detail. */
@media (max-width: 768px) {
  body {
    background: #fff !important;
    color: #272727 !important;
    font-family: Arial, Helvetica, sans-serif !important;
  }

  body > header.topbar,
  header.topbar {
    min-height: 56px !important;
    border-bottom: 1px solid #d9d9d9 !important;
    box-shadow: none !important;
  }

  header.topbar .logo-text {
    font-size: 22px !important;
    letter-spacing: 8px !important;
  }

  .clone-section {
    padding: 52px 20px !important;
    background: #fff !important;
  }

  .hero.clone-section {
    padding: 0 !important;
  }

  .hero-inner.single-image-hero::before {
    min-height: 320px !important;
    aspect-ratio: 930 / 525 !important;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .22)),
      url("/assets/home-hero-crochet-dress.jpg") center center / cover no-repeat !important;
  }

  .hero-copy.hero-overlay,
  .hero-copy {
    display: flex !important;
    min-height: 320px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: -320px 0 0 !important;
    padding: 0 24px !important;
    background: transparent !important;
  }

  .hero-copy .crumb,
  .hero-copy .lead,
  .hero-actions .button.dark {
    display: none !important;
  }

  .hero-copy h1,
  .hero h1 {
    max-width: 100% !important;
    margin: 0 0 30px !important;
    color: #fff !important;
    font-size: 21px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .35) !important;
  }

  .hero-actions {
    display: flex !important;
    max-width: none !important;
  }

  .hero-actions .button.light {
    width: 168px !important;
    height: 72px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #111 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
  }

  .cert-strip {
    padding: 36px 18px 74px !important;
    border: 0 !important;
  }

  .cert-row {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .cert-logo {
    min-height: 20px !important;
    border: 0 !important;
    background: transparent !important;
  }

  .cert-logo b {
    font-size: 8px !important;
    transform: scale(.8) !important;
  }

  .intro-block {
    padding-top: 0 !important;
  }

  .intro-block .two-column {
    display: block !important;
  }

  .intro-block .two-column > div:last-child > .kicker,
  .intro-block .two-column > div:last-child > h2,
  .intro-block .two-column > div:last-child > p:not(.mobile-intro-points p) {
    display: none !important;
  }

  .video-frame,
  .intro-video {
    aspect-ratio: 1.32 / 1 !important;
    margin: 0 0 34px !important;
    background:
      linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08)),
      url("/assets/collection-machine.jpg") center center / cover no-repeat !important;
  }

  .mobile-intro-points {
    display: block !important;
    padding: 0 18px !important;
  }

  .mobile-intro-points p {
    margin: 0 0 22px !important;
    color: #262626 !important;
    font-size: 28px !important;
    line-height: 1.48 !important;
    letter-spacing: .8px !important;
  }

  .mobile-intro-points strong {
    color: #111 !important;
    font-weight: 900 !important;
  }

  .quote-section,
  #collections {
    display: none !important;
  }

  #products {
    padding: 74px 0 58px !important;
    background: #fff !important;
  }

  #products .section-title .kicker,
  #products .section-title p {
    display: none !important;
  }

  #products .section-title h2 {
    margin: 0 0 56px !important;
    font-size: 26px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
  }

  .style-tabs {
    gap: 86px !important;
    margin: 0 0 26px !important;
    padding: 0 24px 6px !important;
  }

  .style-tabs button {
    color: #b8b8b8 !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    letter-spacing: 4px !important;
  }

  .style-tabs button.active {
    color: #111 !important;
    border-bottom: 3px solid #111 !important;
  }

  #products .product-showcase.product-grid,
  #products .product-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 24px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding: 0 24px !important;
    scrollbar-width: none !important;
  }

  #products .product-grid::-webkit-scrollbar {
    display: none !important;
  }

  #products .product-tile {
    flex: 0 0 43% !important;
    width: 43% !important;
    border: 1px solid #bdbdbd !important;
    background: #fff !important;
    scroll-snap-align: start !important;
  }

  #products .product-photo {
    aspect-ratio: 1 / 1.35 !important;
    border: 0 !important;
  }

  #products .product-tile span {
    display: -webkit-box !important;
    height: 78px !important;
    padding: 12px 8px !important;
    color: #111 !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
    text-align: center !important;
    -webkit-line-clamp: 2 !important;
  }

  #products .more-button {
    width: 260px !important;
    height: 64px !important;
    margin-top: 38px !important;
    border: 2px solid #111 !important;
    border-radius: 999px !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
  }

  #advantages {
    padding: 56px 18px 70px !important;
    background: #fafafa !important;
  }

  #advantages .section-title h2 {
    font-size: 38px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
  }

  #advantages .section-title p {
    font-size: 24px !important;
    line-height: 1.5 !important;
  }

  .metric-grid {
    gap: 22px !important;
  }

  .metric-grid article {
    min-height: 164px !important;
    padding: 24px 22px !important;
    background: #fff !important;
    border: 1px solid #eee !important;
  }

  .metric-grid strong {
    display: inline !important;
    font-size: 54px !important;
    font-weight: 900 !important;
  }

  .metric-grid span {
    display: inline !important;
    margin-left: 4px !important;
    color: #5d87b0 !important;
    font-size: 22px !important;
    text-transform: uppercase !important;
  }

  .metric-grid p {
    margin-top: 22px !important;
    padding-top: 18px !important;
    border-top: 1px solid #eee !important;
    color: #777 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
  }

  .mobile-core-advantages {
    display: block !important;
    margin-top: 88px !important;
  }

  .mobile-core-advantages h2,
  .mobile-section-heading h2,
  #process .section-title h2 {
    margin: 0 !important;
    color: #050505 !important;
    font-size: 38px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: 3px !important;
    text-align: center !important;
    text-transform: uppercase !important;
  }

  .mobile-blue-line,
  #process .section-title::after,
  .mobile-section-heading::after {
    content: "" !important;
    display: block !important;
    width: 64% !important;
    height: 6px !important;
    margin: 28px auto 52px !important;
    background: #5d88b3 !important;
  }

  .mobile-core-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .mobile-core-grid article {
    min-height: 360px !important;
    padding: 32px 26px !important;
    border: 1px solid #ebebeb !important;
    background: #fff !important;
  }

  .mobile-line-icon {
    display: block !important;
    margin-bottom: 26px !important;
    font-size: 54px !important;
    line-height: 1 !important;
  }

  .mobile-core-grid h3 {
    margin: 0 0 46px !important;
    color: #000 !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
  }

  .mobile-core-grid ul {
    margin: 0 !important;
    padding-left: 24px !important;
    color: #666 !important;
    font-size: 20px !important;
    line-height: 1.55 !important;
  }

  #process {
    padding: 74px 18px !important;
    background: #fff !important;
  }

  #process .section-title .kicker {
    display: none !important;
  }

  #process .timeline {
    gap: 22px !important;
  }

  #process .timeline article {
    border: 1px solid #eee !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #process .process-card-bg {
    display: grid !important;
    min-height: 140px !important;
    grid-template-columns: 178px 1fr !important;
    align-items: center !important;
    padding: 0 28px 0 0 !important;
    background-image: none !important;
    color: #111 !important;
  }

  #process .process-card-bg::before {
    position: static !important;
    grid-row: 1 / span 3 !important;
    display: block !important;
    width: 160px !important;
    height: 106px !important;
    margin: 0 34px 0 0 !important;
    background: var(--process-mobile-image, url("/assets/process-inquiry.jpg")) center / cover no-repeat !important;
  }

  #process .timeline article:nth-child(1) .process-card-bg { --process-mobile-image: url("/assets/process-inquiry.jpg"); }
  #process .timeline article:nth-child(2) .process-card-bg { --process-mobile-image: url("/assets/process-development.jpg"); }
  #process .timeline article:nth-child(3) .process-card-bg { --process-mobile-image: url("/assets/process-production-user.jpg?v=20260715a"); }
  #process .timeline article:nth-child(4) .process-card-bg { --process-mobile-image: url("/assets/process-inspection-cn.png?v=20260715a"); }
  #process .timeline article:nth-child(5) .process-card-bg { --process-mobile-image: url("/assets/process-delivery.jpg"); }
  #process .timeline article:nth-child(6) .process-card-bg { --process-mobile-image: url("/assets/process-after-sales.jpg"); }

  #process .process-card-bg span {
    color: #6a94b9 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
  }

  #process .process-card-bg span::after {
    content: " / STEP" !important;
    color: #bed0de !important;
    font-size: 18px !important;
  }

  #process .process-card-bg h3 {
    color: #000 !important;
    font-size: 26px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
  }

  #process .process-card-bg p {
    color: #666 !important;
    font-size: 22px !important;
  }

  #service {
    display: none !important;
  }

  .mobile-service-cards {
    display: block !important;
    padding: 72px 18px !important;
  }

  .mobile-service-cards article {
    margin-bottom: 24px !important;
    padding: 54px 36px !important;
    background: #fafafa !important;
    border: 1px solid #f0f0f0 !important;
  }

  .mobile-service-cards h3 {
    margin: 0 0 46px !important;
    color: #000 !important;
    font-size: 27px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
  }

  .mobile-service-cards p {
    margin: 0 !important;
    color: #666 !important;
    font-size: 24px !important;
    line-height: 1.72 !important;
  }

  .mobile-extra-info {
    display: block !important;
    padding: 56px 24px 38px !important;
  }

  .mobile-extra-info h2 {
    margin: 0 0 42px !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    text-align: center !important;
    text-transform: uppercase !important;
  }

  .mobile-extra-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 34px 26px !important;
  }

  .mobile-extra-grid a {
    display: flex !important;
    min-height: 178px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    border: 0 !important;
    color: #333 !important;
    font-size: 24px !important;
    text-decoration: none !important;
  }

  .mobile-extra-grid a:first-child {
    border: 2px solid #111 !important;
    border-radius: 10px !important;
  }

  .mobile-extra-grid span {
    color: #111 !important;
    font-size: 60px !important;
    line-height: 1 !important;
  }

  .application-grid {
    display: block !important;
  }

  .application-grid span {
    min-height: 98px !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #eee !important;
    border-radius: 0 !important;
    font-size: 30px !important;
    font-weight: 400 !important;
  }

  .application-grid span::after {
    content: ">" !important;
    font-size: 34px !important;
  }

  .contact.clone-section,
  #contact {
    background: #efeee9 !important;
    color: #111 !important;
  }

  .contact h2,
  .contact .kicker,
  .contact p {
    color: #111 !important;
  }

  .contact-form {
    padding: 44px 24px !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    border: 1px solid #cfcfcf !important;
    border-radius: 0 !important;
    font-size: 18px !important;
  }

  .contact-form button {
    background: #000 !important;
    color: #fff !important;
    border-radius: 4px !important;
  }

  .mobile-consultation-card {
    display: block !important;
    padding: 54px 24px !important;
  }

  .mobile-consultation-card > div {
    padding: 38px 28px !important;
    border: 12px solid rgba(0, 0, 0, .38) !important;
    background: #fff !important;
    text-align: center !important;
  }

  .mobile-consultation-card h2 {
    margin: 0 0 22px !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
  }

  .mobile-consultation-card p {
    margin: 0 0 30px !important;
    color: #333 !important;
    font-size: 22px !important;
    line-height: 1.45 !important;
  }

  .mobile-consultation-card a {
    display: inline-flex !important;
    min-height: 56px !important;
    align-items: center !important;
    padding: 0 34px !important;
    background: #000 !important;
    color: #fff !important;
    font-size: 20px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
  }

  .promise {
    padding: 64px 0 !important;
    background: #fff !important;
  }

  .promise .section-title h2 {
    font-size: 30px !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
  }

  .testimonial-marquee {
    background: #4f6f9f !important;
    color: #fff !important;
  }

  .site-footer {
    padding: 52px 24px 28px !important;
  }

  .footer-columns {
    gap: 30px !important;
  }

  .footer-columns h3 {
    font-size: 24px !important;
    letter-spacing: 1px !important;
  }

  .footer-columns p,
  .footer-columns a {
    font-size: 20px !important;
    line-height: 1.1 !important;
  }

  .footer-email {
    display: inline-block !important;
    color: #000 !important;
    border-bottom: 3px solid #000 !important;
    font-size: 34px !important;
    font-weight: 900 !important;
  }

  .social-links a {
    width: 50px !important;
    height: 50px !important;
    border: 3px solid #000 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
  }

  .footer-logo {
    margin-top: 34px !important;
    font-size: 104px !important;
    letter-spacing: 14px !important;
  }

  .floating-tools {
    right: 28px !important;
    bottom: 78px !important;
    gap: 18px !important;
  }

  .floating-button {
    width: 74px !important;
    height: 74px !important;
    background: #555864 !important;
  }

  /* Category listing page */
  body.category-page main > .clone-section {
    padding: 0 0 40px !important;
  }

  body.category-page .section-title {
    display: none !important;
  }

  .mobile-category-toolbar {
    display: grid !important;
    grid-template-columns: 1fr 1px 1fr !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 74px 24px 34px !important;
  }

  .mobile-category-toolbar button {
    border: 0 !important;
    background: transparent !important;
    color: #333 !important;
    font-size: 24px !important;
  }

  .mobile-category-toolbar span {
    height: 28px !important;
    background: #ddd !important;
  }

  body.category-page .category-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 0 24px 48px !important;
  }

  body.category-page .category-product-card {
    display: block !important;
    padding: 0 0 28px !important;
    color: #606653 !important;
    text-decoration: none !important;
  }

  body.category-page .category-product-card:nth-child(odd) {
    padding-right: 1px !important;
  }

  body.category-page .category-product-card:nth-child(even) {
    padding-left: 1px !important;
  }

  body.category-page .product-photo {
    aspect-ratio: 1 / 1.34 !important;
    border: 1px solid #d9d9d9 !important;
    background: #fff !important;
  }

  body.category-page .product-tile span {
    display: -webkit-box !important;
    height: 70px !important;
    margin: 8px 0 12px !important;
    padding: 0 !important;
    color: #606653 !important;
    font-size: 23px !important;
    line-height: 1.08 !important;
    text-align: left !important;
    -webkit-line-clamp: 2 !important;
  }

  .mobile-card-quote {
    display: flex !important;
    width: 80% !important;
    height: 62px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: #9c9c9c !important;
    color: #fff !important;
    font-size: 24px !important;
    font-weight: 900 !important;
  }

  /* Product detail page */
  body.product-detail-page main {
    padding: 0 !important;
  }

  .product-detail {
    display: block !important;
    padding: 48px 24px 0 !important;
  }

  .product-detail .gallery {
    display: flex !important;
    gap: 24px !important;
    margin: 0 -24px 28px !important;
    padding: 0 24px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
  }

  .product-detail .gallery::-webkit-scrollbar {
    display: none !important;
  }

  .main-product-photo {
    flex: 0 0 49% !important;
    width: 49% !important;
    aspect-ratio: 1 / 1.34 !important;
    border: 0 !important;
    background: #fff !important;
    scroll-snap-align: start !important;
  }

  .thumb-row {
    display: contents !important;
  }

  .thumb-row button {
    position: relative !important;
    flex: 0 0 49% !important;
    width: 49% !important;
    height: auto !important;
    aspect-ratio: 1 / 1.34 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #fff !important;
    scroll-snap-align: start !important;
  }

  .thumb-row button:first-child {
    display: none !important;
  }

  .main-product-photo img,
  .thumb-row img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .product-info {
    padding: 0 !important;
  }

  .product-info h1 {
    margin: 0 0 34px !important;
    color: #333 !important;
    font-size: 28px !important;
    line-height: 1.28 !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
  }

  .icon-list {
    margin: 0 0 42px !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .icon-list li {
    position: relative !important;
    display: flex !important;
    min-height: 70px !important;
    align-items: center !important;
    padding-left: 76px !important;
    color: #3d3d3d !important;
    font-size: 22px !important;
  }

  .icon-list li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    width: 42px !important;
    height: 42px !important;
    border: 4px solid #222 !important;
    border-radius: 50% !important;
  }

  .quote-actions {
    display: grid !important;
    gap: 18px !important;
    margin: 0 0 40px !important;
    padding-top: 36px !important;
    border-top: 1px solid #eee !important;
  }

  .quote-actions a {
    display: flex !important;
    height: 58px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    background: #f4f2df !important;
    color: #222 !important;
    font-size: 24px !important;
    text-decoration: none !important;
  }

  .quote-actions .dark-link {
    background: #000 !important;
    color: #fff !important;
  }

  .product-info details {
    border-top: 1px solid #eee !important;
  }

  .product-info summary {
    display: flex !important;
    min-height: 78px !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #333 !important;
    font-size: 24px !important;
    list-style: none !important;
  }

  .product-info summary::after {
    content: "鈱? !important;
    font-size: 30px !important;
  }

  .product-info details[open] summary::after {
    transform: rotate(180deg) !important;
  }

  .product-info details p {
    margin: 0 0 18px !important;
    color: #666 !important;
    font-size: 18px !important;
    line-height: 1.55 !important;
  }

  .product-info h2,
  .size-chart-block h3 {
    margin: 38px 0 18px !important;
    color: #222 !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

  .spec-table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    color: #333 !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
  }

  .spec-table td,
  .spec-table th {
    padding: 8px 10px !important;
    border: 1px solid #cfcfcf !important;
    overflow-wrap: anywhere !important;
  }

  .recommend-section {
    padding: 72px 0 36px !important;
    background: #fff !important;
  }

  .recommend-section h2 {
    margin: 0 0 56px !important;
    color: #333 !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    letter-spacing: 2px !important;
    text-align: center !important;
    text-transform: uppercase !important;
  }

  .recommend-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 70px 36px !important;
    padding: 0 24px !important;
  }

  .recommend-card {
    color: #333 !important;
    text-decoration: none !important;
  }

  .recommend-photo {
    aspect-ratio: 1 / 1.34 !important;
    background: #fff !important;
  }

  .recommend-card span {
    display: -webkit-box !important;
    height: 82px !important;
    margin-top: 22px !important;
    overflow: hidden !important;
    color: #333 !important;
    font-size: 26px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    -webkit-line-clamp: 2 !important;
  }
}

/* Tight final pass after screenshot QA. */
@media (max-width: 768px) {
  body > header.topbar,
  header.topbar {
    grid-template-columns: 56px 56px 1fr 56px !important;
    min-height: 56px !important;
    padding: 0 18px !important;
  }

  header.topbar .mobile-menu-button {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  header.topbar .header-tools {
    grid-column: 2 !important;
    justify-self: center !important;
    display: flex !important;
    visibility: visible !important;
  }

  header.topbar .search-icon {
    display: block !important;
    visibility: visible !important;
  }

  header.topbar .logo,
  header.topbar .centered-logo {
    grid-column: 3 !important;
    justify-self: center !important;
    transform: translateX(-28px) !important;
  }

  .hero.clone-section,
  section.hero.clone-section {
    background: #000 !important;
  }

  section.hero.clone-section .hero-inner.single-image-hero {
    display: block !important;
    height: 320px !important;
    min-height: 320px !important;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, .22)),
      url("/assets/home-hero-crochet-dress.jpg") center center / cover no-repeat !important;
  }

  section.hero.clone-section .hero-inner.single-image-hero::before,
  section.hero.clone-section .hero-inner.single-image-hero::after {
    display: none !important;
    content: none !important;
  }

  section.hero.clone-section .hero-copy.hero-overlay,
  section.hero.clone-section .hero-copy {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 24px !important;
    background: transparent !important;
  }

  section.hero.clone-section .hero-copy .crumb,
  section.hero.clone-section .hero-copy .kicker,
  section.hero.clone-section .hero-copy .eyebrow,
  section.hero.clone-section .hero-copy .lead,
  section.hero.clone-section .hero-actions .button.dark {
    display: none !important;
  }

  section.hero.clone-section .hero-copy h1 {
    margin: 0 0 30px !important;
    font-size: 21px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
  }

  section.hero.clone-section .hero-actions {
    display: flex !important;
    grid-template-columns: none !important;
  }

  section.hero.clone-section .hero-actions .button.light {
    display: flex !important;
    width: 168px !important;
    height: 72px !important;
    border: 0 !important;
    background: #fff !important;
    color: #111 !important;
  }

  body.category-page .category-product-card::after,
  body.category-page .category-list .product-tile::after {
    display: none !important;
    content: none !important;
  }

  body.category-page .mobile-card-quote {
    width: 86% !important;
    height: 50px !important;
    margin: 10px auto 0 !important;
    font-size: 16px !important;
  }

  body.category-page .category-product-card {
    overflow: hidden !important;
  }

  body.category-page .product-tile span {
    height: 58px !important;
    font-size: 23px !important;
  }

  body.product-detail-page .product-detail .gallery {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 24px !important;
    margin: 0 -24px 28px !important;
    padding: 0 24px !important;
    overflow-x: auto !important;
  }

  body.product-detail-page .product-detail .main-product-photo,
  body.product-detail-page .product-detail .thumb-row button {
    flex: 0 0 calc((100vw - 72px) / 2) !important;
    width: calc((100vw - 72px) / 2) !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 1 / 1.34 !important;
    min-height: 0 !important;
  }

  body.product-detail-page .product-detail .thumb-row {
    display: contents !important;
  }

  body.product-detail-page .product-detail .thumb-row button:first-child {
    display: none !important;
  }

  body.product-detail-page .product-info h1 {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 768px) {
  body > header.topbar::after,
  header.topbar::after {
    content: "\2315" !important;
    display: block !important;
    grid-column: 2 !important;
    justify-self: center !important;
    width: 34px !important;
    height: 34px !important;
    color: #111 !important;
    background: transparent !important;
    font-size: 34px !important;
    line-height: 34px !important;
    text-align: center !important;
  }

  header.topbar .header-tools {
    display: none !important;
  }

  section.hero.clone-section,
  .hero.clone-section {
    position: relative !important;
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: #000 !important;
    background-image: none !important;
  }

  section.hero.clone-section .hero-inner.single-image-hero {
    position: absolute !important;
    inset: 0 !important;
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
    overflow: hidden !important;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, .2)),
      url("/assets/home-hero-crochet-dress.jpg") center center / cover no-repeat !important;
  }

  body.category-page .mobile-category-toolbar button {
    overflow: visible !important;
    font-size: 22px !important;
    white-space: nowrap !important;
  }

  body.product-detail-page .product-detail .main-product-photo,
  body.product-detail-page .product-detail .thumb-row button {
    flex-basis: calc((100vw - 72px) / 2) !important;
    min-width: calc((100vw - 72px) / 2) !important;
  }

  body.product-detail-page .product-info h1 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    font-size: 26px !important;
    line-height: 1.28 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* 2026-07-10 mobile rebuild: this layer intentionally affects phones only. */
@media (max-width: 768px) {
  :root {
    --mobile-ink: #141414;
    --mobile-muted: #66615a;
    --mobile-line: #e8e2da;
    --mobile-warm: #f7f2ea;
    --mobile-accent: #8a5f3f;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background: #fff !important;
    color: var(--mobile-ink) !important;
    font-family: Arial, Helvetica, sans-serif !important;
  }

  body {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  img {
    max-width: 100% !important;
  }

  body > header.topbar,
  header.topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    align-items: center !important;
    min-height: 62px !important;
    padding: 0 14px !important;
    background: rgba(255, 255, 255, .97) !important;
    border-bottom: 1px solid rgba(20, 20, 20, .1) !important;
    box-shadow: 0 8px 22px rgba(20, 20, 20, .06) !important;
  }

  header.topbar::before,
  header.topbar::after {
    display: none !important;
    content: none !important;
  }

  header.topbar .mobile-menu-button {
    grid-column: 1 !important;
    display: inline-flex !important;
    width: 38px !important;
    height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  header.topbar .mobile-menu-button span {
    display: block !important;
    width: 25px !important;
    height: 2px !important;
    background: #111 !important;
  }

  header.topbar .logo,
  header.topbar .centered-logo {
    grid-column: 2 !important;
    justify-self: center !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
  }

  header.topbar .logo-mark,
  header.topbar .topbar-button,
  header.topbar .account-icon,
  header.topbar .language-select,
  header.topbar nav,
  header.topbar .nav,
  header.topbar .main-nav {
    display: none !important;
  }

  header.topbar .logo-text {
    display: block !important;
    color: #111 !important;
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 7px !important;
    white-space: nowrap !important;
  }

  header.topbar .header-tools {
    grid-column: 3 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  header.topbar .search-icon {
    position: relative !important;
    display: block !important;
    width: 36px !important;
    height: 36px !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  header.topbar .search-icon::before {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    top: 7px !important;
    width: 14px !important;
    height: 14px !important;
    border: 2px solid #111 !important;
    border-radius: 50% !important;
  }

  header.topbar .search-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 22px !important;
    top: 23px !important;
    width: 10px !important;
    height: 2px !important;
    background: #111 !important;
    transform: rotate(45deg) !important;
    transform-origin: left center !important;
  }

  main,
  section,
  .clone-section {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .clone-section,
  .intro-block,
  .quote-section,
  .visit-section,
  .faq-wrap,
  .promise {
    padding: 42px 18px !important;
    margin: 0 !important;
  }

  .hero.clone-section,
  section.hero.clone-section {
    padding: 0 !important;
    background: #090806 !important;
  }

  .hero-inner.single-image-hero {
    position: relative !important;
    display: flex !important;
    min-height: 0 !important;
    height: auto !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    background: #090806 !important;
    overflow: hidden !important;
  }

  .hero-inner.single-image-hero::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    min-height: 345px !important;
    aspect-ratio: 390 / 420 !important;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .7)),
      url("/assets/home-hero-crochet-dress.jpg") center top / cover no-repeat !important;
  }

  .hero-inner.single-image-hero::after {
    display: none !important;
    content: none !important;
  }

  .hero-copy.hero-overlay,
  .hero-copy {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 22px 18px 30px !important;
    margin: -120px 0 0 !important;
    background: linear-gradient(180deg, rgba(9, 8, 6, 0), #090806 28%, #090806 100%) !important;
    color: #fff !important;
    text-align: center !important;
  }

  .hero-copy .crumb,
  .hero-copy .kicker,
  .hero-copy .eyebrow {
    display: block !important;
    margin: 0 0 10px !important;
    color: rgba(255, 255, 255, .78) !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
  }

  .hero-copy h1,
  .hero h1 {
    max-width: 350px !important;
    margin: 0 auto 12px !important;
    color: #fff !important;
    font-size: 32px !important;
    line-height: 1.02 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  .hero-copy .lead,
  .hero .lead {
    max-width: 340px !important;
    margin: 0 auto 18px !important;
    color: rgba(255, 255, 255, .9) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    max-width: 340px !important;
    margin: 0 auto !important;
  }

  .hero-actions .button {
    display: flex !important;
    min-width: 0 !important;
    min-height: 46px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
    border-radius: 3px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
    white-space: normal !important;
  }

  .hero-actions .button.dark {
    background: #fff !important;
    color: #111 !important;
    border: 1px solid #fff !important;
  }

  .hero-actions .button.light {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .75) !important;
  }

  .cert-strip {
    padding: 16px 12px !important;
    background: #fff !important;
    border-bottom: 1px solid var(--mobile-line) !important;
  }

  .cert-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px 8px !important;
    padding: 0 !important;
  }

  .cert-logo {
    display: flex !important;
    min-height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
    border: 1px solid #eee7de !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .cert-logo b {
    color: #111 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  .cert-logo small {
    display: none !important;
  }

  .two-column,
  .two-column.reverse {
    display: block !important;
  }

  .video-frame,
  .image-panel {
    display: flex !important;
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 24px !important;
    overflow: hidden !important;
    background: repeating-linear-gradient(135deg, #6d655c 0 12px, #5d554d 12px 24px) !important;
    color: #fff !important;
  }

  .video-frame strong,
  .video-frame small {
    display: none !important;
  }

  .video-frame .play,
  .play {
    display: inline-flex !important;
    width: 62px !important;
    height: 62px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  .video-frame .play::before,
  .play::before {
    content: "" !important;
    width: 0 !important;
    height: 0 !important;
    margin-left: 5px !important;
    border-top: 13px solid transparent !important;
    border-bottom: 13px solid transparent !important;
    border-left: 20px solid #071b34 !important;
  }

  .kicker,
  .section-title .kicker {
    margin: 0 0 9px !important;
    color: var(--mobile-accent) !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
  }

  .section-title,
  .section-title.center {
    max-width: 100% !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .section-title.center {
    text-align: center !important;
  }

  .section-title h2,
  .section-title h1,
  .two-column h2,
  .contact h2 {
    margin: 0 0 12px !important;
    color: var(--mobile-ink) !important;
    font-size: 28px !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  .section-title p,
  .two-column p,
  .contact p,
  .service-list li {
    color: var(--mobile-muted) !important;
    font-size: 15px !important;
    line-height: 1.68 !important;
  }

  .quote-section {
    background: var(--mobile-warm) !important;
  }

  .quote-section blockquote {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .quote-section blockquote p {
    margin: 0 !important;
    color: #201a15 !important;
    font-size: 21px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
  }

  .quote-section footer {
    margin-top: 16px !important;
    color: var(--mobile-muted) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
  }

  #collections {
    scroll-margin-top: 76px !important;
    padding: 44px 14px !important;
    background: #fff !important;
  }

  #collections .category-grid.four {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #collections .placeholder-card,
  #collections .overlay-card {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #eee7de !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: 0 10px 24px rgba(35, 26, 16, .06) !important;
  }

  #collections .collection-card,
  #collections .image-placeholder {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    background: #fff !important;
  }

  #collections .collection-media {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1.16 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    background: #f5f1ea !important;
  }

  #collections .collection-media img,
  #collections .collection-card img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  #collections .collection-copy {
    position: static !important;
    flex: 1 1 auto !important;
    min-height: 94px !important;
    padding: 12px 10px 14px !important;
    background: #fff !important;
    color: var(--mobile-ink) !important;
  }

  #collections .collection-copy h3 {
    margin: 0 0 5px !important;
    color: var(--mobile-ink) !important;
    font-size: 17px !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  #collections .collection-copy p {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--mobile-muted) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  #products {
    padding: 46px 0 !important;
    background: #fbf8f3 !important;
  }

  #products .section-title {
    padding: 0 18px !important;
    text-align: center !important;
  }

  .style-tabs {
    display: flex !important;
    gap: 28px !important;
    margin: 0 0 20px !important;
    padding: 0 18px 10px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
  }

  .style-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .style-tabs button {
    flex: 0 0 auto !important;
    padding: 0 0 7px !important;
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    background: transparent !important;
    color: #867c72 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase !important;
  }

  .style-tabs button.active {
    color: #111 !important;
    border-bottom-color: #111 !important;
  }

  #products .product-showcase.product-grid,
  #products .product-grid,
  .product-grid,
  .category-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 10px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .product-tile,
  .product-grid .product-tile {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #4f4a42 !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  .product-photo,
  .product-grid .product-photo {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border: 1px solid #ece5dc !important;
    background: #fff !important;
  }

  .product-photo img,
  .product-grid .product-photo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .product-tile span,
  .product-grid .product-tile span {
    display: -webkit-box !important;
    height: 42px !important;
    margin: 8px 0 0 !important;
    padding: 0 2px !important;
    overflow: hidden !important;
    color: #5f5a50 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    text-align: left !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  .more-button {
    display: flex !important;
    width: min(220px, calc(100% - 36px)) !important;
    min-height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 26px auto 0 !important;
    padding: 0 18px !important;
    border: 1px solid #111 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #111 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
  }

  #advantages {
    padding: 46px 18px !important;
    background: #fff !important;
  }

  .metric-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .metric-grid article {
    min-height: 118px !important;
    padding: 16px 12px !important;
    border: 1px solid #eee7de !important;
    background: #fbf8f3 !important;
  }

  .metric-grid strong {
    display: block !important;
    color: #111 !important;
    font-size: 30px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  .metric-grid span {
    display: block !important;
    margin-top: 5px !important;
    color: var(--mobile-accent) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  .metric-grid p {
    margin: 12px 0 0 !important;
    color: var(--mobile-muted) !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  #process {
    padding: 46px 18px !important;
    background: #fbf8f3 !important;
  }

  #process .timeline {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #process .timeline article {
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid #eee2d6 !important;
    border-radius: 6px !important;
    background: #fff !important;
  }

  #process .process-card-bg {
    position: relative !important;
    display: grid !important;
    min-height: 118px !important;
    width: 100% !important;
    height: auto !important;
    grid-template-columns: 54px 1fr !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 18px 16px !important;
    background-size: cover !important;
    background-position: center !important;
    color: #fff !important;
  }

  #process .process-card-bg::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, rgba(0, 0, 0, .68), rgba(0, 0, 0, .36)) !important;
  }

  #process .process-card-bg span,
  #process .process-card-bg h3,
  #process .process-card-bg p {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 !important;
  }

  #process .process-card-bg span {
    grid-row: 1 / span 2 !important;
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  #process .process-card-bg h3 {
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
  }

  #process .process-card-bg p {
    color: rgba(255, 255, 255, .9) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  #service,
  .visit-section,
  .faq-wrap {
    background: #fff !important;
  }

  .service-list {
    margin: 18px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .service-list li {
    padding: 13px 0 !important;
    border-bottom: 1px solid var(--mobile-line) !important;
  }

  .visit-grid,
  .application-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 !important;
  }

  .visit-grid .image-panel {
    margin: 0 !important;
  }

  .application-grid span {
    display: flex !important;
    min-height: 52px !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 14px !important;
    border: 1px solid var(--mobile-line) !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #2b2722 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  .application-grid span::after {
    content: ">" !important;
    color: #9b8b7d !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  .faq-list {
    display: grid !important;
    gap: 10px !important;
  }

  .faq-list details {
    padding: 0 !important;
    border: 1px solid var(--mobile-line) !important;
    border-radius: 6px !important;
    background: #fff !important;
  }

  .faq-list summary {
    padding: 16px 14px !important;
    color: #111 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    list-style: none !important;
  }

  .faq-list p {
    margin: 0 !important;
    padding: 0 14px 16px !important;
    color: var(--mobile-muted) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .promise {
    background: var(--mobile-warm) !important;
  }

  .testimonial-marquee,
  .brand-marquee {
    margin-left: -18px !important;
    margin-right: -18px !important;
  }

  #contact,
  .contact.clone-section,
  .contact {
    display: block !important;
    padding: 46px 18px !important;
    background: #17120e !important;
    color: #fff !important;
  }

  .contact h2,
  .contact .kicker,
  .contact p {
    color: #fff !important;
  }

  .contact p {
    opacity: .86 !important;
  }

  .contact-form {
    display: grid !important;
    gap: 10px !important;
    margin: 24px 0 0 !important;
    padding: 16px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .06) !important;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    width: 100% !important;
    min-height: 46px !important;
    padding: 11px 12px !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #111 !important;
    font-size: 15px !important;
  }

  .contact-form textarea {
    min-height: 132px !important;
    resize: vertical !important;
  }

  .contact-form button {
    min-height: 48px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #111 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }

  .site-footer {
    padding: 36px 22px 28px !important;
    background: #fff !important;
    color: #111 !important;
  }

  .footer-columns {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .footer-columns section {
    margin: 0 !important;
  }

  .footer-columns h3 {
    margin: 0 0 12px !important;
    color: #111 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
  }

  .footer-columns p,
  .footer-columns a {
    display: block !important;
    color: #5e5a52 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    text-decoration: none !important;
  }

  .social-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 12px 0 0 !important;
  }

  .social-links a {
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #111 !important;
    border-radius: 50% !important;
    color: #111 !important;
  }

  .footer-logo,
  .footer-brand,
  .footer-logo-giant {
    display: block !important;
    max-width: 100% !important;
    margin-top: 28px !important;
    overflow: hidden !important;
    color: #111 !important;
    font-size: 52px !important;
    line-height: .9 !important;
    font-weight: 900 !important;
    letter-spacing: 7px !important;
    white-space: nowrap !important;
  }
}

/* 2026-07-10 mobile storefront reset v9 */
@media (max-width: 768px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: #fff !important;
    color: #222 !important;
  }

  body {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    height: 58px !important;
    padding: 0 16px !important;
    display: grid !important;
    grid-template-columns: 42px 42px 1fr !important;
    align-items: center !important;
    background: #fff !important;
    border-bottom: 1px solid #e5e5e5 !important;
  }

  .topbar::before {
    content: "鈽? !important;
    grid-column: 1 !important;
    justify-self: start !important;
    font-size: 28px !important;
    line-height: 1 !important;
    color: #222 !important;
  }

  .topbar::after {
    content: "鈱? !important;
    grid-column: 2 !important;
    justify-self: start !important;
    font-size: 28px !important;
    line-height: 1 !important;
    color: #222 !important;
  }

  .topbar .back-link,
  .topbar .nav,
  .topbar nav,
  .topbar .header-tools {
    display: none !important;
  }

  .topbar .logo,
  .topbar .centered-logo {
    display: block !important;
    grid-column: 3 !important;
    justify-self: center !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    color: #111 !important;
    text-decoration: none !important;
  }

  .topbar .logo-mark {
    display: none !important;
  }

  .topbar .logo-text {
    display: block !important;
    font-size: 22px !important;
    letter-spacing: 7px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  .clone-section {
    padding: 34px 14px !important;
  }

  .section-title.center h2,
  .section-title h2 {
    font-size: 25px !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  .section-title.center p,
  .section-title p {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .hero.clone-section {
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    background: #000 !important;
  }

  .hero-inner.single-image-hero {
    position: relative !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    background: #000 !important;
  }

  .hero-inner.single-image-hero::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1.22 / 1 !important;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .28)), url("assets/home-hero-crochet-dress.jpg") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center center !important;
    background-color: #080808 !important;
  }

  .hero-copy.hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    text-align: center !important;
    padding: 0 22px 22px !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, .72) 100%) !important;
    color: #fff !important;
  }

  .hero-copy .eyebrow {
    font-size: 10px !important;
    margin: 0 0 6px !important;
    color: #fff !important;
    letter-spacing: .02em !important;
  }

  .hero h1 {
    max-width: 330px !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 18px !important;
    line-height: 1.12 !important;
  }

  .hero .lead {
    max-width: 310px !important;
    margin: 8px auto 12px !important;
    color: #fff !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
  }

  .hero-actions {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .hero-actions .button {
    min-width: 118px !important;
    padding: 11px 12px !important;
    font-size: 13px !important;
    border-radius: 0 !important;
  }

  .hero-actions .button.primary {
    display: none !important;
  }

  .hero-actions .button.light {
    background: #fff !important;
    color: #111 !important;
    border: 0 !important;
  }

  .cert-strip.clone-section {
    padding: 14px 8px !important;
    background: #fff !important;
  }

  .cert-row {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px !important;
    align-items: center !important;
  }

  .cert-logo {
    min-width: 0 !important;
    height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #111 !important;
    text-align: center !important;
  }

  .cert-logo b {
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  .cert-logo small {
    display: block !important;
    margin-top: 2px !important;
    color: #333 !important;
    font-size: 5px !important;
    line-height: 1.05 !important;
  }

  .intro-block {
    padding: 28px 14px !important;
  }

  .two-column,
  .two-column.reverse {
    display: block !important;
  }

  .intro-video,
  .video-frame {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1.28 / 1 !important;
    margin: 0 auto 18px !important;
    background-size: contain !important;
    background-position: center !important;
  }

  .intro-block .text-panel {
    padding: 0 !important;
    text-align: left !important;
  }

  .intro-block .kicker {
    font-size: 13px !important;
  }

  .intro-block h2 {
    font-size: 23px !important;
    line-height: 1.18 !important;
    text-align: left !important;
  }

  .intro-block p,
  .intro-block blockquote {
    font-size: 14px !important;
    line-height: 1.55 !important;
    text-align: left !important;
  }

  #collections .category-grid.four {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    padding: 0 !important;
  }

  .placeholder-card.overlay-card {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #111 !important;
    border-radius: 2px !important;
  }

  .collection-card {
    display: block !important;
    height: auto !important;
    background: #111 !important;
  }

  .collection-media {
    height: 170px !important;
    overflow: hidden !important;
    background: #111 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .collection-media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .collection-copy {
    min-height: 134px !important;
    padding: 14px 12px !important;
    background: linear-gradient(180deg, #1e272c, #02080b) !important;
    color: #fff !important;
  }

  .collection-copy h3 {
    margin: 0 0 9px !important;
    color: #fff !important;
    font-size: 18px !important;
    line-height: 1.08 !important;
  }

  .collection-copy p {
    margin: 0 !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  #products {
    padding: 34px 0 !important;
    background: #fff !important;
  }

  .product-tabs {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 28px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding: 0 18px 12px !important;
  }

  .product-tabs button {
    padding: 0 0 6px !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
  }

  .product-showcase.product-grid {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding: 0 18px !important;
  }

  .product-showcase .product-tile {
    flex: 0 0 44% !important;
    scroll-snap-align: start !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
    color: #222 !important;
    text-decoration: none !important;
  }

  .product-showcase .product-photo {
    aspect-ratio: 1 / 1.28 !important;
    overflow: hidden !important;
    background: #f7f7f7 !important;
  }

  .product-showcase .product-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .product-showcase .product-tile span {
    display: block !important;
    min-height: 48px !important;
    padding: 8px 6px 10px !important;
    overflow: hidden !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  .more-button-wrap {
    padding: 18px 0 0 !important;
    text-align: center !important;
  }

  .more-button-wrap .button {
    padding: 10px 26px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
  }

  .metric-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  .metric-card {
    min-height: 118px !important;
    padding: 18px 14px !important;
  }

  .metric-card strong {
    font-size: 28px !important;
    line-height: 1 !important;
  }

  .metric-card span {
    font-size: 12px !important;
  }

  .metric-card small {
    font-size: 11px !important;
  }

  .advantage-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .advantage-card {
    min-height: 180px !important;
    padding: 18px 14px !important;
  }

  .advantage-card h3 {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  .advantage-card li {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .timeline {
    display: block !important;
  }

  .timeline article {
    display: grid !important;
    grid-template-columns: 92px 1fr !important;
    gap: 14px !important;
    align-items: center !important;
    min-height: 92px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 1px solid #e5e5e5 !important;
    background: #fff !important;
  }

  .timeline article::before {
    display: none !important;
  }

  .timeline .process-card-bg {
    position: relative !important;
    min-height: 0 !important;
    height: 92px !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .timeline article h3 {
    margin: 0 0 4px !important;
    color: #111 !important;
    font-size: 18px !important;
  }

  .timeline article p {
    margin: 0 !important;
    color: #555 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  .timeline article > *:not(.process-card-bg) {
    padding: 0 !important;
  }

  .service-grid,
  .value-grid,
  .service-list {
    display: block !important;
  }

  .service-card,
  .value-card {
    margin: 0 0 12px !important;
    padding: 20px 18px !important;
  }

  .service-card h3,
  .value-card h3 {
    font-size: 18px !important;
  }

  .service-card p,
  .value-card p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .promise {
    padding: 34px 14px !important;
  }

  .promise h2 {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

  .promise p,
  .promise blockquote {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .site-footer {
    padding: 28px 20px !important;
    background: #fff !important;
    color: #111 !important;
  }

  .footer-columns {
    display: block !important;
  }

  .footer-columns section {
    margin: 0 0 18px !important;
    padding: 0 0 18px !important;
    border-bottom: 1px solid #eee !important;
  }

  .footer-columns h3 {
    font-size: 18px !important;
    letter-spacing: .02em !important;
  }

  .footer-columns p,
  .footer-columns a {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .footer-logo {
    display: block !important;
    margin-top: 16px !important;
    font-size: 56px !important;
    line-height: .9 !important;
    letter-spacing: 8px !important;
    word-break: break-all !important;
  }

  .social-links {
    gap: 10px !important;
  }

  .social-links a {
    position: relative !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 0 !important;
  }

  .social-links a::before {
    color: #111 !important;
    font-size: 15px !important;
  }

  .social-links a:nth-child(1)::before { content: "f" !important; }
  .social-links a:nth-child(2)::before { content: "X" !important; }
  .social-links a:nth-child(3)::before { content: "IG" !important; }
  .social-links a:nth-child(4)::before { content: "鈾? !important; }
  .social-links a:nth-child(5)::before { content: "鈻? !important; }
  .social-links a:nth-child(6)::before { content: "in" !important; }

  .floating-tools {
    position: fixed !important;
    right: 14px !important;
    bottom: 76px !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .floating-button {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: #565b65 !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18) !important;
  }

  .floating-button svg {
    width: 24px !important;
    height: 24px !important;
    stroke: #fff !important;
  }

  .floating-button.top-button {
    display: none !important;
  }

  body.category-page main,
  .category-page main {
    padding: 18px 8px !important;
  }

  .category-header {
    padding: 18px 8px !important;
    text-align: center !important;
  }

  .category-header h1 {
    font-size: 22px !important;
  }

  .category-toolbar {
    display: flex !important;
    justify-content: center !important;
    gap: 26px !important;
    padding: 16px 0 !important;
    font-size: 14px !important;
  }

  .category-list,
  .category-page .product-showcase {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 2px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .category-product-card,
  .product-tile.category-product-card,
  .category-list .product-tile {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: #fff !important;
    color: #222 !important;
    text-decoration: none !important;
  }

  .category-product-card .product-photo,
  .category-list .product-photo {
    width: 100% !important;
    aspect-ratio: 1 / 1.18 !important;
    background: #f7f7f7 !important;
    overflow: hidden !important;
  }

  .category-product-card .product-photo img,
  .category-list .product-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .category-product-card span,
  .category-list .product-tile span {
    display: -webkit-box !important;
    min-height: 34px !important;
    padding: 6px 4px !important;
    overflow: hidden !important;
    color: #555 !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  .mobile-card-quote {
    display: block !important;
    width: 80% !important;
    margin: 8px auto 14px !important;
    padding: 10px 6px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: #aaa !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  body.product-detail-page .product-detail,
  .product-detail-page {
    display: block !important;
  }

  .product-detail {
    padding: 0 14px !important;
  }

  .product-gallery {
    margin: 22px -14px 18px !important;
    overflow: hidden !important;
  }

  .main-product-image {
    display: flex !important;
    overflow-x: auto !important;
    gap: 12px !important;
    padding: 0 14px !important;
    scroll-snap-type: x mandatory !important;
  }

  #mainProductPhoto,
  .main-product-image img {
    flex: 0 0 76% !important;
    width: 76% !important;
    height: auto !important;
    aspect-ratio: 1 / 1.18 !important;
    object-fit: contain !important;
    background: #f7f7f7 !important;
    scroll-snap-align: center !important;
  }

  .thumb-row {
    display: none !important;
  }

  .product-info h1 {
    margin: 18px 0 !important;
    font-size: 22px !important;
    line-height: 1.22 !important;
    font-weight: 500 !important;
    letter-spacing: .02em !important;
  }

  .product-benefits li {
    margin: 10px 0 !important;
    font-size: 15px !important;
  }

  .quote-actions {
    display: block !important;
    margin: 18px 0 !important;
  }

  .quote-actions .button {
    width: 100% !important;
    margin: 10px 0 !important;
    padding: 14px !important;
    border-radius: 3px !important;
    font-size: 16px !important;
  }

  .accordion-list details {
    padding: 14px 0 !important;
    border-top: 1px solid #e8e8e8 !important;
  }

  .accordion-list summary {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 17px !important;
    list-style: none !important;
  }

  .accordion-list summary::after {
    content: "鈱? !important;
    font-size: 18px !important;
  }

  .spec-table,
  .size-spec-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
  }

  .spec-table td,
  .size-spec-table td,
  .size-spec-table th {
    padding: 7px 8px !important;
    border: 1px solid #ddd !important;
  }

  .recommend-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding: 0 !important;
  }

  .recommend-card {
    display: block !important;
    color: #222 !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  .recommend-photo {
    aspect-ratio: 1 / 1.18 !important;
    background: #f7f7f7 !important;
  }

  .recommend-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .recommend-card span {
    display: block !important;
    padding: 8px 4px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .site-modal .modal-panel {
    width: calc(100vw - 28px) !important;
    max-height: 82vh !important;
    overflow: auto !important;
    padding: 22px !important;
  }
}

/* 2026-07-10 phone polish pass: compact benchmark-style mobile pages. */
@media (max-width: 768px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: #fff !important;
  }

  body {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;
    display: grid !important;
    grid-template-columns: 36px 36px 1fr 36px !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 54px !important;
    padding: 8px 14px !important;
    background: #fff !important;
    border-bottom: 1px solid #e5e5e5 !important;
  }

  .topbar .back-link,
  .topbar .nav,
  .topbar .header-tools,
  .topbar .logo-mark {
    display: none !important;
  }

  .topbar::before {
    content: "鈽? !important;
    grid-column: 1 !important;
    color: #111 !important;
    font-size: 28px !important;
    line-height: 1 !important;
  }

  .topbar::after {
    content: "鈱? !important;
    grid-column: 2 !important;
    color: #111 !important;
    font-size: 25px !important;
    line-height: 1 !important;
  }

  .topbar .logo,
  .topbar .centered-logo {
    grid-column: 3 !important;
    justify-self: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    color: #111 !important;
    text-decoration: none !important;
  }

  .topbar .logo-text {
    display: block !important;
    color: #111 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 7px !important;
    white-space: nowrap !important;
  }

  .clone-section,
  .pale,
  .promise,
  .contact,
  .about-page section {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .hero,
  .hero.clone-section {
    padding: 0 !important;
    background: #000 !important;
  }

  .hero-inner.single-image-hero {
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    min-height: 330px !important;
    height: 330px !important;
    padding: 0 18px 24px !important;
    background-image:
      linear-gradient(180deg, rgba(0,0,0,0) 18%, rgba(0,0,0,.22) 52%, rgba(0,0,0,.92) 100%),
      url("assets/home-hero-crochet-dress.jpg") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    color: #fff !important;
  }

  .hero-copy.hero-overlay {
    position: static !important;
    width: 100% !important;
    max-width: 350px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    color: #fff !important;
    transform: none !important;
  }

  .hero .kicker,
  .hero-copy .kicker {
    margin: 0 0 6px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    letter-spacing: .02em !important;
    color: #fff !important;
  }

  .hero h1 {
    max-width: 100% !important;
    margin: 0 auto 10px !important;
    color: #fff !important;
    font-size: 23px !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .hero .lead {
    max-width: 330px !important;
    margin: 0 auto 15px !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .hero-actions {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .hero-actions .button:first-child {
    display: none !important;
  }

  .button,
  button,
  .topbar-button {
    min-height: 0 !important;
  }

  .hero-actions .button {
    width: auto !important;
    min-width: 128px !important;
    padding: 13px 18px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    border-radius: 0 !important;
  }

  .cert-strip {
    padding: 14px 14px !important;
    background: #fff !important;
  }

  .cert-row {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .cert-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #111 !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  .cert-logo b {
    display: block !important;
    max-width: 100% !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    transform: scale(.92) !important;
  }

  .cert-logo small {
    display: none !important;
  }

  .intro-block {
    padding: 24px 18px !important;
  }

  .intro-block .two-column,
  .intro-block .two-column.reverse {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    width: 100% !important;
  }

  .intro-video,
  .video-frame {
    width: 100% !important;
    max-width: 100% !important;
    height: 230px !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
  }

  .intro-block .kicker {
    margin: 0 0 8px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  .intro-block h2 {
    max-width: 100% !important;
    margin: 0 0 12px !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .intro-block p,
  .intro-block blockquote {
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere !important;
  }

  .quote-band {
    padding: 34px 20px !important;
  }

  .quote-band blockquote {
    max-width: 100% !important;
    font-size: 22px !important;
    line-height: 1.28 !important;
    letter-spacing: 0 !important;
  }

  .section-title {
    max-width: 100% !important;
    padding: 0 18px !important;
  }

  .section-title .kicker {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .section-title h1,
  .section-title h2 {
    max-width: 100% !important;
    font-size: 25px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .section-title p {
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .category-grid.four {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
    padding: 0 12px !important;
  }

  .overlay-card,
  .placeholder-card {
    min-width: 0 !important;
    height: auto !important;
    border-radius: 2px !important;
    overflow: hidden !important;
  }

  .collection-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    background: #11181d !important;
  }

  .collection-media {
    width: 100% !important;
    height: 150px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #11181d !important;
  }

  .collection-media img,
  .collection-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }

  .collection-card .card-copy {
    position: static !important;
    min-height: 128px !important;
    padding: 18px 14px !important;
    background: linear-gradient(180deg, #1c2429 0%, #071014 100%) !important;
    color: #fff !important;
  }

  .collection-card h3 {
    margin: 0 0 8px !important;
    font-size: 20px !important;
    line-height: 1.05 !important;
  }

  .collection-card p {
    margin: 0 !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
  }

  #products {
    padding: 42px 0 !important;
  }

  .style-tabs {
    display: flex !important;
    gap: 22px !important;
    width: 100% !important;
    padding: 0 16px 16px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
  }

  .style-tabs button {
    flex: 0 0 auto !important;
    padding: 0 0 6px !important;
    border: 0 !important;
    background: transparent !important;
    color: #999 !important;
    font-size: 13px !important;
    letter-spacing: .08em !important;
  }

  .style-tabs button.active {
    color: #111 !important;
    border-bottom: 1px solid #111 !important;
  }

  .product-showcase,
  .product-grid,
  .category-list,
  .recommend-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 10px !important;
    overflow: hidden !important;
  }

  .product-tile,
  .recommend-card {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: #fff !important;
    color: #222 !important;
    text-decoration: none !important;
    overflow: hidden !important;
  }

  .product-photo,
  .recommend-photo {
    width: 100% !important;
    aspect-ratio: 1 / 1.24 !important;
    min-height: 0 !important;
    height: auto !important;
    border: 1px solid #e5e5e5 !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  .product-photo img,
  .recommend-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }

  .product-tile span,
  .recommend-card span {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    min-height: 34px !important;
    margin: 6px 0 8px !important;
    color: #555 !important;
    font-size: 12px !important;
    line-height: 1.22 !important;
    overflow: hidden !important;
  }

  .product-tile::after {
    content: "Request a quote" !important;
    display: block !important;
    width: calc(100% - 12px) !important;
    margin: 0 6px 12px !important;
    padding: 10px 4px !important;
    border-radius: 4px !important;
    background: #9d9d9d !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  .metric-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 18px !important;
  }

  .metric-grid article {
    min-height: 118px !important;
    padding: 20px 18px !important;
  }

  .metric-grid strong {
    font-size: 34px !important;
    line-height: 1 !important;
  }

  .metric-grid span {
    font-size: 14px !important;
  }

  .metric-grid p {
    font-size: 11px !important;
  }

  .advantage-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 18px !important;
  }

  .advantage-card {
    min-height: 220px !important;
    padding: 18px 16px !important;
  }

  .advantage-card h3 {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  .advantage-card li {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .timeline {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 18px !important;
  }

  .timeline article {
    display: grid !important;
    grid-template-columns: 96px 1fr !important;
    min-height: 104px !important;
    border: 1px solid #eee !important;
    background: #fff !important;
  }

  .process-card-bg {
    position: static !important;
    width: 96px !important;
    height: 104px !important;
    background-size: cover !important;
    background-position: center !important;
    opacity: 1 !important;
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
  }

  .timeline article::before {
    grid-column: 2 !important;
    margin: 18px 0 0 18px !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    color: #5c86a9 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    content: "0" counter(process-step) " / STEP" !important;
  }

  .timeline h3,
  .timeline p {
    grid-column: 2 !important;
    margin-left: 18px !important;
    margin-right: 12px !important;
  }

  .timeline h3 {
    margin-top: 6px !important;
    font-size: 18px !important;
    color: #111 !important;
  }

  .timeline p {
    margin-top: 2px !important;
    font-size: 14px !important;
    color: #666 !important;
  }

  .service-grid,
  .faq-grid,
  .application-list {
    display: block !important;
    padding: 0 18px !important;
  }

  .service-card,
  .faq-grid details,
  .application-list a,
  .application-list div {
    margin: 0 0 12px !important;
    padding: 20px 18px !important;
    min-height: 0 !important;
    font-size: 15px !important;
  }

  .promise {
    padding: 36px 18px !important;
  }

  .promise-head h2 {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

  .testimonial-marquee {
    margin: 18px -18px !important;
    padding: 20px 0 !important;
  }

  .marquee-track span {
    font-size: 14px !important;
    min-width: 260px !important;
  }

  .brand-marquee {
    margin: 20px -18px 0 !important;
  }

  .brand-track span {
    font-size: 22px !important;
  }

  .site-footer {
    padding: 30px 22px 40px !important;
  }

  .footer-columns {
    display: block !important;
  }

  .footer-columns section {
    margin-bottom: 22px !important;
  }

  .footer-big-logo {
    font-size: clamp(54px, 23vw, 92px) !important;
    line-height: .9 !important;
    letter-spacing: 10px !important;
  }

  .floating-actions {
    position: fixed !important;
    right: 12px !important;
    bottom: 78px !important;
    z-index: 80 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .floating-actions button,
  .floating-actions a {
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    background: #555a64 !important;
    color: #fff !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.18) !important;
  }

  .floating-actions .back-top,
  .floating-actions [data-action="top"],
  .floating-actions a[href="#top"] {
    display: none !important;
  }

  .product-detail-page {
    padding: 0 14px 36px !important;
    overflow-x: hidden !important;
  }

  .product-detail {
    display: block !important;
    width: 100% !important;
    padding: 20px 0 0 !important;
  }

  .product-detail .gallery {
    width: 100% !important;
    padding: 0 !important;
  }

  .main-product-photo {
    width: 100% !important;
    max-height: 430px !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1.18 !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  .main-product-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .thumb-row {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 12px 0 6px !important;
    overflow-x: auto !important;
  }

  .thumb-row button {
    flex: 0 0 54px !important;
    width: 54px !important;
    height: 54px !important;
    padding: 0 !important;
  }

  .product-info h1 {
    margin: 16px 0 16px !important;
    font-size: 24px !important;
    line-height: 1.16 !important;
  }

  .trust-list {
    gap: 14px !important;
    margin: 0 0 20px !important;
  }

  .trust-list li {
    font-size: 15px !important;
  }

  .product-actions {
    gap: 10px !important;
  }

  .product-actions button,
  .product-actions a {
    width: 100% !important;
    padding: 13px !important;
    font-size: 16px !important;
  }

  .product-info details {
    padding: 17px 0 !important;
  }

  .product-info summary {
    font-size: 18px !important;
  }

  .spec-table {
    width: 100% !important;
    font-size: 13px !important;
    table-layout: fixed !important;
  }

  .spec-table td:first-child {
    width: 34% !important;
  }

  .recommend-section {
    padding: 28px 0 !important;
  }

  .recommend-section h2 {
    font-size: 22px !important;
    text-align: center !important;
  }

  .about-hero {
    min-height: 240px !important;
    height: 240px !important;
    padding: 0 18px !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .about-hero h1 {
    max-width: 320px !important;
    margin: 0 auto !important;
    font-size: 26px !important;
    line-height: 1.08 !important;
  }

  .about-feature {
    display: block !important;
    padding: 0 16px !important;
  }

  .about-photo {
    width: 100% !important;
    height: 260px !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .about-black {
    width: 100% !important;
    min-height: 0 !important;
    padding: 28px 22px !important;
  }

  .about-black h2 {
    font-size: 28px !important;
  }

  .about-black p {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  .about-contact-block {
    display: block !important;
    padding: 34px 18px !important;
  }

  .about-form {
    width: 100% !important;
    padding: 24px 18px !important;
  }

  .about-form h2,
  .contact h2 {
    font-size: 30px !important;
    line-height: 1.05 !important;
  }
}

/* 2026-07-10 mobile commerce layout reset.
   This block intentionally sits last so the phone site behaves like a compact shopping app. */
@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
    background: #fff !important;
  }

  body {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    min-height: 56px !important;
    padding: 0 16px !important;
    display: grid !important;
    grid-template-columns: 42px 42px 1fr 42px !important;
    align-items: center !important;
    gap: 0 !important;
    background: #fff !important;
    border-bottom: 1px solid #e6e6e6 !important;
  }

  .topbar .logo,
  .topbar .logo.centered-logo {
    grid-column: 3 !important;
    justify-self: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
  }

  .topbar .logo-mark,
  .topbar .back-link,
  .topbar .nav,
  .topbar .header-tools {
    display: none !important;
  }

  .topbar::before {
    content: "\2630";
    grid-column: 1;
    justify-self: start;
    font-size: 30px;
    line-height: 1;
    color: #111;
  }

  .topbar::after {
    content: "\2315";
    grid-column: 2;
    justify-self: start;
    font-size: 31px;
    line-height: 1;
    color: #111;
  }

  .logo-text {
    font-size: 25px !important;
    line-height: 1 !important;
    letter-spacing: 8px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    color: #111 !important;
  }

  .clone-section,
  section {
    padding: 34px 18px !important;
  }

  .hero.clone-section {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
  }

  .hero-inner.single-image-hero {
    position: relative !important;
    width: 100% !important;
    min-height: 430px !important;
    height: 430px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    overflow: hidden !important;
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, .03) 0%, rgba(0, 0, 0, .08) 42%, rgba(0, 0, 0, .78) 100%),
      url("assets/home-hero-crochet-dress.jpg?v=20260710-mobile") center top / contain no-repeat,
      #050505 !important;
  }

  .hero-inner.single-image-hero::before,
  .hero-inner.single-image-hero::after {
    display: none !important;
    content: none !important;
  }

  .hero-copy.hero-overlay {
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 20px 22px !important;
    transform: none !important;
    text-align: center !important;
    color: #fff !important;
    background: transparent !important;
  }

  .hero-copy .crumb {
    margin: 0 0 8px !important;
    color: #fff !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
  }

  .hero-copy h1 {
    max-width: 340px !important;
    margin: 0 auto 10px !important;
    color: #fff !important;
    font-size: 25px !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
  }

  .hero-copy .lead {
    max-width: 330px !important;
    margin: 0 auto 18px !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .hero-actions {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
  }

  .hero-actions .button,
  .button {
    min-width: 130px !important;
    height: 48px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  .cert-strip {
    padding: 14px 18px !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  .cert-row,
  .cert-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: center !important;
  }

  .cert-logo,
  .cert-card {
    min-width: 0 !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .cert-logo b,
  .cert-card b {
    color: #111 !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -.4px !important;
    white-space: nowrap !important;
  }

  .cert-logo small,
  .cert-card small {
    display: none !important;
  }

  .intro-block {
    padding: 28px 18px 14px !important;
    background: #fff !important;
  }

  .intro-block .two-column,
  .intro-block .two-column.reverse {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  .intro-video,
  .video-frame {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    border: 0 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .intro-video .play,
  .video-frame .play {
    width: 62px !important;
    height: 62px !important;
    border-radius: 999px !important;
    font-size: 0 !important;
    background: #fff !important;
    color: #111 !important;
  }

  .intro-video .play::before,
  .video-frame .play::before {
    content: "\25B6";
    margin-left: 4px;
    font-size: 25px;
    color: #111;
  }

  .intro-video strong,
  .intro-video small,
  .video-frame strong,
  .video-frame small {
    display: none !important;
  }

  .intro-block .kicker {
    margin: 12px 0 6px !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .intro-block h2 {
    margin: 0 0 12px !important;
    font-size: 24px !important;
    line-height: 1.18 !important;
    text-align: left !important;
  }

  .intro-block p,
  .intro-block blockquote {
    margin: 0 0 12px !important;
    color: #333 !important;
    font-size: 16px !important;
    line-height: 1.62 !important;
    text-align: left !important;
  }

  .section-title.center {
    margin: 0 0 22px !important;
    text-align: center !important;
  }

  .section-title .kicker,
  .kicker {
    font-size: 13px !important;
    line-height: 1.2 !important;
    letter-spacing: .08em !important;
  }

  .section-title h2 {
    margin: 8px auto !important;
    font-size: 28px !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  .section-title p {
    margin: 0 auto !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  .category-grid.four {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  .placeholder-card.overlay-card {
    min-height: 0 !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    background: #111820 !important;
  }

  .collection-card {
    min-height: 0 !important;
    height: auto !important;
    background: none !important;
  }

  .collection-media {
    height: 158px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #121a21 !important;
  }

  .collection-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  .placeholder-card .card-copy {
    position: static !important;
    min-height: 128px !important;
    padding: 13px 12px 15px !important;
    color: #fff !important;
    background: linear-gradient(#1b232a, #061015) !important;
  }

  .placeholder-card h3 {
    margin: 0 0 9px !important;
    color: #fff !important;
    font-size: 19px !important;
    line-height: 1.05 !important;
  }

  .placeholder-card p {
    margin: 0 !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .product-style-tabs {
    display: flex !important;
    gap: 28px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding: 0 18px 16px !important;
    margin: 0 -18px 16px !important;
    scrollbar-width: none !important;
  }

  .product-style-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .product-style-tabs button {
    min-width: max-content !important;
    padding: 0 0 8px !important;
    border: 0 !important;
    background: transparent !important;
    color: #aaa !important;
    font-size: 17px !important;
    letter-spacing: .12em !important;
  }

  .product-style-tabs button.active {
    color: #111 !important;
    border-bottom: 2px solid #111 !important;
  }

  #products .product-showcase.product-grid,
  #products .product-grid,
  .category-list,
  .recommend-row,
  .related-products,
  .you-may-like-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 0 6px !important;
    align-items: start !important;
  }

  .product-tile,
  .category-product-card,
  .recommend-card,
  .related-product-card {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
    overflow: hidden !important;
  }

  .product-photo,
  .category-product-image,
  .recommend-card img,
  .related-product-card img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #f7f7f7 !important;
  }

  .product-photo img,
  .category-product-image img,
  .recommend-card img,
  .related-product-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  .product-tile span,
  .category-product-title,
  .recommend-card span,
  .related-product-card span {
    min-height: 38px !important;
    padding: 8px 2px 0 !important;
    color: #565b48 !important;
    font-size: 13px !important;
    line-height: 1.28 !important;
    text-align: left !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .mobile-card-quote,
  .quote-small,
  .category-product-card button,
  .related-product-card button {
    width: 88% !important;
    height: 42px !important;
    margin: 10px auto 14px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: #999 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }

  .more-button {
    width: max-content !important;
    margin: 24px auto 0 !important;
    padding: 12px 26px !important;
    border-radius: 999px !important;
    display: flex !important;
    font-size: 16px !important;
  }

  .metric-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  .metric-grid article {
    min-height: 112px !important;
    padding: 16px 14px !important;
    border: 1px solid #e8e8e8 !important;
    background: #fff !important;
  }

  .metric-grid strong {
    font-size: 32px !important;
    line-height: 1 !important;
  }

  .metric-grid span {
    font-size: 14px !important;
  }

  .metric-grid em {
    font-size: 11px !important;
    letter-spacing: .1em !important;
  }

  .advantage-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .advantage-card {
    min-height: 165px !important;
    padding: 18px 14px !important;
    border: 1px solid #eee !important;
    background: #fff !important;
  }

  .advantage-card h3 {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  .advantage-card li {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  #process .timeline {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 !important;
  }

  #process .timeline article {
    min-height: 100px !important;
    display: grid !important;
    grid-template-columns: 96px 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 1px solid #eee !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  #process .process-card-bg {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    width: 96px !important;
    height: 100% !important;
    min-height: 100px !important;
    position: relative !important;
    background-size: cover !important;
    background-position: center !important;
  }

  #process .process-card-bg span {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 36px !important;
    height: 36px !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .45) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 800 !important;
  }

  #process .timeline article h3 {
    grid-column: 2 !important;
    margin: 20px 16px 4px !important;
    color: #111 !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
  }

  #process .timeline article p {
    grid-column: 2 !important;
    margin: 0 16px 18px !important;
    color: #666 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  .service-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .service-card {
    padding: 24px 20px !important;
  }

  .service-card h3 {
    font-size: 19px !important;
    line-height: 1.2 !important;
  }

  .service-card p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .quote-band blockquote,
  .testimonial-quote {
    padding: 0 18px !important;
    font-size: 22px !important;
    line-height: 1.35 !important;
    word-break: normal !important;
  }

  .footer-columns {
    display: block !important;
  }

  .site-footer {
    padding: 34px 22px !important;
  }

  .footer-columns section {
    margin-bottom: 26px !important;
  }

  .site-footer h3 {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  .site-footer p,
  .site-footer a {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  .social-links a {
    width: 34px !important;
    height: 34px !important;
    font-size: 0 !important;
  }

  .footer-logo-giant,
  .footer-brand-large {
    max-width: 100% !important;
    overflow: hidden !important;
    color: #000 !important;
    font-size: 58px !important;
    line-height: 1 !important;
    letter-spacing: 10px !important;
    white-space: nowrap !important;
  }

  .floating-tools {
    position: fixed !important;
    right: 14px !important;
    bottom: 78px !important;
    z-index: 1200 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .floating-tools .floating-button {
    width: 54px !important;
    height: 54px !important;
    border-radius: 999px !important;
    background: #555a66 !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16) !important;
  }

  .floating-tools .floating-button svg {
    width: 25px !important;
    height: 25px !important;
  }

  .floating-tools .top-button {
    display: none !important;
  }

  .product-detail-page {
    padding: 0 18px 36px !important;
  }

  .product-detail-layout,
  .product-main {
    display: block !important;
    padding: 0 !important;
  }

  .product-gallery {
    margin: 0 -18px 24px !important;
  }

  .main-product-image {
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding: 22px 18px !important;
    background: #fff !important;
  }

  .main-product-image img {
    flex: 0 0 82% !important;
    width: 82% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: contain !important;
    scroll-snap-align: center !important;
    background: #f7f7f7 !important;
  }

  .thumbnails {
    display: none !important;
  }

  .product-info h1 {
    margin: 0 0 24px !important;
    font-size: 24px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
  }

  .trust-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin: 24px 0 !important;
    padding: 0 !important;
  }

  .trust-list li {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    font-size: 17px !important;
  }

  .product-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .product-actions .button {
    width: 100% !important;
    height: 52px !important;
    font-size: 18px !important;
  }

  .accordion details {
    border-top: 1px solid #eee !important;
  }

  .accordion summary {
    padding: 18px 0 !important;
    font-size: 19px !important;
  }

  .spec-table {
    width: 100% !important;
    table-layout: fixed !important;
    font-size: 13px !important;
  }

  .spec-table th,
  .spec-table td {
    padding: 8px !important;
    word-break: break-word !important;
  }

  .about-hero {
    min-height: 260px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }

  .about-hero h1 {
    max-width: 330px !important;
    font-size: 30px !important;
    line-height: 1.15 !important;
  }

  .about-feature,
  .about-contact-block {
    display: block !important;
    padding: 28px 18px !important;
  }

  .about-photo {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }

  .about-black {
    min-height: 0 !important;
    padding: 28px 22px !important;
  }

  .about-black h2 {
    font-size: 32px !important;
    line-height: 1.05 !important;
  }

  .about-black p {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }

  .about-form {
    padding: 26px 20px !important;
  }

  .about-form h2 {
    font-size: 32px !important;
    line-height: 1.05 !important;
  }

  .about-form input,
  .about-form textarea,
  .about-form select {
    font-size: 16px !important;
  }
}

/* 2026-07-10 final mobile storefront override.
   This last layer intentionally wins over older mobile experiments above. */
@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: #fff !important;
    color: #232323 !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  img,
  video {
    max-width: 100% !important;
    height: auto !important;
  }

  body > header.topbar,
  header.topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    display: grid !important;
    grid-template-columns: 58px 58px 1fr 58px !important;
    align-items: center !important;
    height: 62px !important;
    min-height: 62px !important;
    padding: 0 14px !important;
    background: #fff !important;
    border-bottom: 1px solid #d9d9d9 !important;
    box-shadow: none !important;
  }

  header.topbar .back-link,
  header.topbar .header-tools,
  header.topbar nav.nav,
  header.topbar .logo-mark {
    display: none !important;
  }

  header.topbar .logo,
  header.topbar .centered-logo {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
  }

  header.topbar .logo-text {
    display: block !important;
    color: #111 !important;
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 7px !important;
    white-space: nowrap !important;
  }

  header.topbar::before {
    content: "\2630";
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    color: #202020 !important;
    font-size: 31px !important;
    line-height: 1 !important;
    z-index: 2 !important;
  }

  header.topbar::after {
    content: "\2315";
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    color: #202020 !important;
    font-size: 34px !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
    z-index: 2 !important;
  }

  .hero,
  section.hero.clone-section {
    min-height: 0 !important;
    height: 365px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    background-color: #050505 !important;
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.16) 45%, rgba(0, 0, 0, 0.92) 78%, #000 100%),
      url("/assets/home-hero-crochet-dress.jpg") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    overflow: hidden !important;
  }

  .hero .hero-inner,
  .hero .single-image-hero {
    width: 100% !important;
    min-height: 0 !important;
    display: block !important;
    padding: 0 !important;
  }

  .hero .hero-copy,
  .hero .hero-overlay {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 18px 22px !important;
    margin: 0 auto !important;
    text-align: center !important;
    color: #fff !important;
    transform: none !important;
  }

  .hero .eyebrow {
    display: block !important;
    margin: 0 auto 8px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.6px !important;
    color: rgba(255, 255, 255, 0.88) !important;
  }

  .hero h1 {
    max-width: 338px !important;
    margin: 0 auto 10px !important;
    font-size: 24px !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
    color: #fff !important;
    text-align: center !important;
    overflow-wrap: normal !important;
  }

  .hero .lead {
    max-width: 320px !important;
    margin: 0 auto 14px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-align: center !important;
  }

  .hero-actions {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 auto !important;
  }

  .hero-actions .button {
    height: 44px !important;
    min-width: 132px !important;
    padding: 0 16px !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    line-height: 44px !important;
    text-align: center !important;
  }

  .hero-actions .button.dark {
    display: none !important;
  }

  .hero-actions .button.light {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    color: #222 !important;
    border: 0 !important;
  }

  .cert-strip,
  section.cert-strip.clone-section {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 18px 16px !important;
    margin: 0 !important;
    background: #fff !important;
    min-height: 0 !important;
  }

  .cert-strip .cert-item {
    min-width: 0 !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    filter: grayscale(1) contrast(1.1) !important;
  }

  .cert-strip .cert-item b {
    display: block !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: -0.2px !important;
    color: #111 !important;
    white-space: nowrap !important;
    transform: scale(0.92) !important;
  }

  .cert-strip .cert-item span {
    display: none !important;
  }

  .clone-section,
  section.clone-section,
  main > section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .intro-block {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
    background: #fff !important;
  }

  .intro-block .two-column,
  .two-column,
  .two-column.reverse {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }

  .intro-block .video-panel,
  .intro-block .image-panel {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    margin: 0 0 26px !important;
    background-size: cover !important;
    background-position: center !important;
    border: 0 !important;
  }

  .intro-block .video-panel .play-button {
    width: 68px !important;
    height: 68px !important;
    font-size: 0 !important;
  }

  .intro-block .copy {
    text-align: left !important;
    padding: 0 !important;
  }

  .intro-block .copy .eyebrow {
    font-size: 14px !important;
    letter-spacing: 1px !important;
    margin: 0 0 12px !important;
  }

  .intro-block .copy h2 {
    font-size: 19px !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    margin: 0 0 12px !important;
    text-align: left !important;
  }

  .intro-block .copy p,
  .intro-block .quote {
    font-size: 15px !important;
    line-height: 1.6 !important;
    text-align: left !important;
  }

  #collections,
  #products {
    padding: 42px 0 !important;
    background: #fff !important;
  }

  #collections .section-heading,
  #products .section-heading,
  #advantages .section-heading,
  #process .section-heading,
  #service .section-heading {
    padding: 0 22px !important;
    margin: 0 auto 24px !important;
    text-align: center !important;
  }

  .section-heading .eyebrow,
  #collections .eyebrow,
  #products .eyebrow {
    font-size: 13px !important;
    letter-spacing: 1.5px !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
  }

  .section-heading h2,
  #collections h2,
  #products h2,
  #advantages h2,
  #process h2,
  #service h2 {
    font-size: 28px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    margin: 0 auto 10px !important;
  }

  .section-heading p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 auto !important;
  }

  #collections .category-grid.four {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding: 0 18px !important;
  }

  #collections .overlay-card,
  #collections .placeholder-card {
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    background: #101820 !important;
  }

  #collections .collection-card,
  #collections .image-placeholder {
    height: auto !important;
    aspect-ratio: 1 / 1.18 !important;
    padding: 0 !important;
    background: #17222a !important;
    overflow: hidden !important;
  }

  #collections .collection-media {
    width: 100% !important;
    height: 58% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #202a31 !important;
  }

  #collections .collection-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  #collections .collection-copy {
    position: static !important;
    height: 42% !important;
    padding: 14px 10px !important;
    background: linear-gradient(180deg, #222c33 0%, #061016 100%) !important;
    color: #fff !important;
    text-align: left !important;
  }

  #collections .collection-copy h3 {
    font-size: 20px !important;
    line-height: 1.02 !important;
    margin: 0 0 8px !important;
    color: #fff !important;
  }

  #collections .collection-copy p {
    display: block !important;
    max-height: 42px !important;
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    color: #fff !important;
    opacity: 1 !important;
  }

  #products .style-tabs {
    display: flex !important;
    gap: 36px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding: 0 28px 18px !important;
    margin: 0 !important;
    scrollbar-width: none !important;
  }

  #products .style-tabs::-webkit-scrollbar {
    display: none !important;
  }

  #products .style-tabs button,
  #products .style-tab {
    flex: 0 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #a8a8a8 !important;
    font-size: 16px !important;
    letter-spacing: 2.6px !important;
    text-transform: uppercase !important;
  }

  #products .style-tabs button.active,
  #products .style-tab.active {
    color: #111 !important;
    text-decoration: underline !important;
    text-underline-offset: 6px !important;
  }

  #products .product-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding: 0 18px !important;
    margin: 0 !important;
  }

  #products .product-grid .product-tile {
    flex: 0 0 43% !important;
    width: 43% !important;
    min-width: 148px !important;
    display: block !important;
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #222 !important;
    text-decoration: none !important;
    overflow: hidden !important;
    scroll-snap-align: start !important;
  }

  #products .product-grid .product-photo {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    background: #f7f7f7 !important;
    overflow: hidden !important;
  }

  #products .product-grid .product-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  #products .product-grid .product-tile span {
    display: block !important;
    height: 44px !important;
    max-height: 44px !important;
    overflow: hidden !important;
    padding: 8px 6px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    color: #333 !important;
    text-align: center !important;
  }

  #products .more-button,
  #products .button.light.more-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 180px !important;
    height: 46px !important;
    margin: 24px auto 0 !important;
    padding: 0 !important;
    border: 2px solid #111 !important;
    border-radius: 999px !important;
    color: #111 !important;
    background: #fff !important;
    font-size: 14px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  #advantages {
    padding: 44px 18px !important;
    background: #fafafa !important;
  }

  #advantages .metric-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 0 42px !important;
  }

  #advantages .metric-grid article,
  #advantages .metric-card {
    min-height: 104px !important;
    padding: 15px 14px !important;
    border: 1px solid #e5e5e5 !important;
    background: #fff !important;
  }

  #advantages .metric-grid strong {
    font-size: 30px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  #advantages .metric-grid span,
  #advantages .metric-grid small {
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  #advantages .advantage-grid,
  #advantages .core-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  #advantages .advantage-card,
  #advantages .core-card {
    min-height: 180px !important;
    padding: 18px 14px !important;
    border: 1px solid #e6e6e6 !important;
    background: #fff !important;
  }

  #advantages .advantage-card h3,
  #advantages .core-card h3 {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  #advantages .advantage-card li,
  #advantages .core-card li,
  #advantages .advantage-card p,
  #advantages .core-card p {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  #process {
    padding: 44px 18px !important;
    background: #fff !important;
  }

  #process .timeline {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #process .timeline article {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 110px 1fr !important;
    min-height: 96px !important;
    margin: 0 0 14px !important;
    border: 1px solid #ececec !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  #process .process-card-bg {
    position: static !important;
    width: 110px !important;
    height: 96px !important;
    min-height: 96px !important;
    background-size: cover !important;
    background-position: center !important;
    opacity: 1 !important;
  }

  #process .process-content {
    position: static !important;
    padding: 14px !important;
    color: #222 !important;
    background: #fff !important;
  }

  #process .process-number {
    display: inline-block !important;
    margin: 0 0 4px !important;
    color: #8eb2cb !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  #process h3 {
    margin: 0 0 5px !important;
    font-size: 17px !important;
    line-height: 1.05 !important;
    color: #111 !important;
  }

  #process p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: #666 !important;
  }

  #service,
  .service,
  .extra-info,
  .promise {
    padding: 44px 18px !important;
    background: #fff !important;
  }

  .service-grid,
  .service-cards,
  .promise-grid {
    display: block !important;
  }

  .service-card,
  .promise-card {
    padding: 22px 18px !important;
    margin-bottom: 16px !important;
    border: 0 !important;
    background: #f7f7f7 !important;
  }

  .service-card h3,
  .promise-card h3 {
    font-size: 19px !important;
    line-height: 1.25 !important;
  }

  .service-card p,
  .promise-card p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .application-links,
  .link-list,
  .extra-info-list {
    display: block !important;
    padding: 0 18px !important;
  }

  .application-links a,
  .link-list a,
  .extra-info-list a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 72px !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #eee !important;
    color: #333 !important;
    background: #fff !important;
    font-size: 21px !important;
    text-decoration: none !important;
  }

  .application-links a::after,
  .link-list a::after,
  .extra-info-list a::after {
    content: ">";
    color: #777;
    font-size: 28px;
    line-height: 1;
  }

  .testimonial,
  .promise .testimonial,
  .testimonial-strip {
    padding: 44px 22px !important;
    background: #eee8e2 !important;
    text-align: center !important;
  }

  .testimonial blockquote,
  .promise blockquote {
    max-width: 330px !important;
    margin: 0 auto !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }

  .brand-marquee,
  .brand-logo-strip,
  .client-logo-strip {
    min-height: 76px !important;
    padding: 18px 0 !important;
    overflow: hidden !important;
  }

  .site-footer {
    padding: 30px 24px 86px !important;
    background: #fff !important;
    color: #111 !important;
  }

  .site-footer .footer-columns {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }

  .site-footer section {
    margin: 0 0 28px !important;
  }

  .site-footer h3 {
    font-size: 16px !important;
    line-height: 1.25 !important;
    letter-spacing: 1px !important;
    margin: 0 0 14px !important;
  }

  .site-footer p,
  .site-footer a {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  .site-footer .social-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    margin-top: 12px !important;
  }

  .site-footer .social-links a {
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #111 !important;
    border-radius: 50% !important;
    font-size: 0 !important;
  }

  .site-footer .social-links a::first-letter {
    font-size: 0 !important;
  }

  .site-footer .footer-logo-giant,
  .footer-logo-giant {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 62px !important;
    line-height: 0.9 !important;
    letter-spacing: 8px !important;
    white-space: nowrap !important;
  }

  .floating-tools {
    position: fixed !important;
    right: 14px !important;
    bottom: 80px !important;
    z-index: 1100 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    pointer-events: auto !important;
  }

  .floating-button {
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    background: #555a64 !important;
    color: #fff !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2) !important;
  }

  .floating-button svg {
    width: 26px !important;
    height: 26px !important;
    stroke: currentColor !important;
  }

  .floating-tools .top-button {
    display: none !important;
  }

  body.category-page,
  .category-page {
    background: #fff !important;
  }

  .category-page main,
  body.category-page main {
    padding: 0 !important;
  }

  .category-toolbar,
  .filter-row {
    display: flex !important;
    justify-content: center !important;
    gap: 42px !important;
    padding: 34px 18px 22px !important;
    font-size: 17px !important;
    color: #333 !important;
  }

  .category-page .product-grid,
  .category-list,
  main .category-list.product-showcase {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 0 14px 42px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .category-page .product-tile,
  .category-list .product-tile,
  .mobile-product-card {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 5px 18px !important;
    border: 0 !important;
    background: transparent !important;
    color: #5f6652 !important;
    text-decoration: none !important;
    overflow: hidden !important;
  }

  .category-page .product-photo,
  .category-list .product-photo,
  .mobile-product-card .product-photo {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1.25 !important;
    border: 1px solid #ddd !important;
    background: #f8f8f8 !important;
    overflow: hidden !important;
  }

  .category-page .product-photo img,
  .category-list .product-photo img,
  .mobile-product-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .category-page .product-tile span,
  .category-list .product-tile span,
  .mobile-product-card .mobile-card-title {
    display: block !important;
    height: 43px !important;
    max-height: 43px !important;
    overflow: hidden !important;
    padding: 7px 0 0 !important;
    color: #666b58 !important;
    font-size: 15px !important;
    line-height: 1.05 !important;
    text-align: left !important;
  }

  .category-page .product-tile::after,
  .category-list .product-tile::after {
    content: "Request a quote";
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 82% !important;
    height: 42px !important;
    margin: 9px auto 0 !important;
    border-radius: 6px !important;
    background: #9f9f9f !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .mobile-card-quote {
    width: 82% !important;
    height: 42px !important;
    margin: 9px auto 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: #9f9f9f !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }

  body.product-detail-page main,
  .product-detail-page main {
    padding: 0 !important;
  }

  .product-detail,
  .product-detail-page .product-detail {
    display: block !important;
    padding: 0 18px 36px !important;
    margin: 0 !important;
  }

  .product-gallery {
    margin: 0 -18px 22px !important;
    padding: 22px 0 0 !important;
  }

  .main-product-image,
  .product-main-image {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding: 0 18px !important;
    background: #fff !important;
  }

  .main-product-image img,
  .product-main-image img,
  #mainProductPhoto {
    flex: 0 0 78% !important;
    width: 78% !important;
    max-width: 78% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #f7f7f7 !important;
    scroll-snap-align: center !important;
  }

  .thumb-row {
    display: none !important;
  }

  .product-info {
    padding: 0 !important;
  }

  .product-info h1 {
    margin: 0 0 24px !important;
    font-size: 20px !important;
    line-height: 1.22 !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    color: #333 !important;
  }

  .product-bullets {
    display: block !important;
    margin: 0 0 26px !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .product-bullets li {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 54px !important;
    font-size: 16px !important;
    color: #444 !important;
  }

  .quote-actions,
  .product-actions {
    display: block !important;
    margin: 0 0 26px !important;
  }

  .quote-actions .button,
  .product-actions .button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 50px !important;
    margin: 0 0 10px !important;
    border-radius: 3px !important;
    font-size: 17px !important;
    line-height: 1 !important;
  }

  .quote-actions .button.light {
    background: #f4f2dc !important;
    border: 0 !important;
    color: #333 !important;
  }

  .quote-actions .button.dark {
    background: #000 !important;
    color: #fff !important;
  }

  .product-accordion,
  .accordion-list {
    border-top: 1px solid #eee !important;
    margin: 0 0 28px !important;
  }

  .product-accordion details,
  .accordion-list details,
  .product-info details {
    border-bottom: 1px solid #eee !important;
  }

  .product-accordion summary,
  .accordion-list summary,
  .product-info summary {
    padding: 17px 0 !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    color: #333 !important;
    list-style: none !important;
  }

  .specs,
  .spec-table,
  .product-specs table,
  .size-chart {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .specs td,
  .spec-table td,
  .product-specs td,
  .size-chart td,
  .size-chart th {
    padding: 7px 6px !important;
    border: 1px solid #cfcfcf !important;
    vertical-align: top !important;
    overflow-wrap: anywhere !important;
  }

  .recommend-section {
    padding: 40px 0 30px !important;
    margin: 0 !important;
    background: #fff !important;
  }

  .recommend-section h2 {
    font-size: 20px !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
    text-align: center !important;
    margin: 0 0 26px !important;
  }

  .recommend-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 18px !important;
    padding: 0 18px !important;
    overflow: visible !important;
  }

  .recommend-card {
    min-width: 0 !important;
    color: #5f6652 !important;
    text-decoration: none !important;
  }

  .recommend-card img,
  .recommend-photo img {
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: contain !important;
    background: #f7f7f7 !important;
  }

  .recommend-card span {
    display: block !important;
    height: 38px !important;
    overflow: hidden !important;
    margin: 8px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  .about-page .about-hero {
    height: 300px !important;
    min-height: 300px !important;
    padding: 0 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .about-page .about-hero h1 {
    max-width: 330px !important;
    font-size: 27px !important;
    line-height: 1.08 !important;
    letter-spacing: 1px !important;
    text-align: center !important;
  }

  .about-page .about-intro,
  .about-page .about-feature,
  .about-page .about-contact-block {
    display: block !important;
    padding: 36px 18px !important;
  }

  .about-page .about-photo {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    margin: 0 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .about-page .about-black {
    padding: 28px 22px !important;
    background: #061d32 !important;
    min-height: 0 !important;
  }

  .about-page .about-black h2 {
    font-size: 30px !important;
    line-height: 1.05 !important;
  }

  .about-page .about-black p {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .about-page .about-form {
    padding: 28px 18px !important;
    background: #fff !important;
  }

  .about-page .about-form h2 {
    font-size: 30px !important;
    line-height: 1.05 !important;
  }

  .about-page .about-form input,
  .about-page .about-form textarea {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  .about-page .about-form textarea {
    min-height: 150px !important;
  }

  .about-page .about-form button,
  .about-page .about-form .button {
    width: 100% !important;
    height: 50px !important;
    margin-top: 16px !important;
    background: #000 !important;
    color: #fff !important;
    font-size: 16px !important;
  }

  .modal-panel {
    width: calc(100vw - 32px) !important;
    max-width: 520px !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
    padding: 30px 22px !important;
  }

  .modal-panel h2 {
    font-size: 30px !important;
    line-height: 1.1 !important;
  }

  .quote-list-content li {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 10px 0 !important;
  }

  .remove-quote-item {
    min-width: 72px !important;
    min-height: 34px !important;
    border: 1px solid #111 !important;
    background: #fff !important;
    color: #111 !important;
    font-size: 13px !important;
  }

  .modal-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .modal-actions .button,
  .modal-actions button {
    width: 100% !important;
    height: 48px !important;
    font-size: 15px !important;
  }
}

/* FINAL annotated overrides - must stay at EOF. */
@media (max-width: 768px) {
  header.topbar::after {
    display: none !important;
    content: none !important;
  }

  header.topbar .header-tools {
    grid-column: 2 !important;
    display: flex !important;
    visibility: visible !important;
    justify-content: center !important;
  }

  header.topbar .header-tools > :not(.search-icon) {
    display: none !important;
  }

  header.topbar .search-icon {
    position: relative !important;
    display: block !important;
    width: 34px !important;
    height: 34px !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  header.topbar .search-icon::before {
    content: "" !important;
    position: absolute !important;
    left: 6px !important;
    top: 5px !important;
    width: 16px !important;
    height: 16px !important;
    border: 3px solid #111 !important;
    border-radius: 50% !important;
    background: transparent !important;
  }

  header.topbar .search-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 23px !important;
    top: 24px !important;
    width: 12px !important;
    height: 3px !important;
    background: #111 !important;
    transform: rotate(45deg) !important;
    transform-origin: left center !important;
  }

  header.topbar nav.nav,
  header.topbar .main-nav {
    display: none !important;
  }

  body.mobile-menu-open header.topbar nav.nav,
  body.mobile-menu-open header.topbar .main-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 56px !important;
    z-index: 999 !important;
    display: block !important;
    width: 100vw !important;
    max-height: calc(100vh - 56px) !important;
    overflow-y: auto !important;
    padding: 0 !important;
    background: #fff !important;
    border-top: 1px solid #eee !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .08) !important;
  }

  body.mobile-menu-open header.topbar nav.nav a,
  body.mobile-menu-open header.topbar .main-nav a {
    display: block !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 15px 22px !important;
    border-bottom: 1px solid #eee !important;
    color: #111 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-decoration: none !important;
  }

  .cert-strip {
    overflow: hidden !important;
    padding: 24px 0 56px !important;
  }

  .cert-row {
    display: flex !important;
    width: max-content !important;
    min-width: 100% !important;
    gap: 28px !important;
    align-items: center !important;
    padding: 0 18px !important;
    animation: certMarqueeFinal 16s linear infinite !important;
  }

  .cert-logo {
    flex: 0 0 auto !important;
    min-width: 86px !important;
    min-height: 36px !important;
    border: 0 !important;
    background: transparent !important;
  }

  .cert-logo b {
    display: block !important;
    color: #111 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    transform: none !important;
  }

  .cert-logo small {
    display: block !important;
    color: #555 !important;
    font-size: 7px !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  @keyframes certMarqueeFinal {
    from { transform: translateX(0); }
    to { transform: translateX(-45%); }
  }

  #products .product-tile {
    flex-basis: 46% !important;
    width: 46% !important;
    min-width: 170px !important;
    overflow: hidden !important;
  }

  #products .product-tile span {
    height: 62px !important;
    padding: 9px 8px !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #advantages .section-title h2 {
    font-size: 30px !important;
    line-height: 1.18 !important;
    letter-spacing: 2px !important;
  }

  .mobile-core-grid article {
    min-height: 260px !important;
    padding: 24px 18px !important;
  }

  .mobile-line-icon {
    display: block !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 0 22px !important;
    color: transparent !important;
    font-size: 0 !important;
    background: none !important;
  }

  .mobile-line-icon::before {
    content: "" !important;
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    border: 3px solid #111 !important;
    border-radius: 8px !important;
  }

  .mobile-core-grid article:nth-child(2) .mobile-line-icon::before {
    border-radius: 50% !important;
    background: linear-gradient(135deg, transparent 44%, #111 45% 55%, transparent 56%) !important;
  }

  .mobile-core-grid article:nth-child(3) .mobile-line-icon::before {
    border-radius: 50% !important;
  }

  .mobile-core-grid article:nth-child(4) .mobile-line-icon::before {
    transform: rotate(45deg) !important;
    border-radius: 0 !important;
  }

  .mobile-core-grid h3 {
    margin-bottom: 28px !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
    word-break: normal !important;
  }

  .mobile-core-grid ul {
    padding-left: 20px !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  #process .process-card-bg {
    display: grid !important;
    grid-template-columns: 128px minmax(0, 1fr) !important;
    min-height: 116px !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0 16px 0 0 !important;
    background: #fff !important;
    color: #111 !important;
  }

  #process .process-card-bg::before {
    content: "" !important;
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    width: 112px !important;
    height: 84px !important;
    margin: 16px !important;
    border-radius: 0 !important;
    background: var(--process-mobile-image, url("/assets/process-inquiry.jpg")) center / cover no-repeat !important;
    opacity: 1 !important;
  }

  #process .process-card-bg span,
  #process .process-card-bg h3,
  #process .process-card-bg p {
    grid-column: 2 !important;
    position: static !important;
    z-index: 1 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  #process .process-card-bg span {
    color: #6d98bb !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  #process .process-card-bg span::before {
    content: "0" !important;
  }

  #process .process-card-bg span::after {
    content: " / STEP" !important;
    color: #bfd0dd !important;
    font-size: 13px !important;
  }

  #process .process-card-bg h3 {
    color: #000 !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
  }

  #process .process-card-bg p {
    color: #666 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  .application-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .application-grid span {
    display: grid !important;
    min-height: 68px !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    padding: 0 18px !important;
    border: 1px solid #eadfd2 !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-size: 20px !important;
    font-weight: 800 !important;
  }

  .application-grid span::after {
    grid-column: 2 !important;
    content: ">" !important;
    color: #9b8d80 !important;
    font-size: 26px !important;
  }

  .application-detail {
    display: none !important;
    grid-column: 1 / -1 !important;
    padding: 14px 0 18px !important;
  }

  .application-grid span.active .application-detail {
    display: block !important;
  }

  .application-detail img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    margin-bottom: 12px !important;
  }

  .application-detail p {
    margin: 0 !important;
    color: #666 !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
  }

  .floating-tools {
    right: 14px !important;
    bottom: 24px !important;
    gap: 10px !important;
  }

  .floating-button {
    display: flex !important;
    width: 58px !important;
    height: 58px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #565b67 !important;
    color: #fff !important;
    text-decoration: none !important;
  }

  .floating-tools .top-button {
    display: flex !important;
  }

  .whatsapp-float {
    background: #1fae5b !important;
  }

  .floating-whatsapp-mark {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  .site-footer .social-links a,
  .social-links a {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    overflow: hidden !important;
    border: 2px solid #000 !important;
    border-radius: 50% !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  .social-links a::before {
    color: #000 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  .social-links .facebook::before { content: "f" !important; }
  .social-links .twitter::before { content: "X" !important; }
  .social-links .instagram::before { content: "IG" !important; }
  .social-links .tiktok::before { content: "TT" !important; }
  .social-links .youtube::before { content: "YT" !important; }
  .social-links .linkedin::before { content: "in" !important; }

  .footer-logo,
  .site-footer .footer-logo {
    width: 100% !important;
    max-width: 100% !important;
    margin: 30px 0 0 !important;
    overflow: visible !important;
    font-size: clamp(44px, 16vw, 86px) !important;
    line-height: .92 !important;
    letter-spacing: clamp(4px, 2vw, 12px) !important;
    white-space: nowrap !important;
  }
}

/* REAL EOF OVERRIDE 2026-07-10 fix9 */
@media (max-width: 768px) {
  body > header.topbar,
  header.topbar {
    position: sticky !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 88px 0 54px !important;
    overflow: visible !important;
  }

  body > header.topbar::before,
  body > header.topbar::after,
  header.topbar::before,
  header.topbar::after,
  header.topbar .header-tools,
  header.topbar .search-icon {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
  }

  header.topbar .mobile-menu-button {
    position: absolute !important;
    left: 12px !important;
    top: 10px !important;
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
  }

  header.topbar .logo,
  header.topbar .centered-logo {
    position: static !important;
    display: flex !important;
    max-width: 100% !important;
    transform: none !important;
  }

  header.topbar .logo-text {
    font-size: 23px !important;
    letter-spacing: 6px !important;
  }

  header.topbar .mobile-whatsapp-link {
    position: absolute !important;
    right: 8px !important;
    top: 11px !important;
    display: inline-flex !important;
    width: 74px !important;
    height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: #1fae5b !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }

  body.mobile-menu-open header.topbar nav.nav,
  body.mobile-menu-open header.topbar .main-nav {
    top: 58px !important;
  }

  #products .product-tile,
  #products .product-grid .product-tile,
  #products .product-showcase.product-grid .product-tile {
    flex: 0 0 178px !important;
    width: 178px !important;
    min-width: 178px !important;
    max-width: 178px !important;
  }

  #products .product-tile span,
  #products .product-grid .product-tile span {
    height: 72px !important;
    max-height: 72px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }
}