/** * ============================================================================ * QWL MASTER SKIN — Combined Site-Wide Stylesheet * ============================================================================ * Package : QWL v3.1 Homepage + Category + v2.3 Product (Combined) * Date : 2026-04-18 * Site : qualitywovenlabels.com * Theme : Porto (do not modify base theme) * * Load ORDER in : AFTER Porto theme CSS, AFTER qwl.min.css, * BEFORE any page-specific inline CSS. * * This file combines, in order: * Section 1 — Global skin (header / footer / nav / mobile menu / cart) * Section 2 — Homepage skin (hero, value-props, carousels, FAQ, quote form, * SEO rows, Instagram — homepage-only selectors) * Section 3 — Product skin (product gallery, options, sticky bar, CLS fixes * from v2.3) * * NOTE: Category pages (all-woven-labels, all-patches, all-hang-tags, * all-pins) do NOT require a dedicated section in this file — their * page-specific styling is embedded inline within each CMS page's HTML. * Only the Global skin rules (header, nav, footer) are needed on those pages. * * DO NOT edit this file in place. Regenerate from the source package. * ============================================================================ */ /* ============================================================================ SECTION 1: GLOBAL SKIN Universal header / nav / cart / mobile-menu / footer styles. Source: qwl-global-skin.css Load everywhere (default_head_blocks.xml). ============================================================================ */ /* ============================================ CART ICON FIX Shopping bag icon + counter badge overlay ============================================ */ .action.showcart { display: inline-block !important; text-decoration: none !important; } .action.showcart:before, .action.showcart::before { content: none !important; display: none !important; } .cart-icon-wrap { position: relative !important; display: inline-block !important; line-height: 0 !important; } .cart-icon-wrap .fa-shopping-bag { color: #EF5732 !important; font-size: 28px !important; line-height: 33px !important; display: inline-block !important; } .minicart-wrapper .action.showcart .counter.qty, .action.showcart .counter.qty, .action.showcart .counter { position: absolute !important; top: 14px !important; left: 0 !important; right: 0 !important; bottom: auto !important; width: auto !important; height: auto !important; min-width: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; color: #fff !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1 !important; text-align: center !important; display: block !important; border-radius: 0 !important; overflow: visible !important; } .action.showcart .counter-label { display: none !important; } /* ============================================ TOP BAR: Login next to cart ============================================ */ .top-header-right { display: flex !important; align-items: center !important; gap: 16px !important; flex-shrink: 0 !important; margin-left: auto !important; } .top-header-right .account-links a { color: #fff !important; white-space: nowrap !important; } /* ============================================ HEADER GOLD DIVIDER (full-width) ============================================ */ .header-nav { border-bottom: none !important; position: relative !important; } .header-nav::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 50% !important; transform: translateX(-50%) !important; width: 100vw !important; height: 2px !important; background: #ECAA00 !important; z-index: 10 !important; } /* ============================================ NAV BUTTON ENHANCEMENTS (≥1280px desktop) Gradient buttons, dropdown styling, phone block ============================================ */ @media screen and (min-width: 1280px) { /* Orange gradient nav buttons */ a.button.nav-tier-1 { background: linear-gradient(135deg, #EF5732, #ff7a5c) !important; box-shadow: 0 2px 8px rgba(239,87,50,0.25); transition: all 0.2s ease !important; border: none !important; } a.button.nav-tier-1:hover, .nav-item:hover a.button.nav-tier-1 { box-shadow: 0 4px 16px rgba(239,87,50,0.4); transform: translateY(-1px); } /* Seamless button→dropdown connection on hover */ .nav-item:not(.no-subnav):hover a.button.nav-tier-1:not(.childless), a.button.nav-tier-1:not(.childless):hover { background: linear-gradient(135deg, #EF5732, #ff7a5c) !important; border-radius: 1.5rem 1.5rem 0 0 !important; box-shadow: 0 -2px 12px rgba(239,87,50,0.2); transform: none; } /* Bridge pseudo-element */ .nav-item:not(.no-subnav):hover::after { background: linear-gradient(135deg, #EF5732, #ff7a5c) !important; height: 1rem; z-index: 101; } /* White dropdown panel with warm hover */ .nav-item:hover ul.subnav, ul.subnav:hover, .nav-tier-1.active ~ ul.subnav { background: white !important; border-radius: 0 0.75rem 0.75rem 0.75rem !important; box-shadow: 0 12px 32px rgba(0,0,0,0.12) !important; padding: 6px 0 !important; border: 1px solid #f0ebe6; border-top: none; } ul.subnav li { padding: 0 !important; } ul.subnav a { color: #4a2d2a !important; padding: 9px 20px !important; display: block; transition: all 0.15s; font-weight: 400 !important; } ul.subnav a:hover { background: #fef5f0 !important; color: #EF5732 !important; padding-left: 24px !important; opacity: 1 !important; } /* "All Labels →" highlight links */ .subnav-item.rush { display: flex !important; align-items: center; white-space: nowrap; border-top: 1px solid #f0ebe6; margin-top: 4px; padding-top: 4px; } .subnav-item.rush a { color: #EF5732 !important; font-weight: 700 !important; display: inline !important; padding: 9px 6px 9px 20px !important; border-top: none !important; margin-top: 0 !important; } .subnav-item.rush .fa-arrow-right { color: #EF5732; font-size: 11px; flex-shrink: 0; } /* Two-column dropdown for menus with >8 items */ ul.subnav.two-col { column-count: 2 !important; column-gap: 0 !important; min-width: 420px !important; } ul.subnav.two-col li { break-inside: avoid !important; } ul.subnav.two-col li.subnav-item.rush:last-child { column-span: all !important; } /* Sewing Services gold gradient button */ .quote-link-area a.button.gold { background: linear-gradient(135deg, #ECAA00, #f0c040) !important; color: #4a2d2a !important; box-shadow: 0 2px 8px rgba(236,170,0,0.3); border: none !important; transition: all 0.2s; } .quote-link-area a.button.gold:hover { box-shadow: 0 4px 16px rgba(236,170,0,0.5); transform: translateY(-1px); } /* Phone + availability next to Sewing Services */ .quote-link-area { display: flex !important; align-items: center !important; gap: 16px !important; } .nav-phone-hours { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .nav-phone { color: #4a2d2a !important; font-size: 14px; text-decoration: none !important; font-weight: 400; letter-spacing: 0.2px; } .nav-phone strong { font-weight: 700; } .nav-phone i { font-size: 12px; color: #EF5732; } .nav-availability { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #666; } .availability-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; box-shadow: 0 0 4px rgba(34,197,94,0.5); animation: pulse-dot 2s infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .availability-text { font-weight: 500; color: #555; } } /* ============================================ NAV COMPACT: Scale buttons at 1280-1399px ============================================ */ @media screen and (min-width: 1280px) and (max-width: 1399px) { a.button.nav-tier-1 { font-size: 12px !important; padding: 8px 12px !important; white-space: nowrap !important; } .quote-link-area a.button.gold { font-size: 12px !important; padding: 8px 12px !important; white-space: nowrap !important; } .quote-link-area a.button.gold svg { width: 14px !important; height: 14px !important; } .nav-phone-hours { gap: 1px !important; } .nav-phone { font-size: 12px !important; } .nav-availability { font-size: 10px !important; } .navigation-container { gap: 4px !important; } .header-areas { gap: 8px !important; } } @media screen and (min-width: 1280px) and (max-width: 1319px) { a.button.nav-tier-1 { font-size: 11px !important; padding: 7px 9px !important; } .quote-link-area a.button.gold { font-size: 11px !important; padding: 7px 9px !important; } .quote-link-area { gap: 8px !important; } .nav-phone { font-size: 11px !important; } } /* ============================================ QWL MOBILE MENU OVERLAY (full-screen accordion) ============================================ */ .qwl-mobile-menu { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: white; z-index: 20000; overflow-y: auto; -webkit-overflow-scrolling: touch; } .qwl-mobile-menu.open { display: flex; flex-direction: column; } .qwl-mm-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 2px solid #EF5732; position: sticky; top: 0; background: white; z-index: 1; box-shadow: 0 1px 4px rgba(0,0,0,0.04); } .qwl-mm-close { background: #4a2d2a; border: none; border-radius: 8px; font-size: 28px; color: #fff !important; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } .qwl-mm-body { padding: 4px 0; flex: 1; } .qwl-mm-group { border-bottom: 1px solid #f0f0f0; } .qwl-mm-toggle { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; font-size: 16px; font-weight: 700; color: #4a2d2a; cursor: pointer; user-select: none; } .qwl-mm-chev { transition: transform 0.3s; color: #bbb; font-size: 14px; } .qwl-mm-group.open .qwl-mm-chev { transform: rotate(180deg); color: #EF5732; } .qwl-mm-sub { display: none; padding: 0 20px 12px; } .qwl-mm-group.open .qwl-mm-sub { display: block; } .qwl-mm-sub a { display: block; padding: 11px 14px; font-size: 15px; color: #444; text-decoration: none; border-radius: 8px; font-weight: 400; } .qwl-mm-sub a:active { background: #fef5f0; } .qwl-mm-highlight { color: #EF5732 !important; font-weight: 700 !important; } .qwl-mm-footer { padding: 16px 20px 24px; border-top: 1px solid #eee; background: #faf6f1; } .qwl-mm-sewing { display: block; text-align: center; padding: 15px; font-size: 16px; border-radius: 10px; margin-bottom: 10px; font-weight: 700; background: linear-gradient(135deg, #ECAA00, #f0c040); color: #4a2d2a; text-decoration: none; } .qwl-mm-call { display: block; text-align: center; font-size: 15px; padding: 10px; color: #4a2d2a; text-decoration: none; font-weight: 700; } .qwl-mm-hours { text-align: center; margin-top: 4px; font-size: 12px; color: #666; display: flex; align-items: center; justify-content: center; gap: 5px; } .qwl-mm-hours .availability-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; box-shadow: 0 0 4px rgba(34,197,94,0.5); animation: pulse-dot 2s infinite; } .qwl-mm-hours .availability-text { font-weight: 500; } /* ============================================ RESPONSIVE: GLOBAL MOBILE OVERFLOW FIX ============================================ */ @media (max-width: 768px) { html, body { overflow-x: hidden !important; -webkit-overflow-scrolling: touch; } section, .desktop-width, .wrapper, .page-wrapper, .columns, .column.main, #maincontent, .page-main { overflow-x: hidden !important; max-width: 100vw !important; word-wrap: break-word; } } /* Lock body scroll when mobile nav is open */ body.nav-open { overflow: hidden !important; } /* ============================================ RESPONSIVE: ULTRA-WIDE (≥1800px) ============================================ */ @media (min-width: 1800px) { .desktop-width, .page-footer .footer-middle .container { max-width: 1536px !important; margin-left: auto !important; margin-right: auto !important; } } /* ============================================ RESPONSIVE: TOP BAR (≤1279px) ============================================ */ @media (max-width: 1279px) { .qwl-top-header .banner-container { display: none !important; } .qwl-top-header .google-rating-container { display: block !important; } .qwl-top-header .google-rating-container img { max-height: 2rem !important; display: block !important; } .qwl-top-header .top-header-areas { padding: 0 12px !important; } .qwl-top-header .top-header-areas, .top-header-areas { display: flex !important; align-items: center !important; justify-content: space-between !important; height: 32px !important; flex-wrap: nowrap !important; overflow: visible !important; } .top-header-right { display: flex !important; align-items: center !important; gap: 8px !important; margin-left: auto !important; } } @media (max-width: 768px) { .qwl-top-header .banner a { font-size: 11px !important; } .qwl-top-header .top-header-areas { display: flex !important; align-items: center !important; justify-content: space-between !important; } .top-header-right { display: flex !important; align-items: center !important; gap: 8px !important; margin-left: auto !important; } } @media (max-width: 428px) { .qwl-top-header .banner a { font-size: 10px !important; white-space: normal !important; line-height: 1.3 !important; } } /* ============================================ RESPONSIVE: HEADER NAV — HAMBURGER (≤1279px) ============================================ */ /* Desktop: hamburger hidden, nav visible */ .nav-toggle-area { display: none; } .menu-close { display: none; } @media (max-width: 1279px) { .header-nav { padding: 0 16px !important; background: #fff !important; position: relative !important; z-index: 100 !important; min-height: 56px !important; } .header-areas { display: flex !important; align-items: center !important; justify-content: space-between !important; height: 56px !important; } .logo-area { width: auto !important; flex: 0 0 auto !important; } .logo-area .logo img { height: 36px !important; } /* Hide desktop nav, quote, phone */ .navigation-area { display: none !important; } .quote-link-area { display: none !important; } .nav-phone-hours { display: none !important; } /* Show hamburger */ .nav-toggle-area { display: flex !important; align-items: center !important; } .menu-toggle a.button { background: transparent !important; color: #4a2d2a !important; box-shadow: none !important; border: none !important; font-size: 24px !important; padding: 6px 10px !important; line-height: 1 !important; } /* Mobile nav overlay (toggled via JS — .visible class) */ .navigation-area.visible { display: flex !important; flex-direction: column !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: white !important; z-index: 10000 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding: 0 !important; } .navigation-area.visible::before { content: ''; display: block; height: 56px; flex-shrink: 0; border-bottom: 2px solid #EF5732; } .navigation-area.visible .navigation-container { display: flex !important; flex-direction: column !important; padding: 8px 0 !important; } .navigation-area.visible .nav-item { width: 100% !important; border-bottom: 1px solid #f0f0f0 !important; } .navigation-area.visible a.button.nav-tier-1 { width: 100% !important; text-align: left !important; border-radius: 0 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 16px !important; font-weight: 700 !important; padding: 15px 20px !important; background: white !important; color: #4a2d2a !important; box-shadow: none !important; } .navigation-area.visible a.button.nav-tier-1:hover { background: #faf6f1 !important; } .navigation-area.visible ul.subnav, .navigation-area.visible ul.subnav.two-col { position: static !important; display: none !important; column-count: 1 !important; min-width: auto !important; box-shadow: none !important; border: none !important; padding: 0 0 8px 0 !important; background: #faf6f1 !important; border-radius: 0 !important; } .navigation-area.visible .nav-item.open ul.subnav, .navigation-area.visible .nav-item.open ul.subnav.two-col { display: block !important; } .navigation-area.visible ul.subnav a { color: #4a2d2a !important; padding: 12px 20px 12px 32px !important; font-size: 15px !important; display: block !important; } .navigation-area.visible ul.subnav a:hover { background: #f0ebe4 !important; } .navigation-area.visible .subnav-item.rush a { color: #EF5732 !important; font-weight: 700 !important; } /* Toggle states */ body.nav-open .menu-open { display: none !important; } body.nav-open .menu-close { display: inline-flex !important; } body.nav-open { overflow: hidden !important; } } /* ============================================ RESPONSIVE: ≤599px — Force top bar + header layout ============================================ */ @media (max-width: 599px) { /* Top bar: google rating left, cart right */ .qwl-top-header .top-header-areas { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 12px !important; } .qwl-top-header .banner-container { display: none !important; } .qwl-top-header .google-rating-container { display: block !important; } .qwl-top-header .google-rating-container img { max-height: 1.6rem !important; } .top-header-right { display: flex !important; align-items: center !important; gap: 8px !important; position: static !important; float: none !important; margin-left: auto !important; } .minicart-wrapper, .minicart-container { position: static !important; float: none !important; } .action.showcart { line-height: 1 !important; padding: 0 !important; } .cart-icon-wrap .fa-shopping-bag { font-size: 22px !important; line-height: 24px !important; } .minicart-wrapper .action.showcart .counter.qty { top: 10px !important; } /* Header nav: logo left, hamburger right — override Porto grid */ .header-nav .header-areas, .header-areas { display: flex !important; align-items: center !important; justify-content: space-between !important; grid-template-areas: none !important; grid-template-columns: none !important; } .header-nav .header-areas .logo-area, .logo-area { order: 0 !important; flex: 0 0 auto !important; width: auto !important; justify-self: flex-start !important; text-align: left !important; } .logo-area .logo img { height: 32px !important; } .header-nav .header-areas .nav-toggle-area, .nav-toggle-area { order: 1 !important; margin-left: auto !important; } } /* ============================================ RESPONSIVE: FOOTER (≤1024px, ≤768px, ≤428px, ≤375px) ============================================ */ @media (max-width: 1024px) { .page-footer .footer-middle .container .row { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; } .page-footer .footer-middle .container .row > .col-lg-4 { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; } } @media (max-width: 768px) { .page-footer .footer-middle .container { padding: 0 16px !important; } .page-footer .footer-middle .container .row { grid-template-columns: 1fr 1fr !important; gap: 20px 16px !important; } .page-footer .footer-middle .container .row > .col-lg-4 { min-width: 0 !important; } .page-footer h2.footer-menu-item-title { font-size: 15px !important; margin-bottom: 8px !important; } .page-footer .footer-menu-item { margin-bottom: 2px !important; } .page-footer .footer-menu-item a, .page-footer .footer-text-item span, .page-footer .footer-text-item a { font-size: 13px !important; } .page-footer .block.newsletter input { font-size: 14px !important; padding: 8px 12px !important; } .page-footer .block.newsletter .actions button { font-size: 13px !important; padding: 8px 16px !important; } footer > div:last-child { font-size: 12px !important; padding: 16px 12px !important; } .page-footer .accepted-payment-types img { max-width: 100% !important; height: auto !important; } } @media (max-width: 428px) { .page-footer .footer-middle .container { padding: 0 12px !important; } .page-footer .footer-middle .container .row { gap: 16px 12px !important; } .page-footer h2.footer-menu-item-title { font-size: 14px !important; } .page-footer .footer-menu-item a, .page-footer .footer-text-item span, .page-footer .footer-text-item a { font-size: 12px !important; line-height: 1.6 !important; } .page-footer .footer_newsletter_text { font-size: 12px !important; } .page-footer .footer_newsletter_text br { display: none; } } @media (max-width: 375px) { .page-footer h2.footer-menu-item-title { font-size: 13px !important; } .page-footer .footer-menu-item a, .page-footer .footer-text-item span, .page-footer .footer-text-item a { font-size: 11px !important; } } /* ============================================ FOOTER: Constrain to match discounts grid width ============================================ */ .page-footer .footer-middle .container { max-width: 1536px !important; padding: 0 40px !important; margin: 0 auto !important; } /* ============================================ v3.2 PROMOTED FROM CATEGORY PAGES (shared-in-all-4) ============================================ */ body {--brown:#4a2d2a;--light-brown:#89554f;--orange:#ef5732;--pink:#ed6e9b;--light-pink:#f4e1dd;--gold:#ecaa00;--cream:#fce5d7;--beige:#ede6d6;--flesh:#da8279;--desktop:1760px;--bigscreen:1600px;--default:"Neulis Alt",sans-serif} body {font-size:16px;scroll-behavior:none} .minicart-wrapper .action.showcart:before, .minicart-wrapper .action.showcart.active:before {color:var(--orange)} .minicart-wrapper .action.showcart:hover:before {color:var(--gold)} .account-links a, .phone-number a {color:#fff} .account-links a:hover, .phone-number a:hover {color:var(--gold)} .minicart-wrapper .action.showcart .counter.qty {margin-left:-3px;margin-top:-8px} .header-areas {align-items:center;display:grid;grid-template-areas:"logo toggle" "nav nav";grid-gap:1rem;grid-template-columns:1fr auto;position:relative;z-index:99} .header-areas .logo-area {grid-area:logo;justify-self:start;width:100%} .header-areas .nav-toggle-area {grid-area:toggle} .header-areas .navigation-area {grid-area:nav} .header-areas .quote-link-area {grid-area:quote;display:none} .navigation-container {box-sizing:border-box;max-height:300vh;overflow:auto;padding-right:1rem;transition:max-height 1s ease;width:calc(100% - 1rem)} :not(.menu-active) .navigation-container {max-height:0;overflow:hidden} a.button.nav-tier-1 {box-sizing:border-box;width:100%;transition:border-radius .25s linear 1.25s} a.button.nav-tier-1:not(.childless).active {background-color:var(--pink);border-radius:1.5rem 1.5rem 0 0;transition:none} .navigation-container .nav-item:not(:first-of-type) {margin-top:1rem} .nav-tier-1.active~ul.subnav {max-height:300vh;overflow:auto} .footer-middle {background-color:transparent;color:var(--light-brown);padding:0} .qwl .footer-bottom {background-color:var(--brown);min-height:unset;color:#fff;padding:.5rem 0} .qwl h2.footer-menu-item-title {color:var(--brown);font-size:1.25rem;font-weight:500;margin:0 0 .5rem} .footer-menu-item a, .footer-text-item a {color:var(--light-brown);font-weight:400} footer .footer ul {margin-bottom:2rem} footer .footer ul .footer-menu-item {margin-bottom:.5em} .footer-middle .block.newsletter label {display:none} .footer-middle .block.newsletter .form.subscribe {align-items:center;background-color:#fff;border-radius:1.5rem;display:flex;height:3.5rem;justify-content:space-between;margin:1rem 0 2rem;max-width:100%} .footer-middle .block.newsletter input {background-color:#fff;border-radius:0;display:flex;height:100%;width:100%} .footer-middle .block.newsletter .action.subscribe {background-color:var(--gold);border-radius:0 1.5rem 1.5rem 0;color:var(--brown);cursor:pointer;height:3.5rem;font-family:var(--default);font-size:1rem;letter-spacing:.05em;line-height:auto;padding:0 1rem;font-weight:500;text-transform:uppercase} .footer-middle .block.newsletter .action.subscribe:hover {background-color:var(--orange);color:var(--gold)} .footer .container .row {display:grid;gap:1rem;grid-template-columns:1fr 1fr} .footer .newsletter {grid-column:1/span 2} .page-footer {position:relative} .page-footer:before {background:transparent url("/pub/media/qwl2025/checker-border-orange.svg") center left repeat-x;background-size:contain;top:0;content:" ";display:block;height:.5rem;position:absolute;width:100%} .magento-rma-returns-returns .page-main .page-title-wrapper .page-title, .magento-rma-returns-view .page-main .page-title-wrapper .page-title, .magento-rma-guest-returns .page-main .page-title-wrapper .page-title, .account .page-main .page-title-wrapper .page-title, [class^=sales-guest-] .page-main .page-title-wrapper .page-title, .sales-guest-view .page-main .page-title-wrapper .page-title, .magento-rma-guest-returns .page-main .page-title-wrapper .page-title {color:#521e27;font-size:30px;margin:0 0 15px;font-weight:400} .account .page-title-wrapper {display:none} .account .account-nav .title {margin-bottom:14px} .account .account-nav .nav.items>li.nav.item, .account .account-nav .nav.items>li.nav.item.current {font-size:17px;line-height:1.2em;margin-bottom:3px;border:1px solid #fff;border-radius:7px;padding:6px 10px 8px} .account .account-nav .nav.items>li.nav.item span.delimiter {width:100%;display:inline-block;border-bottom:2px solid silver} .account .account-nav .nav.items>li.nav.item:hover {border:1px dashed #552730;transition:border 1s} .account .account-nav .nav.items>li.nav.item.current {background-color:#552730;color:#fff;border-radius:7px} .account .account-nav .nav.items>li.nav.item.current:hover {border:1px solid #552730} .account .account-nav .nav.items>li.nav.item.current a {display:inline-block;color:#fff} .account .account-nav .nav.items>li.nav.item.current strong {font-weight:unset} .account .columns>* {float:unset !important} .account .columns {display:flex;flex-wrap:wrap} .account .columns .sidebar-main {margin-bottom:0;order:-2} .account .columns .sidebar-main .account-nav {margin-bottom:15px} .account .columns .sidebar-main .sidebar-additional {display:none} .account .columns .column.main {display:flex;flex-direction:column;padding-bottom:0;margin-top:10px;padding-left:0} .account .columns .column.main .block-dashboard-orders {order:-1} .account .indent-to-match-table {padding-left:8px} .account table {font-size:14px;margin-bottom:40px} .account table thead tr {background-color:#521e27;color:#fff} .account table#my-pending-approvals {margin-bottom:40px} .account table#my-pending-approvals td {border-bottom:1px solid silver} .account table#my-pending-approvals embed {max-height:20vw} .account table#my-pending-approvals td.label {font-weight:700} .account table#my-pending-approvals td.artwork img {border:1px solid silver} .account table#my-pending-approvals td.artwork img {max-height:50vh} .account table#my-pending-approvals td.artwork button {border-radius:7px;margin:10px 0 0 20px;padding:10px 20px;height:unset;line-height:1.2em;min-width:200px} .account table#my-pending-approvals td.artwork button.artwork-approve-popup {background-color:green;color:#fff} .account table#my-pending-approvals td.artwork button.artwork-disapprove-popup:hover {background-color:red;color:#fff} .account table#my-pending-approvals textarea {border:2px solid orange} .account .columns .column.main .block .block-title strong, .account .columns .column.main .block .block-title h2 {font-weight:unset;font-size:20px;color:#521e27} .account .toolbar.bottom {padding:10px;border-top:1px solid silver;border-bottom:1px solid silver} .account .limiter-options {padding-left:10px;padding-right:30px} .account .actions-toolbar .primary {float:right} .account .column.main .nav.item {font-size:16px} .account.sales-order-history #my- {border:1px solid silver;font-size:14px} .account .box {color:#000} .account .box .box-title {background-color:#552730;color:#fff;border:1px solid #552730} .account .box .box-content {border:1px solid #552730} .account .box .box-actions {border:1px solid #552730;border-top:none} .account .no-pending-approvals {font-size:24px;padding:8px 8px 12px;margin-bottom:20px;background-color:silver} .account .order-details-items .table-order-items td, .account .order-details-items .table-order-items td .product.name, .account .order-details-items .table-order-items td .price {font-size:20px;line-height:1.1em;margin:0;padding:10px} .account .order-details-items .table-order-items td .item-options {font-size:14px;margin-top:20px;line-height:1.3em;padding:10px} .sewing-service-wrapper .comparison-table tbody th {width:55%} .sewing-service-wrapper .comparison-table tbody td {width:15%} .table-order-items>tbody>tr>th {vertical-align:middle !important} .tip-card-body {box-sizing:border-box;align-items:center;background-color:var(--brown);display:flex;color:#fff;left:0;justify-content:center;min-height:5rem;padding:1rem;position:absolute;text-align:center;top:0;width:100%} .tip-card-body h3 {font-size:1rem;font-weight:500;margin:0} .minicart-wrapper .action.close:before {display:block !important;text-align:center !important;padding-bottom:7% !important;color:#fff !important} body { --brown: #4a2d2a; --orange: #EF5732; --flesh: #faf7f2; --gold: #ECAA00; --pink: #ed6e9b; --default: "Neulis Alt", sans-serif; } body { overflow-x: hidden !important; } .footer-middle .block.newsletter .action.subscribe { background: linear-gradient(135deg, #EF5732, #ff7a5c) !important; border: none !important; box-shadow: 0 2px 8px rgba(239,87,50,0.25) !important; color: #fff !important; border-radius: 0 1.5rem 1.5rem 0 !important; } .footer-middle .block.newsletter .action.subscribe:hover { background: linear-gradient(135deg, #ff7a5c, #EF5732) !important; } .header-nav::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background: #faf7f2; z-index: -1; top: 0; } .faq-body p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.85); padding-bottom: 1.2rem; margin: 0; } .blog-tip-card .card-body { padding: 0.75rem 0.75rem 1rem; } .nav-open { overflow: hidden !important; } .page-footer .footer-middle .container .row { display: flex !important; justify-content: center !important; flex-wrap: wrap !important; } .page-footer a:hover { color: #ed6e9b !important; } .page-footer .footer-menu-item-title a { color: inherit !important; text-decoration: none !important; } .page-footer .footer-menu-item-title a:hover { color: #ed6e9b !important; } .page-footer .footer-text-item i { color: #ed6e9b !important; } /* ============================================================================ SECTION 2: HOMEPAGE SKIN Homepage-only section styling (hero, value props, carousels, FAQ, quote form, SEO rows, Instagram). Source: qwl-homepage-skin.css Load on homepage only (cms_index_index.xml) OR safe to load site-wide since selectors are scoped under homepage-specific classes. ============================================================================ */ /* ============================================ HERO: White mask + gold top edge ============================================ */ .qwl-hero:after, .qwl-hero::after { background: #fff !important; background-image: none !important; height: 6vw !important; border-top: 5px solid #ECAA00 !important; position: absolute !important; bottom: 0 !important; top: auto !important; left: 0 !important; right: 0 !important; z-index: 2 !important; } /* Pull next section up to gold line */ .qwl-hero.homepage-hero { margin-bottom: calc(-6vw + 1rem) !important; margin-left: 50% !important; translate: -50% 0 !important; position: relative !important; overflow: hidden !important; } /* Content below hero renders above the white mask */ .qwl-hero.homepage-hero + * { position: relative !important; z-index: 3 !important; } /* Hero H1 text shadow */ .qwl-hero.homepage-hero .hero-content h1 { text-shadow: 0 1px 4px rgba(255, 255, 255, 0.3), 0 0 12px rgba(255, 255, 255, 0.15) !important; color: #3a1f18 !important; } /* Clip scaled image without hiding the :after border */ .qwl-hero.homepage-hero .hero-image { overflow: visible !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; } /* ============================================ HERO: Image positioning & frosted glass card v3: bottom-anchored on desktop, top-pinned ≤1024px ============================================ */ /* v3: desktop — anchor image to gold line, overflow upward */ .qwl-hero.homepage-hero .hero-image img { transform: none !important; width: 100% !important; height: auto !important; position: absolute !important; bottom: 6vw !important; left: 0 !important; top: auto !important; object-fit: cover !important; } /* v3: ≤1024px — pin image top, fill to gold line, overflow left/right equally */ @media screen and (max-width: 1024px) { .qwl-hero.homepage-hero .hero-image img { top: 0 !important; bottom: 6vw !important; left: 50% !important; transform: translateX(-50%) !important; width: auto !important; height: calc(100% - 6vw) !important; min-width: 100% !important; min-height: calc(100% - 6vw) !important; object-fit: cover !important; object-position: center bottom !important; } } /* v3: center content vertically accounting for 6vw gold border at bottom */ .qwl-hero.homepage-hero .hero-content { padding-top: 2rem !important; padding-bottom: calc(6vw + 2rem) !important; } /* v3: frosted glass card wraps inner content */ .hero-glass { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 16px; padding: 2rem 2.5rem; max-width: 600px; margin: 0 auto; text-align: center; box-sizing: border-box; overflow: hidden; } .hero-glass .hero-offer, .qwl-hero.homepage-hero .hero-content .hero-glass .hero-offer { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; padding: 1rem 1.5rem !important; margin: 0 !important; } .hero-glass .hero-offer .coupon-svg { width: 100% !important; max-width: 100% !important; } .hero-glass .hero-offer .button-container .hero-cta { white-space: nowrap !important; font-size: clamp(0.85rem, 1.2vw, 1rem) !important; } /* v3: cap offer font sizes so they don't overflow the glass card on ultrawide */ .hero-glass .hero-offer .heading { font-size: clamp(1.5rem, 2vw, 2rem) !important; } .hero-glass .hero-offer .subheading { font-size: clamp(1.2rem, 1.5vw, 1.5rem) !important; } /* v3: Hero height — image is absolutely positioned so container needs explicit height */ .qwl-hero.homepage-hero { min-height: 793px !important; } @media (min-width: 1080px) and (max-width: 1399px) { .qwl-hero.homepage-hero { min-height: 580px !important; } } @media (max-width: 1079px) { .qwl-hero.homepage-hero { min-height: auto !important; } } /* ============================================ HERO OFFER CARD: kill bullet dots ============================================ */ .hero-offer ul.hero-checks, .hero-offer ul.hero-checks li { list-style: none !important; list-style-type: none !important; } .hero-offer ul.hero-checks li::before { content: none !important; display: none !important; } /* ============================================ VALUE PROPS ROW ============================================ */ .value-props-row { display: flex; justify-content: center; gap: 3rem; padding: 2rem 0 1.5rem; } .value-prop { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; min-width: 120px; } .value-prop i { font-size: 3.6rem; color: #EF5732; } .value-prop span { font-size: 1.575rem; font-weight: 700; color: #4a2d2a; letter-spacing: 0.02em; text-align: center; } /* ============================================ REVIEWS + FAQ COMBINED SECTION ============================================ */ .reviews-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } .review-card { background: #fff; border-radius: 12px; padding: 1.5rem; margin-bottom: 0.75rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .review-stars { display: flex; gap: 3px; margin-bottom: 8px; } .review-stars i { color: #ECAA00; font-size: 13px; } .review-text { font-size: 15px; line-height: 1.6; color: #444; margin: 0 0 10px; } .review-author { font-size: 13px; font-weight: 700; color: #4a2d2a; } .faq-card { background: linear-gradient(135deg, #4a2d2a, #6b4440); border-radius: 12px; margin-bottom: 0.75rem; box-shadow: 0 2px 8px rgba(74,45,42,0.25); overflow: hidden; transition: box-shadow 0.2s ease; } .faq-card:hover { box-shadow: 0 4px 14px rgba(74,45,42,0.35); } .faq-card button { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 1.5rem; border: none; background: none; cursor: pointer; font-size: 15px; font-weight: 700; color: #fff; text-align: left; font-family: inherit; } .faq-card button i { color: #ECAA00; font-size: 13px; transition: transform 0.3s; flex-shrink: 0; } .faq-card .faq-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 1.5rem; } .faq-card.open .faq-body { max-height: 200px; } .faq-card.open button i { transform: rotate(180deg); } .faq-body p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.85); padding-bottom: 1.2rem; margin: 0; } .col-header { font-size: 1.8rem; font-weight: 700; color: #4a2d2a; margin: 0 0 1.5rem; } .reviews-link, .faq-link { font-size: 14px; font-weight: 700; color: #EF5732; text-decoration: none; margin-top: 0.5rem; display: inline-block; } /* ============================================ CUSTOM BRANDING / VISIT OUR CATEGORY PAGES ============================================ */ .custom-branding { padding: 56px 0; background: #faf6f1; } .custom-branding h2.section-heading { text-align: center; font-size: 28px; font-weight: 700; color: #4a2d2a; margin-bottom: 32px; max-width: 800px; margin-left: auto; margin-right: auto; padding: 0 40px; line-height: 1.3; } .branding-grid { max-width: 1280px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .branding-card { background: white; border-radius: 12px; overflow: hidden; border: 1px solid #e8ddd4; transition: transform 0.2s, box-shadow 0.2s; text-align: center; text-decoration: none; } .branding-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); } .branding-card .branding-img { width: 100%; aspect-ratio: 4/3; overflow: hidden; } .branding-card .branding-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; } .branding-card:hover .branding-img img { transform: scale(1.05); } .branding-card .branding-text { padding: 20px 16px; } .branding-card .branding-btn { display: inline-block; background: linear-gradient(135deg, #EF5732, #ff7a5c); color: white; padding: 8px 20px; border-radius: 24px; font-size: 13px; font-weight: 700; margin-bottom: 10px; transition: all 0.2s; text-decoration: none; } .branding-card:hover .branding-btn { box-shadow: 0 4px 12px rgba(239,87,50,0.3); } .branding-card p { font-size: 13px; color: #6a5a50; line-height: 1.6; } /* ============================================ QUOTE FORM (v2 style, pink bg) ============================================ */ .v2-quote-section { position: relative; padding: 56px 0; overflow: hidden; } .v2-quote-bg { position: absolute; inset: 0; z-index: 0; } .v2-quote-bg img { width: 100%; height: 100%; object-fit: cover; } .v2-quote-inner { position: relative; z-index: 1; max-width: 500px; margin-left: 50%; padding: 40px; background: rgba(255,255,255,0.5); border: 2px solid #e8a0a0; border-radius: 16px; } .v2-quote-inner h2 { font-size: 34px; font-weight: 700; color: #4a2d2a; margin: 0 0 16px; text-shadow: 0 1px 3px rgba(255,255,255,0.7), 0 2px 8px rgba(255,255,255,0.4); } .v2-quote-inner .qf-benefits { list-style: none; padding: 0; margin: 0 0 12px; } .v2-quote-inner .qf-benefits li { font-size: 15px; color: #4a2d2a; padding: 4px 0; text-shadow: 0 1px 3px rgba(255,255,255,0.7), 0 2px 8px rgba(255,255,255,0.4); } .v2-quote-inner .qf-benefits li::before { content: '✓'; color: #EF5732; margin-right: 8px; font-weight: 700; } .v2-quote-inner .qf-note { font-size: 15px; color: #4a2d2a; margin-bottom: 20px; text-shadow: 0 1px 3px rgba(255,255,255,0.7), 0 2px 8px rgba(255,255,255,0.4); } .v2-quote-inner .qf-note em { color: #EF5732; font-style: normal; font-weight: 700; } .qf-group { margin-bottom: 14px; } .qf-group label { display: block; font-size: 11px; font-weight: 700; color: #4a2d2a; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; text-shadow: 0 1px 3px rgba(255,255,255,0.7); } .qf-group input, .qf-group select, .qf-group textarea { width: 100%; padding: 11px 14px; border: 1px solid #e8ddd4; border-radius: 8px; font-size: 15px; color: #4a2d2a; background: #faf6f1; transition: border-color 0.2s, background 0.2s; box-sizing: border-box; font-family: inherit; line-height: 1.4; } .qf-group select { height: auto; min-height: 42px; } .qf-group input::placeholder, .qf-group textarea::placeholder { color: #888 !important; opacity: 1 !important; } .qf-group input::-webkit-input-placeholder, .qf-group textarea::-webkit-input-placeholder { color: #888 !important; } .qf-group input:focus, .qf-group select:focus, .qf-group textarea:focus { outline: none; border-color: #EF5732; background: white; } .qf-group textarea { resize: vertical; min-height: 80px; } .qf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .qf-upload { border: 2px dashed #EF5732; border-radius: 10px; padding: 20px; text-align: center; background: #fef5f0; cursor: pointer; transition: all 0.2s; margin-bottom: 14px; } .qf-upload:hover { background: #fde8e0; border-color: #d44a2a; } .qf-upload i { font-size: 24px; color: #EF5732; margin-bottom: 4px; } .qf-upload .upload-text { font-size: 13px; color: #EF5732; font-weight: 600; } .qf-upload .upload-sub { font-size: 11px; color: #8a7a6e; margin-top: 2px; } .qf-recaptcha { background: #f0ebe4; border: 1px solid #e8ddd4; border-radius: 8px; padding: 14px; text-align: center; margin-bottom: 14px; font-size: 12px; color: #8a7a6e; } .qf-submit { display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; background: linear-gradient(135deg, #EF5732, #ff7a5c) !important; color: #fff !important; padding: 0 24px !important; border: none !important; border-radius: 12px !important; font-size: 18px !important; font-weight: 700 !important; cursor: pointer; transition: all 0.2s; letter-spacing: 1px !important; font-family: inherit; text-transform: uppercase !important; box-shadow: 0 4px 12px rgba(239,87,50,0.3) !important; line-height: 1 !important; } .qf-submit:hover { box-shadow: 0 6px 20px rgba(239,87,50,0.45) !important; transform: translateY(-2px); } /* ============================================ DISCOUNTS SECTION ============================================ */ .discounts-section { padding: 56px 0; background: #faf6f1; position: relative; } .discounts-section::before { content: ''; position: absolute; inset: 0; width: 100vw; left: 50%; transform: translateX(-50%); background: #faf6f1; z-index: -1; } .discounts-section h2 { text-align: center; font-size: 28px; font-weight: 700; color: #4a2d2a; margin-bottom: 32px; padding: 0 40px; } .discounts-grid { max-width: 1536px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 32px; } .discount-card { background: white; border-radius: 12px; overflow: hidden; border: 2px solid #EF5732; text-align: center; transition: transform 0.2s, box-shadow 0.2s; } .discount-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); } .discount-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; } .discount-card .blurb { padding: 20px; font-size: 16px; color: #4a2d2a; font-weight: 500; line-height: 1.5; } .discount-card .blurb em { color: #EF5732; font-weight: 700; font-style: normal; display: block; font-size: 21px; margin-bottom: 4px; } /* Trucker banner (inside discounts section) */ .trucker-banner { max-width: 1280px; margin: 0 auto; padding: 0 40px; } .trucker-banner-inner { background: white; border-radius: 12px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #e8ddd4; } .trucker-banner-inner img { width: 100%; height: 100%; object-fit: cover; } .trucker-banner-content { padding: 32px; display: flex; flex-direction: column; justify-content: center; } .trucker-banner-content h3 { font-size: 22px; font-weight: 700; color: #4a2d2a; margin-bottom: 16px; line-height: 1.3; } .trucker-banner-content .pricing-label { font-size: 13px; font-weight: 700; color: #EF5732; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .trucker-banner-content ul { padding: 0; margin-bottom: 12px; list-style: none; } .trucker-banner-content ul li { font-size: 15px; color: #4a2d2a; padding: 4px 0; font-weight: 500; } .trucker-banner-content ul li::before { content: '•'; color: #EF5732; margin-right: 8px; font-weight: 700; } .trucker-banner-content .footnote { font-size: 12px; color: #8a7a6e; font-style: italic; } /* ============================================ SEO SECTION: "Customize with Confidence" ============================================ */ .seo-section { padding: 56px 0; background: white; } .seo-section-title { text-align: center; font-size: 34px; font-weight: 700; color: #4a2d2a; max-width: 1280px; margin: 0 auto; padding: 0 40px 28px; } .seo-row { max-width: 1280px; margin: 0 auto 32px; padding: 0 40px; display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: start; } .seo-row:nth-child(odd) { direction: rtl; } .seo-row:nth-child(odd) > * { direction: ltr; } .seo-row .seo-img { border-radius: 12px; overflow: hidden; } .seo-row .seo-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .seo-row .seo-text h3 { font-size: 20px; font-weight: 700; color: #4a2d2a; margin-bottom: 10px; } .seo-row .seo-text p { font-size: 14px; color: #5a4a40; line-height: 1.7; } /* ============================================ RESPONSIVE: HERO (≤1399px → ≤375px) ============================================ */ @media (max-width: 1399px) { .qwl-hero.homepage-hero .hero-content { padding-bottom: 7vw !important; } } @media (max-width: 1279px) { .qwl-hero.homepage-hero .hero-content { padding-bottom: 10vw !important; } } @media (max-width: 1080px) { .qwl-hero.homepage-hero .hero-content { padding-top: 4rem !important; padding-bottom: 10vw !important; } } @media (max-width: 1024px) { .qwl-hero.homepage-hero .hero-content h1 { font-size: 2.2rem !important; } } @media (max-width: 768px) { .qwl-hero.homepage-hero .hero-content h1 { font-size: 2.2rem !important; line-height: 1.2 !important; } .qwl-hero::after, .qwl-hero:after { height: 10vw !important; } .qwl-hero.homepage-hero { margin-bottom: calc(-10vw + 0.5rem) !important; } .qwl-hero.homepage-hero .hero-content { padding-bottom: 14vw !important; } .hero-offer { max-width: 100% !important; padding: 14px !important; } .hero-offer .heading { font-size: 1.5rem !important; } .hero-offer ul.hero-checks li { font-size: 14px !important; } .hero-offer .button-container .hero-cta, .hero-offer .button-container .button.hero-cta { font-size: 13px !important; padding: 10px 18px !important; } } @media (max-width: 428px) { .qwl-hero.homepage-hero .hero-content h1 { font-size: 2rem !important; padding: 0 8px !important; } .hero-offer { max-width: 100% !important; padding: 10px !important; } .hero-offer .heading { font-size: 1rem !important; } .hero-offer ul.hero-checks li { font-size: 11px !important; gap: 4px !important; margin-bottom: 4px !important; } .hero-offer ul.hero-checks li i { font-size: 14px !important; } .hero-offer .button-container .hero-cta, .hero-offer .button-container .button.hero-cta { font-size: 12px !important; padding: 8px 16px !important; } } @media (max-width: 375px) { .qwl-hero.homepage-hero .hero-content h1 { font-size: 1.8rem !important; } .hero-offer { max-width: 100% !important; padding: 8px !important; } .hero-offer ul.hero-checks li { font-size: 10px !important; } .hero-offer .button-container .hero-cta, .hero-offer .button-container .button.hero-cta { font-size: 11px !important; padding: 7px 14px !important; } } /* ============================================ RESPONSIVE: VALUE PROPS ROW ============================================ */ @media (max-width: 1024px) { .value-props-row { gap: 2rem !important; } .value-prop span { font-size: 1.3rem !important; } } @media (max-width: 768px) { .value-props-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1.5rem 1rem !important; padding: 1.5rem 1rem !important; } .value-prop { min-width: 0 !important; } .value-prop i { font-size: 2.6rem !important; } .value-prop span { font-size: 1.1rem !important; text-align: center !important; } } @media (max-width: 428px) { .value-props-row { gap: 1rem 0.75rem !important; padding: 1rem 0.75rem !important; } .value-prop i { font-size: 2.2rem !important; } .value-prop span { font-size: 0.95rem !important; } } /* ============================================ RESPONSIVE: INTRO PARAGRAPH ============================================ */ @media (max-width: 768px) { #qwl-featured-products .featured-products-header .featured-products-footer { max-width: 100% !important; } #qwl-featured-products .featured-products-header .featured-products-footer p { font-size: 15px !important; padding: 0 16px !important; } } @media (max-width: 428px) { #qwl-featured-products .featured-products-header .featured-products-footer p { font-size: 14px !important; padding: 0 12px !important; } } /* ============================================ RESPONSIVE: FEATURED PRODUCTS GRID ============================================ */ @media (max-width: 1024px) { .featured-products-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 768px) { .featured-products-grid { gap: 16px !important; padding: 0 16px !important; } } @media (max-width: 428px) { .featured-products-grid { gap: 10px !important; padding: 0 12px !important; } .featured-product-info h3 { font-size: 14px !important; } .featured-product-info p { font-size: 12px !important; } } /* ============================================ RESPONSIVE: "EXPLORE ALL PRODUCTS" HEADING ============================================ */ @media (max-width: 768px) { #qwl-featured-products > .wrapper > .featured-products-footer h2, #qwl-featured-products .featured-products-footer h2 { font-size: 1.6rem !important; padding: 0 16px !important; } } @media (max-width: 428px) { #qwl-featured-products > .wrapper > .featured-products-footer h2, #qwl-featured-products .featured-products-footer h2 { font-size: 1.3rem !important; } } /* ============================================ RESPONSIVE: CAROUSEL SECTIONS ============================================ */ @media (max-width: 768px) { #qwl-homepage-categories .carousel-header { padding: 0 16px !important; } #qwl-homepage-categories .carousel-header h2 { font-size: 1.3rem !important; } #qwl-homepage-categories .carousel-header h2 a { font-size: inherit !important; } #qwl-homepage-categories .carousel-header .button { font-size: 11px !important; padding: 6px 12px !important; } #qwl-homepage-categories .wrapper { margin-left: 16px !important; margin-right: 16px !important; } } @media (max-width: 428px) { #qwl-homepage-categories .carousel-header h2 { font-size: 1.15rem !important; } #qwl-homepage-categories .wrapper { margin-left: 12px !important; margin-right: 12px !important; } } /* ============================================ RESPONSIVE: REVIEWS + FAQ ============================================ */ @media (max-width: 768px) { .reviews-faq-grid { grid-template-columns: 1fr; gap: 2rem; } #reviews-faq { padding: 2rem 0 !important; } .reviews-faq-grid { padding: 0 16px !important; } .col-header { font-size: 1.4rem !important; } .faq-card button { width: 100% !important; padding: 1rem 1.2rem !important; font-size: 14px !important; } .review-card { padding: 1rem !important; } .review-text { font-size: 14px !important; } } @media (max-width: 428px) { .col-header { font-size: 1.2rem !important; } .faq-card button { font-size: 13px !important; padding: 0.9rem 1rem !important; } .review-text { font-size: 13px !important; } .review-author { font-size: 12px !important; } } /* ============================================ RESPONSIVE: SEWING SERVICES ============================================ */ @media (max-width: 1024px) { #homepage-sewing-services .ss-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } #homepage-sewing-services #ss-1 { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } #homepage-sewing-services #ss-text { grid-column: 1 / -1 !important; position: relative !important; z-index: 2 !important; background: #fff !important; padding: 24px !important; } #homepage-sewing-services .image-cell img { width: 100% !important; height: 100% !important; object-fit: cover !important; } } @media (max-width: 768px) { #homepage-sewing-services .ss-grid { grid-template-columns: 1fr 1fr !important; padding: 16px !important; } #homepage-sewing-services #ss-1 { grid-column: 1 / -1 !important; grid-template-columns: repeat(3, 1fr) !important; } #homepage-sewing-services #ss-text { grid-column: 1 / -1 !important; padding: 20px !important; } #homepage-sewing-services #ss-text h2 { font-size: 1.4rem !important; } #homepage-sewing-services #ss-text h2 svg { width: 32px !important; height: 32px !important; } } @media (max-width: 428px) { #homepage-sewing-services .ss-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; padding: 12px !important; } #homepage-sewing-services #ss-1 { grid-template-columns: 1fr 1fr !important; } #homepage-sewing-services #ss-1c { display: none !important; } #homepage-sewing-services #ss-text { padding: 16px !important; } #homepage-sewing-services #ss-text h2 { font-size: 1.2rem !important; gap: 8px !important; } #homepage-sewing-services #ss-text h2 svg { width: 28px !important; height: 28px !important; } #homepage-sewing-services #ss-text p, #homepage-sewing-services #ss-text li { font-size: 14px !important; } } /* ============================================ RESPONSIVE: VISIT OUR CATEGORY PAGES ============================================ */ @media (max-width: 768px) { .branding-grid { grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px; } .custom-branding h2.section-heading { font-size: 22px; padding: 0 16px; } } @media (max-width: 428px) { .custom-branding { padding: 32px 0 !important; } .custom-branding h2.section-heading { font-size: 1.5rem !important; padding: 0 12px !important; } .branding-grid { gap: 8px !important; padding: 0 12px !important; } .branding-card .branding-text { padding: 12px 8px !important; } .branding-card .branding-btn { font-size: 11px !important; padding: 6px 14px !important; } .branding-card p { font-size: 11px !important; line-height: 1.4 !important; } } /* ============================================ RESPONSIVE: QUOTE FORM ============================================ */ @media (max-width: 1024px) { .v2-quote-inner { margin-left: 30% !important; } } @media (max-width: 768px) { .v2-quote-section { padding: 32px 0 !important; } .v2-quote-inner { margin: 0 16px !important; padding: 24px 20px !important; max-width: none !important; } .v2-quote-inner h2 { font-size: 26px !important; } .qf-row { grid-template-columns: 1fr; } } @media (max-width: 428px) { .v2-quote-inner { margin: 0 12px !important; padding: 20px 16px !important; } .v2-quote-inner h2 { font-size: 22px !important; } .v2-quote-inner .qf-benefits li { font-size: 13px !important; } .v2-quote-inner .qf-note { font-size: 13px !important; } .qf-submit { font-size: 16px !important; height: 52px !important; } } /* ============================================ RESPONSIVE: DISCOUNTS ============================================ */ @media (max-width: 1024px) { .discounts-grid { padding: 0 20px; grid-template-columns: repeat(2, 1fr); } .trucker-banner { padding: 0 20px; } } @media (max-width: 768px) { .discounts-section { padding: 32px 0 !important; } .discounts-section h2 { font-size: 1.6rem !important; padding: 0 16px !important; } .discounts-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 0 16px !important; } .trucker-banner { padding: 0 16px !important; } } @media (max-width: 480px) { .discounts-section h2 { font-size: 22px; } .discounts-grid { padding: 0 16px; grid-template-columns: 1fr 1fr; gap: 10px; } .trucker-banner { padding: 0 16px; } .trucker-banner-inner { grid-template-columns: 1fr; } .trucker-banner-content { padding: 20px 16px; } .discount-card .blurb { padding: 10px; font-size: 12px; } .discount-card .blurb em { font-size: 15px; } } @media (max-width: 428px) { .discounts-section h2 { font-size: 1.3rem !important; padding: 0 12px !important; } .discounts-grid { gap: 8px !important; padding: 0 12px !important; } .discount-card .blurb { padding: 12px 8px !important; font-size: 13px !important; } .discount-card .blurb em { font-size: 17px !important; } } /* ============================================ RESPONSIVE: SAMPLES ============================================ */ @media (max-width: 768px) { #homepage-samples { overflow: hidden !important; } #homepage-samples .wrapper { padding: 20px 16px !important; } #homepage-samples .heading { font-size: 1.6rem !important; } #homepage-samples p { font-size: 0.95rem !important; } } @media (max-width: 428px) { #homepage-samples .heading { font-size: 1.3rem !important; } #homepage-samples p { font-size: 0.85rem !important; } } /* ============================================ RESPONSIVE: SEO "CUSTOMIZE WITH CONFIDENCE" ============================================ */ @media (max-width: 768px) { .seo-section { padding: 32px 0 !important; } .seo-section-title { font-size: 1.8rem !important; } .seo-row { grid-template-columns: 1fr; padding: 0 20px; gap: 16px; } .seo-row:nth-child(odd) { direction: ltr; } } @media (max-width: 428px) { .seo-section-title { font-size: 1.4rem !important; padding: 0 12px 16px !important; } .seo-row { padding: 0 12px !important; gap: 12px !important; margin-bottom: 24px !important; } .seo-row .seo-text h3 { font-size: 17px !important; } .seo-row .seo-text p { font-size: 13px !important; } } /* ============================================ RESPONSIVE: HOMEPAGE FOOTER CTA ============================================ */ @media (max-width: 768px) { #homepage-footer .wrapper { padding: 24px 16px !important; } #homepage-footer .wrapper > p:first-child, #homepage-footer .wrapper p[style*="2.5rem"] { font-size: 1.6rem !important; } #homepage-footer .buttons { flex-direction: column !important; gap: 12px !important; width: 100% !important; } #homepage-footer .buttons .button { width: 100% !important; text-align: center !important; display: block !important; } } @media (max-width: 428px) { #homepage-footer .wrapper > p:first-child, #homepage-footer .wrapper p[style*="2.5rem"] { font-size: 1.3rem !important; } } /* ============================================ RESPONSIVE: INSTAGRAM ============================================ */ @media (max-width: 768px) { #homepage-instagram { padding: 0 16px !important; overflow: hidden !important; } #homepage-instagram h2 { font-size: 1.3rem !important; } #homepage-instagram h2 a { font-size: inherit !important; } } /* ============================================ v3.2 PROMOTED FROM CATEGORY PAGES (shared-in-all-4 / homepage-overlap) ============================================ */ .qwl-hero {margin-left:50%;margin-bottom:3rem;position:relative;translate:-50% 0;width:calc(100vw)} .qwl-hero:after {background:var(--brown) url("/pub/media/qwl2025/checker-border-brown.png") repeat-x;background-size:contain;content:" ";display:block;height:1rem;position:absolute;width:100%} .qwl-hero .hero-content {padding:11rem 1rem 2rem;position:relative;text-align:center} .qwl-hero .hero-image img {height:100%;object-fit:cover;object-position:top center;position:absolute;width:100%} .qwl-hero .hero-content h1 {font-size:2rem;font-weight:600} .qwl-hero .hero-content .hero-text {font-weight:500} .qwl-hero .hero-content .hero-text.highlight {color:var(--flesh)} .qwl-hero .hero-content .hero-text .highlight {color:var(--orange)} .qwl-hero .hero-content .button {margin-top:1rem} .qwl-hero .hero-offer {background-color:rgba(255,255,255,.5);border:3px dashed var(--orange);border-radius:1rem;margin:0 auto;padding:1rem;width:fit-content} .qwl-hero .hero-offer .heading {font-size:2rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase} .qwl-hero .hero-offer .subheading {font-size:1.5rem;font-weight:500} .qwl-hero .hero-offer ul {display:grid;grid-column-gap:1rem;grid-template-columns:1fr 1fr;list-style:none;margin:1rem auto;padding:0;text-align:left;width:fit-content} .qwl-hero .hero-offer ul li {display:inline-block;font-weight:500;margin:0} .qwl-hero .hero-offer ul li:before {content:"•";margin-right:.25rem} .qwl-hero .hero-offer a.button {border-radius:.5rem;margin:0} .qwl-hero.category-hero .button-container {margin-top:1rem} .qwl-hero.category-hero .hero-content h1 { color: #3a1f18 !important; text-shadow: 0 1px 4px rgba(255,255,255,0.3), 0 0 12px rgba(255,255,255,0.15) !important; } .qwl-hero .hero-offer .heading { margin-top: -2px !important; margin-bottom: 2px !important; } .qwl-hero .hero-offer .coupon-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } .value-props-split { display: flex; align-items: center; justify-content: center; gap: 2.5rem; padding: 1rem 1rem 3rem; position: relative; z-index: 5; } .value-props-left { display: flex; flex-direction: column; align-items: flex-end; flex: 1 1 0; } .value-props-left-grid { display: flex; flex-direction: column; align-items: center; } .value-props-left-grid .icon-row { display: grid; grid-template-columns: repeat(4, auto); gap: 1rem 2rem; } .value-props-left-desc { font-size: 0.9rem; color: #6b5b56; line-height: 1.45; margin: 1rem 0 0; max-width: 560px; text-align: center; } .value-props-divider { width: 1px; height: 90px; background: #ddd; flex-shrink: 0; } .value-props-right { display: flex; align-items: center; gap: 1rem; flex: 1 1 0; max-width: none; } .value-props-right .artwork-icon { font-size: 4.2rem; color: #EF5732; flex-shrink: 0; } .value-props-right .artwork-text { text-align: left; max-width: 280px; } .value-props-right .artwork-title { font-size: 1.15rem; font-weight: 700; color: #4a2d2a; margin: 0 0 0.3rem; } .value-props-right .artwork-desc { font-size: 0.9rem; color: #6b5b56; line-height: 1.45; margin: 0; } .faq-card button:hover { box-shadow: none !important; transform: none !important; } /* ============================================================================ SECTION 3: PRODUCT PAGE SKIN (v2.3) Product page redesign: gallery, options, sticky bar, CLS fixes. Source: qwl-product-skin-v2.css (v2.3) Load on product pages only (catalog_product_view.xml). ============================================================================ */ /* ============================================ QWL Product Page Skin v1 Matches carousel card style from QWL homepage ============================================ */ /* --- Font fix: self-host Neulis Alt approximation --- */ /* On production these load from same origin; cross-origin blocked on test harness */ /* Using DM Sans as closest available match */ /* --- Design Tokens (QWL brand) --- */ :root { --qwl-brown: #4a2d2a; --qwl-brown-light: #6b4440; --qwl-cream: #faf6f1; --qwl-orange: #EF5732; --qwl-gold: #c8973e; --qwl-card-shadow: 0 3px 12px rgba(0,0,0,0.12), 0 6px 24px rgba(74,45,42,0.15); --qwl-card-shadow-hover: 0 10px 36px rgba(74,45,42,0.30); --qwl-card-radius: 1rem; --qwl-card-bg: #fff; } /* Border-box everything inside the options area — Porto uses content-box which causes padding to overflow containers */ .product-options-wrapper *, .product-options-wrapper *::before, .product-options-wrapper *::after { box-sizing: border-box !important; } /* =========================================== OPTION CARDS — each .field becomes a card =========================================== */ /* Card container */ .product-options-wrapper .fieldset > .field { background: var(--qwl-card-bg); border-radius: var(--qwl-card-radius) !important; box-shadow: var(--qwl-card-shadow); margin-bottom: 0.85rem !important; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; padding: 0 !important; } .product-options-wrapper .fieldset > .field:hover { transform: translateY(-2px); box-shadow: var(--qwl-card-shadow-hover); } /* Card title bar — cream background */ .product-options-wrapper .fieldset > .field > .label { /* Orange bar style — matches Order Summary title */ background: linear-gradient(135deg, #ecaa00, #f0c040) !important; color: var(--qwl-brown) !important; font-weight: 700 !important; font-size: 1.1rem !important; padding: 0.75rem 1rem !important; margin: 0 !important; border-bottom: 2px solid var(--qwl-orange) !important; display: flex !important; align-items: center !important; cursor: pointer; /* Override Porto's absolute positioning */ position: relative !important; top: auto !important; left: auto !important; width: auto !important; height: auto !important; line-height: normal !important; } /* Step number badge */ .product-options-wrapper .fieldset > .field > .label .step-number { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; min-width: 28px !important; background-color: var(--qwl-brown) !important; color: #fff !important; font-size: 0.85rem !important; font-weight: 700 !important; border-radius: 6px !important; margin-right: 0.6rem !important; line-height: 1 !important; } /* Title text */ .product-options-wrapper .fieldset > .field > .label span { color: var(--qwl-brown) !important; font-weight: 700 !important; } /* Hide the question mark icons in the title bar (clean look) */ .product-options-wrapper .fieldset > .field > .label .fa-question-circle { color: var(--qwl-orange); margin-left: 0.5rem; font-size: 0.85em; opacity: 0.6; } /* Card body — the .control section */ .product-options-wrapper .fieldset > .field > .control, .product-options-wrapper .fieldset > .field > div:not(.label):not(.control) { padding: 0.75rem 1rem; transform: none !important; } /* Non-quantity option controls: zero padding, let field padding handle spacing */ .product-options-wrapper .fieldset > .field:not(.quantity) > .control { padding: 0 !important; transform: none !important; } /* ============================================ RADIO/CHECKBOX OPTION VALUES — swatch cards ============================================ */ /* Options list grid */ /* Match live site: flexbox with wrapping, not CSS grid */ body.qwl .product-options-wrapper .fieldset > .field:not(.quantity) .options-list.nested { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem !important; padding: 0 !important; transform: none !important; } /* Individual option value as mini card (quantity has its own layout below) */ .product-options-wrapper .fieldset > .field:not(.quantity) .options-list .field.choice { background: var(--qwl-cream); border: 2px solid transparent; border-radius: 0.5rem; padding: 0.75rem !important; margin: 0 !important; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; text-align: center; position: relative; overflow: visible !important; box-shadow: 0 2px 8px rgba(74,45,42,0.12) !important; /* Flex sizing — 4 per row */ flex: 0 1 calc(25% - 0.75rem) !important; width: calc(25% - 0.75rem) !important; max-width: calc(25% - 0.75rem) !important; min-width: 0 !important; box-sizing: border-box !important; } /* Option label text — don't truncate (not quantity) */ .product-options-wrapper .fieldset > .field:not(.quantity) .options-list .field.choice .label { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; word-wrap: break-word !important; font-size: 0.85rem !important; } /* Swatch images inside option cards (not quantity) */ .product-options-wrapper .fieldset > .field:not(.quantity) .options-list .field.choice img { width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 auto 0.4rem !important; display: block !important; border-radius: 0.375rem; } .product-options-wrapper .fieldset > .field:not(.quantity) .options-list .field.choice .option_images_gallery, .product-options-wrapper .fieldset > .field:not(.quantity) .options-list .field.choice .mageworx-optionswatches-option-gallery { width: 100% !important; display: block !important; } .product-options-wrapper .options-list .field.choice:hover { border-color: var(--qwl-orange); box-shadow: 0 2px 8px rgba(239, 87, 50, 0.15); } /* Selected/checked option card */ .product-options-wrapper .options-list .field.choice:has(input:checked) { border: 3px solid var(--qwl-orange) !important; box-shadow: 0 2px 8px rgba(239, 87, 50, 0.2) !important; } /* Active/selected state */ .product-options-wrapper .options-list .field.choice.active, .product-options-wrapper .options-list .field.choice:has(input:checked) { border-color: var(--qwl-orange); background: #fff; box-shadow: 0 2px 8px rgba(239, 87, 50, 0.2); } /* Hide the actual radio/checkbox inputs */ .product-options-wrapper .options-list .field.choice input[type="radio"], .product-options-wrapper .options-list .field.choice input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; } /* Option label text */ .product-options-wrapper .options-list .field.choice .admin__field-label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--qwl-brown); cursor: pointer; padding: 0.25rem 0; } /* Hide price notices (overwhelming) */ .product-options-wrapper .options-list .field.choice .price-notice { display: none; } /* Swatch image styling */ .option_images_gallery { margin-top: 0.35rem; } .mageworx-optionswatches-option-gallery { border-radius: 0.375rem; overflow: hidden; } .mageworx-optionswatches-option-gallery_image { width: 100%; height: auto; display: block; border-radius: 0.375rem; } /* Item heading (used for Area option values) */ .product-options-wrapper .options-list .field.choice .item-heading { font-size: 0.9rem; font-weight: 600; color: var(--qwl-brown); } /* ============================================ AREA OPTION — special grid for sq-in cards ============================================ */ .field.area .options-list.nested { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 0.5rem; } .field.area .options-list .field.choice { padding: 0.5rem 0.25rem; } .field.area .options-list .field.choice .admin__field-label { font-size: 0.8rem; } /* ============================================ STYLE OPTION — larger cards for fold images ============================================ */ .field.style .options-list.nested { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } /* ============================================ SIZE OPTION — medium cards ============================================ */ .field.size .options-list.nested { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } /* ============================================ QUANTITY SECTION — card grid layout ============================================ */ .field.quantity .options-list.nested { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem !important; padding: 0.75rem !important; justify-content: center !important; } .field.quantity .options-list .field.choice { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; border-radius: 0.5rem !important; padding: 0.75rem 0.5rem !important; margin: 0 !important; background: var(--qwl-cream) !important; border: 2px solid transparent !important; box-shadow: 0 2px 8px rgba(74,45,42,0.12) !important; cursor: pointer !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; flex: 0 1 calc(16.666% - 0.5rem) !important; max-width: calc(16.666% - 0.5rem) !important; box-sizing: border-box !important; } .field.quantity .options-list .field.choice:hover { border-color: var(--qwl-orange) !important; box-shadow: 0 2px 8px rgba(239, 87, 50, 0.15) !important; } .field.quantity .options-list .field.choice:has(input:checked) { border: 3px solid var(--qwl-orange) !important; box-shadow: 0 2px 8px rgba(239, 87, 50, 0.2) !important; } /* Quantity relabeled content — stacked vertically */ .field.quantity .relabeled { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.15rem !important; width: 100% !important; } .field.quantity .relabeled .qty { font-size: 1rem !important; font-weight: 700 !important; color: var(--qwl-brown) !important; text-align: center !important; width: 100% !important; display: block !important; text-decoration: none !important; white-space: nowrap !important; } .field.quantity .relabeled .unitprice { font-size: 0.75rem !important; color: #888 !important; text-align: center !important; width: 100% !important; display: block !important; } .field.quantity .relabeled .totalprice { font-size: 0.75rem !important; font-weight: 600 !important; color: #888 !important; text-align: center !important; width: 100% !important; display: block !important; text-align: center !important; } /* Hide quantity header row — not needed in card layout */ .field.quantity .header { display: none !important; } /* Hide duplicate elements in quantity cards */ .field.quantity .field.choice .item-heading { display: none !important; } /* Hide original label text — only show .relabeled content */ .field.quantity .field.choice > .label { font-size: 0 !important; color: transparent !important; line-height: 0 !important; overflow: hidden !important; } .field.quantity .field.choice > .label > span:not(.relabeled) { display: none !important; } /* Make .relabeled visible inside the zeroed-out label */ .field.quantity .field.choice > .label .relabeled { font-size: 0.85rem !important; color: var(--qwl-brown) !important; line-height: normal !important; } /* Remove "Each" and "Total" text — just show the values */ .field.quantity .relabeled .unitprice .qtyeach, .field.quantity .relabeled .totalprice .qtytotal { display: none !important; } /* Fix strikethrough on pcs */ .field.quantity .relabeled .qty { text-decoration: none !important; } .field.quantity .relabeled * { text-decoration: none !important; } /* Custom qty field */ .customqtyfield { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; padding: 0.5rem 0.75rem; margin-top: 0.5rem; border-top: 1px solid #e8e0d8; } .customqtyfield input.customqty { border: 1px solid var(--qwl-orange) !important; border-radius: 0.375rem; padding: 0.4rem 0.5rem; font-size: 0.9rem; max-width: 100% !important; width: 100% !important; } /* Hide quantity footer completely */ .field.quantity .footer { display: none !important; } /* Custom qty styling */ .field.quantity .customqtyfield { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; border-radius: 0.5rem !important; padding: 0.75rem 0.5rem !important; margin: 0 !important; background: var(--qwl-cream) !important; border: 2px solid transparent !important; box-shadow: 0 2px 8px rgba(74,45,42,0.12) !important; cursor: pointer !important; box-sizing: border-box !important; } .field.quantity .customqtyfield:hover, .field.quantity .footer:hover { border-color: var(--qwl-orange) !important; } /* Custom qty placeholder color */ .field.quantity .customqtyfield input.customqty::placeholder { color: #888 !important; opacity: 1 !important; } /* Custom qty: always grey border unless .custom-active class is present */ .field.quantity .customqtyfield input.customqty { border-color: #ccc !important; } body.qwl .field.quantity .customqtyfield input.customqty.custom-active { border: 2px solid #EF5732 !important; border-color: #EF5732 !important; } /* Custom qty input styling */ .field.quantity .customqtyfield input.customqty { width: 120px !important; min-width: 120px !important; max-width: 100% !important; text-align: center !important; border: 2px solid #ccc !important; border-radius: 0.375rem !important; padding: 0.4rem 0.5rem !important; font-size: 0.9rem !important; font-weight: 600 !important; color: var(--qwl-brown) !important; margin-bottom: 0 !important; box-sizing: border-box !important; } .field.quantity .customqtyfield .customqtyunitprice, .field.quantity .customqtyfield .customqtytotalprice { font-size: 0.75rem !important; color: #888 !important; display: block !important; width: 100% !important; text-align: center !important; } /* Footer (10000+ / Get a Quote) */ .field.quantity .footer .qty { font-size: 1rem !important; font-weight: 700 !important; color: var(--qwl-brown) !important; } .field.quantity .footer .unitprice { font-size: 0.75rem !important; color: #888 !important; } .field.quantity .footer .get-a-quote a { font-size: 0.75rem !important; color: var(--qwl-orange) !important; text-decoration: none !important; font-weight: 600 !important; } /* Quantity footer (legacy) */ .field.quantity .footer { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.85rem; color: #999; border-top: 1px solid #e8e0d8; } .field.quantity .footer .get-a-quote { text-align: right; } .field.quantity .footer .get-a-quote a { color: var(--qwl-orange); font-weight: 600; text-decoration: none; } /* Custom qty row (built by companion JS) */ .qty-custom-row { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0.5rem 0.75rem !important; margin-top: 0.5rem !important; } .qty-custom-row .qty-custom-left { display: flex !important; align-items: center !important; gap: 0.5rem !important; } .qty-custom-row .qty-wholesale-link { font-size: 0.85rem !important; color: #888 !important; text-decoration: none !important; white-space: nowrap !important; } /* Custom qty field when moved into the row */ /* Override card styling when customqtyfield is inside the custom row */ .field.quantity .qty-custom-row .customqtyfield, .qty-custom-row .customqtyfield { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; flex-direction: row !important; } /* ============================================ SELECT DROPDOWNS (How Many Versions) ============================================ */ .product-options-wrapper select.admin__control-select { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid #e8e0d8; border-radius: 0.5rem; background: var(--qwl-cream); color: var(--qwl-brown); font-size: 0.9rem; cursor: pointer; } /* ============================================ TEXTAREA (Comments) ============================================ */ .product-options-wrapper textarea.product-custom-option { width: 100%; border: 1px solid #e8e0d8; border-radius: 0.5rem; padding: 0.6rem 0.75rem; font-size: 0.9rem; min-height: 80px; resize: vertical; } .product-options-wrapper textarea.product-custom-option:focus { border-color: var(--qwl-orange); outline: none; box-shadow: 0 0 0 3px rgba(239, 87, 50, 0.1); } /* ============================================ FILE UPLOAD SECTION ============================================ */ .field.file .upload-label-heading .heading { font-size: 1rem; font-weight: 600; color: var(--qwl-brown); display: block; margin-bottom: 0.5rem; } .field.file .upload-or-email { margin-top: 0.5rem; font-size: 0.9rem; color: #666; } .field.file .upload-or-email .checkbox-wrap { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } /* ============================================ PRODUCT OPTIONS BOTTOM / SUMMARY BAR ============================================ */ /* Remove outer container — make it invisible wrapper */ .product-options-bottom { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin-top: 0 !important; box-sizing: border-box !important; overflow: visible; } /* box-tocart IS the summary card — styled at paint time, no JS override needed */ .product-options-bottom .box-tocart, body.qwl .product-options-bottom .box-tocart { background: #fff !important; box-shadow: 0 3px 12px rgba(0,0,0,0.12), 0 6px 24px rgba(74,45,42,0.15) !important; border-radius: var(--qwl-card-radius) !important; overflow: hidden !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; width: 100% !important; } body.qwl .product-options-bottom .box-tocart .fieldset { overflow: hidden !important; } /* Kill scrollbars inside the order summary details area only */ body.qwl .product-options-bottom .product-options-bottom-details { overflow: hidden !important; scrollbar-width: none !important; } body.qwl .product-options-bottom .product-options-bottom-details::-webkit-scrollbar { display: none !important; } .product-options-bottom .product-options-bottom-details { margin-bottom: 0 !important; padding: 0 !important; } body.qwl .product-options-bottom .product-options-bottom-details .details.your-quote { font-size: 1.1rem !important; font-weight: 700 !important; color: var(--qwl-brown) !important; margin: 0 0 0.75rem 0 !important; padding: 0.75rem 1rem !important; border-bottom: 2px solid var(--qwl-orange) !important; background: linear-gradient(135deg, #ecaa00, #f0c040) !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; border-radius: var(--qwl-card-radius) var(--qwl-card-radius) 0 0 !important; transform: none !important; } /* Product name row — match Order Summary title size */ .product-options-bottom .product-options-bottom-details .details:nth-child(2) { font-size: 1.1rem !important; font-weight: 700 !important; text-align: center !important; } .product-options-bottom .details { font-size: 0.85rem !important; padding: 0.5rem 1rem !important; color: var(--qwl-brown) !important; border-bottom: 1px solid rgba(74,45,42,0.08) !important; } .product-options-bottom .details .title { color: var(--qwl-brown) !important; } .product-options-bottom .details .highlight { color: var(--qwl-brown) !important; font-weight: 500; } /* Price display — qty, unit price, total all on one row */ .product-options-bottom .fieldset, body.qwl .product-options-bottom .box-tocart .fieldset { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-evenly !important; padding: 0.5rem 1rem 0.75rem !important; margin-top: 0 !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; transform: none !important; background-color: #4a2d2a !important; border-radius: 0 0 var(--qwl-card-radius) var(--qwl-card-radius) !important; } .product-options-bottom .field.qty { order: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 1 1 0% !important; width: 0 !important; text-align: center !important; } .product-options-bottom .qty-label { font-size: 1rem !important; font-weight: 600 !important; color: #fff !important; white-space: nowrap !important; } /* Hide the actual qty input inside summary — label is enough */ .product-options-bottom .field.qty .control, .product-options-bottom .field.qty > .label { display: none !important; } .product-unit-price { order: 2 !important; font-size: 1rem !important; color: #fff !important; margin: 0 !important; flex: 1 1 0% !important; white-space: nowrap !important; text-align: center !important; } .product-total-price { order: 3 !important; font-size: 1.25rem !important; font-weight: 700 !important; color: #fff !important; margin: 0 !important; flex: 1 1 0% !important; white-space: nowrap !important; text-align: center !important; } /* Add to Cart button goes full width below the price row */ .product-options-bottom .fieldset .actions { order: 4 !important; flex: 0 0 100% !important; width: 100% !important; text-align: center !important; display: flex !important; justify-content: center !important; transform: none !important; } /* Add to Cart button — QWL gradient style */ .product-options-bottom .action.tocart { background: linear-gradient(135deg, #EF5732, #ff7a5c) !important; border: none !important; border-radius: 0.75rem; padding: 1.1rem 3rem; font-size: 1.15rem; box-shadow: 0 2px 8px rgba(239, 87, 50, 0.25) !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; width: 100%; cursor: pointer; color: #fff !important; transition: background 0.2s ease, transform 0.1s ease; } /* Button text + icon color */ .product-options-bottom .action.tocart, .product-options-bottom .action.tocart span { color: #fff !important; } /* Cart icon before button text */ .product-options-bottom .action.tocart::before { content: '\f07a' !important; font-family: 'Font Awesome 5 Free', 'FontAwesome' !important; font-weight: 900 !important; margin-right: 0.5rem !important; font-size: 0.9em !important; } .product-options-bottom .action.tocart:hover { background: linear-gradient(135deg, #d94e2b, #ef6f4f) !important; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(239, 87, 50, 0.4) !important; } /* ============================================ TIER PRICES — hide (shown via areaslider) ============================================ */ .prices-tier { display: none !important; } /* ============================================ HIDE ELEMENTS THAT AREN'T NEEDED ============================================ */ /* Hide the Magento default price box (areaslider manages pricing) */ .product-info-price .price-box .price-wrapper { display: none; } /* Hide the "None" radio option in Size groups when parent shown */ .field.size .field.choice:not([data-option_type_id]) { display: none; } /* Hide original Width/Height cards — they live inside Size card now */ body.qwl .field.width[data-option_id="3012"], body.qwl .field.height[data-option_id="3013"] { display: none !important; } /* Custom size row — side by side Width + Height inside Size card */ .custom-size-row { display: flex !important; gap: 1.5rem !important; padding: 1rem 0.75rem !important; border-top: 1px solid rgba(74,45,42,0.08); width: 100% !important; box-sizing: border-box !important; } .custom-size-field { flex: 1 !important; } .custom-size-label { display: block !important; font-size: 0.85rem !important; font-weight: 600 !important; color: var(--qwl-brown) !important; margin-bottom: 0.4rem !important; } .custom-size-input { width: 80px !important; box-sizing: border-box !important; border: 2px solid #ddd !important; border-radius: 0.5rem !important; padding: 0.5rem 0.75rem !important; font-size: 1rem !important; color: var(--qwl-brown) !important; background: #fff !important; text-align: center !important; } .custom-size-field { position: relative !important; } .custom-size-input-wrap { display: inline-flex !important; align-items: center !important; gap: 0 !important; } .custom-size-input-wrap .custom-size-input { width: 90px !important; box-sizing: border-box !important; border: 2px solid #ddd !important; border-radius: 0.5rem !important; padding: 0.4rem 0.5rem !important; font-size: 1rem !important; color: var(--qwl-brown) !important; background: #fff !important; text-align: center !important; } .custom-size-input-wrap .custom-size-input:focus { border-color: var(--qwl-orange) !important; outline: none !important; } .custom-size-input-wrap .inches-symbol { font-size: 0.75rem !important; color: var(--qwl-brown) !important; margin-left: -14px !important; margin-right: 4px !important; align-self: flex-start !important; margin-top: 6px !important; pointer-events: none !important; position: relative !important; z-index: 1 !important; } /* Add right padding to input so number doesn't overlap the symbol */ .custom-size-input-wrap .custom-size-input { padding-right: 16px !important; } .custom-size-input:focus { border-color: var(--qwl-orange) !important; outline: none !important; } /* Slider styling */ .custom-size-slider { margin: 0.75rem 0 0.25rem !important; } .custom-size-slider .ui-slider-range { background: var(--qwl-orange) !important; } .custom-size-slider .ui-slider-handle { background: var(--qwl-orange) !important; border: 2px solid #fff !important; border-radius: 50% !important; width: 18px !important; height: 18px !important; top: 50% !important; margin-top: -9px !important; cursor: pointer !important; box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important; } .custom-size-slider.ui-slider { background: #e8e0d8 !important; border: none !important; height: 6px !important; border-radius: 3px !important; position: relative !important; } /* Hide original How Many Versions card — lives inside Versions card now */ body.qwl .field.how-many-versions[data-option_id="2987"] { display: none !important; } /* Versions sub-field inside the Versions card */ .versions-sub-field { padding: 0.75rem !important; border-top: 1px solid rgba(74,45,42,0.08) !important; width: 100% !important; box-sizing: border-box !important; text-align: center !important; } .versions-sub-field label { display: block !important; font-size: 0.85rem !important; font-weight: 600 !important; color: var(--qwl-brown) !important; margin-bottom: 0.4rem !important; } .versions-sub-field select { width: 200px !important; box-sizing: border-box !important; border: 2px solid #ddd !important; border-radius: 0.5rem !important; padding: 0.6rem 0.75rem !important; font-size: 1rem !important; line-height: 1.4 !important; height: auto !important; min-height: 42px !important; color: var(--qwl-brown) !important; background: #fff !important; -webkit-appearance: menulist !important; appearance: menulist !important; } .versions-sub-field select:focus { border-color: var(--qwl-orange) !important; outline: none !important; } /* Comments textarea padding inside card */ body.qwl .field.textarea.comments-optional > .control { padding: 0.75rem !important; transform: none !important; } body.qwl .field.textarea.comments-optional textarea { width: 100% !important; box-sizing: border-box !important; border-radius: 0.5rem !important; border: 1px solid #ddd !important; padding: 0.75rem !important; } /* Hide "I will email additional artwork files" checkbox inside Upload Artwork card */ body.qwl .field.file .upload-or-email { display: none !important; } /* Hide "Email Additional Artwork" checkbox + "Upload Artwork" textarea */ body.qwl .field.email-additional-artwork, body.qwl .field.textarea.upload-artwork { display: none !important; } /* Hide "Create Your Artwork Instantly" and "How it Works" sections */ body.qwl .how-it-works { display: none !important; } /* Upload Artwork — two side-by-side option cards */ /* Upload Artwork card — center buttons vertically with equal padding */ .upload-options-row { display: flex !important; gap: 3rem !important; justify-content: center !important; padding: 2rem 0.75rem !important; } .upload-option-card { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; flex: 0 1 280px !important; max-width: 280px !important; padding: 2rem 1.5rem !important; background: var(--qwl-cream) !important; border: 2px solid transparent !important; border-radius: 0.5rem !important; cursor: pointer !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; box-shadow: 0 2px 8px rgba(74,45,42,0.12) !important; text-align: center !important; } .upload-option-card:hover { border-color: var(--qwl-orange) !important; box-shadow: 0 2px 8px rgba(239, 87, 50, 0.15) !important; } .upload-option-icon { font-size: 3rem !important; color: #EF5732 !important; line-height: 1 !important; } .upload-option-label { font-size: 1rem !important; font-weight: 700 !important; color: var(--qwl-brown) !important; } /* Upload file area (revealed on click) */ .upload-file-area { padding: 0.75rem 1rem !important; } /* Hide "Upload Your Artwork File" heading — replaced by the two option cards */ body.qwl .field.file .upload-label-heading { display: none !important; } /* Hide image-preview-wrapper in upload card (empty, wastes space) */ body.qwl .field.file[data-option_id="2970"] > .image-preview-wrapper { display: none !important; } /* Legacy artwork tool btn — no longer used */ .artwork-tool-btn { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.4rem !important; padding: 1rem !important; margin: 0.75rem auto !important; background: var(--qwl-cream) !important; border: 2px solid transparent !important; border-radius: 0.5rem !important; cursor: pointer !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; text-decoration: none !important; max-width: 180px !important; box-shadow: 0 2px 8px rgba(74,45,42,0.12) !important; } .artwork-tool-btn:hover { border-color: var(--qwl-orange) !important; box-shadow: 0 2px 8px rgba(239, 87, 50, 0.15) !important; } .artwork-tool-btn .artwork-tool-icon { font-size: 2.5rem !important; color: #EF5732 !important; line-height: 1 !important; } .artwork-tool-btn .artwork-tool-label { font-size: 0.8rem !important; font-weight: 700 !important; color: var(--qwl-brown) !important; text-align: center !important; } /* Loading spinner */ #loading-and-loading { display: none; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 768px) { .product-options-wrapper .options-list.nested { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; } .field.area .options-list.nested { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); } .field.style .options-list.nested { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 425px) { .product-options-wrapper .options-list.nested { grid-template-columns: repeat(2, 1fr); } .field.area .options-list.nested { grid-template-columns: repeat(4, 1fr); } .field.quantity .relabeled, .field.quantity .header, .field.quantity .footer, .customqtyfield { grid-template-columns: 1fr 1fr 1fr; font-size: 0.8rem; } } /* ============================================ PAGE BACKGROUND — QWL cream Override Magento/Porto white backgrounds on all container elements so cream shows through ============================================ */ body.qwl { background-color: #faf7f2 !important; } /* Nuclear background override — Porto theme loads remote CSS with many specific selectors that set white backgrounds. We need very broad coverage. */ body.qwl, body.qwl .page-wrapper, body.qwl .page-main, body.qwl .columns, body.qwl .column.main, body.qwl .product-info-main, body.qwl .product-info-main > *:not(.product-add-form):not(.pdp-reviews-faq-section), body.qwl .product.attribute.overview, body.qwl .product.attribute.overview .value, body.qwl .product.media, body.qwl .page-title-wrapper, body.qwl .product-info-price, body.qwl .product-add-form, body.qwl .prev-next-products, body.qwl .containerbackground, body.qwl #maincontent, body.qwl .product.info.detailed, body.qwl .clearer { background-color: transparent !important; background: transparent !important; } /* Let Porto's flex layout work for the top section (image + description side by side) but allow the form and below-fold content to break onto their own full-width rows */ body.qwl .product-info-main { display: flex !important; flex-wrap: wrap !important; max-width: 100% !important; width: 100% !important; } /* H1 title */ body.qwl .product-info-main > .page-title-wrapper .page-title, body.qwl .product-info-main > .page-title-wrapper .page-title .base { color: var(--qwl-brown) !important; font-size: 36px !important; line-height: 1.2 !important; } /* H1 spans full width, flex row so pills sit right of title */ body.qwl .product-info-main > .page-title-wrapper { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; display: flex !important; align-items: center !important; gap: 1rem !important; } /* Image carousel thumbnails — MagicScroll may hide these without its JS */ body.qwl .MagicToolboxSelectorsContainer { display: block !important; visibility: visible !important; overflow: visible !important; margin-top: 0.75rem; } body.qwl .MagicToolboxSelectorsContainer .MagicScroll { display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } body.qwl .MagicToolboxSelectorsContainer .mt-thumb-switcher { display: inline-block !important; visibility: visible !important; width: auto !important; flex: 0 0 auto !important; } body.qwl .MagicToolboxSelectorsContainer .mt-thumb-switcher img { width: 50px !important; height: 50px !important; object-fit: cover !important; border-radius: 4px; border: 1px solid #ddd; cursor: pointer; visibility: visible !important; opacity: 1 !important; box-shadow: 0 2px 6px rgba(74,45,42,0.12) !important; } body.qwl .MagicToolboxSelectorsContainer .mt-thumb-switcher img:hover { border-color: var(--qwl-orange); } /* Active/selected thumb highlight */ body.qwl .MagicToolboxSelectorsContainer .mt-thumb-switcher.active-selector img, body.qwl .MagicToolboxSelectorsContainer .mt-thumb-switcher.mz-thumb-selected img { border-color: var(--qwl-orange) !important; border-width: 2px !important; } /* Thumbs keep their DOM order — no reordering on selection */ /* Thin scrollbar for thumbnail strip */ body.qwl .MagicToolboxSelectorsContainer .MagicScroll::-webkit-scrollbar { height: 4px; } body.qwl .MagicToolboxSelectorsContainer .MagicScroll::-webkit-scrollbar-track { background: transparent; } body.qwl .MagicToolboxSelectorsContainer .MagicScroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; } body.qwl .MagicToolboxSelectorsContainer .MagicScroll::-webkit-scrollbar-thumb:hover { background: #999; } /* MagicScroll hides thumbs — force everything visible */ body.qwl .MagicToolboxSelectorsContainer * { visibility: visible !important; opacity: 1 !important; } body.qwl .MagicToolboxSelectorsContainer .MagicScroll { height: auto !important; max-height: none !important; } body.qwl .MagicToolboxSelectorsContainer, body.qwl .MagicToolboxSelectorsContainer.MagicToolboxSelectorsContainer { height: auto !important; max-height: 70px !important; overflow: hidden !important; } /* Image carousel on the RIGHT — matches 400px summary column below */ body.qwl .product-info-main > .product.media { flex: 0 0 400px !important; max-width: 400px !important; order: 2 !important; } body.qwl .product.media img:not(.mt-thumb-switcher img) { max-width: 100% !important; height: auto !important; } body.qwl .product.media .MagicToolboxContainer { max-width: 100% !important; } body.qwl .product.media #mtImageContainer { max-width: 100% !important; } body.qwl .product.media #mtImageContainer img { max-width: 100% !important; height: auto !important; border-radius: var(--qwl-card-radius) !important; box-shadow: 0 3px 12px rgba(0,0,0,0.12), 0 6px 24px rgba(74,45,42,0.15) !important; } /* Description/overview text on the LEFT — fills remaining space (matches options column below) */ body.qwl .product-info-main > .product.attribute.overview { flex: 1 1 0% !important; margin-bottom: 0 !important; max-width: calc(100% - 400px - 1.5rem) !important; order: 1 !important; margin-right: 1.5rem !important; } /* Everything after the image+desc row spans full width and sorts after them. Use a wildcard, then let title/media/overview override with specific order values above. */ body.qwl .product-info-main > * { order: 3 !important; } body.qwl .product-info-main > .page-title-wrapper { order: 0 !important; } body.qwl .product-info-main > .product.attribute.overview { order: 1 !important; } body.qwl .product-info-main > .product.media { order: 2 !important; } /* Full-width elements below the hero row */ body.qwl .product-info-main > .product-add-form, body.qwl .product-info-main > .product.info.detailed, body.qwl .product-info-main > .product-info-price, body.qwl .product-info-main > .clearer, body.qwl .product-info-main > .google-reviews-wrapper, body.qwl .product-info-main > .custom-faq, body.qwl .product-info-main > .custom-description, body.qwl .product-info-main > .area-variables, body.qwl .product-info-main > .pdp-reviews-faq-section { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; } body.qwl .product-info-main > .pdp-reviews-faq-section { order: 4 !important; flex: 0 0 auto !important; width: 100vw !important; max-width: 100vw !important; } body.qwl .product-info-main > .custom-description { order: 5 !important; } /* Reduce gap between hero section (images + description) and options form */ body.qwl .product-add-form { margin-top: 1rem !important; padding-top: 0 !important; } /* ============================================ TWO-COLUMN LAYOUT: Options (left) + Summary (right sticky) Grid on the FORM element inside .product-add-form (options-wrapper and options-bottom are children of the form, not product-info-main) ============================================ */ @media (min-width: 1025px) { /* The form contains both .product-options-wrapper and .product-options-bottom */ body.qwl .product-add-form > form { display: grid !important; grid-template-columns: 1fr 400px !important; gap: 0 1.5rem !important; align-items: start !important; } /* Hidden inputs inside the form should not create grid items */ body.qwl .product-add-form > form > input[type="hidden"] { display: none !important; } /* Options wrapper takes left column — full width of its cell */ body.qwl .product-add-form > form > .product-options-wrapper { grid-column: 1 / 2 !important; grid-row: 1 !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; } /* Summary takes right column, sticky */ body.qwl .product-add-form > form > .product-options-bottom { grid-column: 2 / 3 !important; grid-row: 1 !important; position: sticky !important; top: 20px !important; align-self: start !important; margin-top: 0 !important; } /* product-info-main display:block is set globally above */ } /* Mobile: single column handled by ≤1024px breakpoint above */ /* Product Page Reviews-FAQ Section (matches homepage prototype) */ body.qwl .pdp-reviews-faq-section { background: #ede6d6 !important; background-color: #ede6d6 !important; border-top: 3px solid #ecaa00 !important; padding: 3rem 2rem 2rem !important; margin-top: 0 !important; width: 100vw !important; margin-left: calc(-50vw + 50%) !important; position: relative !important; box-sizing: border-box !important; } .pdp-reviews-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; max-width: 1200px; margin: 0 auto; } .pdp-reviews-column h2, .pdp-faq-column h2 { font-size: 1.5rem; font-weight: 700; color: #4a2d2a; margin-bottom: 1rem; font-family: inherit; } .pdp-reviews-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; } .pdp-reviews-header h2 { margin: 0 !important; } .pdp-reviews-stars { color: #ECAA00; font-size: 13px; display: flex; gap: 2px; } .pdp-reviews-badge { background: #4a2d2a; color: #fff; padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 12px; font-weight: 600; } .pdp-review-card { background: #fff; border-radius: 12px; padding: 1.5rem; margin-bottom: 0.75rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .pdp-review-card-stars { color: #ECAA00; font-size: 13px; margin-bottom: 0.5rem; display: flex; gap: 2px; } .pdp-review-card-text { font-size: 15px; line-height: 1.6; color: #444; margin-bottom: 0.75rem; } .pdp-review-card-author { font-size: 13px; font-weight: 700; color: #4a2d2a; } .pdp-faq-card { background: linear-gradient(135deg, #4a2d2a, #6b4440); border-radius: 12px; margin-bottom: 0.75rem; box-shadow: 0 2px 8px rgba(74,45,42,0.25); overflow: hidden; } .pdp-faq-button { width: 100% !important; display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 1.2rem 1.5rem !important; font-size: 15px !important; font-weight: 700 !important; color: #fff !important; border: none !important; background: none !important; cursor: pointer !important; text-align: left !important; height: auto !important; line-height: 1.4 !important; font-family: inherit !important; } .pdp-faq-chevron { color: #ECAA00; transition: transform 0.3s ease; font-size: 14px; } .pdp-faq-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 1.5rem; } .pdp-faq-body-text { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.85); padding-bottom: 1.5rem; } .pdp-faq-card.open .pdp-faq-chevron { transform: rotate(180deg); } .pdp-faq-card.open .pdp-faq-body { max-height: 200px; } .pdp-read-more-link { font-size: 14px; font-weight: 700; color: #EF5732; text-decoration: none; display: inline-block; margin-top: 1rem; } .pdp-read-more-link:hover { text-decoration: underline; } /* Hide original reviews/FAQ elements — replaced by pdp- styled section */ body.qwl .google-reviews-wrapper { display: none !important; } body.qwl .custom-faq { display: none !important; } /* Mobile responsive */ @media (max-width: 768px) { .pdp-reviews-faq-grid { grid-template-columns: 1fr; gap: 2rem; } body.qwl .product-info-main > .pdp-reviews-faq-section { padding: 2rem 1rem 1.5rem; flex: 0 0 auto !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(-50vw + 50%) !important; } .pdp-reviews-column, .pdp-faq-column { margin-bottom: 1.5rem; } } /* ============================================ TRUST BADGES ROW — between product info and order options ============================================ */ /* Force the overview .value to wrap so trust badges drop below text, and allow shadow to show */ body.qwl .product.attribute.overview .value { flex-wrap: wrap !important; overflow: visible !important; } body.qwl .pdp-trust-badges-wrapper { flex-basis: 100% !important; width: 100% !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin-top: 1rem !important; } .pdp-trust-duo { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1rem !important; } .pdp-trust-card { background: #fff !important; border-radius: 12px !important; box-shadow: 0 0 24px rgba(74,45,42,0.28) !important; padding: 1.25rem 1.5rem 1.5rem !important; } .pdp-trust-badges-title { font-size: 0.8rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: var(--qwl-brown) !important; margin: 0 0 1rem 0 !important; } /* Turnaround card */ .pdp-turnaround-lines { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; } .pdp-turnaround-line { display: flex !important; align-items: center !important; gap: 0.75rem !important; padding: 0.6rem 0.85rem !important; background: #faf7f2 !important; border-radius: 8px !important; border-left: 3px solid #ECAA00 !important; } .pdp-turnaround-line.pdp-turnaround-rush { border-left-color: #EF5732 !important; } .pdp-turnaround-icon { font-size: 1.35rem !important; color: #ECAA00 !important; width: 2rem !important; text-align: center !important; flex-shrink: 0 !important; } .pdp-turnaround-rush .pdp-turnaround-icon { color: #EF5732 !important; } .pdp-turnaround-text { font-size: 0.9rem !important; color: var(--qwl-brown) !important; line-height: 1.4 !important; } .pdp-turnaround-text strong { font-weight: 700 !important; } /* How It Works card */ .pdp-howitworks-steps { display: flex !important; flex-direction: column !important; gap: 0.6rem !important; } .pdp-howitworks-step { display: flex !important; align-items: center !important; gap: 0.75rem !important; } .pdp-step-num { display: flex !important; align-items: center !important; justify-content: center !important; width: 1.6rem !important; height: 1.6rem !important; min-width: 1.6rem !important; border-radius: 50% !important; background: #EF5732 !important; color: #fff !important; font-size: 0.8rem !important; font-weight: 700 !important; flex-shrink: 0 !important; } .pdp-step-text { font-size: 0.85rem !important; font-weight: 600 !important; color: var(--qwl-brown) !important; line-height: 1.4 !important; } @media (max-width: 768px) { .pdp-trust-duo { grid-template-columns: 1fr !important; } } /* === Info Pills — H1 row === */ body.qwl .pdp-info-pills { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem !important; margin: 0 !important; align-self: center !important; } body.qwl .product-info-main > .page-title-wrapper .page-title { margin: 0 !important; padding: 0 !important; } body.qwl .pdp-info-pill { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; background: #faf6f0 !important; border: 1px solid #e8ddd0 !important; border-radius: 999px !important; padding: 0.4rem 1rem !important; white-space: nowrap !important; } .pdp-pill-icon { font-size: 1.1rem !important; flex-shrink: 0 !important; } .pdp-pill-icon.icon-turnaround { color: #ECAA00 !important; } .pdp-pill-icon.icon-ironon { color: #EF5732 !important; } .pdp-pill-icon.icon-price { color: #28a745 !important; } .pdp-pill-text { display: flex !important; flex-direction: column !important; line-height: 1.2 !important; } .pdp-pill-title { font-size: 0.78rem !important; font-weight: 700 !important; color: var(--qwl-brown) !important; } .pdp-pill-sub { font-size: 0.68rem !important; font-weight: 400 !important; color: #6b5b5a !important; } @media (max-width: 768px) { body.qwl .pdp-info-pills { justify-content: center !important; } body.qwl .pdp-info-pill { white-space: normal !important; } } /* Reduce gap between product info text and How It Works */ body.qwl .styled-description { margin-bottom: 0 !important; padding-bottom: 0 !important; } body.qwl .styled-description > *:last-child { margin-bottom: 0 !important; } body.qwl .product.attribute.overview .value { gap: 0.25rem !important; } /* Push How It Works to bottom of left column, aligned with product image bottom */ body.qwl .product.attribute.overview .value { display: flex !important; flex-direction: column !important; height: 100% !important; } body.qwl .product.attribute.overview { display: flex !important; flex-direction: column !important; } body.qwl .pdp-trust-badges-wrapper { margin-top: auto !important; } /* ============================================ BOTTOM CONTENT SECTION — below reviews/FAQ Modernize fonts, headings, spacing to match page ============================================ */ body.qwl .custom-description { font-family: 'Neulis Alt', sans-serif !important; font-size: 15px !important; line-height: 1.7 !important; color: var(--qwl-brown) !important; } body.qwl .custom-description .footer .container { max-width: 1200px !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; } body.qwl .custom-description .footer .container .row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 3rem !important; max-width: 100% !important; width: 100% !important; } body.qwl .custom-description .footer .container .row > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; } body.qwl .custom-description h3, body.qwl .custom-description h4 { font-family: 'Neulis Alt', sans-serif !important; background: none !important; background-color: transparent !important; color: var(--qwl-brown) !important; font-size: 1.15rem !important; font-weight: 700 !important; padding: 0 !important; margin: 1.5rem 0 0.5rem !important; border-bottom: 2px solid #EF5732 !important; padding-bottom: 0.4rem !important; } body.qwl .custom-description h3:first-child, body.qwl .custom-description h4:first-child { margin-top: 0 !important; } body.qwl .custom-description p, body.qwl .custom-description li, body.qwl .custom-description span, body.qwl .custom-description a { font-family: 'Neulis Alt', sans-serif !important; font-size: 14px !important; line-height: 1.7 !important; } body.qwl .custom-description a { color: #EF5732 !important; text-decoration: none !important; } body.qwl .custom-description a:hover { text-decoration: underline !important; } body.qwl .custom-description img { border-radius: 8px !important; margin: 1rem 0 !important; } @media (max-width: 768px) { body.qwl .custom-description .footer .container .row { grid-template-columns: 1fr !important; gap: 2rem !important; } } /* Let bottom content span full page width */ body.qwl .custom-description { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding: 2rem 0 !important; box-sizing: border-box !important; } body.qwl .custom-description > .footer { max-width: 1200px !important; margin: 0 auto !important; padding: 0 2rem !important; } /* ========================================== RESPONSIVE BREAKPOINTS - TABLET & MOBILE ========================================== */ /* Tablet landscape - shrink columns but keep side-by-side layout */ @media (max-width: 1024px) { /* Shrink image column from 400px to 300px */ body.qwl .product-info-main > .product.media { flex: 0 0 300px !important; max-width: 300px !important; } body.qwl .product-info-main > .product.attribute.overview { max-width: calc(100% - 300px - 1.5rem) !important; } /* Form stacks to single column at ≤1024px */ body.qwl .product-add-form > form { display: block !important; } /* === BOTTOM STICKY BAR at ≤1024px === */ /* Summary wrapper stays in normal flow — shows the details card */ body.qwl .product-options-bottom, body.qwl .product-options-bottom.stickem, body.qwl .product-options-bottom.stickit, body.qwl .product-options-bottom.fixstickit { position: static !important; top: auto !important; left: auto !important; right: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-top: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; transform: none !important; float: none !important; } /* Summary details card: hidden by CSS at paint to prevent FOUC. JS makes it visible after repositioning (detach + prependTo). */ body.qwl .product-options-bottom .product-options-bottom-details { display: none !important; background: #fff !important; border-radius: var(--qwl-card-radius) !important; box-shadow: var(--qwl-card-shadow) !important; overflow: hidden !important; margin-bottom: 1rem !important; } /* box-tocart becomes the fixed bottom sticky */ body.qwl .product-options-bottom .box-tocart { position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 1000 !important; background: var(--qwl-brown) !important; border-top: 3px solid var(--qwl-orange) !important; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2) !important; max-width: 100% !important; width: 100% !important; height: auto !important; border-radius: 0 !important; overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; margin: 0 !important; padding: 0 !important; } /* Hide products-help in sticky bar */ body.qwl .product-options-bottom .products-help { display: none !important; } /* Fieldset: single row for qty/unit/total, button below */ body.qwl .product-options-bottom .box-tocart .fieldset { float: none !important; display: flex !important; flex-wrap: wrap !important; justify-content: space-evenly !important; align-items: center !important; gap: 0 !important; padding: 0.5rem 1rem 0.75rem !important; margin: 0 auto !important; background-color: var(--qwl-brown) !important; border-radius: 0 !important; max-width: 100% !important; } /* All three price elements: same row, uniform size */ body.qwl .product-options-bottom .field.qty, body.qwl .product-options-bottom .product-unit-price, body.qwl .product-options-bottom .product-total-price { flex: 1 1 0% !important; white-space: nowrap !important; text-align: center !important; margin: 0 !important; } body.qwl .product-options-bottom .qty-label, body.qwl .product-options-bottom .product-unit-price, body.qwl .product-options-bottom .product-unit-price span, body.qwl .product-options-bottom .product-total-price, body.qwl .product-options-bottom .product-total-price span { font-size: 1rem !important; font-weight: 600 !important; color: #fff !important; opacity: 1 !important; } /* Add to Cart button: full width row below price info */ body.qwl .product-options-bottom .fieldset .actions { order: 4 !important; flex: 0 0 100% !important; display: flex !important; justify-content: center !important; margin: 2px 0 0 0 !important; padding: 0 !important; } body.qwl .product-options-bottom .action.tocart, body.qwl .product-options-bottom #product-addtocart-button.action.primary.tocart { width: auto !important; margin: 0 auto !important; padding: 16px 36px !important; font-size: 1.15rem !important; } /* Body spacer so content isn't hidden behind the sticky */ body.qwl .page-wrapper { padding-bottom: 80px !important; } /* Option cards: 3 columns instead of auto-fill */ body.qwl .product-options-wrapper .fieldset > .field:not(.quantity) .options-list.nested { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } body.qwl .product-options-wrapper .fieldset > .field:not(.quantity) .options-list .field.choice { width: auto !important; max-width: none !important; flex: none !important; } /* H1 — keep 36px at tablet */ body.qwl h1.page-title, body.qwl .page-title .base { font-size: 36px !important; } } /* Tablet portrait / large phone - switch to single column layout */ @media (max-width: 768px) { /* Single column — everything stacks */ body.qwl .product-info-main { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; height: auto !important; } /* Kill height/flex stretching from desktop column layout */ body.qwl .product-info-main > * { height: auto !important; min-height: 0 !important; flex-basis: auto !important; flex-shrink: 0 !important; flex-grow: 0 !important; } /* Override the specific full-width desktop rules that set flex: 0 0 100% */ body.qwl .product-info-main > .product-add-form, body.qwl .product-info-main > .product.info.detailed, body.qwl .product-info-main > .product-info-price, body.qwl .product-info-main > .clearer, body.qwl .product-info-main > .google-reviews-wrapper, body.qwl .product-info-main > .custom-faq, body.qwl .product-info-main > .custom-description, body.qwl .product-info-main > .area-variables, body.qwl .product-info-main > .pdp-reviews-faq-section { flex: none !important; width: 100% !important; height: auto !important; } body.qwl .product.attribute.overview, body.qwl .product.attribute.overview .value { height: auto !important; } /* product-info-main: override flex container sizing from desktop */ body.qwl .product-info-main { min-height: 0 !important; max-height: none !important; overflow: visible !important; } body.qwl .column.main, body.qwl .columns { height: auto !important; min-height: 0 !important; overflow: visible !important; } /* Hide/collapse empty elements that bloat page height and add phantom margins */ body.qwl .product-info-main > .clearer { display: none !important; } body.qwl .product-info-main > .product.info.detailed, body.qwl .product-info-main > .product-info-price, body.qwl .product-info-main > .google-reviews-wrapper, body.qwl .product-info-main > .custom-faq, body.qwl .product-info-main > .prev-next-products { margin: 0 !important; padding: 0 !important; } /* Tighten overview bottom margin (Porto .value has 31px margin-bottom) */ body.qwl .product.attribute.overview .value { margin-bottom: 0 !important; } /* Page margins — tighter on mobile */ body.qwl #maincontent, body.qwl .page-main { margin: 8px 0 0 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body.qwl .columns, .catalog-product-view #maincontent .columns { padding-left: 10px !important; padding-right: 10px !important; } /* H1 full width, centered */ body.qwl .product-info-main > .page-title-wrapper { flex: none !important; width: 100% !important; order: 1 !important; text-align: center !important; justify-content: center !important; flex-wrap: wrap !important; } body.qwl .page-title-wrapper.product { margin-left: 0 !important; margin-right: 0 !important; } /* Description below title, full width */ body.qwl .product-info-main > .product.attribute.overview { flex: none !important; max-width: 100% !important; width: 100% !important; order: 2 !important; margin-right: 0 !important; margin-bottom: 12px !important; } /* Image gallery full width */ body.qwl .product-info-main > .product.media { flex: none !important; max-width: 100% !important; width: 100% !important; order: 3 !important; float: none !important; position: relative !important; margin-top: -40px !important; margin-bottom: 28px !important; } /* Product image — fill container edge-to-edge on mobile */ body.qwl .product.media #mtImageContainer img { max-height: none !important; object-fit: cover !important; width: 100% !important; height: auto !important; border-radius: 8px !important; box-shadow: none !important; } body.qwl .product.media #mtImageContainer { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } body.qwl .product.media .MagicToolboxContainer { width: 100% !important; max-width: 100% !important; padding: 0 !important; } /* Thumbnail strip — horizontal scroll */ body.qwl .MagicToolboxSelectorsContainer { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; max-width: 100% !important; padding: 4px 0 !important; touch-action: pan-x !important; } body.qwl .MagicToolboxSelectorsContainer::-webkit-scrollbar { display: none !important; } /* Form stacks to single column */ body.qwl .product-add-form > form { display: block !important; } /* Form section full width — breathing room below thumbnails */ body.qwl .product-add-form { width: 100% !important; order: 4 !important; margin-top: 24px !important; } /* Breathing room between thumbnails and first option card */ body.qwl .product-options-wrapper { margin-top: 10px !important; padding-top: 12px !important; } /* Option grids: 2 columns on tablet */ body.qwl .product-options-wrapper .options-list.nested { grid-template-columns: repeat(2, 1fr) !important; } /* Area cards still 4-wide (they're small number tiles) */ body.qwl .field.area .options-list.nested { grid-template-columns: repeat(4, 1fr) !important; } /* H1 smaller */ body.qwl h1.page-title, body.qwl .page-title .base { font-size: 24px !important; } /* Info pills wrap and center */ body.qwl .pdp-info-pills { justify-content: center !important; gap: 0.4rem !important; } /* Trust badge cards stack */ .pdp-trust-duo { grid-template-columns: 1fr !important; } /* Bottom bar / summary — adjust for mobile */ body.qwl .product-options-bottom .box-tocart > .fieldset { flex-wrap: wrap !important; padding: 10px 16px !important; gap: 8px !important; } /* Summary details full width */ body.qwl .product-options-bottom .product-options-bottom-details { width: 100% !important; } /* Add to Cart button — centered, capped at desktop width */ body.qwl .product-options-bottom .action.tocart, body.qwl #product-addtocart-button.action.primary.tocart { width: auto !important; max-width: 100% !important; text-align: center !important; justify-content: center !important; padding: 16px 36px !important; font-size: 1.15rem !important; margin: 8px auto !important; display: flex !important; align-items: center !important; } body.qwl .product-options-bottom .fieldset .actions { justify-content: center !important; width: 100% !important; } /* Reviews/FAQ grid: single column */ .pdp-reviews-faq-grid { grid-template-columns: 1fr !important; gap: 2rem !important; } body.qwl .product-info-main > .pdp-reviews-faq-section { padding: 2rem 1rem 1.5rem !important; flex: 0 0 auto !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(-50vw + 50%) !important; } /* Bottom content: single column */ body.qwl .custom-description .footer .container .row { grid-template-columns: 1fr !important; gap: 2rem !important; } /* Quantity cards: switch to grid 4-col on tablet */ body.qwl .field.quantity .options-list.nested { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; } body.qwl .field.quantity .options-list .field.choice { flex: none !important; max-width: none !important; width: auto !important; } } /* Quantity cards: 3 columns at ≤428px */ @media (max-width: 428px) { body.qwl .field.quantity .options-list.nested { grid-template-columns: repeat(3, 1fr) !important; } } /* Quantity cards: 2 columns at ≤370px so "10000" doesn't clip */ @media (max-width: 370px) { body.qwl .field.quantity .options-list.nested { grid-template-columns: repeat(2, 1fr) !important; } } /* Small phones - further size reductions */ @media (max-width: 480px) { /* Even smaller H1 */ body.qwl h1.page-title, body.qwl .page-title .base { font-size: 20px !important; } /* Option card control padding slightly tighter */ body.qwl .product-options-wrapper > .fieldset > .field > .control { padding: 8px 14px 14px !important; } /* Upload Artwork / Artwork Creation Tool — more side padding so cards aren't flush with card edges */ body.qwl .upload-options-row { padding-left: 20px !important; padding-right: 20px !important; } /* 2-option fields (Size Symbols, Proof, Turnaround) — force 2 columns via grid so they never stack */ body.qwl .product-options-wrapper .fieldset > .field.size-symbols-or-color-versions .options-list.nested, body.qwl .product-options-wrapper .fieldset > .field.proof-options .options-list.nested, body.qwl .product-options-wrapper .fieldset > .field.turnaround-options .options-list.nested { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } body.qwl .product-options-wrapper .fieldset > .field.size-symbols-or-color-versions .options-list.nested .field.choice, body.qwl .product-options-wrapper .fieldset > .field.proof-options .options-list.nested .field.choice, body.qwl .product-options-wrapper .fieldset > .field.turnaround-options .options-list.nested .field.choice { min-width: 0 !important; width: 100% !important; max-width: none !important; } /* Quantity cards: still fit nicely */ body.qwl .field.quantity .options-list.nested { grid-template-columns: repeat(3, 1fr) !important; } /* Summary detail chips smaller */ body.qwl .product-options-bottom .product-options-bottom-details .details { font-size: 0.75rem !important; padding: 0.35rem 0.75rem !important; } /* Price text smaller */ body.qwl .product-options-bottom .product-total-price span { font-size: 18px !important; } /* Info pills smaller on very small screens */ body.qwl .pdp-info-pill { padding: 0.3rem 0.7rem !important; font-size: 0.7rem !important; } } /* Very small phones - minimum viable layout */ @media (max-width: 375px) { /* Area tiles 3-wide */ body.qwl .field.area .options-list.nested { grid-template-columns: repeat(3, 1fr) !important; } /* Options: single column for image cards */ body.qwl .field.style .options-list.nested, body.qwl .field.size .options-list.nested, body.qwl .field.backing-options .options-list.nested, body.qwl .field.metallic-thread .options-list.nested { grid-template-columns: repeat(2, 1fr) !important; } } /* ============================================================================ SECTION 4a: Shared category chrome (all 4 category pages) Rules found identical across all 4 category pages but not suitable for promotion to Section 1 / Section 2 (either a conflict existed, or the rule is category-wide but not site-wide). Multi-body-class scoped. ============================================================================ */ body.cms-all-woven-labels .top-header-right, body.cms-all-patches .top-header-right, body.cms-all-hang-tags .top-header-right, body.cms-all-pins .top-header-right { display: flex !important; align-items: center !important; gap: 16px !important; flex-shrink: 0 !important; margin-left: auto !important; } body.cms-all-woven-labels .qwl-mobile-menu, body.cms-all-patches .qwl-mobile-menu, body.cms-all-hang-tags .qwl-mobile-menu, body.cms-all-pins .qwl-mobile-menu { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: white; z-index: 20000; overflow-y: auto; -webkit-overflow-scrolling: touch; } body.cms-all-woven-labels .qwl-mobile-menu.open, body.cms-all-patches .qwl-mobile-menu.open, body.cms-all-hang-tags .qwl-mobile-menu.open, body.cms-all-pins .qwl-mobile-menu.open { display: flex; flex-direction: column; } body.cms-all-woven-labels .qwl-mm-header, body.cms-all-patches .qwl-mm-header, body.cms-all-hang-tags .qwl-mm-header, body.cms-all-pins .qwl-mm-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 2px solid #EF5732; position: sticky; top: 0; background: white; z-index: 1; box-shadow: 0 1px 4px rgba(0,0,0,0.04); } body.cms-all-woven-labels .qwl-mm-close, body.cms-all-patches .qwl-mm-close, body.cms-all-hang-tags .qwl-mm-close, body.cms-all-pins .qwl-mm-close { background: #4a2d2a; border: none; border-radius: 8px; font-size: 28px; color: #fff !important; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } body.cms-all-woven-labels .qwl-mm-group, body.cms-all-patches .qwl-mm-group, body.cms-all-hang-tags .qwl-mm-group, body.cms-all-pins .qwl-mm-group { border-bottom: 1px solid #f0f0f0; } body.cms-all-woven-labels .qwl-mm-toggle, body.cms-all-patches .qwl-mm-toggle, body.cms-all-hang-tags .qwl-mm-toggle, body.cms-all-pins .qwl-mm-toggle { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; font-size: 16px; font-weight: 700; color: #4a2d2a; cursor: pointer; user-select: none; } body.cms-all-woven-labels .qwl-mm-chev, body.cms-all-patches .qwl-mm-chev, body.cms-all-hang-tags .qwl-mm-chev, body.cms-all-pins .qwl-mm-chev { transition: transform 0.3s; color: #bbb; font-size: 14px; } body.cms-all-woven-labels .qwl-mm-group.open .qwl-mm-chev, body.cms-all-patches .qwl-mm-group.open .qwl-mm-chev, body.cms-all-hang-tags .qwl-mm-group.open .qwl-mm-chev, body.cms-all-pins .qwl-mm-group.open .qwl-mm-chev { transform: rotate(180deg); color: #EF5732; } body.cms-all-woven-labels .qwl-mm-sub, body.cms-all-patches .qwl-mm-sub, body.cms-all-hang-tags .qwl-mm-sub, body.cms-all-pins .qwl-mm-sub { display: none; padding: 0 20px 12px; } body.cms-all-woven-labels .qwl-mm-group.open .qwl-mm-sub, body.cms-all-patches .qwl-mm-group.open .qwl-mm-sub, body.cms-all-hang-tags .qwl-mm-group.open .qwl-mm-sub, body.cms-all-pins .qwl-mm-group.open .qwl-mm-sub { display: block; } body.cms-all-woven-labels .qwl-mm-sub a, body.cms-all-patches .qwl-mm-sub a, body.cms-all-hang-tags .qwl-mm-sub a, body.cms-all-pins .qwl-mm-sub a { display: block; padding: 11px 14px; font-size: 15px; color: #444; text-decoration: none; border-radius: 8px; font-weight: 400; } body.cms-all-woven-labels .qwl-mm-sub a:active, body.cms-all-patches .qwl-mm-sub a:active, body.cms-all-hang-tags .qwl-mm-sub a:active, body.cms-all-pins .qwl-mm-sub a:active { background: #fef5f0; } body.cms-all-woven-labels .qwl-mm-highlight, body.cms-all-patches .qwl-mm-highlight, body.cms-all-hang-tags .qwl-mm-highlight, body.cms-all-pins .qwl-mm-highlight { color: #EF5732 !important; font-weight: 700 !important; } body.cms-all-woven-labels .qwl-mm-footer, body.cms-all-patches .qwl-mm-footer, body.cms-all-hang-tags .qwl-mm-footer, body.cms-all-pins .qwl-mm-footer { padding: 16px 20px 24px; border-top: 1px solid #eee; background: #faf7f2; } body.cms-all-woven-labels .qwl-mm-sewing, body.cms-all-patches .qwl-mm-sewing, body.cms-all-hang-tags .qwl-mm-sewing, body.cms-all-pins .qwl-mm-sewing { display: block; text-align: center; padding: 15px; font-size: 16px; border-radius: 10px; margin-bottom: 10px; font-weight: 700; background: linear-gradient(135deg, #ECAA00, #f0c040); color: #4a2d2a; text-decoration: none; } body.cms-all-woven-labels .qwl-mm-call, body.cms-all-patches .qwl-mm-call, body.cms-all-hang-tags .qwl-mm-call, body.cms-all-pins .qwl-mm-call { display: block; text-align: center; font-size: 15px; padding: 10px; color: #4a2d2a; text-decoration: none; font-weight: 700; } body.cms-all-woven-labels .qwl-mm-hours, body.cms-all-patches .qwl-mm-hours, body.cms-all-hang-tags .qwl-mm-hours, body.cms-all-pins .qwl-mm-hours { text-align: center; margin-top: 4px; font-size: 12px; color: #666; display: flex; align-items: center; justify-content: center; gap: 5px; } body.cms-all-woven-labels .qwl-mm-hours .availability-dot, body.cms-all-patches .qwl-mm-hours .availability-dot, body.cms-all-hang-tags .qwl-mm-hours .availability-dot, body.cms-all-pins .qwl-mm-hours .availability-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; box-shadow: 0 0 4px rgba(34,197,94,0.5); animation: pulse-dot 2s infinite; } body.cms-all-woven-labels .qwl-mm-hours .availability-text, body.cms-all-patches .qwl-mm-hours .availability-text, body.cms-all-hang-tags .qwl-mm-hours .availability-text, body.cms-all-pins .qwl-mm-hours .availability-text { font-weight: 500; } body.cms-all-woven-labels .qwl-mm-call, body.cms-all-patches .qwl-mm-call, body.cms-all-hang-tags .qwl-mm-call, body.cms-all-pins .qwl-mm-call { font-weight: 700; } body.cms-all-woven-labels .hero-offer ul.hero-checks, body.cms-all-patches .hero-offer ul.hero-checks, body.cms-all-hang-tags .hero-offer ul.hero-checks, body.cms-all-pins .hero-offer ul.hero-checks, body.cms-all-woven-labels .hero-offer ul.hero-checks li, body.cms-all-patches .hero-offer ul.hero-checks li, body.cms-all-hang-tags .hero-offer ul.hero-checks li, body.cms-all-pins .hero-offer ul.hero-checks li { list-style: none !important; list-style-type: none !important; } body.cms-all-woven-labels .hero-offer ul.hero-checks li::before, body.cms-all-patches .hero-offer ul.hero-checks li::before, body.cms-all-hang-tags .hero-offer ul.hero-checks li::before, body.cms-all-pins .hero-offer ul.hero-checks li::before { content: none !important; display: none !important; } body.cms-all-woven-labels .qwl-hero:after, body.cms-all-patches .qwl-hero:after, body.cms-all-hang-tags .qwl-hero:after, body.cms-all-pins .qwl-hero:after, body.cms-all-woven-labels .qwl-hero::after, body.cms-all-patches .qwl-hero::after, body.cms-all-hang-tags .qwl-hero::after, body.cms-all-pins .qwl-hero::after { background: #faf7f2 !important; background-image: none !important; height: 6vw !important; border-top: 5px solid #ECAA00 !important; position: absolute !important; bottom: 0 !important; top: auto !important; left: 0 !important; right: 0 !important; z-index: 2 !important; } body.cms-all-woven-labels .qwl-hero.homepage-hero, body.cms-all-patches .qwl-hero.homepage-hero, body.cms-all-hang-tags .qwl-hero.homepage-hero, body.cms-all-pins .qwl-hero.homepage-hero { margin-bottom: calc(-6vw + 1rem) !important; position: relative !important; overflow: hidden !important; } body.cms-all-woven-labels .columns, body.cms-all-patches .columns, body.cms-all-hang-tags .columns, body.cms-all-pins .columns { display: block !important; } body.cms-all-woven-labels .column.main, body.cms-all-patches .column.main, body.cms-all-hang-tags .column.main, body.cms-all-pins .column.main { display: block !important; float: none !important; } body.cms-all-woven-labels .value-prop span, body.cms-all-patches .value-prop span, body.cms-all-hang-tags .value-prop span, body.cms-all-pins .value-prop span { font-size: 1.575rem; font-weight: 700; color: #4a2d2a; letter-spacing: 0.02em; } body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content h1, body.cms-all-patches .qwl-hero.homepage-hero .hero-content h1, body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content h1, body.cms-all-pins .qwl-hero.homepage-hero .hero-content h1 { text-shadow: 0 1px 3px rgba(255,255,255,0.7), 0 2px 8px rgba(255,255,255,0.4) !important; } body.cms-all-woven-labels .qwl, body.cms-all-patches .qwl, body.cms-all-hang-tags .qwl, body.cms-all-pins .qwl {background:#faf7f2;font-family:var(--default);font-size:1rem;color:var(--brown);max-width:100%;overflow-x:hidden} body.cms-all-woven-labels .qwl.cms-index-index #maincontent, body.cms-all-patches .qwl.cms-index-index #maincontent, body.cms-all-hang-tags .qwl.cms-index-index #maincontent, body.cms-all-pins .qwl.cms-index-index #maincontent {padding:0 !important} body.cms-all-woven-labels .qwl a, body.cms-all-patches .qwl a, body.cms-all-hang-tags .qwl a, body.cms-all-pins .qwl a {text-decoration:none} body.cms-all-woven-labels .qwl h2, body.cms-all-patches .qwl h2, body.cms-all-hang-tags .qwl h2, body.cms-all-pins .qwl h2 {font-size:2rem;font-weight:500} body.cms-all-woven-labels .desktop-width, body.cms-all-patches .desktop-width, body.cms-all-hang-tags .desktop-width, body.cms-all-pins .desktop-width {max-width:var(--desktop);margin-left:auto;margin-right:auto;width:calc(100% - 2rem)} body.cms-all-woven-labels .browser-width, body.cms-all-patches .browser-width, body.cms-all-hang-tags .browser-width, body.cms-all-pins .browser-width {margin-left:50%;translate:-50% 0;width:100vw} body.cms-all-woven-labels .qwl-top-header, body.cms-all-patches .qwl-top-header, body.cms-all-hang-tags .qwl-top-header, body.cms-all-pins .qwl-top-header {background-color:var(--brown);color:#fff;padding:.4rem 0} body.cms-all-woven-labels .google-rating-container, body.cms-all-patches .google-rating-container, body.cms-all-hang-tags .google-rating-container, body.cms-all-pins .google-rating-container, body.cms-all-woven-labels .banner-container, body.cms-all-patches .banner-container, body.cms-all-hang-tags .banner-container, body.cms-all-pins .banner-container {display:none} body.cms-all-woven-labels .top-header-right, body.cms-all-patches .top-header-right, body.cms-all-hang-tags .top-header-right, body.cms-all-pins .top-header-right {align-items:center;display:grid;gap:1rem;grid-template-columns:1fr auto auto} body.cms-all-woven-labels .phone-number, body.cms-all-patches .phone-number, body.cms-all-hang-tags .phone-number, body.cms-all-pins .phone-number {text-align:left} body.cms-all-woven-labels .qwl-top-header i.fas.fa-phone, body.cms-all-patches .qwl-top-header i.fas.fa-phone, body.cms-all-hang-tags .qwl-top-header i.fas.fa-phone, body.cms-all-pins .qwl-top-header i.fas.fa-phone {transform:rotateY(180deg)} body.cms-all-woven-labels .logo, body.cms-all-patches .logo, body.cms-all-hang-tags .logo, body.cms-all-pins .logo {display:block;margin:0;max-width:unset} body.cms-all-woven-labels .logo img, body.cms-all-patches .logo img, body.cms-all-hang-tags .logo img, body.cms-all-pins .logo img {display:block;max-height:unset;width:100%} body.cms-all-woven-labels .button, body.cms-all-patches .button, body.cms-all-hang-tags .button, body.cms-all-pins .button {align-items:center;background-color:var(--orange);border:2px solid var(--orange);border-radius:1rem;color:#fff;cursor:pointer;display:inline-flex;font-weight:600;gap:.25em;height:2.5em;padding:0 1em;text-transform:uppercase;white-space:nowrap} body.cms-all-woven-labels .button:hover, body.cms-all-patches .button:hover, body.cms-all-hang-tags .button:hover, body.cms-all-pins .button:hover {background-color:var(--pink);border-color:var(--pink);color:#fff} body.cms-all-woven-labels .button.gold, body.cms-all-patches .button.gold, body.cms-all-hang-tags .button.gold, body.cms-all-pins .button.gold {background-color:var(--gold);border-color:var(--gold);color:var(--brown)} body.cms-all-woven-labels .button.gold:hover, body.cms-all-patches .button.gold:hover, body.cms-all-hang-tags .button.gold:hover, body.cms-all-pins .button.gold:hover {background-color:var(--orange);border-color:var(--orange);color:#fff} body.cms-all-woven-labels .button.pink, body.cms-all-patches .button.pink, body.cms-all-hang-tags .button.pink, body.cms-all-pins .button.pink {background-color:var(--pink);border-color:var(--pink);color:#fff} body.cms-all-woven-labels .button.pink:hover, body.cms-all-patches .button.pink:hover, body.cms-all-hang-tags .button.pink:hover, body.cms-all-pins .button.pink:hover {background-color:var(--flesh);border-color:var(--flesh);color:#fff} body.cms-all-woven-labels .button.outline, body.cms-all-patches .button.outline, body.cms-all-hang-tags .button.outline, body.cms-all-pins .button.outline {background-color:#fff;border:2px solid var(--orange);color:var(--orange)} body.cms-all-woven-labels .button.outline:hover, body.cms-all-patches .button.outline:hover, body.cms-all-hang-tags .button.outline:hover, body.cms-all-pins .button.outline:hover {border-color:var(--pink);color:var(--pink)} body.cms-all-woven-labels .button.dark, body.cms-all-patches .button.dark, body.cms-all-hang-tags .button.dark, body.cms-all-pins .button.dark {background-color:var(--brown);border-color:var(--brown)} body.cms-all-woven-labels .button.dark:hover, body.cms-all-patches .button.dark:hover, body.cms-all-hang-tags .button.dark:hover, body.cms-all-pins .button.dark:hover {background-color:var(--light-brown);border-color:var(--light-brown)} body.cms-all-woven-labels .header-nav, body.cms-all-patches .header-nav, body.cms-all-hang-tags .header-nav, body.cms-all-pins .header-nav {padding:1rem 0} body.cms-all-woven-labels :not(.menu-active) .menu-close, body.cms-all-patches :not(.menu-active) .menu-close, body.cms-all-hang-tags :not(.menu-active) .menu-close, body.cms-all-pins :not(.menu-active) .menu-close, body.cms-all-woven-labels .menu-active .menu-open, body.cms-all-patches .menu-active .menu-open, body.cms-all-hang-tags .menu-active .menu-open, body.cms-all-pins .menu-active .menu-open {display:none} body.cms-all-woven-labels ul.subnav, body.cms-all-patches ul.subnav, body.cms-all-hang-tags ul.subnav, body.cms-all-pins ul.subnav {background-color:var(--pink);border-radius:0 0 1.5rem 1.5rem;box-sizing:border-box;list-style:none;margin:0;max-height:0;overflow:hidden;padding:0;transition:max-height 1s ease 0s} body.cms-all-woven-labels ul.subnav li, body.cms-all-patches ul.subnav li, body.cms-all-hang-tags ul.subnav li, body.cms-all-pins ul.subnav li {padding:.5rem 1rem} body.cms-all-woven-labels ul.subnav a, body.cms-all-patches ul.subnav a, body.cms-all-hang-tags ul.subnav a, body.cms-all-pins ul.subnav a {color:#fff} body.cms-all-woven-labels ul.subnav a:hover, body.cms-all-patches ul.subnav a:hover, body.cms-all-hang-tags ul.subnav a:hover, body.cms-all-pins ul.subnav a:hover {color:#fff;opacity:.85} body.cms-all-woven-labels footer, body.cms-all-patches footer, body.cms-all-hang-tags footer, body.cms-all-pins footer {background-color:var(--beige);color:var(--light-brown);padding:2rem 0 0} body.cms-all-woven-labels footer .container, body.cms-all-patches footer .container, body.cms-all-hang-tags footer .container, body.cms-all-pins footer .container {margin-left:auto;margin-right:auto;max-width:var(--bigscreen);width:calc(100% - 2rem);font-size:1rem} body.cms-all-woven-labels .block.newsletter .actions, body.cms-all-patches .block.newsletter .actions, body.cms-all-hang-tags .block.newsletter .actions, body.cms-all-pins .block.newsletter .actions {display:block;vertical-align:top;width:auto} body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content, body.cms-all-patches .qwl-hero.homepage-hero .hero-content, body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content, body.cms-all-pins .qwl-hero.homepage-hero .hero-content {padding:6rem 1rem 4rem} body.cms-all-woven-labels .featured-products h2, body.cms-all-patches .featured-products h2, body.cms-all-hang-tags .featured-products h2, body.cms-all-pins .featured-products h2 {margin:1rem auto;text-align:center} body.cms-all-woven-labels #qwl-featured-products h2, body.cms-all-patches #qwl-featured-products h2, body.cms-all-hang-tags #qwl-featured-products h2, body.cms-all-pins #qwl-featured-products h2 {text-align:center} body.cms-all-woven-labels .featured-products-grid, body.cms-all-patches .featured-products-grid, body.cms-all-hang-tags .featured-products-grid, body.cms-all-pins .featured-products-grid {display:grid;grid-gap:1rem;grid-template-columns:1fr} body.cms-all-woven-labels .featured-products-grid a, body.cms-all-patches .featured-products-grid a, body.cms-all-hang-tags .featured-products-grid a, body.cms-all-pins .featured-products-grid a {color:var(--brown);display:block} body.cms-all-woven-labels .featured-product-image, body.cms-all-patches .featured-product-image, body.cms-all-hang-tags .featured-product-image, body.cms-all-pins .featured-product-image {background-color:hotpink;height:0;overflow:hidden;padding-top:115%;position:relative;width:100%} body.cms-all-woven-labels .featured-product-image .thumbnail, body.cms-all-patches .featured-product-image .thumbnail, body.cms-all-hang-tags .featured-product-image .thumbnail, body.cms-all-pins .featured-product-image .thumbnail {left:50%;object-fit:fill;position:absolute;scale:1;top:50%;transition:scale .5s ease 0s;translate:-50% -50%;width:100} body.cms-all-woven-labels .featured-products-grid a:hover h3, body.cms-all-patches .featured-products-grid a:hover h3, body.cms-all-hang-tags .featured-products-grid a:hover h3, body.cms-all-pins .featured-products-grid a:hover h3 {color:var(--pink)} body.cms-all-woven-labels .featured-products-grid a:hover .featured-product-image .thumbnail, body.cms-all-patches .featured-products-grid a:hover .featured-product-image .thumbnail, body.cms-all-hang-tags .featured-products-grid a:hover .featured-product-image .thumbnail, body.cms-all-pins .featured-products-grid a:hover .featured-product-image .thumbnail {scale:1.1} body.cms-all-woven-labels .featured-product-image .badge, body.cms-all-patches .featured-product-image .badge, body.cms-all-hang-tags .featured-product-image .badge, body.cms-all-pins .featured-product-image .badge {left:1rem;max-height:2rem;position:absolute;top:1rem} body.cms-all-woven-labels .featured-products-grid h3, body.cms-all-patches .featured-products-grid h3, body.cms-all-hang-tags .featured-products-grid h3, body.cms-all-pins .featured-products-grid h3 {margin:1rem 0 0} body.cms-all-woven-labels .featured-products-grid p, body.cms-all-patches .featured-products-grid p, body.cms-all-hang-tags .featured-products-grid p, body.cms-all-pins .featured-products-grid p {font-weight:300} body.cms-all-woven-labels .featured-products-footer, body.cms-all-patches .featured-products-footer, body.cms-all-hang-tags .featured-products-footer, body.cms-all-pins .featured-products-footer {margin:2rem auto;max-width:900px} body.cms-all-woven-labels .featured-products-footer p, body.cms-all-patches .featured-products-footer p, body.cms-all-hang-tags .featured-products-footer p, body.cms-all-pins .featured-products-footer p {font-size:1.5rem;font-weight:500;text-align:center} body.cms-all-woven-labels .qwl, body.cms-all-patches .qwl, body.cms-all-hang-tags .qwl, body.cms-all-pins .qwl {background-color:#faf7f2} body.cms-all-woven-labels .carousel-header, body.cms-all-patches .carousel-header, body.cms-all-hang-tags .carousel-header, body.cms-all-pins .carousel-header {align-items:center;display:flex;gap:1rem;justify-content:space-between} body.cms-all-woven-labels .carousel-header h2 a, body.cms-all-patches .carousel-header h2 a, body.cms-all-hang-tags .carousel-header h2 a, body.cms-all-pins .carousel-header h2 a {color:var(--brown)} body.cms-all-woven-labels .carousel-header a.button, body.cms-all-patches .carousel-header a.button, body.cms-all-hang-tags .carousel-header a.button, body.cms-all-pins .carousel-header a.button {background-color:#fff;border:1px solid var(--brown);border-radius:1rem;color:var(--brown);font-size:.85rem;height:3rem;white-space:nowrap} body.cms-all-woven-labels .carousel-header a.button:hover, body.cms-all-patches .carousel-header a.button:hover, body.cms-all-hang-tags .carousel-header a.button:hover, body.cms-all-pins .carousel-header a.button:hover {opacity:.85} body.cms-all-woven-labels .patches .carousel-header a.button, body.cms-all-patches .patches .carousel-header a.button, body.cms-all-hang-tags .patches .carousel-header a.button, body.cms-all-pins .patches .carousel-header a.button {border-color:var(--orange);color:var(--orange)} body.cms-all-woven-labels .pins .carousel-header a.button, body.cms-all-patches .pins .carousel-header a.button, body.cms-all-hang-tags .pins .carousel-header a.button, body.cms-all-pins .pins .carousel-header a.button {border-color:var(--pink);color:var(--pink)} body.cms-all-woven-labels .hangtags .carousel-header a.button, body.cms-all-patches .hangtags .carousel-header a.button, body.cms-all-hang-tags .hangtags .carousel-header a.button, body.cms-all-pins .hangtags .carousel-header a.button {border-color:var(--gold);color:var(--gold)} body.cms-all-woven-labels ul.scrollbar-carousel, body.cms-all-patches ul.scrollbar-carousel, body.cms-all-hang-tags ul.scrollbar-carousel, body.cms-all-pins ul.scrollbar-carousel {list-style:none;margin-bottom:1rem;padding:0} body.cms-all-woven-labels ul.scrollbar-carousel .label, body.cms-all-patches ul.scrollbar-carousel .label, body.cms-all-hang-tags ul.scrollbar-carousel .label, body.cms-all-pins ul.scrollbar-carousel .label {align-items:center;background-color:var(--brown);border-radius:1rem 1rem 0 0;color:#fff;display:flex;font-weight:500;gap:.25rem;height:3rem;justify-content:center;font-size:larger !important} body.cms-all-woven-labels .patches ul.scrollbar-carousel .label, body.cms-all-patches .patches ul.scrollbar-carousel .label, body.cms-all-hang-tags .patches ul.scrollbar-carousel .label, body.cms-all-pins .patches ul.scrollbar-carousel .label {background-color:var(--orange)} body.cms-all-woven-labels .pins ul.scrollbar-carousel .label, body.cms-all-patches .pins ul.scrollbar-carousel .label, body.cms-all-hang-tags .pins ul.scrollbar-carousel .label, body.cms-all-pins .pins ul.scrollbar-carousel .label {background-color:var(--pink)} body.cms-all-woven-labels .hangtags ul.scrollbar-carousel .label, body.cms-all-patches .hangtags ul.scrollbar-carousel .label, body.cms-all-hang-tags .hangtags ul.scrollbar-carousel .label, body.cms-all-pins .hangtags ul.scrollbar-carousel .label {background-color:var(--gold)} body.cms-all-woven-labels #qwl-homepage-categories button, body.cms-all-patches #qwl-homepage-categories button, body.cms-all-hang-tags #qwl-homepage-categories button, body.cms-all-pins #qwl-homepage-categories button {display:none} body.cms-all-woven-labels ul.scrollbar-carousel .thumbnail, body.cms-all-patches ul.scrollbar-carousel .thumbnail, body.cms-all-hang-tags ul.scrollbar-carousel .thumbnail, body.cms-all-pins ul.scrollbar-carousel .thumbnail {border-radius:0 0 1rem 1rem;height:0;overflow:hidden;padding-top:66.66%;position:relative} body.cms-all-woven-labels ul.scrollbar-carousel .thumbnail img, body.cms-all-patches ul.scrollbar-carousel .thumbnail img, body.cms-all-hang-tags ul.scrollbar-carousel .thumbnail img, body.cms-all-pins ul.scrollbar-carousel .thumbnail img {display:block;left:50%;object-fit:cover;position:absolute;top:50%;translate:-50% -50%;transition:all .5s linear 0s} body.cms-all-woven-labels ul.scrollbar-carousel .thumbnail:hover img, body.cms-all-patches ul.scrollbar-carousel .thumbnail:hover img, body.cms-all-hang-tags ul.scrollbar-carousel .thumbnail:hover img, body.cms-all-pins ul.scrollbar-carousel .thumbnail:hover img {scale:1.1;rotate:-2deg} body.cms-all-woven-labels #google-reviews, body.cms-all-patches #google-reviews, body.cms-all-hang-tags #google-reviews, body.cms-all-pins #google-reviews {background:var(--cream);margin-left:50%;margin-top:2rem;padding:2rem 0;translate:-50% 0;width:calc(100vw - 1rem)} body.cms-all-woven-labels #google-reviews .wrapper, body.cms-all-patches #google-reviews .wrapper, body.cms-all-hang-tags #google-reviews .wrapper, body.cms-all-pins #google-reviews .wrapper {margin:0 auto;max-width:var(--bigscreen);width:calc(100% - 4rem)} body.cms-all-woven-labels #google-reviews h2, body.cms-all-patches #google-reviews h2, body.cms-all-hang-tags #google-reviews h2, body.cms-all-pins #google-reviews h2 {text-align:center} body.cms-all-woven-labels #google-reviews .reviews-buttons, body.cms-all-patches #google-reviews .reviews-buttons, body.cms-all-hang-tags #google-reviews .reviews-buttons, body.cms-all-pins #google-reviews .reviews-buttons {align-items:center;display:flex;gap:2rem;justify-content:center;margin-top:2rem} body.cms-all-woven-labels #google-reviews img.google-stars, body.cms-all-patches #google-reviews img.google-stars, body.cms-all-hang-tags #google-reviews img.google-stars, body.cms-all-pins #google-reviews img.google-stars {display:block;max-height:4rem} body.cms-all-woven-labels #homepage-sewing-services, body.cms-all-patches #homepage-sewing-services, body.cms-all-hang-tags #homepage-sewing-services, body.cms-all-pins #homepage-sewing-services {margin:1rem} body.cms-all-woven-labels #homepage-sewing-services .image-cell, body.cms-all-patches #homepage-sewing-services .image-cell, body.cms-all-hang-tags #homepage-sewing-services .image-cell, body.cms-all-pins #homepage-sewing-services .image-cell {height:0;overflow:hidden;position:relative} body.cms-all-woven-labels #homepage-sewing-services .image-cell img, body.cms-all-patches #homepage-sewing-services .image-cell img, body.cms-all-hang-tags #homepage-sewing-services .image-cell img, body.cms-all-pins #homepage-sewing-services .image-cell img {display:block;height:100%;left:0;object-fit:cover;position:absolute;top:0;width:100%} body.cms-all-woven-labels #homepage-sewing-services h2, body.cms-all-patches #homepage-sewing-services h2, body.cms-all-hang-tags #homepage-sewing-services h2, body.cms-all-pins #homepage-sewing-services h2 {font-weight:600;margin:0 0 1rem;text-transform:none} body.cms-all-woven-labels #homepage-sewing-services ul, body.cms-all-patches #homepage-sewing-services ul, body.cms-all-hang-tags #homepage-sewing-services ul, body.cms-all-pins #homepage-sewing-services ul {font-weight:600;margin:0;padding:1.25rem} body.cms-all-woven-labels .ss-grid, body.cms-all-patches .ss-grid, body.cms-all-hang-tags .ss-grid, body.cms-all-pins .ss-grid {display:grid;grid-gap:1rem;grid-template-areas:"ss-3 ss-4" "ss-text ss-text" "ss-5 ss-5";grid-template-columns:repeat(2,1fr)} body.cms-all-woven-labels .ss-grid #ss-1a, body.cms-all-patches .ss-grid #ss-1a, body.cms-all-hang-tags .ss-grid #ss-1a, body.cms-all-pins .ss-grid #ss-1a {grid-area:ss-1a} body.cms-all-woven-labels .ss-grid #ss-1b, body.cms-all-patches .ss-grid #ss-1b, body.cms-all-hang-tags .ss-grid #ss-1b, body.cms-all-pins .ss-grid #ss-1b {grid-area:ss-1b} body.cms-all-woven-labels .ss-grid #ss-1c, body.cms-all-patches .ss-grid #ss-1c, body.cms-all-hang-tags .ss-grid #ss-1c, body.cms-all-pins .ss-grid #ss-1c {grid-area:ss-1c} body.cms-all-woven-labels .ss-grid #ss-2a, body.cms-all-patches .ss-grid #ss-2a, body.cms-all-hang-tags .ss-grid #ss-2a, body.cms-all-pins .ss-grid #ss-2a {grid-area:ss-2a} body.cms-all-woven-labels .ss-grid #ss-2b, body.cms-all-patches .ss-grid #ss-2b, body.cms-all-hang-tags .ss-grid #ss-2b, body.cms-all-pins .ss-grid #ss-2b {grid-area:ss-2b} body.cms-all-woven-labels .ss-grid #ss-2c, body.cms-all-patches .ss-grid #ss-2c, body.cms-all-hang-tags .ss-grid #ss-2c, body.cms-all-pins .ss-grid #ss-2c {grid-area:ss-2c} body.cms-all-woven-labels .ss-grid #ss-2d, body.cms-all-patches .ss-grid #ss-2d, body.cms-all-hang-tags .ss-grid #ss-2d, body.cms-all-pins .ss-grid #ss-2d {grid-area:ss-2d} body.cms-all-woven-labels .ss-grid #ss-3, body.cms-all-patches .ss-grid #ss-3, body.cms-all-hang-tags .ss-grid #ss-3, body.cms-all-pins .ss-grid #ss-3 {grid-area:ss-3} body.cms-all-woven-labels .ss-grid #ss-4, body.cms-all-patches .ss-grid #ss-4, body.cms-all-hang-tags .ss-grid #ss-4, body.cms-all-pins .ss-grid #ss-4 {grid-area:ss-4} body.cms-all-woven-labels .ss-grid #ss-5, body.cms-all-patches .ss-grid #ss-5, body.cms-all-hang-tags .ss-grid #ss-5, body.cms-all-pins .ss-grid #ss-5 {grid-area:ss-5} body.cms-all-woven-labels .ss-grid #ss-text, body.cms-all-patches .ss-grid #ss-text, body.cms-all-hang-tags .ss-grid #ss-text, body.cms-all-pins .ss-grid #ss-text {grid-area:ss-text} body.cms-all-woven-labels .ss-grid #ss-1a, body.cms-all-patches .ss-grid #ss-1a, body.cms-all-hang-tags .ss-grid #ss-1a, body.cms-all-pins .ss-grid #ss-1a, body.cms-all-woven-labels .ss-grid #ss-1b, body.cms-all-patches .ss-grid #ss-1b, body.cms-all-hang-tags .ss-grid #ss-1b, body.cms-all-pins .ss-grid #ss-1b, body.cms-all-woven-labels .ss-grid #ss-1c, body.cms-all-patches .ss-grid #ss-1c, body.cms-all-hang-tags .ss-grid #ss-1c, body.cms-all-pins .ss-grid #ss-1c, body.cms-all-woven-labels .ss-grid #ss-2a, body.cms-all-patches .ss-grid #ss-2a, body.cms-all-hang-tags .ss-grid #ss-2a, body.cms-all-pins .ss-grid #ss-2a, body.cms-all-woven-labels .ss-grid #ss-2b, body.cms-all-patches .ss-grid #ss-2b, body.cms-all-hang-tags .ss-grid #ss-2b, body.cms-all-pins .ss-grid #ss-2b, body.cms-all-woven-labels .ss-grid #ss-2c, body.cms-all-patches .ss-grid #ss-2c, body.cms-all-hang-tags .ss-grid #ss-2c, body.cms-all-pins .ss-grid #ss-2c, body.cms-all-woven-labels .ss-grid #ss-2d, body.cms-all-patches .ss-grid #ss-2d, body.cms-all-hang-tags .ss-grid #ss-2d, body.cms-all-pins .ss-grid #ss-2d {display:none} body.cms-all-woven-labels .ss-grid #ss-3, body.cms-all-patches .ss-grid #ss-3, body.cms-all-hang-tags .ss-grid #ss-3, body.cms-all-pins .ss-grid #ss-3, body.cms-all-woven-labels .ss-grid #ss-4, body.cms-all-patches .ss-grid #ss-4, body.cms-all-hang-tags .ss-grid #ss-4, body.cms-all-pins .ss-grid #ss-4 {padding-top:100%} body.cms-all-woven-labels .ss-grid #ss-5, body.cms-all-patches .ss-grid #ss-5, body.cms-all-hang-tags .ss-grid #ss-5, body.cms-all-pins .ss-grid #ss-5 {padding-top:50%} body.cms-all-woven-labels #homepage-custom-branding, body.cms-all-patches #homepage-custom-branding, body.cms-all-hang-tags #homepage-custom-branding, body.cms-all-pins #homepage-custom-branding {background-color:var(--beige);margin-left:50%;margin-top:6rem;padding:4rem 0;position:relative;text-align:center;translate:-50% 0;width:calc(100vw - 1rem)} body.cms-all-woven-labels #homepage-custom-branding:before, body.cms-all-patches #homepage-custom-branding:before, body.cms-all-hang-tags #homepage-custom-branding:before, body.cms-all-pins #homepage-custom-branding:before, body.cms-all-woven-labels #expert-tips-section:before, body.cms-all-patches #expert-tips-section:before, body.cms-all-hang-tags #expert-tips-section:before, body.cms-all-pins #expert-tips-section:before {background:transparent url("/pub/media/qwl2025/custom-branding-top.svg") center center repeat-x;background-size:contain;content:" ";display:block;height:5rem;position:absolute;width:100%;top:-2rem} body.cms-all-woven-labels #homepage-custom-branding:after, body.cms-all-patches #homepage-custom-branding:after, body.cms-all-hang-tags #homepage-custom-branding:after, body.cms-all-pins #homepage-custom-branding:after {background:transparent url("/pub/media/qwl2025/custom-branding-footer.svg") center left repeat-x;background-size:contain;bottom:0;content:" ";display:block;height:.5rem;position:absolute;width:100%} body.cms-all-woven-labels #homepage-custom-branding h3, body.cms-all-patches #homepage-custom-branding h3, body.cms-all-hang-tags #homepage-custom-branding h3, body.cms-all-pins #homepage-custom-branding h3 {margin:0 auto;max-width:900px} body.cms-all-woven-labels #homepage-custom-branding .button, body.cms-all-patches #homepage-custom-branding .button, body.cms-all-hang-tags #homepage-custom-branding .button, body.cms-all-pins #homepage-custom-branding .button {background-color:var(--brown);margin:0 auto;text-transform:none;width:fit-content} body.cms-all-woven-labels #homepage-custom-branding .button:hover, body.cms-all-patches #homepage-custom-branding .button:hover, body.cms-all-hang-tags #homepage-custom-branding .button:hover, body.cms-all-pins #homepage-custom-branding .button:hover {background-color:var(--pink)} body.cms-all-woven-labels .custom-branding-categories, body.cms-all-patches .custom-branding-categories, body.cms-all-hang-tags .custom-branding-categories, body.cms-all-pins .custom-branding-categories {display:grid;gap:1rem;grid-template-columns:1fr} body.cms-all-woven-labels .custom-branding-category, body.cms-all-patches .custom-branding-category, body.cms-all-hang-tags .custom-branding-category, body.cms-all-pins .custom-branding-category {display:grid;gap:1rem;grid-template-columns:1fr;justify-content:center} body.cms-all-woven-labels #homepage-quote, body.cms-all-patches #homepage-quote, body.cms-all-hang-tags #homepage-quote, body.cms-all-pins #homepage-quote {margin-left:50%;padding:2rem 0;position:relative;translate:-50% 0;width:calc(100vw - 1rem)} body.cms-all-woven-labels #homepage-quote h2, body.cms-all-patches #homepage-quote h2, body.cms-all-hang-tags #homepage-quote h2, body.cms-all-pins #homepage-quote h2 {margin-top:0} body.cms-all-woven-labels #homepage-quote .background-image, body.cms-all-patches #homepage-quote .background-image, body.cms-all-hang-tags #homepage-quote .background-image, body.cms-all-pins #homepage-quote .background-image {background-color:var(--pink);height:100%;position:absolute;right:0;top:0} body.cms-all-woven-labels #homepage-quote .background-image img, body.cms-all-patches #homepage-quote .background-image img, body.cms-all-hang-tags #homepage-quote .background-image img, body.cms-all-pins #homepage-quote .background-image img {display:block;height:100%;object-fit:cover;object-position:right;width:100%} body.cms-all-woven-labels #homepage-quote .wrapper, body.cms-all-patches #homepage-quote .wrapper, body.cms-all-hang-tags #homepage-quote .wrapper, body.cms-all-pins #homepage-quote .wrapper {position:relative} body.cms-all-woven-labels #homepage-quote label, body.cms-all-patches #homepage-quote label, body.cms-all-hang-tags #homepage-quote label, body.cms-all-pins #homepage-quote label {display:block;font-weight:500;margin-bottom:.5rem} body.cms-all-woven-labels #homepage-quote input, body.cms-all-patches #homepage-quote input, body.cms-all-hang-tags #homepage-quote input, body.cms-all-pins #homepage-quote input, body.cms-all-woven-labels #homepage-quote select, body.cms-all-patches #homepage-quote select, body.cms-all-hang-tags #homepage-quote select, body.cms-all-pins #homepage-quote select, body.cms-all-woven-labels #homepage-quote textarea, body.cms-all-patches #homepage-quote textarea, body.cms-all-hang-tags #homepage-quote textarea, body.cms-all-pins #homepage-quote textarea {background-color:#fff;appearance:none;border:0;border-radius:0;display:block} body.cms-all-woven-labels #homepage-quote input:focus, body.cms-all-patches #homepage-quote input:focus, body.cms-all-hang-tags #homepage-quote input:focus, body.cms-all-pins #homepage-quote input:focus, body.cms-all-woven-labels #homepage-quote select:focus, body.cms-all-patches #homepage-quote select:focus, body.cms-all-hang-tags #homepage-quote select:focus, body.cms-all-pins #homepage-quote select:focus, body.cms-all-woven-labels #homepage-quote textarea:focus, body.cms-all-patches #homepage-quote textarea:focus, body.cms-all-hang-tags #homepage-quote textarea:focus, body.cms-all-pins #homepage-quote textarea:focus {background-color:var(--beige);border:0;outline:none} body.cms-all-woven-labels #homepage-quote form, body.cms-all-patches #homepage-quote form, body.cms-all-hang-tags #homepage-quote form, body.cms-all-pins #homepage-quote form {display:grid;gap:1rem} body.cms-all-woven-labels #width_height, body.cms-all-patches #width_height, body.cms-all-hang-tags #width_height, body.cms-all-pins #width_height {align-items:center;display:grid;gap:.5rem;grid-template-columns:1fr auto 1fr} body.cms-all-woven-labels #width_height_instructions, body.cms-all-patches #width_height_instructions, body.cms-all-hang-tags #width_height_instructions, body.cms-all-pins #width_height_instructions {font-size:.85rem;grid-column:1/span 3} body.cms-all-woven-labels #width_by_height_x, body.cms-all-patches #width_by_height_x, body.cms-all-hang-tags #width_by_height_x, body.cms-all-pins #width_by_height_x {translate:0 .75em} body.cms-all-woven-labels #homepage-quote label.upload, body.cms-all-patches #homepage-quote label.upload, body.cms-all-hang-tags #homepage-quote label.upload, body.cms-all-pins #homepage-quote label.upload {background-color:#fff;padding:.5rem} body.cms-all-woven-labels #homepage-quote br, body.cms-all-patches #homepage-quote br, body.cms-all-hang-tags #homepage-quote br, body.cms-all-pins #homepage-quote br {display:none} body.cms-all-woven-labels #homepage-quote button:not(.primary), body.cms-all-patches #homepage-quote button:not(.primary), body.cms-all-hang-tags #homepage-quote button:not(.primary), body.cms-all-pins #homepage-quote button:not(.primary) {align-items:center;background-color:var(--orange);border:0;border-radius:1rem;color:#fff;cursor:pointer;display:inline-flex;font:500 1rem var(--default);height:3em;justify-content:center;text-align:center;text-transform:uppercase;width:100%} body.cms-all-woven-labels #homepage-quote button:not(.primary):hover, body.cms-all-patches #homepage-quote button:not(.primary):hover, body.cms-all-hang-tags #homepage-quote button:not(.primary):hover, body.cms-all-pins #homepage-quote button:not(.primary):hover {background-color:var(--brown)} body.cms-all-woven-labels #homepage-quote ul, body.cms-all-patches #homepage-quote ul, body.cms-all-hang-tags #homepage-quote ul, body.cms-all-pins #homepage-quote ul {padding:0 0 0 1.25rem} body.cms-all-woven-labels #homepage-quote ul li, body.cms-all-patches #homepage-quote ul li, body.cms-all-hang-tags #homepage-quote ul li, body.cms-all-pins #homepage-quote ul li {font-weight:600;margin-bottom:0} body.cms-all-woven-labels #homepage-quote .preheader, body.cms-all-patches #homepage-quote .preheader, body.cms-all-hang-tags #homepage-quote .preheader, body.cms-all-pins #homepage-quote .preheader {font-size:1.25rem;font-weight:500} body.cms-all-woven-labels #discuss_project_group label, body.cms-all-patches #discuss_project_group label, body.cms-all-hang-tags #discuss_project_group label, body.cms-all-pins #discuss_project_group label {align-items:center;display:flex;gap:.5rem;margin:0} body.cms-all-woven-labels #discuss_project_group label:before, body.cms-all-patches #discuss_project_group label:before, body.cms-all-hang-tags #discuss_project_group label:before, body.cms-all-pins #discuss_project_group label:before {align-items:center;background-color:rgba(255,255,255,0);border:1px solid var(--brown);color:transparent;content:"X";display:flex;height:1rem;justify-content:center;width:1rem} body.cms-all-woven-labels #discuss_project_group input:checked~label:before, body.cms-all-patches #discuss_project_group input:checked~label:before, body.cms-all-hang-tags #discuss_project_group input:checked~label:before, body.cms-all-pins #discuss_project_group input:checked~label:before {background-color:rgba(255,255,255,1);color:var(--brown)} body.cms-all-woven-labels #homepage-specials, body.cms-all-patches #homepage-specials, body.cms-all-hang-tags #homepage-specials, body.cms-all-pins #homepage-specials {margin:0 auto;max-width:var(--desktop)} body.cms-all-woven-labels #homepage-specials h2, body.cms-all-patches #homepage-specials h2, body.cms-all-hang-tags #homepage-specials h2, body.cms-all-pins #homepage-specials h2 {text-align:center} body.cms-all-woven-labels .specials-grid, body.cms-all-patches .specials-grid, body.cms-all-hang-tags .specials-grid, body.cms-all-pins .specials-grid {display:grid;grid-gap:1rem;grid-template-columns:1fr} body.cms-all-woven-labels .specials-grid .grid-item, body.cms-all-patches .specials-grid .grid-item, body.cms-all-hang-tags .specials-grid .grid-item, body.cms-all-pins .specials-grid .grid-item {position:relative} body.cms-all-woven-labels .specials-grid .thumbnail, body.cms-all-patches .specials-grid .thumbnail, body.cms-all-hang-tags .specials-grid .thumbnail, body.cms-all-pins .specials-grid .thumbnail {position:relative} body.cms-all-woven-labels .specials-grid .blurb, body.cms-all-patches .specials-grid .blurb, body.cms-all-hang-tags .specials-grid .blurb, body.cms-all-pins .specials-grid .blurb {font:600 1.5rem var(--default);left:0;padding:1rem;position:absolute;top:0} body.cms-all-woven-labels .specials-grid .grid-item.dark .blurb, body.cms-all-patches .specials-grid .grid-item.dark .blurb, body.cms-all-hang-tags .specials-grid .grid-item.dark .blurb, body.cms-all-pins .specials-grid .grid-item.dark .blurb {color:#fff} body.cms-all-woven-labels .specials-grid .blurb em, body.cms-all-patches .specials-grid .blurb em, body.cms-all-hang-tags .specials-grid .blurb em, body.cms-all-pins .specials-grid .blurb em {display:block;color:var(--flesh);font-style:normal;font:500 1.5em var(--default);letter-spacing:.05em} body.cms-all-woven-labels .specials-banner, body.cms-all-patches .specials-banner, body.cms-all-hang-tags .specials-banner, body.cms-all-pins .specials-banner {margin-top:1rem;padding:1rem;overflow:hidden;position:relative} body.cms-all-woven-labels .specials-banner .thumbnail, body.cms-all-patches .specials-banner .thumbnail, body.cms-all-hang-tags .specials-banner .thumbnail, body.cms-all-pins .specials-banner .thumbnail {left:50%;object-fit:cover;position:absolute;top:50%;translate:-50% -50%;width:100%} body.cms-all-woven-labels .specials-banner .content-areas, body.cms-all-patches .specials-banner .content-areas, body.cms-all-hang-tags .specials-banner .content-areas, body.cms-all-pins .specials-banner .content-areas {color:#fff;display:grid;gap:1rem;position:relative} body.cms-all-woven-labels .specials-banner .content-areas h3, body.cms-all-patches .specials-banner .content-areas h3, body.cms-all-hang-tags .specials-banner .content-areas h3, body.cms-all-pins .specials-banner .content-areas h3 {font-style:italic;font-weight:500;margin:0} body.cms-all-woven-labels .specials-banner .content-areas .area-2, body.cms-all-patches .specials-banner .content-areas .area-2, body.cms-all-hang-tags .specials-banner .content-areas .area-2, body.cms-all-pins .specials-banner .content-areas .area-2 {text-align:center} body.cms-all-woven-labels .specials-banner .content-areas ul, body.cms-all-patches .specials-banner .content-areas ul, body.cms-all-hang-tags .specials-banner .content-areas ul, body.cms-all-pins .specials-banner .content-areas ul {list-style:none;margin:1rem;padding:0} body.cms-all-woven-labels .specials-banner .content-areas ul li, body.cms-all-patches .specials-banner .content-areas ul li, body.cms-all-hang-tags .specials-banner .content-areas ul li, body.cms-all-pins .specials-banner .content-areas ul li {color:var(--gold);margin:0} body.cms-all-woven-labels .specials-banner .content-areas .footnote, body.cms-all-patches .specials-banner .content-areas .footnote, body.cms-all-hang-tags .specials-banner .content-areas .footnote, body.cms-all-pins .specials-banner .content-areas .footnote {font-size:.85em;font-style:italic} body.cms-all-woven-labels #homepage-instagram, body.cms-all-patches #homepage-instagram, body.cms-all-hang-tags #homepage-instagram, body.cms-all-pins #homepage-instagram {margin-top:2rem;text-align:center} body.cms-all-woven-labels #homepage-instagram .instagram-logo, body.cms-all-patches #homepage-instagram .instagram-logo, body.cms-all-hang-tags #homepage-instagram .instagram-logo, body.cms-all-pins #homepage-instagram .instagram-logo {margin:0 auto 1rem auto;max-width:100px} body.cms-all-woven-labels #homepage-instagram a, body.cms-all-patches #homepage-instagram a, body.cms-all-hang-tags #homepage-instagram a, body.cms-all-pins #homepage-instagram a {color:var(--brown)} body.cms-all-woven-labels #homepage-instagram h2, body.cms-all-patches #homepage-instagram h2, body.cms-all-hang-tags #homepage-instagram h2, body.cms-all-pins #homepage-instagram h2 {margin:0} body.cms-all-woven-labels #homepage-instagram .eapps-instagram-feed-posts-grid-load-more-container.eapps-instagram-feed-posts-grid-load-more-enabled, body.cms-all-patches #homepage-instagram .eapps-instagram-feed-posts-grid-load-more-container.eapps-instagram-feed-posts-grid-load-more-enabled, body.cms-all-hang-tags #homepage-instagram .eapps-instagram-feed-posts-grid-load-more-container.eapps-instagram-feed-posts-grid-load-more-enabled, body.cms-all-pins #homepage-instagram .eapps-instagram-feed-posts-grid-load-more-container.eapps-instagram-feed-posts-grid-load-more-enabled {display:none} body.cms-all-woven-labels #homepage-instagram p, body.cms-all-patches #homepage-instagram p, body.cms-all-hang-tags #homepage-instagram p, body.cms-all-pins #homepage-instagram p {font-weight:600;margin:.5rem auto 2rem auto} body.cms-all-woven-labels #homepage-samples, body.cms-all-patches #homepage-samples, body.cms-all-hang-tags #homepage-samples, body.cms-all-pins #homepage-samples {margin-left:50%;margin-top:2rem;overflow:hidden;position:relative;translate:-50% 0;width:100vw} body.cms-all-woven-labels #homepage-samples img, body.cms-all-patches #homepage-samples img, body.cms-all-hang-tags #homepage-samples img, body.cms-all-pins #homepage-samples img {left:50%;object-fit:cover;position:absolute;top:50%;translate:-50% -50%;width:100%} body.cms-all-woven-labels #homepage-samples .wrapper, body.cms-all-patches #homepage-samples .wrapper, body.cms-all-hang-tags #homepage-samples .wrapper, body.cms-all-pins #homepage-samples .wrapper {background-color:rgba(255,255,255,.75);padding:2rem;position:relative;text-align:center} body.cms-all-woven-labels #homepage-samples .heading, body.cms-all-patches #homepage-samples .heading, body.cms-all-hang-tags #homepage-samples .heading, body.cms-all-pins #homepage-samples .heading {font:normal 1.5em/1 var(--default);margin-bottom:1rem} body.cms-all-woven-labels #homepage-seo h2, body.cms-all-patches #homepage-seo h2, body.cms-all-hang-tags #homepage-seo h2, body.cms-all-pins #homepage-seo h2 {text-align:center} body.cms-all-woven-labels #homepage-seo h3, body.cms-all-patches #homepage-seo h3, body.cms-all-hang-tags #homepage-seo h3, body.cms-all-pins #homepage-seo h3 {font-size:1.5rem} body.cms-all-woven-labels .seo-columns, body.cms-all-patches .seo-columns, body.cms-all-hang-tags .seo-columns, body.cms-all-pins .seo-columns {margin-bottom:2rem} body.cms-all-woven-labels .seo-columns img, body.cms-all-patches .seo-columns img, body.cms-all-hang-tags .seo-columns img, body.cms-all-pins .seo-columns img {display:block;width:100%} body.cms-all-woven-labels #homepage-footer, body.cms-all-patches #homepage-footer, body.cms-all-hang-tags #homepage-footer, body.cms-all-pins #homepage-footer {padding-top:2rem;text-align:center} body.cms-all-woven-labels #homepage-footer .wrapper, body.cms-all-patches #homepage-footer .wrapper, body.cms-all-hang-tags #homepage-footer .wrapper, body.cms-all-pins #homepage-footer .wrapper {margin:2rem auto;max-width:800px;width:calc(100% - 2rem)} body.cms-all-woven-labels #homepage-footer a:not(.button), body.cms-all-patches #homepage-footer a:not(.button), body.cms-all-hang-tags #homepage-footer a:not(.button), body.cms-all-pins #homepage-footer a:not(.button) {color:var(--pink)} body.cms-all-woven-labels #homepage-footer .wrapper p, body.cms-all-patches #homepage-footer .wrapper p, body.cms-all-hang-tags #homepage-footer .wrapper p, body.cms-all-pins #homepage-footer .wrapper p {font-size:1.25rem;font-weight:600} body.cms-all-woven-labels #homepage-footer .buttons, body.cms-all-patches #homepage-footer .buttons, body.cms-all-hang-tags #homepage-footer .buttons, body.cms-all-pins #homepage-footer .buttons {align-items:center;display:flex;gap:2rem;justify-content:center} body.cms-all-woven-labels .pink-checker-divider, body.cms-all-patches .pink-checker-divider, body.cms-all-hang-tags .pink-checker-divider, body.cms-all-pins .pink-checker-divider {background:transparent url("/pub/media/qwl2025/checker-border-orange.svg") center left repeat-x;background-size:contain;display:block;height:.5rem;margin:2rem 0;margin-left:50%;translate:-50% 0;width:100vw} body.cms-all-woven-labels .products-help a, body.cms-all-patches .products-help a, body.cms-all-hang-tags .products-help a, body.cms-all-pins .products-help a {color:var(--orange)} body.cms-all-woven-labels .cart-summary .checkout-methods-items .action.primary.checkout, body.cms-all-patches .cart-summary .checkout-methods-items .action.primary.checkout, body.cms-all-hang-tags .cart-summary .checkout-methods-items .action.primary.checkout, body.cms-all-pins .cart-summary .checkout-methods-items .action.primary.checkout, body.cms-all-woven-labels .cart-discount .actions-toolbar .action.primary, body.cms-all-patches .cart-discount .actions-toolbar .action.primary, body.cms-all-hang-tags .cart-discount .actions-toolbar .action.primary, body.cms-all-pins .cart-discount .actions-toolbar .action.primary {background:var(--orange);box-shadow:2px 2px 0 #000;color:#000;transition:all .15s linear 0s} body.cms-all-woven-labels .amcheckout-step-container .action.checkout.amasty:hover, body.cms-all-patches .amcheckout-step-container .action.checkout.amasty:hover, body.cms-all-hang-tags .amcheckout-step-container .action.checkout.amasty:hover, body.cms-all-pins .amcheckout-step-container .action.checkout.amasty:hover {background:var(--orange) !important;box-shadow:2px 2px 0 #000;color:#000;transition:all .15s linear 0s} body.cms-all-woven-labels button, body.cms-all-patches button, body.cms-all-hang-tags button, body.cms-all-pins button {background:var(--orange) !important;box-shadow:2px 2px 0 #000;color:#000;transition:all .15s linear 0s} body.cms-all-woven-labels button:hover, body.cms-all-patches button:hover, body.cms-all-hang-tags button:hover, body.cms-all-pins button:hover {box-shadow:4px 4px 0 #000;color:#fff;transform:translate(-2px,-2px)} body.cms-all-woven-labels .action.primary, body.cms-all-patches .action.primary, body.cms-all-hang-tags .action.primary, body.cms-all-pins .action.primary {background:var(--orange) !important;box-shadow:2px 2px 0 #000;color:#000;transition:all .15s linear 0s} body.cms-all-woven-labels .action.primary:hover, body.cms-all-patches .action.primary:hover, body.cms-all-hang-tags .action.primary:hover, body.cms-all-pins .action.primary:hover {box-shadow:4px 4px 0 #000;color:#fff;transform:translate(-2px,-2px)} body.cms-all-woven-labels .design-wrapper, body.cms-all-patches .design-wrapper, body.cms-all-hang-tags .design-wrapper, body.cms-all-pins .design-wrapper {display:flex;justify-content:space-between;margin-bottom:20px} body.cms-all-woven-labels .design-wrapper div, body.cms-all-patches .design-wrapper div, body.cms-all-hang-tags .design-wrapper div, body.cms-all-pins .design-wrapper div {width:15%} body.cms-all-woven-labels .sewing-service-wrapper, body.cms-all-patches .sewing-service-wrapper, body.cms-all-hang-tags .sewing-service-wrapper, body.cms-all-pins .sewing-service-wrapper {display:flex} body.cms-all-woven-labels .sewing-service-wrapper .sewing-services-price-column, body.cms-all-patches .sewing-service-wrapper .sewing-services-price-column, body.cms-all-hang-tags .sewing-service-wrapper .sewing-services-price-column, body.cms-all-pins .sewing-service-wrapper .sewing-services-price-column {width:100%;margin-left:3%} body.cms-all-woven-labels .sewing-service-wrapper .comparison-table, body.cms-all-patches .sewing-service-wrapper .comparison-table, body.cms-all-hang-tags .sewing-service-wrapper .comparison-table, body.cms-all-pins .sewing-service-wrapper .comparison-table {margin-bottom:30px;border:1px solid #552730;font-size:14px} body.cms-all-woven-labels .sewing-service-wrapper .comparison-table tr:nth-child(even), body.cms-all-patches .sewing-service-wrapper .comparison-table tr:nth-child(even), body.cms-all-hang-tags .sewing-service-wrapper .comparison-table tr:nth-child(even), body.cms-all-pins .sewing-service-wrapper .comparison-table tr:nth-child(even) {background-color:#ddd} body.cms-all-woven-labels .sewing-service-wrapper .comparison-table thead, body.cms-all-patches .sewing-service-wrapper .comparison-table thead, body.cms-all-hang-tags .sewing-service-wrapper .comparison-table thead, body.cms-all-pins .sewing-service-wrapper .comparison-table thead {font-size:20px;background-color:#552730;color:#fff} body.cms-all-woven-labels .sewing-service-wrapper .comparison-table tr td, body.cms-all-patches .sewing-service-wrapper .comparison-table tr td, body.cms-all-hang-tags .sewing-service-wrapper .comparison-table tr td, body.cms-all-pins .sewing-service-wrapper .comparison-table tr td, body.cms-all-woven-labels .sewing-service-wrapper .comparison-table tr th, body.cms-all-patches .sewing-service-wrapper .comparison-table tr th, body.cms-all-hang-tags .sewing-service-wrapper .comparison-table tr th, body.cms-all-pins .sewing-service-wrapper .comparison-table tr th {border:1px solid silver} body.cms-all-woven-labels .moved-add-to-links, body.cms-all-patches .moved-add-to-links, body.cms-all-hang-tags .moved-add-to-links, body.cms-all-pins .moved-add-to-links {display:none !important} body.cms-all-woven-labels .qwl-category-products, body.cms-all-patches .qwl-category-products, body.cms-all-hang-tags .qwl-category-products, body.cms-all-pins .qwl-category-products {display:grid;gap:1rem;margin:2rem auto} body.cms-all-woven-labels .qwl-category-products .heading, body.cms-all-patches .qwl-category-products .heading, body.cms-all-hang-tags .qwl-category-products .heading, body.cms-all-pins .qwl-category-products .heading {background-color:var(--brown);border-radius:1rem 1rem 0 0;color:#fff;display:table;padding:1rem 0;text-align:center;width:100%} body.cms-all-woven-labels .qwl-category-products a, body.cms-all-patches .qwl-category-products a, body.cms-all-hang-tags .qwl-category-products a, body.cms-all-pins .qwl-category-products a {display:block;position:relative} body.cms-all-woven-labels .qwl-category-products .heading.pink, body.cms-all-patches .qwl-category-products .heading.pink, body.cms-all-hang-tags .qwl-category-products .heading.pink, body.cms-all-pins .qwl-category-products .heading.pink {background-color:var(--pink)} body.cms-all-woven-labels .qwl-category-products .heading.gold, body.cms-all-patches .qwl-category-products .heading.gold, body.cms-all-hang-tags .qwl-category-products .heading.gold, body.cms-all-pins .qwl-category-products .heading.gold {background-color:var(--gold)} body.cms-all-woven-labels .qwl-category-products .heading.orange, body.cms-all-patches .qwl-category-products .heading.orange, body.cms-all-hang-tags .qwl-category-products .heading.orange, body.cms-all-pins .qwl-category-products .heading.orange {background-color:var(--orange)} body.cms-all-woven-labels .qwl-category-products .heading h2, body.cms-all-patches .qwl-category-products .heading h2, body.cms-all-hang-tags .qwl-category-products .heading h2, body.cms-all-pins .qwl-category-products .heading h2 {margin:0} body.cms-all-woven-labels .qwl-category-products .heading h3, body.cms-all-patches .qwl-category-products .heading h3, body.cms-all-hang-tags .qwl-category-products .heading h3, body.cms-all-pins .qwl-category-products .heading h3 {font-size:1.25rem;margin:0} body.cms-all-woven-labels .qwl-category-products .image, body.cms-all-patches .qwl-category-products .image, body.cms-all-hang-tags .qwl-category-products .image, body.cms-all-pins .qwl-category-products .image {border-radius:0 0 1rem 1rem;height:0;overflow:hidden;padding-top:15rem;position:relative;z-index:1} body.cms-all-woven-labels .qwl-category-products .image img, body.cms-all-patches .qwl-category-products .image img, body.cms-all-hang-tags .qwl-category-products .image img, body.cms-all-pins .qwl-category-products .image img {display:block;height:100%;left:50%;object-fit:cover;position:absolute;top:50%;translate:-50% -50%;width:100%;scale:1;transition:scale .5s linear 0s} body.cms-all-woven-labels .qwl-category-products a:hover .image img, body.cms-all-patches .qwl-category-products a:hover .image img, body.cms-all-hang-tags .qwl-category-products a:hover .image img, body.cms-all-pins .qwl-category-products a:hover .image img {scale:1.05} body.cms-all-woven-labels .qwl-category-products .blurb, body.cms-all-patches .qwl-category-products .blurb, body.cms-all-hang-tags .qwl-category-products .blurb, body.cms-all-pins .qwl-category-products .blurb {color:var(--brown);font-size:.85rem;margin-top:1rem;text-align:center} body.cms-all-woven-labels .qwl-category-products .tag, body.cms-all-patches .qwl-category-products .tag, body.cms-all-hang-tags .qwl-category-products .tag, body.cms-all-pins .qwl-category-products .tag {background-color:var(--pink);border-radius:0 .5rem .5rem 0;bottom:1rem;color:#fff;padding:.25rem 1rem;position:absolute;z-index:2} body.cms-all-woven-labels .qwl-category-products .heading.orange~div~.tag, body.cms-all-patches .qwl-category-products .heading.orange~div~.tag, body.cms-all-hang-tags .qwl-category-products .heading.orange~div~.tag, body.cms-all-pins .qwl-category-products .heading.orange~div~.tag {background-color:var(--orange)} body.cms-all-woven-labels .marquee-container, body.cms-all-patches .marquee-container, body.cms-all-hang-tags .marquee-container, body.cms-all-pins .marquee-container {background-color:var(--flesh);align-items:center;display:flex;width:100vw;left:50%;position:relative;transform:translate(-50%,0);overflow:hidden;height:2.5rem} body.cms-all-woven-labels .marquee-content, body.cms-all-patches .marquee-content, body.cms-all-hang-tags .marquee-content, body.cms-all-pins .marquee-content {white-space:nowrap;position:absolute;left:0;will-change:transform;display:flex} body.cms-all-woven-labels .marquee-content span, body.cms-all-patches .marquee-content span, body.cms-all-hang-tags .marquee-content span, body.cms-all-pins .marquee-content span {display:inline-block;font-weight:500;font-size:1.25rem;color:var(--brown);line-height:2.5rem;padding:0 .25rem} body.cms-all-woven-labels .marquee-content span.em, body.cms-all-patches .marquee-content span.em, body.cms-all-hang-tags .marquee-content span.em, body.cms-all-pins .marquee-content span.em {color:#fff;font-size:1.5rem} body.cms-all-woven-labels .marquee-content span.sep, body.cms-all-patches .marquee-content span.sep, body.cms-all-hang-tags .marquee-content span.sep, body.cms-all-pins .marquee-content span.sep {padding:0 2rem} body.cms-all-woven-labels .expert-tips, body.cms-all-patches .expert-tips, body.cms-all-hang-tags .expert-tips, body.cms-all-pins .expert-tips {background-color:var(--beige);margin-top:4rem;padding:1rem 0} body.cms-all-woven-labels .expert-tips h2.expert-tips-title, body.cms-all-patches .expert-tips h2.expert-tips-title, body.cms-all-hang-tags .expert-tips h2.expert-tips-title, body.cms-all-pins .expert-tips h2.expert-tips-title {font-weight:600;text-align:center} body.cms-all-woven-labels ul.expert-tips-grid, body.cms-all-patches ul.expert-tips-grid, body.cms-all-hang-tags ul.expert-tips-grid, body.cms-all-pins ul.expert-tips-grid {display:flex;flex-wrap:wrap;gap:2rem;list-style:none;justify-content:center;margin:0;padding:0} body.cms-all-woven-labels ul.expert-tips-grid li a, body.cms-all-patches ul.expert-tips-grid li a, body.cms-all-hang-tags ul.expert-tips-grid li a, body.cms-all-pins ul.expert-tips-grid li a {border-radius:2rem;display:block;height:0;overflow:hidden;padding-top:100%;position:relative} body.cms-all-woven-labels ul.expert-tips-grid li, body.cms-all-patches ul.expert-tips-grid li, body.cms-all-hang-tags ul.expert-tips-grid li, body.cms-all-pins ul.expert-tips-grid li {flex-basis:400px} body.cms-all-woven-labels img.tip-card-image, body.cms-all-patches img.tip-card-image, body.cms-all-hang-tags img.tip-card-image, body.cms-all-pins img.tip-card-image {height:100%;left:50%;object-fit:cover;position:absolute;scale:1;top:50%;transition:scale .5s linear 0s;translate:-50% -50%} body.cms-all-woven-labels .expert-tips li:hover img.tip-card-image, body.cms-all-patches .expert-tips li:hover img.tip-card-image, body.cms-all-hang-tags .expert-tips li:hover img.tip-card-image, body.cms-all-pins .expert-tips li:hover img.tip-card-image {scale:1.05} body.cms-all-woven-labels .qwl .page-wrapper>.breadcrumbs, body.cms-all-patches .qwl .page-wrapper>.breadcrumbs, body.cms-all-hang-tags .qwl .page-wrapper>.breadcrumbs, body.cms-all-pins .qwl .page-wrapper>.breadcrumbs {display:none} body.cms-all-woven-labels .qwl-split-section, body.cms-all-patches .qwl-split-section, body.cms-all-hang-tags .qwl-split-section, body.cms-all-pins .qwl-split-section {background-color:var(--light-pink);position:relative} body.cms-all-woven-labels .qwl-split-section:before, body.cms-all-patches .qwl-split-section:before, body.cms-all-hang-tags .qwl-split-section:before, body.cms-all-pins .qwl-split-section:before, body.cms-all-woven-labels .qwl-split-section:after, body.cms-all-patches .qwl-split-section:after, body.cms-all-hang-tags .qwl-split-section:after, body.cms-all-pins .qwl-split-section:after {background:transparent url("/pub/media/qwl2025/checker-border-flesh.svg") center left repeat-x;background-size:contain;top:0;content:" ";display:block;height:.5rem;position:absolute;width:100%} body.cms-all-woven-labels .qwl-split-section:after, body.cms-all-patches .qwl-split-section:after, body.cms-all-hang-tags .qwl-split-section:after, body.cms-all-pins .qwl-split-section:after {bottom:0;top:auto} body.cms-all-woven-labels .qwl-split-section .columns, body.cms-all-patches .qwl-split-section .columns, body.cms-all-hang-tags .qwl-split-section .columns, body.cms-all-pins .qwl-split-section .columns {box-sizing:border-box;display:grid;gap:4rem;grid-template-columns:1fr;padding:2rem 0;position:relative} body.cms-all-woven-labels .qwl-other-products, body.cms-all-patches .qwl-other-products, body.cms-all-hang-tags .qwl-other-products, body.cms-all-pins .qwl-other-products {display:grid;gap:1rem;grid-template-columns:1fr} body.cms-all-woven-labels .qwl-other-products>a, body.cms-all-patches .qwl-other-products>a, body.cms-all-hang-tags .qwl-other-products>a, body.cms-all-pins .qwl-other-products>a {align-items:center;background-color:rgba(255,255,255,.35);border-radius:1rem;box-sizing:border-box;display:grid;grid-template-columns:1fr 1fr;max-width:calc(100vw - 2rem);overflow:hidden} body.cms-all-woven-labels .qwl-other-products .content, body.cms-all-patches .qwl-other-products .content, body.cms-all-hang-tags .qwl-other-products .content, body.cms-all-pins .qwl-other-products .content {padding:1rem} body.cms-all-woven-labels .qwl-other-products .label, body.cms-all-patches .qwl-other-products .label, body.cms-all-hang-tags .qwl-other-products .label, body.cms-all-pins .qwl-other-products .label {color:var(--brown);font-size:1rem;font-weight:600;margin-bottom:.5rem} body.cms-all-woven-labels .qwl-other-products .image, body.cms-all-patches .qwl-other-products .image, body.cms-all-hang-tags .qwl-other-products .image, body.cms-all-pins .qwl-other-products .image {height:100%;position:relative} body.cms-all-woven-labels .qwl-other-products .image img, body.cms-all-patches .qwl-other-products .image img, body.cms-all-hang-tags .qwl-other-products .image img, body.cms-all-pins .qwl-other-products .image img {display:block;height:100%;left:50%;object-fit:cover;position:absolute;scale:1;top:50%;translate:-50% -50%;transition:scale .5s ease 0s;width:100%} body.cms-all-woven-labels .qwl-other-products>a:hover .image img, body.cms-all-patches .qwl-other-products>a:hover .image img, body.cms-all-hang-tags .qwl-other-products>a:hover .image img, body.cms-all-pins .qwl-other-products>a:hover .image img {scale:1.05} body.cms-all-woven-labels .qwl-category-reviews, body.cms-all-patches .qwl-category-reviews, body.cms-all-hang-tags .qwl-category-reviews, body.cms-all-pins .qwl-category-reviews {text-align:center} body.cms-all-woven-labels .qwl-category-reviews .buttons, body.cms-all-patches .qwl-category-reviews .buttons, body.cms-all-hang-tags .qwl-category-reviews .buttons, body.cms-all-pins .qwl-category-reviews .buttons {align-items:end;display:grid;gap:2rem;grid-template-columns:1fr;justify-self:center;margin-top:1rem;max-width:100%} body.cms-all-woven-labels .qwl-category-reviews .buttons img, body.cms-all-patches .qwl-category-reviews .buttons img, body.cms-all-hang-tags .qwl-category-reviews .buttons img, body.cms-all-pins .qwl-category-reviews .buttons img {display:block;max-width:200px} body.cms-all-woven-labels .best-sellers, body.cms-all-patches .best-sellers, body.cms-all-hang-tags .best-sellers, body.cms-all-pins .best-sellers {container-type:inline-size} body.cms-all-woven-labels .qwl .best-sellers h2, body.cms-all-patches .qwl .best-sellers h2, body.cms-all-hang-tags .qwl .best-sellers h2, body.cms-all-pins .qwl .best-sellers h2 {font-weight:700;text-align:center} body.cms-all-woven-labels .best-sellers .label-grid, body.cms-all-patches .best-sellers .label-grid, body.cms-all-hang-tags .best-sellers .label-grid, body.cms-all-pins .best-sellers .label-grid {box-sizing:border-box;display:grid;gap:1rem;grid-template-columns:1fr} body.cms-all-woven-labels .best-sellers .label-grid .label-card, body.cms-all-patches .best-sellers .label-grid .label-card, body.cms-all-hang-tags .best-sellers .label-grid .label-card, body.cms-all-pins .best-sellers .label-grid .label-card {border-radius:1rem;display:block;height:0;overflow:hidden;padding-top:110%;position:relative} body.cms-all-woven-labels .best-sellers .label-grid .label-card a, body.cms-all-patches .best-sellers .label-grid .label-card a, body.cms-all-hang-tags .best-sellers .label-grid .label-card a, body.cms-all-pins .best-sellers .label-grid .label-card a {color:#fff} body.cms-all-woven-labels .best-sellers .label-grid .label-card img.label-image, body.cms-all-patches .best-sellers .label-grid .label-card img.label-image, body.cms-all-hang-tags .best-sellers .label-grid .label-card img.label-image, body.cms-all-pins .best-sellers .label-grid .label-card img.label-image {display:block;height:100%;left:50%;object-fit:cover;object-position:top center;position:absolute;scale:1;top:60%;translate:-50% -50%;transition:scale .5s ease 0s;width:100%} body.cms-all-woven-labels .best-sellers .label-grid .label-card:hover img.label-image, body.cms-all-patches .best-sellers .label-grid .label-card:hover img.label-image, body.cms-all-hang-tags .best-sellers .label-grid .label-card:hover img.label-image, body.cms-all-pins .best-sellers .label-grid .label-card:hover img.label-image {scale:1.1} body.cms-all-woven-labels .best-sellers .label-grid .label-card .label-card-content, body.cms-all-patches .best-sellers .label-grid .label-card .label-card-content, body.cms-all-hang-tags .best-sellers .label-grid .label-card .label-card-content, body.cms-all-pins .best-sellers .label-grid .label-card .label-card-content {height:100%;position:absolute;top:0;width:100%} body.cms-all-woven-labels .best-sellers .label-grid .label-card .heading, body.cms-all-patches .best-sellers .label-grid .label-card .heading, body.cms-all-hang-tags .best-sellers .label-grid .label-card .heading, body.cms-all-pins .best-sellers .label-grid .label-card .heading {background-color:var(--orange);box-sizing:border-box;color:#fff;padding:1rem;position:absolute;text-align:center;top:0;width:100%} body.cms-all-woven-labels .best-sellers .label-grid .label-card .heading h3, body.cms-all-patches .best-sellers .label-grid .label-card .heading h3, body.cms-all-hang-tags .best-sellers .label-grid .label-card .heading h3, body.cms-all-pins .best-sellers .label-grid .label-card .heading h3 {font:600 1.5rem/1 var(--default);margin:0 0 .25rem} body.cms-all-woven-labels .best-sellers .label-grid .label-card .subheading, body.cms-all-patches .best-sellers .label-grid .label-card .subheading, body.cms-all-hang-tags .best-sellers .label-grid .label-card .subheading, body.cms-all-pins .best-sellers .label-grid .label-card .subheading {align-items:center;display:flex;gap:.5rem;font:600 1rem/1 var(--default);justify-content:center} body.cms-all-woven-labels .best-sellers .label-grid .label-card .subheading img, body.cms-all-patches .best-sellers .label-grid .label-card .subheading img, body.cms-all-hang-tags .best-sellers .label-grid .label-card .subheading img, body.cms-all-pins .best-sellers .label-grid .label-card .subheading img {display:block;max-height:1.5rem;width:auto} body.cms-all-woven-labels .best-sellers .label-grid .label-card .tag, body.cms-all-patches .best-sellers .label-grid .label-card .tag, body.cms-all-hang-tags .best-sellers .label-grid .label-card .tag, body.cms-all-pins .best-sellers .label-grid .label-card .tag {background-color:var(--orange);border-radius:0 .5rem .5rem 0;bottom:1rem;color:#fff;font:600 1/1 var(--default);left:0;padding:.25rem 1rem;position:absolute} body.cms-all-woven-labels .best-sellers .label-grid .label-card:nth-of-type(2) .heading, body.cms-all-patches .best-sellers .label-grid .label-card:nth-of-type(2) .heading, body.cms-all-hang-tags .best-sellers .label-grid .label-card:nth-of-type(2) .heading, body.cms-all-pins .best-sellers .label-grid .label-card:nth-of-type(2) .heading, body.cms-all-woven-labels .best-sellers .label-grid .label-card:nth-of-type(2) .tag, body.cms-all-patches .best-sellers .label-grid .label-card:nth-of-type(2) .tag, body.cms-all-hang-tags .best-sellers .label-grid .label-card:nth-of-type(2) .tag, body.cms-all-pins .best-sellers .label-grid .label-card:nth-of-type(2) .tag {background-color:var(--pink)} body.cms-all-woven-labels .best-sellers .label-grid .label-card:nth-of-type(3) .heading, body.cms-all-patches .best-sellers .label-grid .label-card:nth-of-type(3) .heading, body.cms-all-hang-tags .best-sellers .label-grid .label-card:nth-of-type(3) .heading, body.cms-all-pins .best-sellers .label-grid .label-card:nth-of-type(3) .heading, body.cms-all-woven-labels .best-sellers .label-grid .label-card:nth-of-type(3) .tag, body.cms-all-patches .best-sellers .label-grid .label-card:nth-of-type(3) .tag, body.cms-all-hang-tags .best-sellers .label-grid .label-card:nth-of-type(3) .tag, body.cms-all-pins .best-sellers .label-grid .label-card:nth-of-type(3) .tag {background-color:var(--gold)} body.cms-all-woven-labels .featured-promo, body.cms-all-patches .featured-promo, body.cms-all-hang-tags .featured-promo, body.cms-all-pins .featured-promo {display:grid;gap:2rem;grid-template-columns:1fr;margin:2rem auto;position:relative} body.cms-all-woven-labels .featured-promo:before, body.cms-all-patches .featured-promo:before, body.cms-all-hang-tags .featured-promo:before, body.cms-all-pins .featured-promo:before {background:var(--orange) url(/pub/media/qwl2025/categories/labels/202508/woven-cotton-feature-bg.jpg) center right repeat-x;background-size:cover;content:none;height:0;right:100%;padding-top:75%;position:absolute;top:0;width:calc(100vw/2)} body.cms-all-woven-labels .featured-promo.cream, body.cms-all-patches .featured-promo.cream, body.cms-all-hang-tags .featured-promo.cream, body.cms-all-pins .featured-promo.cream {padding:2rem 0} body.cms-all-woven-labels .featured-promo.cream:before, body.cms-all-patches .featured-promo.cream:before, body.cms-all-hang-tags .featured-promo.cream:before, body.cms-all-pins .featured-promo.cream:before {background:var(--cream);content:" ";height:100%;left:50%;position:absolute;top:0;translate:-50% 0;width:100vw;z-index:-1} body.cms-all-woven-labels .featured-promo .promo-image-col, body.cms-all-patches .featured-promo .promo-image-col, body.cms-all-hang-tags .featured-promo .promo-image-col, body.cms-all-pins .featured-promo .promo-image-col {background:var(--orange) url(/pub/media/qwl2025/categories/labels/202508/woven-cotton-feature-bg.jpg) center right repeat-x;background-size:cover;border-radius:1rem;box-sizing:border-box;height:0;overflow:hidden;padding-top:75%;position:relative;width:100%} body.cms-all-woven-labels .featured-promo .promo-image-col>img, body.cms-all-patches .featured-promo .promo-image-col>img, body.cms-all-hang-tags .featured-promo .promo-image-col>img, body.cms-all-pins .featured-promo .promo-image-col>img {display:block;height:100%;left:0;max-width:100%;object-fit:cover;position:absolute;top:0;width:100%} body.cms-all-woven-labels .featured-promo .promo-title, body.cms-all-patches .featured-promo .promo-title, body.cms-all-hang-tags .featured-promo .promo-title, body.cms-all-pins .featured-promo .promo-title {align-items:center;box-sizing:border-box;color:var(--brown);display:flex;gap:1rem;left:0;justify-content:center;padding:1rem;position:absolute;text-transform:uppercase;top:0;width:100%} body.cms-all-woven-labels .featured-promo .promo-title h3, body.cms-all-patches .featured-promo .promo-title h3, body.cms-all-hang-tags .featured-promo .promo-title h3, body.cms-all-pins .featured-promo .promo-title h3 {margin:0} body.cms-all-woven-labels .featured-promo .promo-title img, body.cms-all-patches .featured-promo .promo-title img, body.cms-all-hang-tags .featured-promo .promo-title img, body.cms-all-pins .featured-promo .promo-title img {display:block;max-height:2rem;width:auto} body.cms-all-woven-labels .featured-promo .promo-text-col, body.cms-all-patches .featured-promo .promo-text-col, body.cms-all-hang-tags .featured-promo .promo-text-col, body.cms-all-pins .featured-promo .promo-text-col {text-align:left} body.cms-all-woven-labels .featured-promo .promo-text-col h4, body.cms-all-patches .featured-promo .promo-text-col h4, body.cms-all-hang-tags .featured-promo .promo-text-col h4, body.cms-all-pins .featured-promo .promo-text-col h4 {font-weight:600;margin-bottom:1rem;text-align:center} body.cms-all-woven-labels .featured-promo .promo-text-col p, body.cms-all-patches .featured-promo .promo-text-col p, body.cms-all-hang-tags .featured-promo .promo-text-col p, body.cms-all-pins .featured-promo .promo-text-col p {margin-bottom:1rem} body.cms-all-woven-labels .featured-promo .promo-text-col ul, body.cms-all-patches .featured-promo .promo-text-col ul, body.cms-all-hang-tags .featured-promo .promo-text-col ul, body.cms-all-pins .featured-promo .promo-text-col ul {list-style:disc;font-weight:600;margin:0 0 1rem 1.5rem;padding:0} body.cms-all-woven-labels .featured-promo .promo-text-col ul li, body.cms-all-patches .featured-promo .promo-text-col ul li, body.cms-all-hang-tags .featured-promo .promo-text-col ul li, body.cms-all-pins .featured-promo .promo-text-col ul li {margin-bottom:.25rem} body.cms-all-woven-labels .featured-promo .promo-text-col a.button, body.cms-all-patches .featured-promo .promo-text-col a.button, body.cms-all-hang-tags .featured-promo .promo-text-col a.button, body.cms-all-pins .featured-promo .promo-text-col a.button {border-radius:.25rem} body.cms-all-woven-labels .button-container a:visited, body.cms-all-patches .button-container a:visited, body.cms-all-hang-tags .button-container a:visited, body.cms-all-pins .button-container a:visited {color:#fff !important} body.cms-all-woven-labels .featured-products-header h2, body.cms-all-patches .featured-products-header h2, body.cms-all-hang-tags .featured-products-header h2, body.cms-all-pins .featured-products-header h2 {font-size:3rem !important} body.cms-all-woven-labels .quote-form-column h2, body.cms-all-patches .quote-form-column h2, body.cms-all-hang-tags .quote-form-column h2, body.cms-all-pins .quote-form-column h2 {font-size:3rem !important} body.cms-all-woven-labels .homepage-custom-branding h2, body.cms-all-patches .homepage-custom-branding h2, body.cms-all-hang-tags .homepage-custom-branding h2, body.cms-all-pins .homepage-custom-branding h2 {font-size:3rem !important} body.cms-all-woven-labels .quote-form-column li, body.cms-all-patches .quote-form-column li, body.cms-all-hang-tags .quote-form-column li, body.cms-all-pins .quote-form-column li {font-size:larger} body.cms-all-woven-labels .custom-form label.control-label.col-sm-2, body.cms-all-patches .custom-form label.control-label.col-sm-2, body.cms-all-hang-tags .custom-form label.control-label.col-sm-2, body.cms-all-pins .custom-form label.control-label.col-sm-2 {font-size:larger} body.cms-all-woven-labels .qwl-category-products .heading h3, body.cms-all-patches .qwl-category-products .heading h3, body.cms-all-hang-tags .qwl-category-products .heading h3, body.cms-all-pins .qwl-category-products .heading h3 {font-size:1.5rem;margin:0} body.cms-all-woven-labels .best-sellers, body.cms-all-patches .best-sellers, body.cms-all-hang-tags .best-sellers, body.cms-all-pins .best-sellers, body.cms-all-woven-labels .featured-promo, body.cms-all-patches .featured-promo, body.cms-all-hang-tags .featured-promo, body.cms-all-pins .featured-promo, body.cms-all-woven-labels .faq-section, body.cms-all-patches .faq-section, body.cms-all-hang-tags .faq-section, body.cms-all-pins .faq-section, body.cms-all-woven-labels .expert-tips, body.cms-all-patches .expert-tips, body.cms-all-hang-tags .expert-tips, body.cms-all-pins .expert-tips, body.cms-all-woven-labels .expert-tips @media (max-width: 768px), body.cms-all-patches .expert-tips @media (max-width: 768px), body.cms-all-hang-tags .expert-tips @media (max-width: 768px), body.cms-all-pins .expert-tips @media (max-width: 768px) { .qwl-hero.category-hero { height: 55vh !important; min-height: 350px !important; max-height: 500px !important; } .best-sellers, .featured-promo, .faq-section, .expert-tips { padding-left: 16px !important; padding-right: 16px !important; } } body.cms-all-woven-labels .best-sellers, body.cms-all-patches .best-sellers, body.cms-all-hang-tags .best-sellers, body.cms-all-pins .best-sellers, body.cms-all-woven-labels .featured-promo, body.cms-all-patches .featured-promo, body.cms-all-hang-tags .featured-promo, body.cms-all-pins .featured-promo, body.cms-all-woven-labels .qwl-category-products, body.cms-all-patches .qwl-category-products, body.cms-all-hang-tags .qwl-category-products, body.cms-all-pins .qwl-category-products, body.cms-all-woven-labels #homepage-sewing-services, body.cms-all-patches #homepage-sewing-services, body.cms-all-hang-tags #homepage-sewing-services, body.cms-all-pins #homepage-sewing-services, body.cms-all-woven-labels #homepage-instagram, body.cms-all-patches #homepage-instagram, body.cms-all-hang-tags #homepage-instagram, body.cms-all-pins #homepage-instagram, body.cms-all-woven-labels #homepage-footer, body.cms-all-patches #homepage-footer, body.cms-all-hang-tags #homepage-footer, body.cms-all-pins #homepage-footer, body.cms-all-woven-labels .column.main > p, body.cms-all-patches .column.main > p, body.cms-all-hang-tags .column.main > p, body.cms-all-pins .column.main > p, body.cms-all-woven-labels .column.main > h2, body.cms-all-patches .column.main > h2, body.cms-all-hang-tags .column.main > h2, body.cms-all-pins .column.main > h2 { max-width: 1300px !important; width: calc(100% - 2rem) !important; margin-left: auto !important; margin-right: auto !important; } body.cms-all-woven-labels .faq-section, body.cms-all-patches .faq-section, body.cms-all-hang-tags .faq-section, body.cms-all-pins .faq-section { max-width: 1000px !important; width: calc(100% - 2rem) !important; margin-left: auto !important; margin-right: auto !important; } body.cms-all-woven-labels .expert-tips.browser-width, body.cms-all-patches .expert-tips.browser-width, body.cms-all-hang-tags .expert-tips.browser-width, body.cms-all-pins .expert-tips.browser-width { background-color: rgb(237, 230, 214) !important; } body.cms-all-woven-labels div[class*="elfsight"], body.cms-all-patches div[class*="elfsight"], body.cms-all-hang-tags div[class*="elfsight"], body.cms-all-pins div[class*="elfsight"] { max-width: 1300px !important; margin-left: auto !important; margin-right: auto !important; } body.cms-all-woven-labels .featured-promo .promo-image-col > img, body.cms-all-patches .featured-promo .promo-image-col > img, body.cms-all-hang-tags .featured-promo .promo-image-col > img, body.cms-all-pins .featured-promo .promo-image-col > img { object-fit: cover !important; } body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content h1, body.cms-all-patches .qwl-hero.homepage-hero .hero-content h1, body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content h1, body.cms-all-pins .qwl-hero.homepage-hero .hero-content h1 { color: #3a1f18 !important; text-shadow: 0 1px 4px rgba(255,255,255,0.3), 0 0 12px rgba(255,255,255,0.15) !important; } body.cms-all-woven-labels .qwl-category-products a, body.cms-all-patches .qwl-category-products a, body.cms-all-hang-tags .qwl-category-products a, body.cms-all-pins .qwl-category-products a { box-shadow: 0 4px 16px rgba(74,45,42,0.15); transition: transform 0.2s ease, box-shadow 0.2s ease; border-radius: 1rem; overflow: hidden; } body.cms-all-woven-labels .qwl-category-products a:hover, body.cms-all-patches .qwl-category-products a:hover, body.cms-all-hang-tags .qwl-category-products a:hover, body.cms-all-pins .qwl-category-products a:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(74,45,42,0.22); } body.cms-all-woven-labels .columns > h2, body.cms-all-patches .columns > h2, body.cms-all-hang-tags .columns > h2, body.cms-all-pins .columns > h2 { max-width: 1300px; margin-left: auto; margin-right: auto; } body.cms-all-woven-labels .qwl-category-products a, body.cms-all-patches .qwl-category-products a, body.cms-all-hang-tags .qwl-category-products a, body.cms-all-pins .qwl-category-products a { display: flex; flex-direction: column; } body.cms-all-woven-labels .qwl, body.cms-all-patches .qwl, body.cms-all-hang-tags .qwl, body.cms-all-pins .qwl { background: #faf7f2 !important; background-color: #faf7f2 !important; } body.cms-all-woven-labels .qwl #maincontent, body.cms-all-patches .qwl #maincontent, body.cms-all-hang-tags .qwl #maincontent, body.cms-all-pins .qwl #maincontent, body.cms-all-woven-labels .qwl .column.main, body.cms-all-patches .qwl .column.main, body.cms-all-hang-tags .qwl .column.main, body.cms-all-pins .qwl .column.main { background-color: #faf7f2; } body.cms-all-woven-labels .best-sellers, body.cms-all-patches .best-sellers, body.cms-all-hang-tags .best-sellers, body.cms-all-pins .best-sellers { background-color: #faf7f2; } body.cms-all-woven-labels .qwl-mobile-menu, body.cms-all-patches .qwl-mobile-menu, body.cms-all-hang-tags .qwl-mobile-menu, body.cms-all-pins .qwl-mobile-menu, body.cms-all-woven-labels .qwl-mm-header, body.cms-all-patches .qwl-mm-header, body.cms-all-hang-tags .qwl-mm-header, body.cms-all-pins .qwl-mm-header { background-color: #faf7f2 !important; } body.cms-all-woven-labels .eapps-instagram-feed-posts-item-template-tile, body.cms-all-patches .eapps-instagram-feed-posts-item-template-tile, body.cms-all-hang-tags .eapps-instagram-feed-posts-item-template-tile, body.cms-all-pins .eapps-instagram-feed-posts-item-template-tile { background-color: #faf7f2 !important; } body.cms-all-woven-labels footer, body.cms-all-patches footer, body.cms-all-hang-tags footer, body.cms-all-pins footer { border-top: 3px solid #4a2d2a; } body.cms-all-woven-labels .value-prop, body.cms-all-patches .value-prop, body.cms-all-hang-tags .value-prop, body.cms-all-pins .value-prop { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; min-width: 100px; } body.cms-all-woven-labels .value-prop i, body.cms-all-patches .value-prop i, body.cms-all-hang-tags .value-prop i, body.cms-all-pins .value-prop i { font-size: 2.4rem; color: #EF5732; } body.cms-all-woven-labels .value-prop span, body.cms-all-patches .value-prop span, body.cms-all-hang-tags .value-prop span, body.cms-all-pins .value-prop span { font-size: 1.1rem; font-weight: 700; color: #4a2d2a; letter-spacing: 0.02em; text-align: center; } body.cms-all-woven-labels .faq-section, body.cms-all-patches .faq-section, body.cms-all-hang-tags .faq-section, body.cms-all-pins .faq-section { margin: 40px auto; padding: 20px; font-family: Arial, sans-serif; background: transparent; width: 100%; max-width: none; } body.cms-all-woven-labels .faq-section h2, body.cms-all-patches .faq-section h2, body.cms-all-hang-tags .faq-section h2, body.cms-all-pins .faq-section h2 { text-align: center; margin-bottom: 30px; font-size: 2em; color: #333; } body.cms-all-woven-labels .faq-item, body.cms-all-patches .faq-item, body.cms-all-hang-tags .faq-item, body.cms-all-pins .faq-item { margin-bottom: 20px; border-bottom: 1px solid #ddd; padding-bottom: 15px; background: transparent; } body.cms-all-woven-labels .faq-question, body.cms-all-patches .faq-question, body.cms-all-hang-tags .faq-question, body.cms-all-pins .faq-question { font-size: 1.2em; color: #222; margin: 0 0 10px; } body.cms-all-woven-labels .faq-answer, body.cms-all-patches .faq-answer, body.cms-all-hang-tags .faq-answer, body.cms-all-pins .faq-answer { display: flex; align-items: flex-start; color: #555; } body.cms-all-woven-labels .faq-answer .arrow, body.cms-all-patches .faq-answer .arrow, body.cms-all-hang-tags .faq-answer .arrow, body.cms-all-pins .faq-answer .arrow { margin-right: 8px; color: #0073e6; font-weight: bold; } body.cms-all-woven-labels .faq-answer p, body.cms-all-patches .faq-answer p, body.cms-all-hang-tags .faq-answer p, body.cms-all-pins .faq-answer p { margin: 0; line-height: 1.5; } body.cms-all-woven-labels .reviews-faq-grid, body.cms-all-patches .reviews-faq-grid, body.cms-all-hang-tags .reviews-faq-grid, body.cms-all-pins .reviews-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } body.cms-all-woven-labels .review-stars, body.cms-all-patches .review-stars, body.cms-all-hang-tags .review-stars, body.cms-all-pins .review-stars { display: flex; gap: 3px; margin-bottom: 8px; } body.cms-all-woven-labels .review-stars i, body.cms-all-patches .review-stars i, body.cms-all-hang-tags .review-stars i, body.cms-all-pins .review-stars i { color: #ECAA00; font-size: 13px; } body.cms-all-woven-labels .review-text, body.cms-all-patches .review-text, body.cms-all-hang-tags .review-text, body.cms-all-pins .review-text { font-size: 15px; line-height: 1.6; color: #444; margin: 0 0 10px; } body.cms-all-woven-labels .review-author, body.cms-all-patches .review-author, body.cms-all-hang-tags .review-author, body.cms-all-pins .review-author { font-size: 13px; font-weight: 700; color: #4a2d2a; } body.cms-all-woven-labels .col-header, body.cms-all-patches .col-header, body.cms-all-hang-tags .col-header, body.cms-all-pins .col-header { font-size: 1.8rem; font-weight: 700; color: #4a2d2a; margin: 0 0 1.5rem; } body.cms-all-woven-labels .reviews-link, body.cms-all-patches .reviews-link, body.cms-all-hang-tags .reviews-link, body.cms-all-pins .reviews-link, body.cms-all-woven-labels .faq-link, body.cms-all-patches .faq-link, body.cms-all-hang-tags .faq-link, body.cms-all-pins .faq-link { font-size: 14px; font-weight: 700; color: #EF5732; text-decoration: none; margin-top: 0.5rem; display: inline-block; } body.cms-all-woven-labels .faq-card, body.cms-all-patches .faq-card, body.cms-all-hang-tags .faq-card, body.cms-all-pins .faq-card { background: linear-gradient(135deg, #4a2d2a, #6b4440) !important; box-shadow: 0 2px 8px rgba(74,45,42,0.25) !important; } body.cms-all-woven-labels .faq-card button, body.cms-all-patches .faq-card button, body.cms-all-hang-tags .faq-card button, body.cms-all-pins .faq-card button { background: none !important; box-shadow: none !important; color: #fff !important; transform: none !important; } body.cms-all-woven-labels .blog-tips-section, body.cms-all-patches .blog-tips-section, body.cms-all-hang-tags .blog-tips-section, body.cms-all-pins .blog-tips-section { padding: 2.5rem 0; background: linear-gradient(180deg, #faf7f2 0%, #faf7f2 100%); } body.cms-all-woven-labels .blog-tips-section h2, body.cms-all-patches .blog-tips-section h2, body.cms-all-hang-tags .blog-tips-section h2, body.cms-all-pins .blog-tips-section h2 { text-align: center; font-size: 1.6rem; font-weight: 600; color: #333; margin: 0 0 1.5rem; letter-spacing: -0.01em; } body.cms-all-woven-labels .blog-tips-section h2 span, body.cms-all-patches .blog-tips-section h2 span, body.cms-all-hang-tags .blog-tips-section h2 span, body.cms-all-pins .blog-tips-section h2 span { color: #EF5732; } body.cms-all-woven-labels .blog-tips-grid, body.cms-all-patches .blog-tips-grid, body.cms-all-hang-tags .blog-tips-grid, body.cms-all-pins .blog-tips-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; list-style: none; margin: 0; padding: 0; } body.cms-all-woven-labels .blog-tip-card:hover, body.cms-all-patches .blog-tip-card:hover, body.cms-all-hang-tags .blog-tip-card:hover, body.cms-all-pins .blog-tip-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(74,45,42,0.22); } body.cms-all-woven-labels .blog-tip-card a, body.cms-all-patches .blog-tip-card a, body.cms-all-hang-tags .blog-tip-card a, body.cms-all-pins .blog-tip-card a { display: block; text-decoration: none; color: inherit; } body.cms-all-woven-labels .blog-tip-card .card-img, body.cms-all-patches .blog-tip-card .card-img, body.cms-all-hang-tags .blog-tip-card .card-img, body.cms-all-pins .blog-tip-card .card-img { width: 100%; height: 0; padding-top: 65%; position: relative; overflow: hidden; } body.cms-all-woven-labels .blog-tip-card .card-img img, body.cms-all-patches .blog-tip-card .card-img img, body.cms-all-hang-tags .blog-tip-card .card-img img, body.cms-all-pins .blog-tip-card .card-img img { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 100%; height: 100%; object-fit: cover; transition: scale 0.3s ease; } body.cms-all-woven-labels .blog-tip-card:hover .card-img img, body.cms-all-patches .blog-tip-card:hover .card-img img, body.cms-all-hang-tags .blog-tip-card:hover .card-img img, body.cms-all-pins .blog-tip-card:hover .card-img img { scale: 1.05; } body.cms-all-woven-labels .blog-tip-card .card-tag, body.cms-all-patches .blog-tip-card .card-tag, body.cms-all-hang-tags .blog-tip-card .card-tag, body.cms-all-pins .blog-tip-card .card-tag { display: inline-block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #EF5732; margin-bottom: 0.4rem; } body.cms-all-woven-labels .blog-tip-card h3, body.cms-all-patches .blog-tip-card h3, body.cms-all-hang-tags .blog-tip-card h3, body.cms-all-pins .blog-tip-card h3 { font-size: 0.85rem; font-weight: 600; line-height: 1.35; color: #333; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } body.cms-all-woven-labels .blog-tip-card .read-more, body.cms-all-patches .blog-tip-card .read-more, body.cms-all-hang-tags .blog-tip-card .read-more, body.cms-all-pins .blog-tip-card .read-more { font-size: 0.7rem; font-weight: 700; color: #EF5732; margin-top: 0.5rem; display: inline-block; text-transform: uppercase; letter-spacing: 0.05em; } body.cms-all-woven-labels .blog-tips-view-all, body.cms-all-patches .blog-tips-view-all, body.cms-all-hang-tags .blog-tips-view-all, body.cms-all-pins .blog-tips-view-all { text-align: center; margin-top: 1.25rem; } body.cms-all-woven-labels .blog-tips-view-all a, body.cms-all-patches .blog-tips-view-all a, body.cms-all-hang-tags .blog-tips-view-all a, body.cms-all-pins .blog-tips-view-all a { font-size: 0.85rem; font-weight: 700; color: #EF5732; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; } body.cms-all-woven-labels .blog-tips-view-all a:hover, body.cms-all-patches .blog-tips-view-all a:hover, body.cms-all-hang-tags .blog-tips-view-all a:hover, body.cms-all-pins .blog-tips-view-all a:hover { color: #ed6e9b; } body.cms-all-woven-labels .qwl-split-section .columns, body.cms-all-patches .qwl-split-section .columns, body.cms-all-hang-tags .qwl-split-section .columns, body.cms-all-pins .qwl-split-section .columns { grid-template-columns: 1fr !important; gap: 0 !important; } body.cms-all-woven-labels .qwl-other-products, body.cms-all-patches .qwl-other-products, body.cms-all-hang-tags .qwl-other-products, body.cms-all-pins .qwl-other-products { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1.5rem !important; max-width: 1300px !important; margin: 0 auto !important; justify-content: center !important; } body.cms-all-woven-labels .qwl-other-products > a, body.cms-all-patches .qwl-other-products > a, body.cms-all-hang-tags .qwl-other-products > a, body.cms-all-pins .qwl-other-products > a { grid-template-columns: 1fr !important; border-radius: 1rem; overflow: hidden; } body.cms-all-woven-labels .qwl-other-products .image, body.cms-all-patches .qwl-other-products .image, body.cms-all-hang-tags .qwl-other-products .image, body.cms-all-pins .qwl-other-products .image { height: 200px; } body.cms-all-woven-labels .qwl-other-products .content, body.cms-all-patches .qwl-other-products .content, body.cms-all-hang-tags .qwl-other-products .content, body.cms-all-pins .qwl-other-products .content { text-align: center; padding: 1.2rem !important; } body.cms-all-woven-labels .qwl-other-products .content .label, body.cms-all-patches .qwl-other-products .content .label, body.cms-all-hang-tags .qwl-other-products .content .label, body.cms-all-pins .qwl-other-products .content .label { margin-bottom: 0.75rem !important; } body.cms-all-woven-labels .qwl-split-section .columns::after, body.cms-all-patches .qwl-split-section .columns::after, body.cms-all-hang-tags .qwl-split-section .columns::after, body.cms-all-pins .qwl-split-section .columns::after { display: none !important; } body.cms-all-woven-labels .menu-close, body.cms-all-patches .menu-close, body.cms-all-hang-tags .menu-close, body.cms-all-pins .menu-close { display: none; } /* ============================================================================ SECTION 4b: Per-page unique category rules ============================================================================ */ /* --- all-woven-labels --- */ @font-face {font-family:"Neulis Alt";src:url("fonts/NeulisAlt-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;} @font-face {font-family:"Neulis Alt";src:url("fonts/NeulisAlt-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;} @font-face {font-family:"Neulis Alt";src:url("fonts/NeulisAlt-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;} @font-face {font-family:"Neulis Alt";src:url("fonts/NeulisAlt-MediumItalic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap;} @font-face {font-family:"Neulis Alt";src:url("fonts/NeulisAlt-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;} @font-face {font-family:"Neulis Alt";src:url("fonts/NeulisAlt-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;} @font-face {font-family:"Neulis Alt";src:url("fonts/NeulisAlt-BoldItalic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap;} @media screen and (min-width: 1280px) { body.cms-all-woven-labels a.button.nav-tier-1 { background: linear-gradient(135deg, #EF5732, #ff7a5c) !important; box-shadow: 0 2px 8px rgba(239,87,50,0.25); transition: all 0.2s ease !important; border: none !important; } body.cms-all-woven-labels a.button.nav-tier-1:hover, body.cms-all-woven-labels .nav-item:hover a.button.nav-tier-1 { box-shadow: 0 4px 16px rgba(239,87,50,0.4); transform: translateY(-1px); } body.cms-all-woven-labels .nav-item:not(.no-subnav):hover a.button.nav-tier-1:not(.childless), body.cms-all-woven-labels a.button.nav-tier-1:not(.childless):hover { background: linear-gradient(135deg, #EF5732, #ff7a5c) !important; border-radius: 1.5rem 1.5rem 0 0 !important; box-shadow: 0 -2px 12px rgba(239,87,50,0.2); transform: none; } body.cms-all-woven-labels .nav-item:not(.no-subnav):hover::after { background: linear-gradient(135deg, #EF5732, #ff7a5c) !important; height: 1rem; z-index: 101; } body.cms-all-woven-labels .nav-item:hover ul.subnav, body.cms-all-woven-labels ul.subnav:hover, body.cms-all-woven-labels .nav-tier-1.active ~ ul.subnav { background: white !important; border-radius: 0 0.75rem 0.75rem 0.75rem !important; box-shadow: 0 12px 32px rgba(0,0,0,0.12) !important; padding: 6px 0 !important; border: 1px solid #f0ebe6; border-top: none; } body.cms-all-woven-labels ul.subnav li { padding: 0 !important; } body.cms-all-woven-labels ul.subnav a { color: #4a2d2a !important; padding: 9px 20px !important; display: block; transition: all 0.15s; font-weight: 400 !important; } body.cms-all-woven-labels ul.subnav a:hover { background: #fef5f0 !important; color: #EF5732 !important; padding-left: 24px !important; opacity: 1 !important; } body.cms-all-woven-labels .subnav-item.rush { display: flex !important; align-items: center; white-space: nowrap; border-top: 1px solid #f0ebe6; margin-top: 4px; padding-top: 4px; } body.cms-all-woven-labels .subnav-item.rush a { color: #EF5732 !important; font-weight: 700 !important; display: inline !important; padding: 9px 6px 9px 20px !important; border-top: none !important; margin-top: 0 !important; } body.cms-all-woven-labels .subnav-item.rush .fa-arrow-right { color: #EF5732; font-size: 11px; flex-shrink: 0; } body.cms-all-woven-labels ul.subnav.two-col { column-count: 2 !important; column-gap: 0 !important; min-width: 420px !important; } body.cms-all-woven-labels ul.subnav.two-col li { break-inside: avoid !important; } body.cms-all-woven-labels ul.subnav.two-col li.subnav-item.rush:last-child { column-span: all !important; } body.cms-all-woven-labels .quote-link-area a.button.gold { background: linear-gradient(135deg, #ECAA00, #f0c040) !important; color: #4a2d2a !important; box-shadow: 0 2px 8px rgba(236,170,0,0.3); border: none !important; transition: all 0.2s; } body.cms-all-woven-labels .quote-link-area a.button.gold:hover { box-shadow: 0 4px 16px rgba(236,170,0,0.5); transform: translateY(-1px); } body.cms-all-woven-labels .quote-link-area { display: flex !important; align-items: center !important; gap: 16px !important; } body.cms-all-woven-labels .nav-phone-hours { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } body.cms-all-woven-labels .nav-phone { color: #4a2d2a !important; font-size: 14px; text-decoration: none !important; font-weight: 400; letter-spacing: 0.2px; } body.cms-all-woven-labels .nav-phone strong { font-weight: 700; } body.cms-all-woven-labels .nav-phone i { font-size: 12px; color: #EF5732; } body.cms-all-woven-labels .nav-availability { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #666; } body.cms-all-woven-labels .availability-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; box-shadow: 0 0 4px rgba(34,197,94,0.5); animation: pulse-dot 2s infinite; } @keyframes all-woven-labels-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } body.cms-all-woven-labels .availability-text { font-weight: 500; color: #555; } } @media screen and (min-width: 1280px) and (max-width: 1399px) { body.cms-all-woven-labels a.button.nav-tier-1 { font-size: 12px !important; padding: 8px 12px !important; white-space: nowrap !important; } body.cms-all-woven-labels .quote-link-area a.button.gold { font-size: 12px !important; padding: 8px 12px !important; white-space: nowrap !important; } body.cms-all-woven-labels .quote-link-area a.button.gold svg { width: 14px !important; height: 14px !important; } body.cms-all-woven-labels .nav-phone-hours { gap: 1px !important; } body.cms-all-woven-labels .nav-phone { font-size: 12px !important; } body.cms-all-woven-labels .nav-availability { font-size: 10px !important; } body.cms-all-woven-labels .navigation-container { gap: 4px !important; } body.cms-all-woven-labels .header-areas { gap: 8px !important; } } @media screen and (min-width: 1280px) and (max-width: 1319px) { body.cms-all-woven-labels a.button.nav-tier-1 { font-size: 11px !important; padding: 7px 9px !important; } body.cms-all-woven-labels .quote-link-area a.button.gold { font-size: 11px !important; padding: 7px 9px !important; } body.cms-all-woven-labels .quote-link-area { gap: 8px !important; } body.cms-all-woven-labels .nav-phone { font-size: 11px !important; } } @media screen and (max-width: 1024px) { body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-image img { top: 0 !important; bottom: 6vw !important; left: 50% !important; transform: translateX(-50%) !important; width: auto !important; height: calc(100% - 6vw) !important; min-width: 100% !important; min-height: calc(100% - 6vw) !important; object-fit: cover !important; object-position: center bottom !important; } } @media screen and (min-width:600px) { body.cms-all-woven-labels .qwl-hero .hero-content {padding:12rem 1rem 4rem} body.cms-all-woven-labels .specials-grid {grid-template-columns:1fr 1fr} body.cms-all-woven-labels .qwl-other-products .content .label {font-size:1.5rem} } @media screen and (min-width:800px) { body.cms-all-woven-labels .banner-container {display:block} body.cms-all-woven-labels .top-header-areas {align-items:center;display:grid;grid-template-columns:1fr auto} body.cms-all-woven-labels .banner a {color:var(--gold);font-weight:600;text-transform:uppercase} body.cms-all-woven-labels .header-areas {align-items:center;grid-template-areas:"logo quote toggle" "nav nav nav";grid-gap:1rem;grid-template-columns:1fr auto auto;justify-content:start} body.cms-all-woven-labels .header-areas .quote-link-area {display:flex;justify-self:end} body.cms-all-woven-labels .header-areas .logo-area>a {display:block;width:auto;justify-self:start} body.cms-all-woven-labels .logo img {height:4rem} body.cms-all-woven-labels .qwl-hero .hero-content {margin:0 auto;padding:12rem 1rem 4rem} body.cms-all-woven-labels .featured-products-grid {grid-template-columns:1fr 1fr} body.cms-all-woven-labels ul.scrollbar-carousel .label span {opacity:0;transition:opacity .25s linear 0s} body.cms-all-woven-labels ul.scrollbar-carousel li:hover .label span {opacity:1} body.cms-all-woven-labels .ss-grid {grid-template-columns:1fr 1fr 1fr;grid-template-areas:"ss-2a ss-3 ss-4" "ss-2b ss-text ss-text" "ss-2c ss-text ss-text" "ss-2d ss-5 ss-5"} body.cms-all-woven-labels .ss-grid #ss-2a, body.cms-all-woven-labels .ss-grid #ss-2b, body.cms-all-woven-labels .ss-grid #ss-2c, body.cms-all-woven-labels .ss-grid #ss-2d {display:block;height:100%} body.cms-all-woven-labels .custom-branding-categories {grid-template-columns:1fr 1fr} body.cms-all-woven-labels #homepage-quote form {grid-template-columns:1fr 1fr} body.cms-all-woven-labels #homepage-quote #products_list, body.cms-all-woven-labels #homepage-quote #width_height, body.cms-all-woven-labels #homepage-quote #quantity_list, body.cms-all-woven-labels .g-recaptcha, body.cms-all-woven-labels .buttons-set, body.cms-all-woven-labels #discuss_project_group {grid-column:1/span 2} body.cms-all-woven-labels #homepage-quote .quote-form-column {margin-left:33.33%;width:66.66%} body.cms-all-woven-labels #homepage-quote .background-image img {object-position:center} body.cms-all-woven-labels .specials-banner .content-areas {align-items:center;grid-template-columns:1fr 1fr} body.cms-all-woven-labels .specials-banner .content-areas h3 {font-size:2.5em} body.cms-all-woven-labels #homepage-samples .wrapper {margin:1rem auto;max-width:600px} body.cms-all-woven-labels .footer .container .row {grid-template-columns:1fr 1fr 1fr} body.cms-all-woven-labels .footer .newsletter {grid-column:2/span 2} } @media screen and (min-width:1080px) { body.cms-all-woven-labels .footer .container .row {display:flex;flex-wrap:wrap;gap:1rem} body.cms-all-woven-labels .footer-middle .block.newsletter .form.subscribe {max-width:300px} body.cms-all-woven-labels .qwl-hero .hero-image img {position:relative} body.cms-all-woven-labels .qwl-hero .hero-content {left:50%;max-width:600px;padding:0;position:absolute;top:58%;translate:-50% -50%} body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content {top:50%} body.cms-all-woven-labels .qwl-hero.category-hero .hero-content {max-width:900px} body.cms-all-woven-labels .qwl-hero:after {top:100%} body.cms-all-woven-labels .featured-products-grid {grid-template-columns:repeat(4,1fr)} body.cms-all-woven-labels #qwl-homepage-categories .carousel-header~div div:nth-of-type(2) div {opacity:0 !important;transition:opacity .5s linear 0s} body.cms-all-woven-labels #qwl-homepage-categories .wrapper:hover .carousel-header~div div:nth-of-type(2) div {opacity:1 !important} body.cms-all-woven-labels .custom-branding-categories {grid-template-columns:repeat(4,1fr);margin-top:4rem} body.cms-all-woven-labels #homepage-quote .quote-form-column {margin-left:50%;width:50%} body.cms-all-woven-labels #homepage-quote .background-image img {object-position:25%} body.cms-all-woven-labels .specials-grid {grid-template-columns:repeat(4,1fr)} body.cms-all-woven-labels .specials-banner {padding:2rem} body.cms-all-woven-labels .specials-banner .content-areas {align-items:center;display:flex;justify-content:space-between} body.cms-all-woven-labels .specials-banner .content-areas h3 {max-width:50%} body.cms-all-woven-labels #homepage-samples .wrapper {background-color:transparent} body.cms-all-woven-labels .seo-columns {align-items:center;display:flex;gap:2rem} body.cms-all-woven-labels .seo-columns .image-column {min-width:55%} body.cms-all-woven-labels #homepage-seo .seo-columns:nth-of-type(even) .image-column {order:2} body.cms-all-woven-labels .qwl-hero {min-height:65vh} body.cms-all-woven-labels .hero-image {height:100%;position:absolute;width:100%} } @media screen and (min-width:1280px) { body.cms-all-woven-labels .top-header-areas {grid-template-columns:1fr auto 1fr} body.cms-all-woven-labels .google-rating-container {display:block} body.cms-all-woven-labels .google-rating-container img {display:block;max-height:2rem} body.cms-all-woven-labels .header-areas {grid-template-areas:"logo nav quote";grid-gap:1rem;grid-template-columns:auto 1fr auto} body.cms-all-woven-labels .header-areas .nav-toggle-area {display:none} body.cms-all-woven-labels .navigation-container, body.cms-all-woven-labels:not(.menu-active) .navigation-container {display:flex;gap:1rem;max-height:unset;justify-content:center;overflow:visible;padding-right:0;position:relative;transition:none;width:100%} body.cms-all-woven-labels ul.subnav {border-radius:0 .5rem .5rem;top:100%;position:absolute;transition:none;width:100%} body.cms-all-woven-labels a.button.nav-tier-1 {font-size:1rem;width:auto} body.cms-all-woven-labels .navigation-container .nav-item {position:relative} body.cms-all-woven-labels .nav-tier-1.active~ul.subnav, body.cms-all-woven-labels .nav-item:hover ul.subnav, body.cms-all-woven-labels ul.subnav:hover {margin-top:1rem;max-height:unset;overflow:visible;transition:none;width:fit-content} body.cms-all-woven-labels .nav-tier-1:not(.childless).active:after, body.cms-all-woven-labels .nav-item:not(.no-subnav):hover:after {background-color:var(--pink);content:" ";height:1rem;left:0;position:absolute;bottom:-1rem;width:100%} body.cms-all-woven-labels a.button.nav-tier-1:not(.childless):hover, body.cms-all-woven-labels .nav-item:hover a.button.nav-tier-1:not(.childless) {background-color:var(--pink);border:0;border-radius:1.5rem 1.5rem 0 0;transition:none} body.cms-all-woven-labels .quote-link-area a.button {font-size:1rem} body.cms-all-woven-labels .navigation-container .nav-item:not(:first-of-type) {margin-top:0} body.cms-all-woven-labels .subnav-item {margin:0} body.cms-all-woven-labels .subnav-item a {font-size:1rem;white-space:nowrap} body.cms-all-woven-labels a.button.nav-tier-1 {transition:none} body.cms-all-woven-labels .footer .container .row {flex-wrap:nowrap} body.cms-all-woven-labels .ss-grid {grid-template-columns:1fr 1fr 1fr 1fr;grid-template-areas:"ss-1 ss-2a ss-3 ss-4" "ss-1 ss-2b ss-text ss-text" "ss-1 ss-2c ss-text ss-text" "ss-1 ss-2d ss-5 ss-5"} body.cms-all-woven-labels .ss-grid #ss-1 {grid-area:ss-1;height:100%} body.cms-all-woven-labels .ss-grid #ss-1a {display:block;height:calc(35% - 1rem);margin-bottom:1rem} body.cms-all-woven-labels .ss-grid #ss-1b {display:block;height:30%} body.cms-all-woven-labels .ss-grid #ss-1c {display:block;height:calc(35% - 1rem);margin-top:1rem} body.cms-all-woven-labels .phone-number {text-align:right} body.cms-all-woven-labels .qwl-hero .hero-image {height:100%;width:100%} body.cms-all-woven-labels .qwl-hero .hero-image img {position:absolute} body.cms-all-woven-labels .qwl-hero .hero-content {bottom:auto;top:65%;translate:-50% -50%} body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content {bottom:auto;top:50%;translate:-50% -50%} body.cms-all-woven-labels .qwl-hero .hero-offer {padding:1rem 3rem} body.cms-all-woven-labels .qwl-hero.category-hero .hero-content {max-width:80vw;width:100%} body.cms-all-woven-labels .featured-promo .promo-title h3 {font-size:2.5rem} } @media screen and (min-width:1400px) { body.cms-all-woven-labels .footer .container .row {gap:2rem} body.cms-all-woven-labels .qwl-hero .hero-content h1 {font-size:3rem} body.cms-all-woven-labels .qwl-hero.category-hero .hero-content h1 {font-size:3.5rem} body.cms-all-woven-labels .qwl-hero .hero-content .hero-text, body.cms-all-woven-labels .qwl-hero .hero-content a.button {font-size:1.5rem} body.cms-all-woven-labels #homepage-sewing-services h2 {font-size:4rem} body.cms-all-woven-labels #homepage-sewing-services #ss-text {padding:2rem} body.cms-all-woven-labels .custom-branding-categories {gap:2rem;padding-bottom:6rem} body.cms-all-woven-labels #homepage-quote {overflow:hidden} body.cms-all-woven-labels #homepage-quote .background-image img {object-position:left;scale:110%} body.cms-all-woven-labels #homepage-quote .background-image {left:0;right:auto;width:100%} body.cms-all-woven-labels .specials-banner .content-areas .area-2 {font-size:1.5em} body.cms-all-woven-labels #homepage-samples .wrapper {margin:3rem auto} body.cms-all-woven-labels #homepage-samples .wrapper .heading {font-size:2.5em} body.cms-all-woven-labels .qwl-hero {min-height:75vh} body.cms-all-woven-labels .qwl-hero.category-hero {min-height:85vh} body.cms-all-woven-labels .qwl-hero .hero-offer .heading {font-size:3rem} body.cms-all-woven-labels .qwl-hero .hero-offer .subheading {font-size:2rem} body.cms-all-woven-labels .featured-promo .promo-title h3 {font-size:3rem} body.cms-all-woven-labels .featured-promo .promo-text-col h4 {font-size:1.75rem} body.cms-all-woven-labels .featured-promo .promo-text-col p {font-size:1.25rem} body.cms-all-woven-labels .featured-promo .promo-text-col ul {font-size:1.25rem} } @media screen and (min-width:1600px) { body.cms-all-woven-labels .qwl-hero.category-hero .hero-content h1 {font-size:4rem} body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content {padding:0} body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content h1 {font-size:3rem} body.cms-all-woven-labels .qwl-hero.homepage-hero {min-height:50vw} } @media screen and (min-width:1800px) { body.cms-all-woven-labels .qwl-hero.category-hero {min-height:75vh} body.cms-all-woven-labels .qwl-hero.category-hero .hero-content h1 {font-size:4rem} body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content h1 {font-size:3rem} } @media screen and (min-width:2400px) { body.cms-all-woven-labels .qwl-hero.category-hero {min-height:80vh} body.cms-all-woven-labels .qwl-hero.category-hero .hero-content {max-width:unset} body.cms-all-woven-labels .qwl-hero .hero-content h1 {font-size:4rem} body.cms-all-woven-labels .qwl-hero.category-hero .hero-content h1 {font-size:5rem} body.cms-all-woven-labels .qwl-hero.category-hero .hero-content .heading {font-size:4rem} body.cms-all-woven-labels .qwl-hero.category-hero .hero-content .subheading {font-size:3rem} body.cms-all-woven-labels .qwl-hero.category-hero .hero-content .bullets {font-size:1.5rem} body.cms-all-woven-labels .qwl-hero .hero-content .hero-text, body.cms-all-woven-labels .qwl-hero .hero-content a.button {font-size:2rem} body.cms-all-woven-labels #homepage-sewing-services {margin:1rem auto;max-width:1900px} body.cms-all-woven-labels #homepage-sewing-services #ss-text {padding:6rem} body.cms-all-woven-labels .specials-grid .blurb {font-size:2rem} body.cms-all-woven-labels .specials-banner .content-areas .area-2 {max-width:25%} body.cms-all-woven-labels .specials-banner .content-areas h3 {font-size:4em;max-width:35%} body.cms-all-woven-labels #homepage-samples .wrapper {font-size:1.5rem;margin:6rem auto;max-width:900px} body.cms-all-woven-labels #homepage-samples .wrapper .heading {font-size:2em} } @media only screen and (max-width:575px) { body.cms-all-woven-labels.account .account-nav .nav.items>li.nav.item, body.cms-all-woven-labels.account .account-nav .nav.items>li.nav.item.current {font-size:15px;padding:2px 10px 4px} } @media only screen and (max-width:575px) { body.cms-all-woven-labels.account table#my-pending-approvals td {display:block} body.cms-all-woven-labels.account table#my-pending-approvals td:nth-child(1) {border-bottom:none;padding-bottom:0} body.cms-all-woven-labels.account table#my-pending-approvals td:nth-child(2) {padding-top:0} body.cms-all-woven-labels.account table#my-pending-approvals td.artwork {padding-bottom:10px} } @media only screen and (min-width:992px) { body.cms-all-woven-labels.account table#my-pending-approvals td.artwork button {font-size:1.2em} } @media only screen and (min-width:1000px) { body.cms-all-woven-labels.account .columns .sidebar-main {flex:1} body.cms-all-woven-labels.account .columns .column.main {flex:3} } @media only screen and (min-width:1199px) { body.cms-all-woven-labels.account .columns .sidebar-main {flex:1} body.cms-all-woven-labels.account .columns .column.main {flex:4} } @media screen and (min-width:1730px) { body.cms-all-woven-labels .expert-tips {padding-bottom:2rem} body.cms-all-woven-labels ul.expert-tips-grid li {flex-basis:450px} } @container (min-width:600px) and (max-width:799px) { body.cms-all-woven-labels .best-sellers .label-grid {grid-template-columns:1fr 1fr} body.cms-all-woven-labels .best-sellers .label-grid .label-card:first-of-type {grid-column:1/span 2;padding-top:50%} } @container (min-width:800px) { body.cms-all-woven-labels .best-sellers .label-grid {grid-template-columns:1fr 1fr 1fr} } @media screen and (min-width:800px) { body.cms-all-woven-labels .qwl-category-products {grid-template-columns:1fr 1fr} body.cms-all-woven-labels .qwl-category-products:not(.featured-product) .blurb {text-align:left} body.cms-all-woven-labels .qwl-split-section .columns {gap:2rem;grid-template-columns:50% 50%} body.cms-all-woven-labels .qwl-split-section .columns:after {background:#fff url("/pub/media/qwl2025/checker-border-flesh-vertical.svg") center left repeat-y;content:" ";display:block;left:calc(50% - .25rem);height:calc(100% - 1rem);position:absolute;width:.5rem;top:.5rem;visibility:visible;z-index:1} body.cms-all-woven-labels .featured-promo {grid-template-columns:1fr 1fr} body.cms-all-woven-labels .featured-promo .promo-image-col, body.cms-all-woven-labels .featured-promo:before {height:100%;padding-top:0} body.cms-all-woven-labels .featured-promo .promo-image-col>img {object-fit:contain} body.cms-all-woven-labels .qwl-other-products .content .label {font-size:1rem} body.cms-all-woven-labels .qwl-other-products>a {max-width:calc(100% - 2rem)} body.cms-all-woven-labels .reviews-widget {max-width:90%} body.cms-all-woven-labels .qwl-category-reviews .buttons img {max-width:100px} body.cms-all-woven-labels.qwl .qwl-category-reviews h2 {font-size:1.5rem} body.cms-all-woven-labels .qwl-category-reviews .buttons {grid-template-columns:auto auto} } @media screen and (min-width:1080px) { body.cms-all-woven-labels .qwl-category-products {margin:0 auto} body.cms-all-woven-labels .qwl-category-products .image {padding-top:15rem} body.cms-all-woven-labels .qwl-category-products .blurb {font-size:1.25em;font-weight:300} body.cms-all-woven-labels .qwl-category-products {grid-template-columns:repeat(3,1fr)} body.cms-all-woven-labels .qwl-category-reviews .buttons img {max-width:150px} } @media screen and (min-width:1200px) { body.cms-all-woven-labels .qwl-category-products {grid-template-columns:repeat(4,1fr)} body.cms-all-woven-labels .qwl-other-products .content .label {font-size:1.5rem} body.cms-all-woven-labels.qwl .qwl-category-reviews h2 {font-size:2rem} } @media screen and (min-width:1400px) { body.cms-all-woven-labels .featured-promo {grid-template-columns:60% 1fr} body.cms-all-woven-labels .featured-promo.reversed {grid-template-columns:1fr 60%} body.cms-all-woven-labels.qwl .best-sellers h2 {font-size:3rem} body.cms-all-woven-labels .best-sellers .label-grid .label-card .heading h3 {font-size:2rem} body.cms-all-woven-labels .best-sellers .label-grid .label-card .subheading {font-size:1.5rem} body.cms-all-woven-labels .best-sellers .label-grid .label-card .tag {font-size:1.5rem} body.cms-all-woven-labels .qwl-split-section .columns {max-width:1400px;width:calc(100vw - 4rem)} } @media screen and (min-width:1800px) { body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content {max-width:unset;width:100%} body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content h1 {font-size:3rem} body.cms-all-woven-labels .qwl-hero .hero-offer .heading {font-size:2.5rem} body.cms-all-woven-labels .qwl-other-products .content .label {font-size:2rem} body.cms-all-woven-labels.qwl .qwl-category-reviews h2 {font-size:2.5rem} body.cms-all-woven-labels .qwl-other-products .content .button {font-size:1.5rem} } @media screen and (min-width:2400px) { body.cms-all-woven-labels .qwl-hero.homepage-hero {min-height:40vw} } @media (max-width: 480px) { body.cms-all-woven-labels .qwl-hero.category-hero .hero-content h1 { font-size: 1.5rem !important; } } @media screen and (max-width: 1024px) { body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-image img { top: 0 !important; bottom: 6vw !important; left: 50% !important; transform: translateX(-50%) !important; width: auto !important; height: calc(100% - 6vw) !important; min-width: 100% !important; min-height: calc(100% - 6vw) !important; object-fit: cover !important; object-position: center bottom !important; } } @media (max-width: 1399px) { body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content { padding-bottom: 7vw !important; } } @media (max-width: 1279px) { body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content { padding-bottom: 10vw !important; } } @media (max-width: 1080px) { body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content { padding-top: 4rem !important; padding-bottom: 10vw !important; } } @media (max-width: 1024px) { body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content h1 { font-size: 2.2rem !important; } } @media (max-width: 768px) { body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content h1 { font-size: 1.6rem !important; line-height: 1.2 !important; } body.cms-all-woven-labels .qwl-hero::after, body.cms-all-woven-labels .qwl-hero:after { height: 10vw !important; } body.cms-all-woven-labels .qwl-hero.homepage-hero { margin-bottom: calc(-10vw + 0.5rem) !important; } body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content { padding-bottom: 14vw !important; } body.cms-all-woven-labels .hero-offer { max-width: 280px !important; padding: 14px !important; } body.cms-all-woven-labels .hero-offer .heading { font-size: 1.2rem !important; } body.cms-all-woven-labels .hero-offer ul.hero-checks li { font-size: 13px !important; } body.cms-all-woven-labels .hero-offer .button-container .hero-cta { font-size: 13px !important; padding: 10px 18px !important; } } @media (max-width: 428px) { body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content h1 { font-size: 1.3rem !important; padding: 0 8px !important; } body.cms-all-woven-labels .hero-offer { max-width: 240px !important; padding: 10px !important; } body.cms-all-woven-labels .hero-offer .heading { font-size: 1rem !important; } body.cms-all-woven-labels .hero-offer ul.hero-checks li { font-size: 11px !important; gap: 4px !important; margin-bottom: 4px !important; } body.cms-all-woven-labels .hero-offer ul.hero-checks li i { font-size: 14px !important; } body.cms-all-woven-labels .hero-offer .button-container .hero-cta { font-size: 12px !important; padding: 8px 16px !important; } } @media (max-width: 375px) { body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content h1 { font-size: 1.1rem !important; } body.cms-all-woven-labels .hero-offer { max-width: 210px !important; padding: 8px !important; } body.cms-all-woven-labels .hero-offer ul.hero-checks li { font-size: 10px !important; } body.cms-all-woven-labels .hero-offer .button-container .hero-cta { font-size: 11px !important; padding: 7px 14px !important; } } body.cms-all-woven-labels .best-sellers { padding-top: 0 !important; position: relative; z-index: 5; } body.cms-all-woven-labels.qwl .best-sellers h2 { margin-top: 0.5rem !important; margin-bottom: 2rem !important; } @media (min-width: 1080px) and (max-width: 1399px) { body.cms-all-woven-labels .qwl-hero.homepage-hero { min-height: 580px !important; } } @media (max-width: 1079px) { body.cms-all-woven-labels .qwl-hero.homepage-hero { min-height: 500px !important; } } body.cms-all-woven-labels .qwl-other-products > a, body.cms-all-woven-labels .review-card, body.cms-all-woven-labels .faq-card { box-shadow: 0 2px 12px rgba(0,0,0,0.07); transition: transform 0.2s ease, box-shadow 0.2s ease; } body.cms-all-woven-labels .qwl-other-products > a:hover, body.cms-all-woven-labels .review-card:hover, body.cms-all-woven-labels .faq-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); } body.cms-all-woven-labels .section-main-title { font-size: 3rem !important; font-weight: 700 !important; text-align: center !important; color: #4a2d2a; margin-top: 4rem; margin-bottom: 1rem; max-width: 1300px !important; width: calc(100% - 2rem) !important; margin-left: auto !important; margin-right: auto !important; } body.cms-all-woven-labels #all-woven-labels, body.cms-all-woven-labels .column.main > h2:not(.section-main-title) { max-width: 1300px !important; width: calc(100% - 2rem) !important; margin-left: auto !important; margin-right: auto !important; } body.cms-all-woven-labels #all-woven-labels { margin-top: 2rem; } body.cms-all-woven-labels .qwl-category-products .image { flex: 1; height: auto !important; padding-top: 1rem !important; position: relative; z-index: 5; min-height: 15rem; } body.cms-all-woven-labels .best-sellers .label-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1.5rem !important; } body.cms-all-woven-labels .best-sellers .label-grid .label-card { border-radius: 0.75rem !important; overflow: hidden !important; padding-top: 0 !important; position: relative; z-index: 5; height: auto !important; box-shadow: 0 2px 12px rgba(0,0,0,0.07); transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; background: #faf7f2 !important; } body.cms-all-woven-labels .best-sellers .label-grid .label-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); } body.cms-all-woven-labels .best-sellers .label-grid .label-card img.label-image { position: relative !important; top: auto !important; left: auto !important; translate: none !important; width: 100% !important; height: 350px !important; object-fit: cover !important; object-position: top center !important; scale: 1 !important; transition: scale 0.3s ease !important; display: block !important; order: 1; } body.cms-all-woven-labels .best-sellers .label-grid .label-card:hover img.label-image { scale: 1.05 !important; } body.cms-all-woven-labels .best-sellers .label-grid .label-card .label-card-content { position: static !important; height: auto !important; display: block; padding: 0.75rem 1rem !important; background: #faf7f2 !important; order: 2; } body.cms-all-woven-labels .best-sellers .label-grid .label-card .heading { position: static !important; background: none !important; padding: 0 !important; text-align: left !important; width: auto !important; top: auto !important; } body.cms-all-woven-labels .best-sellers .label-grid .label-card .heading h3 { color: #4a2d2a !important; font-size: 1.75rem !important; font-weight: 700 !important; margin: 0 !important; } body.cms-all-woven-labels .best-sellers .label-grid .label-card .heading span { display: block !important; color: #EF5732 !important; font-size: 0.9rem !important; font-weight: 600 !important; margin-top: 0.2rem !important; } body.cms-all-woven-labels .best-sellers .label-grid .label-card .subheading { position: absolute !important; top: 0.75rem !important; left: 0.75rem !important; z-index: 10 !important; background: rgba(250,247,242,0.95) !important; border: 1px solid #ede6d6 !important; color: #4a2d2a !important; font-size: 0.8rem !important; font-weight: 600 !important; padding: 0.35rem 0.75rem !important; border-radius: 2rem !important; display: inline-flex !important; width: fit-content !important; justify-content: flex-start !important; backdrop-filter: blur(4px); line-height: normal !important; } body.cms-all-woven-labels .best-sellers .label-grid .label-card .subheading-2 { top: 3rem !important; } body.cms-all-woven-labels .best-sellers .label-grid .label-card .tag { display: none !important; } body.cms-all-woven-labels .best-sellers .label-grid .label-card:nth-of-type(2) .heading, body.cms-all-woven-labels .best-sellers .label-grid .label-card:nth-of-type(2) .tag, body.cms-all-woven-labels .best-sellers .label-grid .label-card:nth-of-type(3) .heading, body.cms-all-woven-labels .best-sellers .label-grid .label-card:nth-of-type(3) .tag { background: none !important; } @media (max-width: 768px) { body.cms-all-woven-labels .best-sellers .label-grid { grid-template-columns: 1fr !important; } } body.cms-all-woven-labels .qwl-hero .hero-offer { background: none !important; border: none !important; border-radius: 0 !important; position: relative !important; padding: 1.25rem 5rem 1.5rem !important; width: fit-content !important; max-width: none !important; box-sizing: border-box !important; isolation: isolate !important; } @media (max-width: 768px) { body.cms-all-woven-labels .qwl-hero .hero-offer { max-width: calc(100% - 2rem) !important; padding: 1.25rem 3rem 1.5rem !important; } } body.cms-all-woven-labels .blog-tips-section, body.cms-all-woven-labels #homepage-instagram, body.cms-all-woven-labels #homepage-samples, body.cms-all-woven-labels #homepage-footer, body.cms-all-woven-labels .featured-promo.cream { background-color: #faf7f2; } body.cms-all-woven-labels .qwl-hero { margin-bottom: 0 !important; } body.cms-all-woven-labels .header-nav { position: relative; } body.cms-all-woven-labels .qwl-top-header .banner a, body.cms-all-woven-labels .qwl-top-header .account-links a, body.cms-all-woven-labels .qwl-top-header .phone-number a { color: #faf7f2 !important; } body.cms-all-woven-labels ul.subnav a { color: #fff !important; } body.cms-all-woven-labels .qwl-category-products .heading, body.cms-all-woven-labels .qwl-category-products .heading.pink, body.cms-all-woven-labels .qwl-category-products .heading.gold, body.cms-all-woven-labels .qwl-category-products .heading.orange { background-color: #faf7f2 !important; color: #4a2d2a !important; } body.cms-all-woven-labels .qwl-category-products .heading h3, body.cms-all-woven-labels .qwl-category-products .heading h2 { color: #4a2d2a !important; font-size: 1.35rem; font-weight: 600; } body.cms-all-woven-labels .qwl-category-products .tag { background-color: #faf7f2 !important; color: #EF5732 !important; } body.cms-all-woven-labels .best-sellers .label-grid .label-card .heading { background-color: #faf7f2 !important; color: #4a2d2a !important; top: auto !important; bottom: 0; padding: 0.75rem 1rem; } body.cms-all-woven-labels .best-sellers .label-grid .label-card .heading h3 { color: #4a2d2a !important; font-size: 1.25rem; } body.cms-all-woven-labels .best-sellers .label-grid .label-card .subheading { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 3; background-color: rgba(250,247,242,0.95); padding: 0.35rem 0.75rem; border-radius: 1rem; font-size: 0.85rem; } body.cms-all-woven-labels .best-sellers .label-grid .label-card:nth-of-type(2) .heading { background-color: #faf7f2 !important; color: #4a2d2a !important; } body.cms-all-woven-labels .cotton-card { border-radius: 1rem !important; overflow: hidden !important; box-shadow: 0 8px 32px rgba(74,45,42,0.15); height: auto !important; padding-top: 0 !important; } body.cms-all-woven-labels .cotton-card a { display: block; color: var(--brown); text-decoration: none; } body.cms-all-woven-labels .cotton-card-img { position: relative; overflow: hidden; } body.cms-all-woven-labels .cotton-card-img img { display: block; width: 100%; height: auto; transition: scale 0.5s ease; } body.cms-all-woven-labels .cotton-card:hover .cotton-card-img img { scale: 1.05; } body.cms-all-woven-labels .promo-pills-overlay { position: absolute; top: 0.75rem; left: 0.75rem; display: flex; gap: 0.5rem; flex-wrap: wrap; z-index: 2; } body.cms-all-woven-labels .promo-pills-overlay .promo-pill { background: rgba(250,247,242,0.95); border: 1px solid #ede6d6; border-radius: 2rem; padding: 0.35rem 0.75rem; font-size: 0.8rem; font-weight: 600; color: #4a2d2a; backdrop-filter: blur(4px); } body.cms-all-woven-labels .cotton-card-body { background: #faf7f2; padding: 1rem 1.25rem; text-align: left; } body.cms-all-woven-labels .cotton-card-body h3 { font-size: 1.75rem; font-weight: 700; color: var(--brown); margin: 0 0 0.35rem; } body.cms-all-woven-labels .cotton-card-price { font-size: 0.9rem; font-weight: 600; color: var(--orange); } @media screen and (min-width: 1400px) { body.cms-all-woven-labels .cotton-card-body h3 { font-size: 1.75rem; } } body.cms-all-woven-labels .cotton-promo-title { font-size: 3rem !important; font-weight: 700 !important; text-align: center !important; color: #4a2d2a; padding-top: 3rem !important; margin-top: 0 !important; margin-bottom: 1rem; } body.cms-all-woven-labels .cotton-section-bg { margin-top: 6rem; } body.cms-all-woven-labels .promo-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; } body.cms-all-woven-labels .promo-pill { background: #faf7f2; border: 1px solid #ede6d6; border-radius: 2rem; #homepage-footer .button, #homepage-samples .button, .featured-promo .button, .qwl-other-products .button.orange { background: linear-gradient(135deg, #EF5732, #ff7a5c) !important; border: none !important; box-shadow: 0 2px 8px rgba(239,87,50,0.25); } } body.cms-all-woven-labels .best-sellers .label-grid .label-card:nth-of-type(3) .heading { background-color: #faf7f2 !important; } body.cms-all-woven-labels #homepage-footer { padding-bottom: 3rem; } @media (max-width: 768px) { body.cms-all-woven-labels .value-props-split { flex-direction: column; gap: 1.5rem; } body.cms-all-woven-labels .value-props-divider { width: 60px; height: 1px; } body.cms-all-woven-labels .value-props-left { align-items: center; } } body.cms-all-woven-labels .cotton-section-bg { position: relative; padding-bottom: 3rem; } body.cms-all-woven-labels .cotton-section-bg::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background-color: #ede6d6; border-top: 3px solid #ecaa00; z-index: -1; } body.cms-all-woven-labels .review-card { background: #faf7f2; border-radius: 12px; padding: 1.5rem; margin-bottom: 0.75rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } @media (max-width: 768px) { body.cms-all-woven-labels .reviews-faq-grid { grid-template-columns: 1fr; gap: 2rem; } } body.cms-all-woven-labels .blog-tip-card { border-radius: 0.75rem; overflow: hidden; background: #faf7f2; box-shadow: 0 4px 16px rgba(74,45,42,0.15); transition: transform 0.2s ease, box-shadow 0.2s ease; } @media (max-width: 1200px) { body.cms-all-woven-labels .blog-tips-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { body.cms-all-woven-labels .blog-tips-grid { grid-template-columns: repeat(2, 1fr); } body.cms-all-woven-labels .blog-tip-card:last-child { display: none; } } @media (max-width: 480px) { body.cms-all-woven-labels .blog-tips-grid { grid-template-columns: 1fr; } body.cms-all-woven-labels .blog-tip-card:last-child { display: block; } } @media (max-width: 768px) { body.cms-all-woven-labels .qwl-other-products { grid-template-columns: 1fr !important; } } @media (max-width: 768px) { body.cms-all-woven-labels, body.cms-all-woven-labels { overflow-x: hidden !important; -webkit-overflow-scrolling: touch; } body.cms-all-woven-labels section, body.cms-all-woven-labels .desktop-width, body.cms-all-woven-labels .wrapper, body.cms-all-woven-labels .page-wrapper, body.cms-all-woven-labels .columns, body.cms-all-woven-labels .column.main, body.cms-all-woven-labels #maincontent, body.cms-all-woven-labels .page-main { overflow-x: hidden !important; max-width: 100vw !important; word-wrap: break-word; } } @media (min-width: 1800px) { body.cms-all-woven-labels .desktop-width, body.cms-all-woven-labels .page-footer .footer-middle .container { max-width: 1536px !important; margin-left: auto !important; margin-right: auto !important; } } @media (max-width: 1279px) { body.cms-all-woven-labels .qwl-top-header .banner-container { display: none !important; } body.cms-all-woven-labels .qwl-top-header .google-rating-container { display: block !important; } body.cms-all-woven-labels .qwl-top-header .google-rating-container img { max-height: 2rem !important; display: block !important; } body.cms-all-woven-labels .qwl-top-header .top-header-areas { padding: 0 12px !important; } } @media (max-width: 1279px) { body.cms-all-woven-labels .qwl-top-header .top-header-areas, body.cms-all-woven-labels .top-header-areas { display: flex !important; align-items: center !important; justify-content: space-between !important; height: 32px !important; flex-wrap: nowrap !important; overflow: visible !important; } body.cms-all-woven-labels .top-header-right { display: flex !important; align-items: center !important; gap: 8px !important; margin-left: auto !important; } } @media (max-width: 768px) { body.cms-all-woven-labels .qwl-top-header .banner a { font-size: 11px !important; } body.cms-all-woven-labels .qwl-top-header .top-header-areas { display: flex !important; align-items: center !important; justify-content: space-between !important; } body.cms-all-woven-labels .top-header-right { display: flex !important; align-items: center !important; gap: 8px !important; margin-left: auto !important; } } @media (max-width: 428px) { body.cms-all-woven-labels .qwl-top-header .banner a { font-size: 10px !important; white-space: normal !important; line-height: 1.3 !important; } } @media (max-width: 599px) { body.cms-all-woven-labels .qwl-top-header .top-header-areas { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 12px !important; } body.cms-all-woven-labels .qwl-top-header .banner-container { display: none !important; } body.cms-all-woven-labels .qwl-top-header .google-rating-container { display: block !important; } body.cms-all-woven-labels .qwl-top-header .google-rating-container img { max-height: 1.6rem !important; } body.cms-all-woven-labels .top-header-right { display: flex !important; align-items: center !important; gap: 8px !important; position: static !important; float: none !important; margin-left: auto !important; } body.cms-all-woven-labels .minicart-wrapper, body.cms-all-woven-labels .minicart-container { position: static !important; float: none !important; } body.cms-all-woven-labels .action.showcart { line-height: 1 !important; padding: 0 !important; } body.cms-all-woven-labels .cart-icon-wrap .fa-shopping-bag { font-size: 22px !important; line-height: 24px !important; } body.cms-all-woven-labels .minicart-wrapper .action.showcart .counter.qty { top: 10px !important; } body.cms-all-woven-labels .header-nav .header-areas, body.cms-all-woven-labels .header-areas { display: flex !important; align-items: center !important; justify-content: space-between !important; grid-template-areas: none !important; grid-template-columns: none !important; } body.cms-all-woven-labels .header-nav .header-areas .logo-area, body.cms-all-woven-labels .logo-area { order: 0 !important; flex: 0 0 auto !important; width: auto !important; justify-self: flex-start !important; text-align: left !important; } body.cms-all-woven-labels .logo-area .logo img { height: 32px !important; } body.cms-all-woven-labels .header-nav .header-areas .nav-toggle-area, body.cms-all-woven-labels .nav-toggle-area { order: 1 !important; margin-left: auto !important; } } @media (max-width: 1279px) { body.cms-all-woven-labels .header-nav { padding: 0 16px !important; background: #faf7f2 !important; position: relative !important; z-index: 100 !important; min-height: 56px !important; } body.cms-all-woven-labels .header-areas { display: flex !important; align-items: center !important; justify-content: space-between !important; height: 56px !important; } body.cms-all-woven-labels .logo-area { width: auto !important; flex: 0 0 auto !important; } body.cms-all-woven-labels .logo-area .logo img { height: 36px !important; } body.cms-all-woven-labels .navigation-area { display: none !important; } body.cms-all-woven-labels .quote-link-area { display: none !important; } body.cms-all-woven-labels .nav-phone-hours { display: none !important; } body.cms-all-woven-labels .nav-toggle-area { display: flex !important; align-items: center !important; } body.cms-all-woven-labels .menu-toggle a.button { background: transparent !important; color: #4a2d2a !important; box-shadow: none !important; border: none !important; font-size: 24px !important; padding: 6px 10px !important; line-height: 1 !important; } body.cms-all-woven-labels .navigation-area.visible { display: flex !important; flex-direction: column !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: white !important; z-index: 10000 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding: 0 !important; } body.cms-all-woven-labels .navigation-area.visible::before { content: ""; display: block; height: 56px; flex-shrink: 0; border-bottom: 2px solid #EF5732; } body.cms-all-woven-labels .navigation-area.visible .navigation-container { display: flex !important; flex-direction: column !important; padding: 8px 0 !important; } body.cms-all-woven-labels .navigation-area.visible .nav-item { width: 100% !important; border-bottom: 1px solid #f0f0f0 !important; } body.cms-all-woven-labels .navigation-area.visible a.button.nav-tier-1 { width: 100% !important; text-align: left !important; border-radius: 0 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 16px !important; font-weight: 700 !important; padding: 15px 20px !important; background: white !important; color: #4a2d2a !important; box-shadow: none !important; } body.cms-all-woven-labels .navigation-area.visible a.button.nav-tier-1:hover { background: #faf7f2 !important; } body.cms-all-woven-labels .navigation-area.visible ul.subnav, body.cms-all-woven-labels .navigation-area.visible ul.subnav.two-col { position: static !important; display: none !important; column-count: 1 !important; min-width: auto !important; box-shadow: none !important; border: none !important; padding: 0 0 8px 0 !important; background: #faf7f2 !important; border-radius: 0 !important; } body.cms-all-woven-labels .navigation-area.visible .nav-item.open ul.subnav, body.cms-all-woven-labels .navigation-area.visible .nav-item.open ul.subnav.two-col { display: block !important; } body.cms-all-woven-labels .navigation-area.visible ul.subnav a { color: #4a2d2a !important; padding: 12px 20px 12px 32px !important; font-size: 15px !important; display: block !important; } body.cms-all-woven-labels .navigation-area.visible ul.subnav a:hover { background: #f0ebe4 !important; } body.cms-all-woven-labels .navigation-area.visible .subnav-item.rush a { color: #EF5732 !important; font-weight: 700 !important; } body.cms-all-woven-labels.nav-open .menu-open { display: none !important; } body.cms-all-woven-labels.nav-open .menu-close { display: inline-flex !important; } body.cms-all-woven-labels.nav-open { overflow: hidden !important; } } @media (max-width: 1399px) { body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content { padding-bottom: 7vw !important; } } @media (max-width: 1279px) { body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content { padding-bottom: 10vw !important; } } @media (max-width: 1080px) { body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content { padding-top: 4rem !important; padding-bottom: 10vw !important; } } @media (max-width: 1024px) { body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content h1 { font-size: 2.2rem !important; } } @media (max-width: 768px) { body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content h1 { font-size: 1.6rem !important; line-height: 1.2 !important; } body.cms-all-woven-labels .qwl-hero::after, body.cms-all-woven-labels .qwl-hero:after { height: 10vw !important; } body.cms-all-woven-labels .qwl-hero.homepage-hero { margin-bottom: calc(-10vw + 0.5rem) !important; } body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content { padding-bottom: 14vw !important; } body.cms-all-woven-labels .hero-offer { max-width: 280px !important; padding: 14px !important; } body.cms-all-woven-labels .hero-offer .heading { font-size: 1.2rem !important; } body.cms-all-woven-labels .hero-offer ul.hero-checks li { font-size: 13px !important; } body.cms-all-woven-labels .hero-offer .button-container .hero-cta, body.cms-all-woven-labels .hero-offer .button-container .button.hero-cta { font-size: 13px !important; padding: 10px 18px !important; } } @media (max-width: 428px) { body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content h1 { font-size: 1.3rem !important; padding: 0 8px !important; } body.cms-all-woven-labels .hero-offer { max-width: 240px !important; padding: 10px !important; } body.cms-all-woven-labels .hero-offer .heading { font-size: 1rem !important; } body.cms-all-woven-labels .hero-offer ul.hero-checks li { font-size: 11px !important; gap: 4px !important; margin-bottom: 4px !important; } body.cms-all-woven-labels .hero-offer ul.hero-checks li i { font-size: 14px !important; } body.cms-all-woven-labels .hero-offer .button-container .hero-cta, body.cms-all-woven-labels .hero-offer .button-container .button.hero-cta { font-size: 12px !important; padding: 8px 16px !important; } } @media (max-width: 375px) { body.cms-all-woven-labels .qwl-hero.homepage-hero .hero-content h1 { font-size: 1.1rem !important; } body.cms-all-woven-labels .hero-offer { max-width: 210px !important; padding: 8px !important; } body.cms-all-woven-labels .hero-offer ul.hero-checks li { font-size: 10px !important; } body.cms-all-woven-labels .hero-offer .button-container .hero-cta, body.cms-all-woven-labels .hero-offer .button-container .button.hero-cta { font-size: 11px !important; padding: 7px 14px !important; } } @media (max-width: 1024px) { body.cms-all-woven-labels .value-props-row { gap: 2rem !important; } body.cms-all-woven-labels .value-prop span { font-size: 1.3rem !important; } } @media (max-width: 768px) { body.cms-all-woven-labels .value-props-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1.5rem 1rem !important; padding: 1.5rem 1rem !important; } body.cms-all-woven-labels .value-prop { min-width: 0 !important; } body.cms-all-woven-labels .value-prop i { font-size: 2.6rem !important; } body.cms-all-woven-labels .value-prop span { font-size: 1.1rem !important; text-align: center !important; } } @media (max-width: 428px) { body.cms-all-woven-labels .value-props-row { gap: 1rem 0.75rem !important; padding: 1rem 0.75rem !important; } body.cms-all-woven-labels .value-prop i { font-size: 2.2rem !important; } body.cms-all-woven-labels .value-prop span { font-size: 0.95rem !important; } } @media (max-width: 768px) { body.cms-all-woven-labels #qwl-featured-products .featured-products-header .featured-products-footer { max-width: 100% !important; } body.cms-all-woven-labels #qwl-featured-products .featured-products-header .featured-products-footer p { font-size: 15px !important; padding: 0 16px !important; } } @media (max-width: 428px) { body.cms-all-woven-labels #qwl-featured-products .featured-products-header .featured-products-footer p { font-size: 14px !important; padding: 0 12px !important; } } @media (max-width: 1024px) { body.cms-all-woven-labels .featured-products-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 768px) { body.cms-all-woven-labels .featured-products-grid { gap: 16px !important; padding: 0 16px !important; } } @media (max-width: 428px) { body.cms-all-woven-labels .featured-products-grid { gap: 10px !important; padding: 0 12px !important; } body.cms-all-woven-labels .featured-product-info h3 { font-size: 14px !important; } body.cms-all-woven-labels .featured-product-info p { font-size: 12px !important; } } @media (max-width: 768px) { body.cms-all-woven-labels #qwl-featured-products > .wrapper > .featured-products-footer h2, body.cms-all-woven-labels #qwl-featured-products .featured-products-footer h2 { font-size: 1.6rem !important; padding: 0 16px !important; } } @media (max-width: 428px) { body.cms-all-woven-labels #qwl-featured-products > .wrapper > .featured-products-footer h2, body.cms-all-woven-labels #qwl-featured-products .featured-products-footer h2 { font-size: 1.3rem !important; } } @media (max-width: 768px) { body.cms-all-woven-labels #qwl-homepage-categories .carousel-header { padding: 0 16px !important; } body.cms-all-woven-labels #qwl-homepage-categories .carousel-header h2 { font-size: 1.3rem !important; } body.cms-all-woven-labels #qwl-homepage-categories .carousel-header h2 a { font-size: inherit !important; } body.cms-all-woven-labels #qwl-homepage-categories .carousel-header .button { font-size: 11px !important; padding: 6px 12px !important; } body.cms-all-woven-labels #qwl-homepage-categories .wrapper { margin-left: 16px !important; margin-right: 16px !important; } } @media (max-width: 428px) { body.cms-all-woven-labels #qwl-homepage-categories .carousel-header h2 { font-size: 1.15rem !important; } body.cms-all-woven-labels #qwl-homepage-categories .wrapper { margin-left: 12px !important; margin-right: 12px !important; } } @media (max-width: 768px) { body.cms-all-woven-labels #reviews-faq { padding: 2rem 0 !important; } body.cms-all-woven-labels .reviews-faq-grid { padding: 0 16px !important; } body.cms-all-woven-labels .col-header { font-size: 1.4rem !important; } body.cms-all-woven-labels .faq-card button { width: 100% !important; padding: 1rem 1.2rem !important; font-size: 14px !important; } body.cms-all-woven-labels .review-card { padding: 1rem !important; } body.cms-all-woven-labels .review-text { font-size: 14px !important; } } @media (max-width: 428px) { body.cms-all-woven-labels .col-header { font-size: 1.2rem !important; } body.cms-all-woven-labels .faq-card button { font-size: 13px !important; padding: 0.9rem 1rem !important; } body.cms-all-woven-labels .review-text { font-size: 13px !important; } body.cms-all-woven-labels .review-author { font-size: 12px !important; } } @media (max-width: 1024px) { body.cms-all-woven-labels #homepage-sewing-services .ss-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } body.cms-all-woven-labels #homepage-sewing-services #ss-1 { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } body.cms-all-woven-labels #homepage-sewing-services #ss-text { grid-column: 1 / -1 !important; position: relative !important; z-index: 2 !important; background: #faf7f2 !important; padding: 24px !important; } body.cms-all-woven-labels #homepage-sewing-services .image-cell img { width: 100% !important; height: 100% !important; object-fit: cover !important; } } @media (max-width: 768px) { body.cms-all-woven-labels #homepage-sewing-services .ss-grid { grid-template-columns: 1fr 1fr !important; padding: 16px !important; } body.cms-all-woven-labels #homepage-sewing-services #ss-1 { grid-column: 1 / -1 !important; grid-template-columns: repeat(3, 1fr) !important; } body.cms-all-woven-labels #homepage-sewing-services #ss-text { grid-column: 1 / -1 !important; padding: 20px !important; } body.cms-all-woven-labels #homepage-sewing-services #ss-text h2 { font-size: 1.4rem !important; } body.cms-all-woven-labels #homepage-sewing-services #ss-text h2 svg { width: 32px !important; height: 32px !important; } } @media (max-width: 428px) { body.cms-all-woven-labels #homepage-sewing-services .ss-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; padding: 12px !important; } body.cms-all-woven-labels #homepage-sewing-services #ss-1 { grid-template-columns: 1fr 1fr !important; } body.cms-all-woven-labels #homepage-sewing-services #ss-1c { display: none !important; } body.cms-all-woven-labels #homepage-sewing-services #ss-text { padding: 16px !important; } body.cms-all-woven-labels #homepage-sewing-services #ss-text h2 { font-size: 1.2rem !important; gap: 8px !important; } body.cms-all-woven-labels #homepage-sewing-services #ss-text h2 svg { width: 28px !important; height: 28px !important; } body.cms-all-woven-labels #homepage-sewing-services #ss-text p, body.cms-all-woven-labels #homepage-sewing-services #ss-text li { font-size: 14px !important; } } @media (max-width: 428px) { body.cms-all-woven-labels .custom-branding { padding: 32px 0 !important; } body.cms-all-woven-labels .custom-branding h2.section-heading { font-size: 1.5rem !important; padding: 0 12px !important; } body.cms-all-woven-labels .branding-grid { gap: 8px !important; padding: 0 12px !important; } body.cms-all-woven-labels .branding-card .branding-text { padding: 12px 8px !important; } body.cms-all-woven-labels .branding-card .branding-btn { font-size: 11px !important; padding: 6px 14px !important; } body.cms-all-woven-labels .branding-card p { font-size: 11px !important; line-height: 1.4 !important; } } @media (max-width: 1024px) { body.cms-all-woven-labels .v2-quote-inner { margin-left: 30% !important; } } @media (max-width: 768px) { body.cms-all-woven-labels .v2-quote-section { padding: 32px 0 !important; } body.cms-all-woven-labels .v2-quote-inner { margin: 0 16px !important; padding: 24px 20px !important; max-width: none !important; } body.cms-all-woven-labels .v2-quote-inner h2 { font-size: 26px !important; } } @media (max-width: 428px) { body.cms-all-woven-labels .v2-quote-inner { margin: 0 12px !important; padding: 20px 16px !important; } body.cms-all-woven-labels .v2-quote-inner h2 { font-size: 22px !important; } body.cms-all-woven-labels .v2-quote-inner .qf-benefits li { font-size: 13px !important; } body.cms-all-woven-labels .v2-quote-inner .qf-note { font-size: 13px !important; } body.cms-all-woven-labels .qf-submit { font-size: 16px !important; height: 52px !important; } } @media (max-width: 768px) { body.cms-all-woven-labels .discounts-section { padding: 32px 0 !important; } body.cms-all-woven-labels .discounts-section h2 { font-size: 1.6rem !important; padding: 0 16px !important; } body.cms-all-woven-labels .discounts-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 0 16px !important; } body.cms-all-woven-labels .trucker-banner { padding: 0 16px !important; } } @media (max-width: 428px) { body.cms-all-woven-labels .discounts-section h2 { font-size: 1.3rem !important; padding: 0 12px !important; } body.cms-all-woven-labels .discounts-grid { gap: 8px !important; padding: 0 12px !important; } body.cms-all-woven-labels .discount-card .blurb { padding: 12px 8px !important; font-size: 13px !important; } body.cms-all-woven-labels .discount-card .blurb em { font-size: 17px !important; } } @media (max-width: 768px) { body.cms-all-woven-labels #homepage-samples { overflow: hidden !important; } body.cms-all-woven-labels #homepage-samples .wrapper { padding: 20px 16px !important; } body.cms-all-woven-labels #homepage-samples .heading { font-size: 1.6rem !important; } body.cms-all-woven-labels #homepage-samples p { font-size: 0.95rem !important; } } @media (max-width: 428px) { body.cms-all-woven-labels #homepage-samples .heading { font-size: 1.3rem !important; } body.cms-all-woven-labels #homepage-samples p { font-size: 0.85rem !important; } } @media (max-width: 768px) { body.cms-all-woven-labels .seo-section { padding: 32px 0 !important; } body.cms-all-woven-labels .seo-section-title { font-size: 1.8rem !important; } } @media (max-width: 428px) { body.cms-all-woven-labels .seo-section-title { font-size: 1.4rem !important; padding: 0 12px 16px !important; } body.cms-all-woven-labels .seo-row { padding: 0 12px !important; gap: 12px !important; margin-bottom: 24px !important; } body.cms-all-woven-labels .seo-row .seo-text h3 { font-size: 17px !important; } body.cms-all-woven-labels .seo-row .seo-text p { font-size: 13px !important; } } @media (max-width: 768px) { body.cms-all-woven-labels #homepage-footer .wrapper { padding: 24px 16px !important; } body.cms-all-woven-labels #homepage-footer .wrapper > p:first-child, body.cms-all-woven-labels #homepage-footer .wrapper p[style*="2.5rem"] { font-size: 1.6rem !important; } body.cms-all-woven-labels #homepage-footer .buttons { flex-direction: column !important; gap: 12px !important; width: 100% !important; } body.cms-all-woven-labels #homepage-footer .buttons .button { width: 100% !important; text-align: center !important; display: block !important; } } @media (max-width: 428px) { body.cms-all-woven-labels #homepage-footer .wrapper > p:first-child, body.cms-all-woven-labels #homepage-footer .wrapper p[style*="2.5rem"] { font-size: 1.3rem !important; } } @media (max-width: 768px) { body.cms-all-woven-labels #homepage-instagram { padding: 0 16px !important; overflow: hidden !important; } body.cms-all-woven-labels #homepage-instagram h2 { font-size: 1.3rem !important; } body.cms-all-woven-labels #homepage-instagram h2 a { font-size: inherit !important; } } @media (max-width: 1024px) { body.cms-all-woven-labels .page-footer .footer-middle .container .row { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; } body.cms-all-woven-labels .page-footer .footer-middle .container .row > .col-lg-4 { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; } } @media (max-width: 768px) { body.cms-all-woven-labels .page-footer .footer-middle .container { padding: 0 16px !important; } body.cms-all-woven-labels .page-footer .footer-middle .container .row { grid-template-columns: 1fr 1fr !important; gap: 20px 16px !important; } body.cms-all-woven-labels .page-footer .footer-middle .container .row > .col-lg-4 { min-width: 0 !important; } body.cms-all-woven-labels .page-footer h2.footer-menu-item-title { font-size: 15px !important; margin-bottom: 8px !important; } body.cms-all-woven-labels .page-footer .footer-menu-item { margin-bottom: 2px !important; } body.cms-all-woven-labels .page-footer .footer-menu-item a, body.cms-all-woven-labels .page-footer .footer-text-item span, body.cms-all-woven-labels .page-footer .footer-text-item a { font-size: 13px !important; } body.cms-all-woven-labels .page-footer .block.newsletter input { font-size: 14px !important; padding: 8px 12px !important; } body.cms-all-woven-labels .page-footer .block.newsletter .actions button { font-size: 13px !important; padding: 8px 16px !important; } body.cms-all-woven-labels .page-footer ~ div, body.cms-all-woven-labels footer > div:last-child { font-size: 12px !important; padding: 16px 12px !important; } body.cms-all-woven-labels .page-footer .accepted-payment-types img { max-width: 100% !important; height: auto !important; } } @media (max-width: 428px) { body.cms-all-woven-labels .page-footer .footer-middle .container { padding: 0 12px !important; } body.cms-all-woven-labels .page-footer .footer-middle .container .row { gap: 16px 12px !important; } body.cms-all-woven-labels .page-footer h2.footer-menu-item-title { font-size: 14px !important; } body.cms-all-woven-labels .page-footer .footer-menu-item a, body.cms-all-woven-labels .page-footer .footer-text-item span, body.cms-all-woven-labels .page-footer .footer-text-item a { font-size: 12px !important; line-height: 1.6 !important; } body.cms-all-woven-labels .page-footer .footer_newsletter_text { font-size: 12px !important; } body.cms-all-woven-labels .page-footer .footer_newsletter_text br { display: none; } } @media (max-width: 375px) { body.cms-all-woven-labels .page-footer h2.footer-menu-item-title { font-size: 13px !important; } body.cms-all-woven-labels .page-footer .footer-menu-item a, body.cms-all-woven-labels .page-footer .footer-text-item span, body.cms-all-woven-labels .page-footer .footer-text-item a { font-size: 11px !important; } } /* --- all-patches --- */ @font-face {font-family:"Neulis Alt";src:url("fonts/NeulisAlt-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;} @font-face {font-family:"Neulis Alt";src:url("fonts/NeulisAlt-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;} @font-face {font-family:"Neulis Alt";src:url("fonts/NeulisAlt-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;} @font-face {font-family:"Neulis Alt";src:url("fonts/NeulisAlt-MediumItalic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap;} @font-face {font-family:"Neulis Alt";src:url("fonts/NeulisAlt-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;} @font-face {font-family:"Neulis Alt";src:url("fonts/NeulisAlt-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;} @font-face {font-family:"Neulis Alt";src:url("fonts/NeulisAlt-BoldItalic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap;} @media screen and (min-width: 1280px) { body.cms-all-patches a.button.nav-tier-1 { background: linear-gradient(135deg, #EF5732, #ff7a5c) !important; box-shadow: 0 2px 8px rgba(239,87,50,0.25); transition: all 0.2s ease !important; border: none !important; } body.cms-all-patches a.button.nav-tier-1:hover, body.cms-all-patches .nav-item:hover a.button.nav-tier-1 { box-shadow: 0 4px 16px rgba(239,87,50,0.4); transform: translateY(-1px); } body.cms-all-patches .nav-item:not(.no-subnav):hover a.button.nav-tier-1:not(.childless), body.cms-all-patches a.button.nav-tier-1:not(.childless):hover { background: linear-gradient(135deg, #EF5732, #ff7a5c) !important; border-radius: 1.5rem 1.5rem 0 0 !important; box-shadow: 0 -2px 12px rgba(239,87,50,0.2); transform: none; } body.cms-all-patches .nav-item:not(.no-subnav):hover::after { background: linear-gradient(135deg, #EF5732, #ff7a5c) !important; height: 1rem; z-index: 101; } body.cms-all-patches .nav-item:hover ul.subnav, body.cms-all-patches ul.subnav:hover, body.cms-all-patches .nav-tier-1.active ~ ul.subnav { background: white !important; border-radius: 0 0.75rem 0.75rem 0.75rem !important; box-shadow: 0 12px 32px rgba(0,0,0,0.12) !important; padding: 6px 0 !important; border: 1px solid #f0ebe6; border-top: none; } body.cms-all-patches ul.subnav li { padding: 0 !important; } body.cms-all-patches ul.subnav a { color: #4a2d2a !important; padding: 9px 20px !important; display: block; transition: all 0.15s; font-weight: 400 !important; } body.cms-all-patches ul.subnav a:hover { background: #fef5f0 !important; color: #EF5732 !important; padding-left: 24px !important; opacity: 1 !important; } body.cms-all-patches .subnav-item.rush { display: flex !important; align-items: center; white-space: nowrap; border-top: 1px solid #f0ebe6; margin-top: 4px; padding-top: 4px; } body.cms-all-patches .subnav-item.rush a { color: #EF5732 !important; font-weight: 700 !important; display: inline !important; padding: 9px 6px 9px 20px !important; border-top: none !important; margin-top: 0 !important; } body.cms-all-patches .subnav-item.rush .fa-arrow-right { color: #EF5732; font-size: 11px; flex-shrink: 0; } body.cms-all-patches ul.subnav.two-col { column-count: 2 !important; column-gap: 0 !important; min-width: 420px !important; } body.cms-all-patches ul.subnav.two-col li { break-inside: avoid !important; } body.cms-all-patches ul.subnav.two-col li.subnav-item.rush:last-child { column-span: all !important; } body.cms-all-patches .quote-link-area a.button.gold { background: linear-gradient(135deg, #ECAA00, #f0c040) !important; color: #4a2d2a !important; box-shadow: 0 2px 8px rgba(236,170,0,0.3); border: none !important; transition: all 0.2s; } body.cms-all-patches .quote-link-area a.button.gold:hover { box-shadow: 0 4px 16px rgba(236,170,0,0.5); transform: translateY(-1px); } body.cms-all-patches .quote-link-area { display: flex !important; align-items: center !important; gap: 16px !important; } body.cms-all-patches .nav-phone-hours { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } body.cms-all-patches .nav-phone { color: #4a2d2a !important; font-size: 14px; text-decoration: none !important; font-weight: 400; letter-spacing: 0.2px; } body.cms-all-patches .nav-phone strong { font-weight: 700; } body.cms-all-patches .nav-phone i { font-size: 12px; color: #EF5732; } body.cms-all-patches .nav-availability { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #666; } body.cms-all-patches .availability-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; box-shadow: 0 0 4px rgba(34,197,94,0.5); animation: pulse-dot 2s infinite; } @keyframes all-patches-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } body.cms-all-patches .availability-text { font-weight: 500; color: #555; } } @media screen and (min-width: 1280px) and (max-width: 1399px) { body.cms-all-patches a.button.nav-tier-1 { font-size: 12px !important; padding: 8px 12px !important; white-space: nowrap !important; } body.cms-all-patches .quote-link-area a.button.gold { font-size: 12px !important; padding: 8px 12px !important; white-space: nowrap !important; } body.cms-all-patches .quote-link-area a.button.gold svg { width: 14px !important; height: 14px !important; } body.cms-all-patches .nav-phone-hours { gap: 1px !important; } body.cms-all-patches .nav-phone { font-size: 12px !important; } body.cms-all-patches .nav-availability { font-size: 10px !important; } body.cms-all-patches .navigation-container { gap: 4px !important; } body.cms-all-patches .header-areas { gap: 8px !important; } } @media screen and (min-width: 1280px) and (max-width: 1319px) { body.cms-all-patches a.button.nav-tier-1 { font-size: 11px !important; padding: 7px 9px !important; } body.cms-all-patches .quote-link-area a.button.gold { font-size: 11px !important; padding: 7px 9px !important; } body.cms-all-patches .quote-link-area { gap: 8px !important; } body.cms-all-patches .nav-phone { font-size: 11px !important; } } @media screen and (max-width: 1024px) { body.cms-all-patches .qwl-hero.homepage-hero .hero-image img { top: 0 !important; bottom: 6vw !important; left: 50% !important; transform: translateX(-50%) !important; width: auto !important; height: calc(100% - 6vw) !important; min-width: 100% !important; min-height: calc(100% - 6vw) !important; object-fit: cover !important; object-position: center bottom !important; } } @media screen and (min-width:600px) { body.cms-all-patches .qwl-hero .hero-content {padding:12rem 1rem 4rem} body.cms-all-patches .specials-grid {grid-template-columns:1fr 1fr} body.cms-all-patches .qwl-other-products .content .label {font-size:1.5rem} } @media screen and (min-width:800px) { body.cms-all-patches .banner-container {display:block} body.cms-all-patches .top-header-areas {align-items:center;display:grid;grid-template-columns:1fr auto} body.cms-all-patches .banner a {color:var(--gold);font-weight:600;text-transform:uppercase} body.cms-all-patches .header-areas {align-items:center;grid-template-areas:"logo quote toggle" "nav nav nav";grid-gap:1rem;grid-template-columns:1fr auto auto;justify-content:start} body.cms-all-patches .header-areas .quote-link-area {display:flex;justify-self:end} body.cms-all-patches .header-areas .logo-area>a {display:block;width:auto;justify-self:start} body.cms-all-patches .logo img {height:4rem} body.cms-all-patches .qwl-hero .hero-content {margin:0 auto;padding:12rem 1rem 4rem} body.cms-all-patches .featured-products-grid {grid-template-columns:1fr 1fr} body.cms-all-patches ul.scrollbar-carousel .label span {opacity:0;transition:opacity .25s linear 0s} body.cms-all-patches ul.scrollbar-carousel li:hover .label span {opacity:1} body.cms-all-patches .ss-grid {grid-template-columns:1fr 1fr 1fr;grid-template-areas:"ss-2a ss-3 ss-4" "ss-2b ss-text ss-text" "ss-2c ss-text ss-text" "ss-2d ss-5 ss-5"} body.cms-all-patches .ss-grid #ss-2a, body.cms-all-patches .ss-grid #ss-2b, body.cms-all-patches .ss-grid #ss-2c, body.cms-all-patches .ss-grid #ss-2d {display:block;height:100%} body.cms-all-patches .custom-branding-categories {grid-template-columns:1fr 1fr} body.cms-all-patches #homepage-quote form {grid-template-columns:1fr 1fr} body.cms-all-patches #homepage-quote #products_list, body.cms-all-patches #homepage-quote #width_height, body.cms-all-patches #homepage-quote #quantity_list, body.cms-all-patches .g-recaptcha, body.cms-all-patches .buttons-set, body.cms-all-patches #discuss_project_group {grid-column:1/span 2} body.cms-all-patches #homepage-quote .quote-form-column {margin-left:33.33%;width:66.66%} body.cms-all-patches #homepage-quote .background-image img {object-position:center} body.cms-all-patches .specials-banner .content-areas {align-items:center;grid-template-columns:1fr 1fr} body.cms-all-patches .specials-banner .content-areas h3 {font-size:2.5em} body.cms-all-patches #homepage-samples .wrapper {margin:1rem auto;max-width:600px} body.cms-all-patches .footer .container .row {grid-template-columns:1fr 1fr 1fr} body.cms-all-patches .footer .newsletter {grid-column:2/span 2} } @media screen and (min-width:1080px) { body.cms-all-patches .footer .container .row {display:flex;flex-wrap:wrap;gap:1rem} body.cms-all-patches .footer-middle .block.newsletter .form.subscribe {max-width:300px} body.cms-all-patches .qwl-hero .hero-image img {position:relative} body.cms-all-patches .qwl-hero .hero-content {left:50%;max-width:600px;padding:0;position:absolute;top:58%;translate:-50% -50%} body.cms-all-patches .qwl-hero.homepage-hero .hero-content {top:50%} body.cms-all-patches .qwl-hero.category-hero .hero-content {max-width:900px} body.cms-all-patches .qwl-hero:after {top:100%} body.cms-all-patches .featured-products-grid {grid-template-columns:repeat(4,1fr)} body.cms-all-patches #qwl-homepage-categories .carousel-header~div div:nth-of-type(2) div {opacity:0 !important;transition:opacity .5s linear 0s} body.cms-all-patches #qwl-homepage-categories .wrapper:hover .carousel-header~div div:nth-of-type(2) div {opacity:1 !important} body.cms-all-patches .custom-branding-categories {grid-template-columns:repeat(4,1fr);margin-top:4rem} body.cms-all-patches #homepage-quote .quote-form-column {margin-left:50%;width:50%} body.cms-all-patches #homepage-quote .background-image img {object-position:25%} body.cms-all-patches .specials-grid {grid-template-columns:repeat(4,1fr)} body.cms-all-patches .specials-banner {padding:2rem} body.cms-all-patches .specials-banner .content-areas {align-items:center;display:flex;justify-content:space-between} body.cms-all-patches .specials-banner .content-areas h3 {max-width:50%} body.cms-all-patches #homepage-samples .wrapper {background-color:transparent} body.cms-all-patches .seo-columns {align-items:center;display:flex;gap:2rem} body.cms-all-patches .seo-columns .image-column {min-width:55%} body.cms-all-patches #homepage-seo .seo-columns:nth-of-type(even) .image-column {order:2} body.cms-all-patches .qwl-hero {min-height:65vh} body.cms-all-patches .hero-image {height:100%;position:absolute;width:100%} } @media screen and (min-width:1280px) { body.cms-all-patches .top-header-areas {grid-template-columns:1fr auto 1fr} body.cms-all-patches .google-rating-container {display:block} body.cms-all-patches .google-rating-container img {display:block;max-height:2rem} body.cms-all-patches .header-areas {grid-template-areas:"logo nav quote";grid-gap:1rem;grid-template-columns:auto 1fr auto} body.cms-all-patches .header-areas .nav-toggle-area {display:none} body.cms-all-patches .navigation-container, body.cms-all-patches:not(.menu-active) .navigation-container {display:flex;gap:1rem;max-height:unset;justify-content:center;overflow:visible;padding-right:0;position:relative;transition:none;width:100%} body.cms-all-patches ul.subnav {border-radius:0 .5rem .5rem;top:100%;position:absolute;transition:none;width:100%} body.cms-all-patches a.button.nav-tier-1 {font-size:1rem;width:auto} body.cms-all-patches .navigation-container .nav-item {position:relative} body.cms-all-patches .nav-tier-1.active~ul.subnav, body.cms-all-patches .nav-item:hover ul.subnav, body.cms-all-patches ul.subnav:hover {margin-top:1rem;max-height:unset;overflow:visible;transition:none;width:fit-content} body.cms-all-patches .nav-tier-1:not(.childless).active:after, body.cms-all-patches .nav-item:not(.no-subnav):hover:after {background-color:var(--pink);content:" ";height:1rem;left:0;position:absolute;bottom:-1rem;width:100%} body.cms-all-patches a.button.nav-tier-1:not(.childless):hover, body.cms-all-patches .nav-item:hover a.button.nav-tier-1:not(.childless) {background-color:var(--pink);border:0;border-radius:1.5rem 1.5rem 0 0;transition:none} body.cms-all-patches .quote-link-area a.button {font-size:1rem} body.cms-all-patches .navigation-container .nav-item:not(:first-of-type) {margin-top:0} body.cms-all-patches .subnav-item {margin:0} body.cms-all-patches .subnav-item a {font-size:1rem;white-space:nowrap} body.cms-all-patches a.button.nav-tier-1 {transition:none} body.cms-all-patches .footer .container .row {flex-wrap:nowrap} body.cms-all-patches .ss-grid {grid-template-columns:1fr 1fr 1fr 1fr;grid-template-areas:"ss-1 ss-2a ss-3 ss-4" "ss-1 ss-2b ss-text ss-text" "ss-1 ss-2c ss-text ss-text" "ss-1 ss-2d ss-5 ss-5"} body.cms-all-patches .ss-grid #ss-1 {grid-area:ss-1;height:100%} body.cms-all-patches .ss-grid #ss-1a {display:block;height:calc(35% - 1rem);margin-bottom:1rem} body.cms-all-patches .ss-grid #ss-1b {display:block;height:30%} body.cms-all-patches .ss-grid #ss-1c {display:block;height:calc(35% - 1rem);margin-top:1rem} body.cms-all-patches .phone-number {text-align:right} body.cms-all-patches .qwl-hero .hero-image {height:100%;width:100%} body.cms-all-patches .qwl-hero .hero-image img {position:absolute} body.cms-all-patches .qwl-hero .hero-content {bottom:auto;top:65%;translate:-50% -50%} body.cms-all-patches .qwl-hero.homepage-hero .hero-content {bottom:auto;top:50%;translate:-50% -50%} body.cms-all-patches .qwl-hero .hero-offer {padding:1rem 3rem} body.cms-all-patches .qwl-hero.category-hero .hero-content {max-width:80vw;width:100%} body.cms-all-patches .featured-promo .promo-title h3 {font-size:2.5rem} } @media screen and (min-width:1400px) { body.cms-all-patches .footer .container .row {gap:2rem} body.cms-all-patches .qwl-hero .hero-content h1 {font-size:3rem} body.cms-all-patches .qwl-hero.category-hero .hero-content h1 {font-size:3.5rem} body.cms-all-patches .qwl-hero .hero-content .hero-text, body.cms-all-patches .qwl-hero .hero-content a.button {font-size:1.5rem} body.cms-all-patches #homepage-sewing-services h2 {font-size:4rem} body.cms-all-patches #homepage-sewing-services #ss-text {padding:2rem} body.cms-all-patches .custom-branding-categories {gap:2rem;padding-bottom:6rem} body.cms-all-patches #homepage-quote {overflow:hidden} body.cms-all-patches #homepage-quote .background-image img {object-position:left;scale:110%} body.cms-all-patches #homepage-quote .background-image {left:0;right:auto;width:100%} body.cms-all-patches .specials-banner .content-areas .area-2 {font-size:1.5em} body.cms-all-patches #homepage-samples .wrapper {margin:3rem auto} body.cms-all-patches #homepage-samples .wrapper .heading {font-size:2.5em} body.cms-all-patches .qwl-hero {min-height:75vh} body.cms-all-patches .qwl-hero.category-hero {min-height:85vh} body.cms-all-patches .qwl-hero .hero-offer .heading {font-size:3rem} body.cms-all-patches .qwl-hero .hero-offer .subheading {font-size:2rem} body.cms-all-patches .featured-promo .promo-title h3 {font-size:3rem} body.cms-all-patches .featured-promo .promo-text-col h4 {font-size:1.75rem} body.cms-all-patches .featured-promo .promo-text-col p {font-size:1.25rem} body.cms-all-patches .featured-promo .promo-text-col ul {font-size:1.25rem} } @media screen and (min-width:1600px) { body.cms-all-patches .qwl-hero.category-hero .hero-content h1 {font-size:4rem} body.cms-all-patches .qwl-hero.homepage-hero .hero-content {padding:0} body.cms-all-patches .qwl-hero.homepage-hero .hero-content h1 {font-size:3rem} body.cms-all-patches .qwl-hero.homepage-hero {min-height:50vw} } @media screen and (min-width:1800px) { body.cms-all-patches .qwl-hero.category-hero {min-height:75vh} body.cms-all-patches .qwl-hero.category-hero .hero-content h1 {font-size:4rem} body.cms-all-patches .qwl-hero.homepage-hero .hero-content h1 {font-size:3rem} } @media screen and (min-width:2400px) { body.cms-all-patches .qwl-hero.category-hero {min-height:80vh} body.cms-all-patches .qwl-hero.category-hero .hero-content {max-width:unset} body.cms-all-patches .qwl-hero .hero-content h1 {font-size:4rem} body.cms-all-patches .qwl-hero.category-hero .hero-content h1 {font-size:5rem} body.cms-all-patches .qwl-hero.category-hero .hero-content .heading {font-size:4rem} body.cms-all-patches .qwl-hero.category-hero .hero-content .subheading {font-size:3rem} body.cms-all-patches .qwl-hero.category-hero .hero-content .bullets {font-size:1.5rem} body.cms-all-patches .qwl-hero .hero-content .hero-text, body.cms-all-patches .qwl-hero .hero-content a.button {font-size:2rem} body.cms-all-patches #homepage-sewing-services {margin:1rem auto;max-width:1900px} body.cms-all-patches #homepage-sewing-services #ss-text {padding:6rem} body.cms-all-patches .specials-grid .blurb {font-size:2rem} body.cms-all-patches .specials-banner .content-areas .area-2 {max-width:25%} body.cms-all-patches .specials-banner .content-areas h3 {font-size:4em;max-width:35%} body.cms-all-patches #homepage-samples .wrapper {font-size:1.5rem;margin:6rem auto;max-width:900px} body.cms-all-patches #homepage-samples .wrapper .heading {font-size:2em} } @media only screen and (max-width:575px) { body.cms-all-patches.account .account-nav .nav.items>li.nav.item, body.cms-all-patches.account .account-nav .nav.items>li.nav.item.current {font-size:15px;padding:2px 10px 4px} } @media only screen and (max-width:575px) { body.cms-all-patches.account table#my-pending-approvals td {display:block} body.cms-all-patches.account table#my-pending-approvals td:nth-child(1) {border-bottom:none;padding-bottom:0} body.cms-all-patches.account table#my-pending-approvals td:nth-child(2) {padding-top:0} body.cms-all-patches.account table#my-pending-approvals td.artwork {padding-bottom:10px} } @media only screen and (min-width:992px) { body.cms-all-patches.account table#my-pending-approvals td.artwork button {font-size:1.2em} } @media only screen and (min-width:1000px) { body.cms-all-patches.account .columns .sidebar-main {flex:1} body.cms-all-patches.account .columns .column.main {flex:3} } @media only screen and (min-width:1199px) { body.cms-all-patches.account .columns .sidebar-main {flex:1} body.cms-all-patches.account .columns .column.main {flex:4} } @media screen and (min-width:1730px) { body.cms-all-patches .expert-tips {padding-bottom:2rem} body.cms-all-patches ul.expert-tips-grid li {flex-basis:450px} } @container (min-width:600px) and (max-width:799px) { body.cms-all-patches .best-sellers .label-grid {grid-template-columns:1fr 1fr} body.cms-all-patches .best-sellers .label-grid .label-card:first-of-type {grid-column:1/span 2;padding-top:50%} } @container (min-width:800px) { body.cms-all-patches .best-sellers .label-grid {grid-template-columns:1fr 1fr 1fr} } @media screen and (min-width:800px) { body.cms-all-patches .qwl-category-products {grid-template-columns:1fr 1fr} body.cms-all-patches .qwl-category-products:not(.featured-product) .blurb {text-align:left} body.cms-all-patches .qwl-split-section .columns {gap:2rem;grid-template-columns:50% 50%} body.cms-all-patches .qwl-split-section .columns:after {background:#fff url("/pub/media/qwl2025/checker-border-flesh-vertical.svg") center left repeat-y;content:" ";display:block;left:calc(50% - .25rem);height:calc(100% - 1rem);position:absolute;width:.5rem;top:.5rem;visibility:visible;z-index:1} body.cms-all-patches .featured-promo {grid-template-columns:1fr 1fr} body.cms-all-patches .featured-promo .promo-image-col, body.cms-all-patches .featured-promo:before {height:100%;padding-top:0} body.cms-all-patches .featured-promo .promo-image-col>img {object-fit:contain} body.cms-all-patches .qwl-other-products .content .label {font-size:1rem} body.cms-all-patches .qwl-other-products>a {max-width:calc(100% - 2rem)} body.cms-all-patches .reviews-widget {max-width:90%} body.cms-all-patches .qwl-category-reviews .buttons img {max-width:100px} body.cms-all-patches.qwl .qwl-category-reviews h2 {font-size:1.5rem} body.cms-all-patches .qwl-category-reviews .buttons {grid-template-columns:auto auto} } @media screen and (min-width:1080px) { body.cms-all-patches .qwl-category-products {margin:0 auto} body.cms-all-patches .qwl-category-products .image {padding-top:15rem} body.cms-all-patches .qwl-category-products .blurb {font-size:1.25em;font-weight:300} body.cms-all-patches .qwl-category-products {grid-template-columns:repeat(3,1fr)} body.cms-all-patches .qwl-category-reviews .buttons img {max-width:150px} } @media screen and (min-width:1200px) { body.cms-all-patches .qwl-category-products {grid-template-columns:repeat(4,1fr)} body.cms-all-patches .qwl-other-products .content .label {font-size:1.5rem} body.cms-all-patches.qwl .qwl-category-reviews h2 {font-size:2rem} } @media screen and (min-width:1400px) { body.cms-all-patches .featured-promo {grid-template-columns:60% 1fr} body.cms-all-patches .featured-promo.reversed {grid-template-columns:1fr 60%} body.cms-all-patches.qwl .best-sellers h2 {font-size:3rem} body.cms-all-patches .best-sellers .label-grid .label-card .heading h3 {font-size:2rem} body.cms-all-patches .best-sellers .label-grid .label-card .subheading {font-size:1.5rem} body.cms-all-patches .best-sellers .label-grid .label-card .tag {font-size:1.5rem} body.cms-all-patches .qwl-split-section .columns {max-width:1400px;width:calc(100vw - 4rem)} } @media screen and (min-width:1800px) { body.cms-all-patches .qwl-hero.homepage-hero .hero-content {max-width:unset;width:100%} body.cms-all-patches .qwl-hero.homepage-hero .hero-content h1 {font-size:3rem} body.cms-all-patches .qwl-hero .hero-offer .heading {font-size:2.5rem} body.cms-all-patches .qwl-other-products .content .label {font-size:2rem} body.cms-all-patches.qwl .qwl-category-reviews h2 {font-size:2.5rem} body.cms-all-patches .qwl-other-products .content .button {font-size:1.5rem} } @media screen and (min-width:2400px) { body.cms-all-patches .qwl-hero.homepage-hero {min-height:40vw} } @media (max-width: 480px) { body.cms-all-patches .qwl-hero.category-hero .hero-content h1 { font-size: 1.5rem !important; } } @media screen and (max-width: 1024px) { body.cms-all-patches .qwl-hero.homepage-hero .hero-image img { top: 0 !important; bottom: 6vw !important; left: 50% !important; transform: translateX(-50%) !important; width: auto !important; height: calc(100% - 6vw) !important; min-width: 100% !important; min-height: calc(100% - 6vw) !important; object-fit: cover !important; object-position: center bottom !important; } } @media (max-width: 1399px) { body.cms-all-patches .qwl-hero.homepage-hero .hero-content { padding-bottom: 7vw !important; } } @media (max-width: 1279px) { body.cms-all-patches .qwl-hero.homepage-hero .hero-content { padding-bottom: 10vw !important; } } @media (max-width: 1080px) { body.cms-all-patches .qwl-hero.homepage-hero .hero-content { padding-top: 4rem !important; padding-bottom: 10vw !important; } } @media (max-width: 1024px) { body.cms-all-patches .qwl-hero.homepage-hero .hero-content h1 { font-size: 2.2rem !important; } } @media (max-width: 768px) { body.cms-all-patches .qwl-hero.homepage-hero .hero-content h1 { font-size: 1.6rem !important; line-height: 1.2 !important; } body.cms-all-patches .qwl-hero::after, body.cms-all-patches .qwl-hero:after { height: 10vw !important; } body.cms-all-patches .qwl-hero.homepage-hero { margin-bottom: calc(-10vw + 0.5rem) !important; } body.cms-all-patches .qwl-hero.homepage-hero .hero-content { padding-bottom: 14vw !important; } body.cms-all-patches .hero-offer { max-width: 280px !important; padding: 14px !important; } body.cms-all-patches .hero-offer .heading { font-size: 1.2rem !important; } body.cms-all-patches .hero-offer ul.hero-checks li { font-size: 13px !important; } body.cms-all-patches .hero-offer .button-container .hero-cta { font-size: 13px !important; padding: 10px 18px !important; } } @media (max-width: 428px) { body.cms-all-patches .qwl-hero.homepage-hero .hero-content h1 { font-size: 1.3rem !important; padding: 0 8px !important; } body.cms-all-patches .hero-offer { max-width: 240px !important; padding: 10px !important; } body.cms-all-patches .hero-offer .heading { font-size: 1rem !important; } body.cms-all-patches .hero-offer ul.hero-checks li { font-size: 11px !important; gap: 4px !important; margin-bottom: 4px !important; } body.cms-all-patches .hero-offer ul.hero-checks li i { font-size: 14px !important; } body.cms-all-patches .hero-offer .button-container .hero-cta { font-size: 12px !important; padding: 8px 16px !important; } } @media (max-width: 375px) { body.cms-all-patches .qwl-hero.homepage-hero .hero-content h1 { font-size: 1.1rem !important; } body.cms-all-patches .hero-offer { max-width: 210px !important; padding: 8px !important; } body.cms-all-patches .hero-offer ul.hero-checks li { font-size: 10px !important; } body.cms-all-patches .hero-offer .button-container .hero-cta { font-size: 11px !important; padding: 7px 14px !important; } } body.cms-all-patches .best-sellers { padding-top: 0 !important; position: relative; z-index: 5; } body.cms-all-patches.qwl .best-sellers h2 { margin-top: 0.5rem !important; margin-bottom: 2rem !important; } @media (min-width: 1080px) and (max-width: 1399px) { body.cms-all-patches .qwl-hero.homepage-hero { min-height: 580px !important; } } @media (max-width: 1079px) { body.cms-all-patches .qwl-hero.homepage-hero { min-height: 500px !important; } } body.cms-all-patches .best-sellers .label-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1.5rem !important; } body.cms-all-patches .best-sellers .label-grid .label-card { border-radius: 0.75rem !important; overflow: hidden !important; padding-top: 0 !important; position: relative; z-index: 5; height: auto !important; box-shadow: 0 2px 12px rgba(0,0,0,0.07); transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; background: #faf7f2 !important; } body.cms-all-patches .best-sellers .label-grid .label-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); } body.cms-all-patches .best-sellers .label-grid .label-card img.label-image { position: relative !important; top: auto !important; left: auto !important; translate: none !important; width: 100% !important; height: 350px !important; object-fit: cover !important; object-position: top center !important; scale: 1 !important; transition: scale 0.3s ease !important; display: block !important; order: 1; } body.cms-all-patches .best-sellers .label-grid .label-card:hover img.label-image { scale: 1.05 !important; } body.cms-all-patches .best-sellers .label-grid .label-card .label-card-content { position: static !important; height: auto !important; display: block; padding: 0.75rem 1rem !important; background: #faf7f2 !important; order: 2; } body.cms-all-patches .best-sellers .label-grid .label-card .heading { position: static !important; background: none !important; padding: 0 !important; text-align: left !important; width: auto !important; top: auto !important; } body.cms-all-patches .best-sellers .label-grid .label-card .heading h3 { color: #4a2d2a !important; font-size: 1.75rem !important; font-weight: 700 !important; margin: 0 !important; } body.cms-all-patches .best-sellers .label-grid .label-card .heading span { display: block !important; color: #EF5732 !important; font-size: 0.9rem !important; font-weight: 600 !important; margin-top: 0.2rem !important; } body.cms-all-patches .best-sellers .label-grid .label-card .subheading { position: absolute !important; top: 0.75rem !important; left: 0.75rem !important; z-index: 10 !important; background: rgba(250,247,242,0.95) !important; border: 1px solid #ede6d6 !important; color: #4a2d2a !important; font-size: 0.8rem !important; font-weight: 600 !important; padding: 0.35rem 0.75rem !important; border-radius: 2rem !important; display: inline-flex !important; width: fit-content !important; justify-content: flex-start !important; backdrop-filter: blur(4px); line-height: normal !important; } body.cms-all-patches .best-sellers .label-grid .label-card .subheading-2 { top: 3rem !important; } body.cms-all-patches .best-sellers .label-grid .label-card .tag { display: none !important; } body.cms-all-patches .best-sellers .label-grid .label-card:nth-of-type(2) .heading, body.cms-all-patches .best-sellers .label-grid .label-card:nth-of-type(2) .tag, body.cms-all-patches .best-sellers .label-grid .label-card:nth-of-type(3) .heading, body.cms-all-patches .best-sellers .label-grid .label-card:nth-of-type(3) .tag { background: none !important; } @media (max-width: 768px) { body.cms-all-patches .best-sellers .label-grid { grid-template-columns: 1fr !important; } } body.cms-all-patches .cotton-card { border-radius: 1rem !important; overflow: hidden !important; box-shadow: 0 8px 32px rgba(74,45,42,0.15); height: auto !important; padding-top: 0 !important; } body.cms-all-patches .cotton-card a { display: block; color: var(--brown); text-decoration: none; } body.cms-all-patches .cotton-card-img { position: relative; overflow: hidden; } body.cms-all-patches .cotton-card-img img { display: block; width: 100%; height: auto; transition: scale 0.5s ease; } body.cms-all-patches .cotton-card:hover .cotton-card-img img { scale: 1.05; } body.cms-all-patches .promo-pills-overlay { position: absolute; top: 0.75rem; left: 0.75rem; display: flex; gap: 0.5rem; flex-wrap: wrap; z-index: 2; } body.cms-all-patches .promo-pills-overlay .promo-pill { background: rgba(250,247,242,0.95); border: 1px solid #ede6d6; border-radius: 2rem; padding: 0.35rem 0.75rem; font-size: 0.8rem; font-weight: 600; color: #4a2d2a; backdrop-filter: blur(4px); } body.cms-all-patches .cotton-card-body { background: #faf7f2; padding: 1rem 1.25rem; text-align: left; } body.cms-all-patches .cotton-card-body h3 { font-size: 1.75rem; font-weight: 700; color: var(--brown); margin: 0 0 0.35rem; } body.cms-all-patches .cotton-card-price { font-size: 0.9rem; font-weight: 600; color: var(--orange); } @media screen and (min-width: 1400px) { body.cms-all-patches .cotton-card-body h3 { font-size: 1.75rem; } } body.cms-all-patches .qwl-hero .hero-offer { background: none !important; border: none !important; border-radius: 0 !important; position: relative !important; padding: 1rem 3.5rem 1.25rem !important; width: 90% !important; max-width: 680px !important; box-sizing: border-box !important; isolation: isolate !important; } @media (max-width: 768px) { body.cms-all-patches .qwl-hero .hero-offer { max-width: calc(100% - 2rem) !important; padding: 1rem 1.5rem 1.25rem !important; } } body.cms-all-patches .blog-tips-section, body.cms-all-patches #homepage-instagram, body.cms-all-patches #homepage-samples, body.cms-all-patches #homepage-footer { background-color: #faf7f2; } body.cms-all-patches .qwl-category-products .heading { background-color: #faf7f2 !important; color: #4a2d2a !important; border-radius: 0 !important; display: block !important; padding: 0.75rem 1rem !important; order: 2; } body.cms-all-patches .qwl-category-products .heading h3 { font-size: 1.5rem !important; font-weight: 700 !important; color: #4a2d2a !important; text-align: left !important; } body.cms-all-patches .qwl-category-products .tag { background-color: #faf7f2 !important; color: #EF5732 !important; position: static !important; border-radius: 0 !important; display: block !important; padding: 0 1rem 0.75rem !important; font-size: 0.9rem !important; font-weight: 600 !important; text-align: left !important; order: 3; } body.cms-all-patches .review-card { background: #faf7f2; } body.cms-all-patches .qwl-other-products > a, body.cms-all-patches .review-card, body.cms-all-patches .faq-card { box-shadow: 0 4px 16px rgba(74,45,42,0.15); transition: transform 0.2s ease, box-shadow 0.2s ease; } body.cms-all-patches .qwl-other-products > a:hover, body.cms-all-patches .review-card:hover, body.cms-all-patches .faq-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(74,45,42,0.22); } body.cms-all-patches .qwl-category-products .image { flex: 1; height: auto !important; padding-top: 0 !important; min-height: 15rem; } @media (max-width: 768px) { body.cms-all-patches .value-props-split { flex-direction: column; gap: 1.5rem; } body.cms-all-patches .value-props-divider { width: 60px; height: 1px; } body.cms-all-patches .value-props-left { align-items: center; } } @media screen and (min-width: 1200px) { body.cms-all-patches .qwl-category-products.patches { grid-template-columns: repeat(3, 1fr); } } body.cms-all-patches .review-card { background: #fff; border-radius: 12px; padding: 1.5rem; margin-bottom: 0.75rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } @media (max-width: 768px) { body.cms-all-patches .reviews-faq-grid { grid-template-columns: 1fr; gap: 2rem; } } body.cms-all-patches .blog-tip-card { border-radius: 0.75rem; overflow: hidden; background: #fff; box-shadow: 0 4px 16px rgba(74,45,42,0.15); transition: transform 0.2s ease, box-shadow 0.2s ease; } @media (max-width: 1200px) { body.cms-all-patches .blog-tips-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { body.cms-all-patches .blog-tips-grid { grid-template-columns: repeat(2, 1fr); } body.cms-all-patches .blog-tip-card:last-child { display: none; } } @media (max-width: 480px) { body.cms-all-patches .blog-tips-grid { grid-template-columns: 1fr; } body.cms-all-patches .blog-tip-card:last-child { display: block; } } @media (max-width: 768px) { body.cms-all-patches .qwl-other-products { grid-template-columns: 1fr !important; } } @media (max-width: 768px) { body.cms-all-patches, body.cms-all-patches { overflow-x: hidden !important; -webkit-overflow-scrolling: touch; } body.cms-all-patches section, body.cms-all-patches .desktop-width, body.cms-all-patches .wrapper, body.cms-all-patches .page-wrapper, body.cms-all-patches .columns, body.cms-all-patches .column.main, body.cms-all-patches #maincontent, body.cms-all-patches .page-main { overflow-x: hidden !important; max-width: 100vw !important; word-wrap: break-word; } } @media (min-width: 1800px) { body.cms-all-patches .desktop-width, body.cms-all-patches .page-footer .footer-middle .container { max-width: 1536px !important; margin-left: auto !important; margin-right: auto !important; } } @media (max-width: 1279px) { body.cms-all-patches .qwl-top-header .banner-container { display: none !important; } body.cms-all-patches .qwl-top-header .google-rating-container { display: block !important; } body.cms-all-patches .qwl-top-header .google-rating-container img { max-height: 2rem !important; display: block !important; } body.cms-all-patches .qwl-top-header .top-header-areas { padding: 0 12px !important; } } @media (max-width: 1279px) { body.cms-all-patches .qwl-top-header .top-header-areas, body.cms-all-patches .top-header-areas { display: flex !important; align-items: center !important; justify-content: space-between !important; height: 32px !important; flex-wrap: nowrap !important; overflow: visible !important; } body.cms-all-patches .top-header-right { display: flex !important; align-items: center !important; gap: 8px !important; margin-left: auto !important; } } @media (max-width: 768px) { body.cms-all-patches .qwl-top-header .banner a { font-size: 11px !important; } body.cms-all-patches .qwl-top-header .top-header-areas { display: flex !important; align-items: center !important; justify-content: space-between !important; } body.cms-all-patches .top-header-right { display: flex !important; align-items: center !important; gap: 8px !important; margin-left: auto !important; } } @media (max-width: 428px) { body.cms-all-patches .qwl-top-header .banner a { font-size: 10px !important; white-space: normal !important; line-height: 1.3 !important; } } @media (max-width: 599px) { body.cms-all-patches .qwl-top-header .top-header-areas { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 12px !important; } body.cms-all-patches .qwl-top-header .banner-container { display: none !important; } body.cms-all-patches .qwl-top-header .google-rating-container { display: block !important; } body.cms-all-patches .qwl-top-header .google-rating-container img { max-height: 1.6rem !important; } body.cms-all-patches .top-header-right { display: flex !important; align-items: center !important; gap: 8px !important; position: static !important; float: none !important; margin-left: auto !important; } body.cms-all-patches .minicart-wrapper, body.cms-all-patches .minicart-container { position: static !important; float: none !important; } body.cms-all-patches .action.showcart { line-height: 1 !important; padding: 0 !important; } body.cms-all-patches .cart-icon-wrap .fa-shopping-bag { font-size: 22px !important; line-height: 24px !important; } body.cms-all-patches .minicart-wrapper .action.showcart .counter.qty { top: 10px !important; } body.cms-all-patches .header-nav .header-areas, body.cms-all-patches .header-areas { display: flex !important; align-items: center !important; justify-content: space-between !important; grid-template-areas: none !important; grid-template-columns: none !important; } body.cms-all-patches .header-nav .header-areas .logo-area, body.cms-all-patches .logo-area { order: 0 !important; flex: 0 0 auto !important; width: auto !important; justify-self: flex-start !important; text-align: left !important; } body.cms-all-patches .logo-area .logo img { height: 32px !important; } body.cms-all-patches .header-nav .header-areas .nav-toggle-area, body.cms-all-patches .nav-toggle-area { order: 1 !important; margin-left: auto !important; } } @media (max-width: 1279px) { body.cms-all-patches .header-nav { padding: 0 16px !important; background: #fff !important; position: relative !important; z-index: 100 !important; min-height: 56px !important; } body.cms-all-patches .header-areas { display: flex !important; align-items: center !important; justify-content: space-between !important; height: 56px !important; } body.cms-all-patches .logo-area { width: auto !important; flex: 0 0 auto !important; } body.cms-all-patches .logo-area .logo img { height: 36px !important; } body.cms-all-patches .navigation-area { display: none !important; } body.cms-all-patches .quote-link-area { display: none !important; } body.cms-all-patches .nav-phone-hours { display: none !important; } body.cms-all-patches .nav-toggle-area { display: flex !important; align-items: center !important; } body.cms-all-patches .menu-toggle a.button { background: transparent !important; color: #4a2d2a !important; box-shadow: none !important; border: none !important; font-size: 24px !important; padding: 6px 10px !important; line-height: 1 !important; } body.cms-all-patches .navigation-area.visible { display: flex !important; flex-direction: column !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: white !important; z-index: 10000 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding: 0 !important; } body.cms-all-patches .navigation-area.visible::before { content: ""; display: block; height: 56px; flex-shrink: 0; border-bottom: 2px solid #EF5732; } body.cms-all-patches .navigation-area.visible .navigation-container { display: flex !important; flex-direction: column !important; padding: 8px 0 !important; } body.cms-all-patches .navigation-area.visible .nav-item { width: 100% !important; border-bottom: 1px solid #f0f0f0 !important; } body.cms-all-patches .navigation-area.visible a.button.nav-tier-1 { width: 100% !important; text-align: left !important; border-radius: 0 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 16px !important; font-weight: 700 !important; padding: 15px 20px !important; background: white !important; color: #4a2d2a !important; box-shadow: none !important; } body.cms-all-patches .navigation-area.visible a.button.nav-tier-1:hover { background: #faf7f2 !important; } body.cms-all-patches .navigation-area.visible ul.subnav, body.cms-all-patches .navigation-area.visible ul.subnav.two-col { position: static !important; display: none !important; column-count: 1 !important; min-width: auto !important; box-shadow: none !important; border: none !important; padding: 0 0 8px 0 !important; background: #faf7f2 !important; border-radius: 0 !important; } body.cms-all-patches .navigation-area.visible .nav-item.open ul.subnav, body.cms-all-patches .navigation-area.visible .nav-item.open ul.subnav.two-col { display: block !important; } body.cms-all-patches .navigation-area.visible ul.subnav a { color: #4a2d2a !important; padding: 12px 20px 12px 32px !important; font-size: 15px !important; display: block !important; } body.cms-all-patches .navigation-area.visible ul.subnav a:hover { background: #f0ebe4 !important; } body.cms-all-patches .navigation-area.visible .subnav-item.rush a { color: #EF5732 !important; font-weight: 700 !important; } body.cms-all-patches.nav-open .menu-open { display: none !important; } body.cms-all-patches.nav-open .menu-close { display: inline-flex !important; } body.cms-all-patches.nav-open { overflow: hidden !important; } } @media (max-width: 1399px) { body.cms-all-patches .qwl-hero.homepage-hero .hero-content { padding-bottom: 7vw !important; } } @media (max-width: 1279px) { body.cms-all-patches .qwl-hero.homepage-hero .hero-content { padding-bottom: 10vw !important; } } @media (max-width: 1080px) { body.cms-all-patches .qwl-hero.homepage-hero .hero-content { padding-top: 4rem !important; padding-bottom: 10vw !important; } } @media (max-width: 1024px) { body.cms-all-patches .qwl-hero.homepage-hero .hero-content h1 { font-size: 2.2rem !important; } } @media (max-width: 768px) { body.cms-all-patches .qwl-hero.homepage-hero .hero-content h1 { font-size: 1.6rem !important; line-height: 1.2 !important; } body.cms-all-patches .qwl-hero::after, body.cms-all-patches .qwl-hero:after { height: 10vw !important; } body.cms-all-patches .qwl-hero.homepage-hero { margin-bottom: calc(-10vw + 0.5rem) !important; } body.cms-all-patches .qwl-hero.homepage-hero .hero-content { padding-bottom: 14vw !important; } body.cms-all-patches .hero-offer { max-width: 280px !important; padding: 14px !important; } body.cms-all-patches .hero-offer .heading { font-size: 1.2rem !important; } body.cms-all-patches .hero-offer ul.hero-checks li { font-size: 13px !important; } body.cms-all-patches .hero-offer .button-container .hero-cta, body.cms-all-patches .hero-offer .button-container .button.hero-cta { font-size: 13px !important; padding: 10px 18px !important; } } @media (max-width: 428px) { body.cms-all-patches .qwl-hero.homepage-hero .hero-content h1 { font-size: 1.3rem !important; padding: 0 8px !important; } body.cms-all-patches .hero-offer { max-width: 240px !important; padding: 10px !important; } body.cms-all-patches .hero-offer .heading { font-size: 1rem !important; } body.cms-all-patches .hero-offer ul.hero-checks li { font-size: 11px !important; gap: 4px !important; margin-bottom: 4px !important; } body.cms-all-patches .hero-offer ul.hero-checks li i { font-size: 14px !important; } body.cms-all-patches .hero-offer .button-container .hero-cta, body.cms-all-patches .hero-offer .button-container .button.hero-cta { font-size: 12px !important; padding: 8px 16px !important; } } @media (max-width: 375px) { body.cms-all-patches .qwl-hero.homepage-hero .hero-content h1 { font-size: 1.1rem !important; } body.cms-all-patches .hero-offer { max-width: 210px !important; padding: 8px !important; } body.cms-all-patches .hero-offer ul.hero-checks li { font-size: 10px !important; } body.cms-all-patches .hero-offer .button-container .hero-cta, body.cms-all-patches .hero-offer .button-container .button.hero-cta { font-size: 11px !important; padding: 7px 14px !important; } } @media (max-width: 1024px) { body.cms-all-patches .value-props-row { gap: 2rem !important; } body.cms-all-patches .value-prop span { font-size: 1.3rem !important; } } @media (max-width: 768px) { body.cms-all-patches .value-props-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1.5rem 1rem !important; padding: 1.5rem 1rem !important; } body.cms-all-patches .value-prop { min-width: 0 !important; } body.cms-all-patches .value-prop i { font-size: 2.6rem !important; } body.cms-all-patches .value-prop span { font-size: 1.1rem !important; text-align: center !important; } } @media (max-width: 428px) { body.cms-all-patches .value-props-row { gap: 1rem 0.75rem !important; padding: 1rem 0.75rem !important; } body.cms-all-patches .value-prop i { font-size: 2.2rem !important; } body.cms-all-patches .value-prop span { font-size: 0.95rem !important; } } @media (max-width: 768px) { body.cms-all-patches #qwl-featured-products .featured-products-header .featured-products-footer { max-width: 100% !important; } body.cms-all-patches #qwl-featured-products .featured-products-header .featured-products-footer p { font-size: 15px !important; padding: 0 16px !important; } } @media (max-width: 428px) { body.cms-all-patches #qwl-featured-products .featured-products-header .featured-products-footer p { font-size: 14px !important; padding: 0 12px !important; } } @media (max-width: 1024px) { body.cms-all-patches .featured-products-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 768px) { body.cms-all-patches .featured-products-grid { gap: 16px !important; padding: 0 16px !important; } } @media (max-width: 428px) { body.cms-all-patches .featured-products-grid { gap: 10px !important; padding: 0 12px !important; } body.cms-all-patches .featured-product-info h3 { font-size: 14px !important; } body.cms-all-patches .featured-product-info p { font-size: 12px !important; } } @media (max-width: 768px) { body.cms-all-patches #qwl-featured-products > .wrapper > .featured-products-footer h2, body.cms-all-patches #qwl-featured-products .featured-products-footer h2 { font-size: 1.6rem !important; padding: 0 16px !important; } } @media (max-width: 428px) { body.cms-all-patches #qwl-featured-products > .wrapper > .featured-products-footer h2, body.cms-all-patches #qwl-featured-products .featured-products-footer h2 { font-size: 1.3rem !important; } } @media (max-width: 768px) { body.cms-all-patches #qwl-homepage-categories .carousel-header { padding: 0 16px !important; } body.cms-all-patches #qwl-homepage-categories .carousel-header h2 { font-size: 1.3rem !important; } body.cms-all-patches #qwl-homepage-categories .carousel-header h2 a { font-size: inherit !important; } body.cms-all-patches #qwl-homepage-categories .carousel-header .button { font-size: 11px !important; padding: 6px 12px !important; } body.cms-all-patches #qwl-homepage-categories .wrapper { margin-left: 16px !important; margin-right: 16px !important; } } @media (max-width: 428px) { body.cms-all-patches #qwl-homepage-categories .carousel-header h2 { font-size: 1.15rem !important; } body.cms-all-patches #qwl-homepage-categories .wrapper { margin-left: 12px !important; margin-right: 12px !important; } } @media (max-width: 768px) { body.cms-all-patches #reviews-faq { padding: 2rem 0 !important; } body.cms-all-patches .reviews-faq-grid { padding: 0 16px !important; } body.cms-all-patches .col-header { font-size: 1.4rem !important; } body.cms-all-patches .faq-card button { width: 100% !important; padding: 1rem 1.2rem !important; font-size: 14px !important; } body.cms-all-patches .review-card { padding: 1rem !important; } body.cms-all-patches .review-text { font-size: 14px !important; } } @media (max-width: 428px) { body.cms-all-patches .col-header { font-size: 1.2rem !important; } body.cms-all-patches .faq-card button { font-size: 13px !important; padding: 0.9rem 1rem !important; } body.cms-all-patches .review-text { font-size: 13px !important; } body.cms-all-patches .review-author { font-size: 12px !important; } } @media (max-width: 1024px) { body.cms-all-patches #homepage-sewing-services .ss-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } body.cms-all-patches #homepage-sewing-services #ss-1 { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } body.cms-all-patches #homepage-sewing-services #ss-text { grid-column: 1 / -1 !important; position: relative !important; z-index: 2 !important; background: #fff !important; padding: 24px !important; } body.cms-all-patches #homepage-sewing-services .image-cell img { width: 100% !important; height: 100% !important; object-fit: cover !important; } } @media (max-width: 768px) { body.cms-all-patches #homepage-sewing-services .ss-grid { grid-template-columns: 1fr 1fr !important; padding: 16px !important; } body.cms-all-patches #homepage-sewing-services #ss-1 { grid-column: 1 / -1 !important; grid-template-columns: repeat(3, 1fr) !important; } body.cms-all-patches #homepage-sewing-services #ss-text { grid-column: 1 / -1 !important; padding: 20px !important; } body.cms-all-patches #homepage-sewing-services #ss-text h2 { font-size: 1.4rem !important; } body.cms-all-patches #homepage-sewing-services #ss-text h2 svg { width: 32px !important; height: 32px !important; } } @media (max-width: 428px) { body.cms-all-patches #homepage-sewing-services .ss-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; padding: 12px !important; } body.cms-all-patches #homepage-sewing-services #ss-1 { grid-template-columns: 1fr 1fr !important; } body.cms-all-patches #homepage-sewing-services #ss-1c { display: none !important; } body.cms-all-patches #homepage-sewing-services #ss-text { padding: 16px !important; } body.cms-all-patches #homepage-sewing-services #ss-text h2 { font-size: 1.2rem !important; gap: 8px !important; } body.cms-all-patches #homepage-sewing-services #ss-text h2 svg { width: 28px !important; height: 28px !important; } body.cms-all-patches #homepage-sewing-services #ss-text p, body.cms-all-patches #homepage-sewing-services #ss-text li { font-size: 14px !important; } } @media (max-width: 428px) { body.cms-all-patches .custom-branding { padding: 32px 0 !important; } body.cms-all-patches .custom-branding h2.section-heading { font-size: 1.5rem !important; padding: 0 12px !important; } body.cms-all-patches .branding-grid { gap: 8px !important; padding: 0 12px !important; } body.cms-all-patches .branding-card .branding-text { padding: 12px 8px !important; } body.cms-all-patches .branding-card .branding-btn { font-size: 11px !important; padding: 6px 14px !important; } body.cms-all-patches .branding-card p { font-size: 11px !important; line-height: 1.4 !important; } } @media (max-width: 1024px) { body.cms-all-patches .v2-quote-inner { margin-left: 30% !important; } } @media (max-width: 768px) { body.cms-all-patches .v2-quote-section { padding: 32px 0 !important; } body.cms-all-patches .v2-quote-inner { margin: 0 16px !important; padding: 24px 20px !important; max-width: none !important; } body.cms-all-patches .v2-quote-inner h2 { font-size: 26px !important; } } @media (max-width: 428px) { body.cms-all-patches .v2-quote-inner { margin: 0 12px !important; padding: 20px 16px !important; } body.cms-all-patches .v2-quote-inner h2 { font-size: 22px !important; } body.cms-all-patches .v2-quote-inner .qf-benefits li { font-size: 13px !important; } body.cms-all-patches .v2-quote-inner .qf-note { font-size: 13px !important; } body.cms-all-patches .qf-submit { font-size: 16px !important; height: 52px !important; } } @media (max-width: 768px) { body.cms-all-patches .discounts-section { padding: 32px 0 !important; } body.cms-all-patches .discounts-section h2 { font-size: 1.6rem !important; padding: 0 16px !important; } body.cms-all-patches .discounts-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 0 16px !important; } body.cms-all-patches .trucker-banner { padding: 0 16px !important; } } @media (max-width: 428px) { body.cms-all-patches .discounts-section h2 { font-size: 1.3rem !important; padding: 0 12px !important; } body.cms-all-patches .discounts-grid { gap: 8px !important; padding: 0 12px !important; } body.cms-all-patches .discount-card .blurb { padding: 12px 8px !important; font-size: 13px !important; } body.cms-all-patches .discount-card .blurb em { font-size: 17px !important; } } @media (max-width: 768px) { body.cms-all-patches #homepage-samples { overflow: hidden !important; } body.cms-all-patches #homepage-samples .wrapper { padding: 20px 16px !important; } body.cms-all-patches #homepage-samples .heading { font-size: 1.6rem !important; } body.cms-all-patches #homepage-samples p { font-size: 0.95rem !important; } } @media (max-width: 428px) { body.cms-all-patches #homepage-samples .heading { font-size: 1.3rem !important; } body.cms-all-patches #homepage-samples p { font-size: 0.85rem !important; } } @media (max-width: 768px) { body.cms-all-patches .seo-section { padding: 32px 0 !important; } body.cms-all-patches .seo-section-title { font-size: 1.8rem !important; } } @media (max-width: 428px) { body.cms-all-patches .seo-section-title { font-size: 1.4rem !important; padding: 0 12px 16px !important; } body.cms-all-patches .seo-row { padding: 0 12px !important; gap: 12px !important; margin-bottom: 24px !important; } body.cms-all-patches .seo-row .seo-text h3 { font-size: 17px !important; } body.cms-all-patches .seo-row .seo-text p { font-size: 13px !important; } } @media (max-width: 768px) { body.cms-all-patches #homepage-footer .wrapper { padding: 24px 16px !important; } body.cms-all-patches #homepage-footer .wrapper > p:first-child, body.cms-all-patches #homepage-footer .wrapper p[style*="2.5rem"] { font-size: 1.6rem !important; } body.cms-all-patches #homepage-footer .buttons { flex-direction: column !important; gap: 12px !important; width: 100% !important; } body.cms-all-patches #homepage-footer .buttons .button { width: 100% !important; text-align: center !important; display: block !important; } } @media (max-width: 428px) { body.cms-all-patches #homepage-footer .wrapper > p:first-child, body.cms-all-patches #homepage-footer .wrapper p[style*="2.5rem"] { font-size: 1.3rem !important; } } @media (max-width: 768px) { body.cms-all-patches #homepage-instagram { padding: 0 16px !important; overflow: hidden !important; } body.cms-all-patches #homepage-instagram h2 { font-size: 1.3rem !important; } body.cms-all-patches #homepage-instagram h2 a { font-size: inherit !important; } } @media (max-width: 1024px) { body.cms-all-patches .page-footer .footer-middle .container .row { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; } body.cms-all-patches .page-footer .footer-middle .container .row > .col-lg-4 { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; } } @media (max-width: 768px) { body.cms-all-patches .page-footer .footer-middle .container { padding: 0 16px !important; } body.cms-all-patches .page-footer .footer-middle .container .row { grid-template-columns: 1fr 1fr !important; gap: 20px 16px !important; } body.cms-all-patches .page-footer .footer-middle .container .row > .col-lg-4 { min-width: 0 !important; } body.cms-all-patches .page-footer h2.footer-menu-item-title { font-size: 15px !important; margin-bottom: 8px !important; } body.cms-all-patches .page-footer .footer-menu-item { margin-bottom: 2px !important; } body.cms-all-patches .page-footer .footer-menu-item a, body.cms-all-patches .page-footer .footer-text-item span, body.cms-all-patches .page-footer .footer-text-item a { font-size: 13px !important; } body.cms-all-patches .page-footer .block.newsletter input { font-size: 14px !important; padding: 8px 12px !important; } body.cms-all-patches .page-footer .block.newsletter .actions button { font-size: 13px !important; padding: 8px 16px !important; } body.cms-all-patches .page-footer ~ div, body.cms-all-patches footer > div:last-child { font-size: 12px !important; padding: 16px 12px !important; } body.cms-all-patches .page-footer .accepted-payment-types img { max-width: 100% !important; height: auto !important; } } @media (max-width: 428px) { body.cms-all-patches .page-footer .footer-middle .container { padding: 0 12px !important; } body.cms-all-patches .page-footer .footer-middle .container .row { gap: 16px 12px !important; } body.cms-all-patches .page-footer h2.footer-menu-item-title { font-size: 14px !important; } body.cms-all-patches .page-footer .footer-menu-item a, body.cms-all-patches .page-footer .footer-text-item span, body.cms-all-patches .page-footer .footer-text-item a { font-size: 12px !important; line-height: 1.6 !important; } body.cms-all-patches .page-footer .footer_newsletter_text { font-size: 12px !important; } body.cms-all-patches .page-footer .footer_newsletter_text br { display: none; } } @media (max-width: 375px) { body.cms-all-patches .page-footer h2.footer-menu-item-title { font-size: 13px !important; } body.cms-all-patches .page-footer .footer-menu-item a, body.cms-all-patches .page-footer .footer-text-item span, body.cms-all-patches .page-footer .footer-text-item a { font-size: 11px !important; } } body.cms-all-patches .featured-promo.beige-bg { padding: 2rem 0; margin-top: 5rem; position: relative; } body.cms-all-patches .featured-promo.beige-bg::before { background: var(--beige); content: " "; height: 100%; left: 50%; position: absolute; top: 0; translate: -50% 0; width: 100vw; z-index: -1; } body.cms-all-patches .featured-promo.beige-bg::after { background: var(--gold); content: " "; display: block; height: 4px; left: 50%; position: absolute; top: 0; translate: -50% 0; width: 100vw; z-index: 0; } /* --- all-hang-tags --- */ @font-face {font-family:"Neulis Alt";src:url("fonts/NeulisAlt-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;} @font-face {font-family:"Neulis Alt";src:url("fonts/NeulisAlt-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;} @font-face {font-family:"Neulis Alt";src:url("fonts/NeulisAlt-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;} @font-face {font-family:"Neulis Alt";src:url("fonts/NeulisAlt-MediumItalic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap;} @font-face {font-family:"Neulis Alt";src:url("fonts/NeulisAlt-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;} @font-face {font-family:"Neulis Alt";src:url("fonts/NeulisAlt-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;} @font-face {font-family:"Neulis Alt";src:url("fonts/NeulisAlt-BoldItalic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap;} @media screen and (min-width: 1280px) { body.cms-all-hang-tags a.button.nav-tier-1 { background: linear-gradient(135deg, #EF5732, #ff7a5c) !important; box-shadow: 0 2px 8px rgba(239,87,50,0.25); transition: all 0.2s ease !important; border: none !important; } body.cms-all-hang-tags a.button.nav-tier-1:hover, body.cms-all-hang-tags .nav-item:hover a.button.nav-tier-1 { box-shadow: 0 4px 16px rgba(239,87,50,0.4); transform: translateY(-1px); } body.cms-all-hang-tags .nav-item:not(.no-subnav):hover a.button.nav-tier-1:not(.childless), body.cms-all-hang-tags a.button.nav-tier-1:not(.childless):hover { background: linear-gradient(135deg, #EF5732, #ff7a5c) !important; border-radius: 1.5rem 1.5rem 0 0 !important; box-shadow: 0 -2px 12px rgba(239,87,50,0.2); transform: none; } body.cms-all-hang-tags .nav-item:not(.no-subnav):hover::after { background: linear-gradient(135deg, #EF5732, #ff7a5c) !important; height: 1rem; z-index: 101; } body.cms-all-hang-tags .nav-item:hover ul.subnav, body.cms-all-hang-tags ul.subnav:hover, body.cms-all-hang-tags .nav-tier-1.active ~ ul.subnav { background: white !important; border-radius: 0 0.75rem 0.75rem 0.75rem !important; box-shadow: 0 12px 32px rgba(0,0,0,0.12) !important; padding: 6px 0 !important; border: 1px solid #f0ebe6; border-top: none; } body.cms-all-hang-tags ul.subnav li { padding: 0 !important; } body.cms-all-hang-tags ul.subnav a { color: #4a2d2a !important; padding: 9px 20px !important; display: block; transition: all 0.15s; font-weight: 400 !important; } body.cms-all-hang-tags ul.subnav a:hover { background: #fef5f0 !important; color: #EF5732 !important; padding-left: 24px !important; opacity: 1 !important; } body.cms-all-hang-tags .subnav-item.rush { display: flex !important; align-items: center; white-space: nowrap; border-top: 1px solid #f0ebe6; margin-top: 4px; padding-top: 4px; } body.cms-all-hang-tags .subnav-item.rush a { color: #EF5732 !important; font-weight: 700 !important; display: inline !important; padding: 9px 6px 9px 20px !important; border-top: none !important; margin-top: 0 !important; } body.cms-all-hang-tags .subnav-item.rush .fa-arrow-right { color: #EF5732; font-size: 11px; flex-shrink: 0; } body.cms-all-hang-tags ul.subnav.two-col { column-count: 2 !important; column-gap: 0 !important; min-width: 420px !important; } body.cms-all-hang-tags ul.subnav.two-col li { break-inside: avoid !important; } body.cms-all-hang-tags ul.subnav.two-col li.subnav-item.rush:last-child { column-span: all !important; } body.cms-all-hang-tags .quote-link-area a.button.gold { background: linear-gradient(135deg, #ECAA00, #f0c040) !important; color: #4a2d2a !important; box-shadow: 0 2px 8px rgba(236,170,0,0.3); border: none !important; transition: all 0.2s; } body.cms-all-hang-tags .quote-link-area a.button.gold:hover { box-shadow: 0 4px 16px rgba(236,170,0,0.5); transform: translateY(-1px); } body.cms-all-hang-tags .quote-link-area { display: flex !important; align-items: center !important; gap: 16px !important; } body.cms-all-hang-tags .nav-phone-hours { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } body.cms-all-hang-tags .nav-phone { color: #4a2d2a !important; font-size: 14px; text-decoration: none !important; font-weight: 400; letter-spacing: 0.2px; } body.cms-all-hang-tags .nav-phone strong { font-weight: 700; } body.cms-all-hang-tags .nav-phone i { font-size: 12px; color: #EF5732; } body.cms-all-hang-tags .nav-availability { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #666; } body.cms-all-hang-tags .availability-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; box-shadow: 0 0 4px rgba(34,197,94,0.5); animation: pulse-dot 2s infinite; } @keyframes all-hang-tags-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } body.cms-all-hang-tags .availability-text { font-weight: 500; color: #555; } } @media screen and (min-width: 1280px) and (max-width: 1399px) { body.cms-all-hang-tags a.button.nav-tier-1 { font-size: 12px !important; padding: 8px 12px !important; white-space: nowrap !important; } body.cms-all-hang-tags .quote-link-area a.button.gold { font-size: 12px !important; padding: 8px 12px !important; white-space: nowrap !important; } body.cms-all-hang-tags .quote-link-area a.button.gold svg { width: 14px !important; height: 14px !important; } body.cms-all-hang-tags .nav-phone-hours { gap: 1px !important; } body.cms-all-hang-tags .nav-phone { font-size: 12px !important; } body.cms-all-hang-tags .nav-availability { font-size: 10px !important; } body.cms-all-hang-tags .navigation-container { gap: 4px !important; } body.cms-all-hang-tags .header-areas { gap: 8px !important; } } @media screen and (min-width: 1280px) and (max-width: 1319px) { body.cms-all-hang-tags a.button.nav-tier-1 { font-size: 11px !important; padding: 7px 9px !important; } body.cms-all-hang-tags .quote-link-area a.button.gold { font-size: 11px !important; padding: 7px 9px !important; } body.cms-all-hang-tags .quote-link-area { gap: 8px !important; } body.cms-all-hang-tags .nav-phone { font-size: 11px !important; } } @media screen and (max-width: 1024px) { body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-image img { top: 0 !important; bottom: 6vw !important; left: 50% !important; transform: translateX(-50%) !important; width: auto !important; height: calc(100% - 6vw) !important; min-width: 100% !important; min-height: calc(100% - 6vw) !important; object-fit: cover !important; object-position: center bottom !important; } } @media screen and (min-width:600px) { body.cms-all-hang-tags .qwl-hero .hero-content {padding:12rem 1rem 4rem} body.cms-all-hang-tags .specials-grid {grid-template-columns:1fr 1fr} body.cms-all-hang-tags .qwl-other-products .content .label {font-size:1.5rem} } @media screen and (min-width:800px) { body.cms-all-hang-tags .banner-container {display:block} body.cms-all-hang-tags .top-header-areas {align-items:center;display:grid;grid-template-columns:1fr auto} body.cms-all-hang-tags .banner a {color:var(--gold);font-weight:600;text-transform:uppercase} body.cms-all-hang-tags .header-areas {align-items:center;grid-template-areas:"logo quote toggle" "nav nav nav";grid-gap:1rem;grid-template-columns:1fr auto auto;justify-content:start} body.cms-all-hang-tags .header-areas .quote-link-area {display:flex;justify-self:end} body.cms-all-hang-tags .header-areas .logo-area>a {display:block;width:auto;justify-self:start} body.cms-all-hang-tags .logo img {height:4rem} body.cms-all-hang-tags .qwl-hero .hero-content {margin:0 auto;padding:12rem 1rem 4rem} body.cms-all-hang-tags .featured-products-grid {grid-template-columns:1fr 1fr} body.cms-all-hang-tags ul.scrollbar-carousel .label span {opacity:0;transition:opacity .25s linear 0s} body.cms-all-hang-tags ul.scrollbar-carousel li:hover .label span {opacity:1} body.cms-all-hang-tags .ss-grid {grid-template-columns:1fr 1fr 1fr;grid-template-areas:"ss-2a ss-3 ss-4" "ss-2b ss-text ss-text" "ss-2c ss-text ss-text" "ss-2d ss-5 ss-5"} body.cms-all-hang-tags .ss-grid #ss-2a, body.cms-all-hang-tags .ss-grid #ss-2b, body.cms-all-hang-tags .ss-grid #ss-2c, body.cms-all-hang-tags .ss-grid #ss-2d {display:block;height:100%} body.cms-all-hang-tags .custom-branding-categories {grid-template-columns:1fr 1fr} body.cms-all-hang-tags #homepage-quote form {grid-template-columns:1fr 1fr} body.cms-all-hang-tags #homepage-quote #products_list, body.cms-all-hang-tags #homepage-quote #width_height, body.cms-all-hang-tags #homepage-quote #quantity_list, body.cms-all-hang-tags .g-recaptcha, body.cms-all-hang-tags .buttons-set, body.cms-all-hang-tags #discuss_project_group {grid-column:1/span 2} body.cms-all-hang-tags #homepage-quote .quote-form-column {margin-left:33.33%;width:66.66%} body.cms-all-hang-tags #homepage-quote .background-image img {object-position:center} body.cms-all-hang-tags .specials-banner .content-areas {align-items:center;grid-template-columns:1fr 1fr} body.cms-all-hang-tags .specials-banner .content-areas h3 {font-size:2.5em} body.cms-all-hang-tags #homepage-samples .wrapper {margin:1rem auto;max-width:600px} body.cms-all-hang-tags .footer .container .row {grid-template-columns:1fr 1fr 1fr} body.cms-all-hang-tags .footer .newsletter {grid-column:2/span 2} } @media screen and (min-width:1080px) { body.cms-all-hang-tags .footer .container .row {display:flex;flex-wrap:wrap;gap:1rem} body.cms-all-hang-tags .footer-middle .block.newsletter .form.subscribe {max-width:300px} body.cms-all-hang-tags .qwl-hero .hero-image img {position:relative} body.cms-all-hang-tags .qwl-hero .hero-content {left:50%;max-width:600px;padding:0;position:absolute;top:58%;translate:-50% -50%} body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content {top:50%} body.cms-all-hang-tags .qwl-hero.category-hero .hero-content {max-width:900px} body.cms-all-hang-tags .qwl-hero:after {top:100%} body.cms-all-hang-tags .featured-products-grid {grid-template-columns:repeat(4,1fr)} body.cms-all-hang-tags #qwl-homepage-categories .carousel-header~div div:nth-of-type(2) div {opacity:0 !important;transition:opacity .5s linear 0s} body.cms-all-hang-tags #qwl-homepage-categories .wrapper:hover .carousel-header~div div:nth-of-type(2) div {opacity:1 !important} body.cms-all-hang-tags .custom-branding-categories {grid-template-columns:repeat(4,1fr);margin-top:4rem} body.cms-all-hang-tags #homepage-quote .quote-form-column {margin-left:50%;width:50%} body.cms-all-hang-tags #homepage-quote .background-image img {object-position:25%} body.cms-all-hang-tags .specials-grid {grid-template-columns:repeat(4,1fr)} body.cms-all-hang-tags .specials-banner {padding:2rem} body.cms-all-hang-tags .specials-banner .content-areas {align-items:center;display:flex;justify-content:space-between} body.cms-all-hang-tags .specials-banner .content-areas h3 {max-width:50%} body.cms-all-hang-tags #homepage-samples .wrapper {background-color:transparent} body.cms-all-hang-tags .seo-columns {align-items:center;display:flex;gap:2rem} body.cms-all-hang-tags .seo-columns .image-column {min-width:55%} body.cms-all-hang-tags #homepage-seo .seo-columns:nth-of-type(even) .image-column {order:2} body.cms-all-hang-tags .qwl-hero {min-height:65vh} body.cms-all-hang-tags .hero-image {height:100%;position:absolute;width:100%} } @media screen and (min-width:1280px) { body.cms-all-hang-tags .top-header-areas {grid-template-columns:1fr auto 1fr} body.cms-all-hang-tags .google-rating-container {display:block} body.cms-all-hang-tags .google-rating-container img {display:block;max-height:2rem} body.cms-all-hang-tags .header-areas {grid-template-areas:"logo nav quote";grid-gap:1rem;grid-template-columns:auto 1fr auto} body.cms-all-hang-tags .header-areas .nav-toggle-area {display:none} body.cms-all-hang-tags .navigation-container, body.cms-all-hang-tags:not(.menu-active) .navigation-container {display:flex;gap:1rem;max-height:unset;justify-content:center;overflow:visible;padding-right:0;position:relative;transition:none;width:100%} body.cms-all-hang-tags ul.subnav {border-radius:0 .5rem .5rem;top:100%;position:absolute;transition:none;width:100%} body.cms-all-hang-tags a.button.nav-tier-1 {font-size:1rem;width:auto} body.cms-all-hang-tags .navigation-container .nav-item {position:relative} body.cms-all-hang-tags .nav-tier-1.active~ul.subnav, body.cms-all-hang-tags .nav-item:hover ul.subnav, body.cms-all-hang-tags ul.subnav:hover {margin-top:1rem;max-height:unset;overflow:visible;transition:none;width:fit-content} body.cms-all-hang-tags .nav-tier-1:not(.childless).active:after, body.cms-all-hang-tags .nav-item:not(.no-subnav):hover:after {background-color:var(--pink);content:" ";height:1rem;left:0;position:absolute;bottom:-1rem;width:100%} body.cms-all-hang-tags a.button.nav-tier-1:not(.childless):hover, body.cms-all-hang-tags .nav-item:hover a.button.nav-tier-1:not(.childless) {background-color:var(--pink);border:0;border-radius:1.5rem 1.5rem 0 0;transition:none} body.cms-all-hang-tags .quote-link-area a.button {font-size:1rem} body.cms-all-hang-tags .navigation-container .nav-item:not(:first-of-type) {margin-top:0} body.cms-all-hang-tags .subnav-item {margin:0} body.cms-all-hang-tags .subnav-item a {font-size:1rem;white-space:nowrap} body.cms-all-hang-tags a.button.nav-tier-1 {transition:none} body.cms-all-hang-tags .footer .container .row {flex-wrap:nowrap} body.cms-all-hang-tags .ss-grid {grid-template-columns:1fr 1fr 1fr 1fr;grid-template-areas:"ss-1 ss-2a ss-3 ss-4" "ss-1 ss-2b ss-text ss-text" "ss-1 ss-2c ss-text ss-text" "ss-1 ss-2d ss-5 ss-5"} body.cms-all-hang-tags .ss-grid #ss-1 {grid-area:ss-1;height:100%} body.cms-all-hang-tags .ss-grid #ss-1a {display:block;height:calc(35% - 1rem);margin-bottom:1rem} body.cms-all-hang-tags .ss-grid #ss-1b {display:block;height:30%} body.cms-all-hang-tags .ss-grid #ss-1c {display:block;height:calc(35% - 1rem);margin-top:1rem} body.cms-all-hang-tags .phone-number {text-align:right} body.cms-all-hang-tags .qwl-hero .hero-image {height:100%;width:100%} body.cms-all-hang-tags .qwl-hero .hero-image img {position:absolute} body.cms-all-hang-tags .qwl-hero .hero-content {bottom:auto;top:65%;translate:-50% -50%} body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content {bottom:auto;top:50%;translate:-50% -50%} body.cms-all-hang-tags .qwl-hero .hero-offer {padding:1rem 3rem} body.cms-all-hang-tags .qwl-hero.category-hero .hero-content {max-width:80vw;width:100%} body.cms-all-hang-tags .featured-promo .promo-title h3 {font-size:2.5rem} } @media screen and (min-width:1400px) { body.cms-all-hang-tags .footer .container .row {gap:2rem} body.cms-all-hang-tags .qwl-hero .hero-content h1 {font-size:3rem} body.cms-all-hang-tags .qwl-hero.category-hero .hero-content h1 {font-size:3.5rem} body.cms-all-hang-tags .qwl-hero .hero-content .hero-text, body.cms-all-hang-tags .qwl-hero .hero-content a.button {font-size:1.5rem} body.cms-all-hang-tags #homepage-sewing-services h2 {font-size:4rem} body.cms-all-hang-tags #homepage-sewing-services #ss-text {padding:2rem} body.cms-all-hang-tags .custom-branding-categories {gap:2rem;padding-bottom:6rem} body.cms-all-hang-tags #homepage-quote {overflow:hidden} body.cms-all-hang-tags #homepage-quote .background-image img {object-position:left;scale:110%} body.cms-all-hang-tags #homepage-quote .background-image {left:0;right:auto;width:100%} body.cms-all-hang-tags .specials-banner .content-areas .area-2 {font-size:1.5em} body.cms-all-hang-tags #homepage-samples .wrapper {margin:3rem auto} body.cms-all-hang-tags #homepage-samples .wrapper .heading {font-size:2.5em} body.cms-all-hang-tags .qwl-hero {min-height:75vh} body.cms-all-hang-tags .qwl-hero.category-hero {min-height:85vh} body.cms-all-hang-tags .qwl-hero .hero-offer .heading {font-size:3rem} body.cms-all-hang-tags .qwl-hero .hero-offer .subheading {font-size:2rem} body.cms-all-hang-tags .featured-promo .promo-title h3 {font-size:3rem} body.cms-all-hang-tags .featured-promo .promo-text-col h4 {font-size:1.75rem} body.cms-all-hang-tags .featured-promo .promo-text-col p {font-size:1.25rem} body.cms-all-hang-tags .featured-promo .promo-text-col ul {font-size:1.25rem} } @media screen and (min-width:1600px) { body.cms-all-hang-tags .qwl-hero.category-hero .hero-content h1 {font-size:4rem} body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content {padding:0} body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content h1 {font-size:3rem} body.cms-all-hang-tags .qwl-hero.homepage-hero {min-height:50vw} } @media screen and (min-width:1800px) { body.cms-all-hang-tags .qwl-hero.category-hero {min-height:75vh} body.cms-all-hang-tags .qwl-hero.category-hero .hero-content h1 {font-size:4rem} body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content h1 {font-size:3rem} } @media screen and (min-width:2400px) { body.cms-all-hang-tags .qwl-hero.category-hero {min-height:80vh} body.cms-all-hang-tags .qwl-hero.category-hero .hero-content {max-width:unset} body.cms-all-hang-tags .qwl-hero .hero-content h1 {font-size:4rem} body.cms-all-hang-tags .qwl-hero.category-hero .hero-content h1 {font-size:5rem} body.cms-all-hang-tags .qwl-hero.category-hero .hero-content .heading {font-size:4rem} body.cms-all-hang-tags .qwl-hero.category-hero .hero-content .subheading {font-size:3rem} body.cms-all-hang-tags .qwl-hero.category-hero .hero-content .bullets {font-size:1.5rem} body.cms-all-hang-tags .qwl-hero .hero-content .hero-text, body.cms-all-hang-tags .qwl-hero .hero-content a.button {font-size:2rem} body.cms-all-hang-tags #homepage-sewing-services {margin:1rem auto;max-width:1900px} body.cms-all-hang-tags #homepage-sewing-services #ss-text {padding:6rem} body.cms-all-hang-tags .specials-grid .blurb {font-size:2rem} body.cms-all-hang-tags .specials-banner .content-areas .area-2 {max-width:25%} body.cms-all-hang-tags .specials-banner .content-areas h3 {font-size:4em;max-width:35%} body.cms-all-hang-tags #homepage-samples .wrapper {font-size:1.5rem;margin:6rem auto;max-width:900px} body.cms-all-hang-tags #homepage-samples .wrapper .heading {font-size:2em} } @media only screen and (max-width:575px) { body.cms-all-hang-tags.account .account-nav .nav.items>li.nav.item, body.cms-all-hang-tags.account .account-nav .nav.items>li.nav.item.current {font-size:15px;padding:2px 10px 4px} } @media only screen and (max-width:575px) { body.cms-all-hang-tags.account table#my-pending-approvals td {display:block} body.cms-all-hang-tags.account table#my-pending-approvals td:nth-child(1) {border-bottom:none;padding-bottom:0} body.cms-all-hang-tags.account table#my-pending-approvals td:nth-child(2) {padding-top:0} body.cms-all-hang-tags.account table#my-pending-approvals td.artwork {padding-bottom:10px} } @media only screen and (min-width:992px) { body.cms-all-hang-tags.account table#my-pending-approvals td.artwork button {font-size:1.2em} } @media only screen and (min-width:1000px) { body.cms-all-hang-tags.account .columns .sidebar-main {flex:1} body.cms-all-hang-tags.account .columns .column.main {flex:3} } @media only screen and (min-width:1199px) { body.cms-all-hang-tags.account .columns .sidebar-main {flex:1} body.cms-all-hang-tags.account .columns .column.main {flex:4} } @media screen and (min-width:1730px) { body.cms-all-hang-tags .expert-tips {padding-bottom:2rem} body.cms-all-hang-tags ul.expert-tips-grid li {flex-basis:450px} } @container (min-width:600px) and (max-width:799px) { body.cms-all-hang-tags .best-sellers .label-grid {grid-template-columns:1fr 1fr} body.cms-all-hang-tags .best-sellers .label-grid .label-card:first-of-type {grid-column:1/span 2;padding-top:50%} } @container (min-width:800px) { body.cms-all-hang-tags .best-sellers .label-grid {grid-template-columns:1fr 1fr 1fr} } @media screen and (min-width:800px) { body.cms-all-hang-tags .qwl-category-products {grid-template-columns:1fr 1fr} body.cms-all-hang-tags .qwl-category-products:not(.featured-product) .blurb {text-align:left} body.cms-all-hang-tags .qwl-split-section .columns {gap:2rem;grid-template-columns:50% 50%} body.cms-all-hang-tags .qwl-split-section .columns:after {background:#fff url("/pub/media/qwl2025/checker-border-flesh-vertical.svg") center left repeat-y;content:" ";display:block;left:calc(50% - .25rem);height:calc(100% - 1rem);position:absolute;width:.5rem;top:.5rem;visibility:visible;z-index:1} body.cms-all-hang-tags .featured-promo {grid-template-columns:1fr 1fr} body.cms-all-hang-tags .featured-promo .promo-image-col, body.cms-all-hang-tags .featured-promo:before {height:100%;padding-top:0} body.cms-all-hang-tags .featured-promo .promo-image-col>img {object-fit:contain} body.cms-all-hang-tags .qwl-other-products .content .label {font-size:1rem} body.cms-all-hang-tags .qwl-other-products>a {max-width:calc(100% - 2rem)} body.cms-all-hang-tags .reviews-widget {max-width:90%} body.cms-all-hang-tags .qwl-category-reviews .buttons img {max-width:100px} body.cms-all-hang-tags.qwl .qwl-category-reviews h2 {font-size:1.5rem} body.cms-all-hang-tags .qwl-category-reviews .buttons {grid-template-columns:auto auto} } @media screen and (min-width:1080px) { body.cms-all-hang-tags .qwl-category-products {margin:0 auto} body.cms-all-hang-tags .qwl-category-products .image {padding-top:15rem} body.cms-all-hang-tags .qwl-category-products .blurb {font-size:1.25em;font-weight:300} body.cms-all-hang-tags .qwl-category-products {grid-template-columns:repeat(3,1fr)} body.cms-all-hang-tags .qwl-category-reviews .buttons img {max-width:150px} } @media screen and (min-width:1200px) { body.cms-all-hang-tags .qwl-category-products {grid-template-columns:repeat(4,1fr)} body.cms-all-hang-tags .qwl-other-products .content .label {font-size:1.5rem} body.cms-all-hang-tags.qwl .qwl-category-reviews h2 {font-size:2rem} } @media screen and (min-width:1400px) { body.cms-all-hang-tags .featured-promo {grid-template-columns:60% 1fr} body.cms-all-hang-tags .featured-promo.reversed {grid-template-columns:1fr 60%} body.cms-all-hang-tags.qwl .best-sellers h2 {font-size:3rem} body.cms-all-hang-tags .best-sellers .label-grid .label-card .heading h3 {font-size:2rem} body.cms-all-hang-tags .best-sellers .label-grid .label-card .subheading {font-size:1.5rem} body.cms-all-hang-tags .best-sellers .label-grid .label-card .tag {font-size:1.5rem} body.cms-all-hang-tags .qwl-split-section .columns {max-width:1400px;width:calc(100vw - 4rem)} } @media screen and (min-width:1800px) { body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content {max-width:unset;width:100%} body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content h1 {font-size:3rem} body.cms-all-hang-tags .qwl-hero .hero-offer .heading {font-size:2.5rem} body.cms-all-hang-tags .qwl-other-products .content .label {font-size:2rem} body.cms-all-hang-tags.qwl .qwl-category-reviews h2 {font-size:2.5rem} body.cms-all-hang-tags .qwl-other-products .content .button {font-size:1.5rem} } @media screen and (min-width:2400px) { body.cms-all-hang-tags .qwl-hero.homepage-hero {min-height:40vw} } @media (max-width: 480px) { body.cms-all-hang-tags .qwl-hero.category-hero .hero-content h1 { font-size: 1.5rem !important; } } @media screen and (max-width: 1024px) { body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-image img { top: 0 !important; bottom: 6vw !important; left: 50% !important; transform: translateX(-50%) !important; width: auto !important; height: calc(100% - 6vw) !important; min-width: 100% !important; min-height: calc(100% - 6vw) !important; object-fit: cover !important; object-position: center bottom !important; } } @media (max-width: 1399px) { body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content { padding-bottom: 7vw !important; } } @media (max-width: 1279px) { body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content { padding-bottom: 10vw !important; } } @media (max-width: 1080px) { body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content { padding-top: 4rem !important; padding-bottom: 10vw !important; } } @media (max-width: 1024px) { body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content h1 { font-size: 2.2rem !important; } } @media (max-width: 768px) { body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content h1 { font-size: 1.6rem !important; line-height: 1.2 !important; } body.cms-all-hang-tags .qwl-hero::after, body.cms-all-hang-tags .qwl-hero:after { height: 10vw !important; } body.cms-all-hang-tags .qwl-hero.homepage-hero { margin-bottom: calc(-10vw + 0.5rem) !important; } body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content { padding-bottom: 14vw !important; } body.cms-all-hang-tags .hero-offer { max-width: 280px !important; padding: 14px !important; } body.cms-all-hang-tags .hero-offer .heading { font-size: 1.2rem !important; } body.cms-all-hang-tags .hero-offer ul.hero-checks li { font-size: 13px !important; } body.cms-all-hang-tags .hero-offer .button-container .hero-cta { font-size: 13px !important; padding: 10px 18px !important; } } @media (max-width: 428px) { body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content h1 { font-size: 1.3rem !important; padding: 0 8px !important; } body.cms-all-hang-tags .hero-offer { max-width: 240px !important; padding: 10px !important; } body.cms-all-hang-tags .hero-offer .heading { font-size: 1rem !important; } body.cms-all-hang-tags .hero-offer ul.hero-checks li { font-size: 11px !important; gap: 4px !important; margin-bottom: 4px !important; } body.cms-all-hang-tags .hero-offer ul.hero-checks li i { font-size: 14px !important; } body.cms-all-hang-tags .hero-offer .button-container .hero-cta { font-size: 12px !important; padding: 8px 16px !important; } } @media (max-width: 375px) { body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content h1 { font-size: 1.1rem !important; } body.cms-all-hang-tags .hero-offer { max-width: 210px !important; padding: 8px !important; } body.cms-all-hang-tags .hero-offer ul.hero-checks li { font-size: 10px !important; } body.cms-all-hang-tags .hero-offer .button-container .hero-cta { font-size: 11px !important; padding: 7px 14px !important; } } body.cms-all-hang-tags .best-sellers { padding-top: 8rem !important; position: relative !important; z-index: 3 !important; } @media (min-width: 1080px) and (max-width: 1399px) { body.cms-all-hang-tags .qwl-hero.homepage-hero { min-height: 580px !important; } } @media (max-width: 1079px) { body.cms-all-hang-tags .qwl-hero.homepage-hero { min-height: 500px !important; } } body.cms-all-hang-tags .qwl-hero .hero-offer { background: none !important; border: none !important; border-radius: 0 !important; position: relative !important; padding: 1.25rem 5rem 1.5rem !important; width: fit-content !important; max-width: none !important; box-sizing: border-box !important; isolation: isolate !important; } @media (max-width: 768px) { body.cms-all-hang-tags .qwl-hero .hero-offer { max-width: calc(100% - 2rem) !important; padding: 1.25rem 3rem 1.5rem !important; } } body.cms-all-hang-tags .blog-tips-section, body.cms-all-hang-tags #homepage-instagram, body.cms-all-hang-tags #homepage-samples, body.cms-all-hang-tags #homepage-footer, body.cms-all-hang-tags .featured-promo.cream { background-color: #faf7f2; } body.cms-all-hang-tags .qwl-category-products .heading { background-color: #faf7f2 !important; color: #4a2d2a !important; border-radius: 0 !important; display: block !important; padding: 0.75rem 1rem !important; order: 2; } body.cms-all-hang-tags .qwl-category-products .heading h3 { font-size: 1.5rem !important; font-weight: 700 !important; color: #4a2d2a !important; text-align: left !important; } body.cms-all-hang-tags .qwl-category-products .tag { background-color: #faf7f2 !important; color: #EF5732 !important; position: static !important; border-radius: 0 !important; display: block !important; padding: 0 1rem 0.75rem !important; font-size: 0.9rem !important; font-weight: 600 !important; text-align: left !important; order: 3; } body.cms-all-hang-tags .review-card { background: #faf7f2; } body.cms-all-hang-tags .qwl-other-products > a, body.cms-all-hang-tags .review-card, body.cms-all-hang-tags .faq-card { box-shadow: 0 4px 16px rgba(74,45,42,0.15); transition: transform 0.2s ease, box-shadow 0.2s ease; } body.cms-all-hang-tags .qwl-other-products > a:hover, body.cms-all-hang-tags .review-card:hover, body.cms-all-hang-tags .faq-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(74,45,42,0.22); } body.cms-all-hang-tags .qwl-category-products .image { flex: 1; height: auto !important; padding-top: 0 !important; min-height: 15rem; } @media (max-width: 768px) { body.cms-all-hang-tags .value-props-split { flex-direction: column; gap: 1.5rem; } body.cms-all-hang-tags .value-props-divider { width: 60px; height: 1px; } body.cms-all-hang-tags .value-props-left { align-items: center; } } body.cms-all-hang-tags .review-card { background: #fff; border-radius: 12px; padding: 1.5rem; margin-bottom: 0.75rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } @media (max-width: 768px) { body.cms-all-hang-tags .reviews-faq-grid { grid-template-columns: 1fr; gap: 2rem; } } body.cms-all-hang-tags .blog-tip-card { border-radius: 0.75rem; overflow: hidden; background: #fff; box-shadow: 0 4px 16px rgba(74,45,42,0.15); transition: transform 0.2s ease, box-shadow 0.2s ease; } @media (max-width: 1200px) { body.cms-all-hang-tags .blog-tips-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { body.cms-all-hang-tags .blog-tips-grid { grid-template-columns: repeat(2, 1fr); } body.cms-all-hang-tags .blog-tip-card:last-child { display: none; } } @media (max-width: 480px) { body.cms-all-hang-tags .blog-tips-grid { grid-template-columns: 1fr; } body.cms-all-hang-tags .blog-tip-card:last-child { display: block; } } @media (max-width: 768px) { body.cms-all-hang-tags .qwl-other-products { grid-template-columns: 1fr !important; } } @media (max-width: 768px) { body.cms-all-hang-tags, body.cms-all-hang-tags { overflow-x: hidden !important; -webkit-overflow-scrolling: touch; } body.cms-all-hang-tags section, body.cms-all-hang-tags .desktop-width, body.cms-all-hang-tags .wrapper, body.cms-all-hang-tags .page-wrapper, body.cms-all-hang-tags .columns, body.cms-all-hang-tags .column.main, body.cms-all-hang-tags #maincontent, body.cms-all-hang-tags .page-main { overflow-x: hidden !important; max-width: 100vw !important; word-wrap: break-word; } } @media (min-width: 1800px) { body.cms-all-hang-tags .desktop-width, body.cms-all-hang-tags .page-footer .footer-middle .container { max-width: 1536px !important; margin-left: auto !important; margin-right: auto !important; } } @media (max-width: 1279px) { body.cms-all-hang-tags .qwl-top-header .banner-container { display: none !important; } body.cms-all-hang-tags .qwl-top-header .google-rating-container { display: block !important; } body.cms-all-hang-tags .qwl-top-header .google-rating-container img { max-height: 2rem !important; display: block !important; } body.cms-all-hang-tags .qwl-top-header .top-header-areas { padding: 0 12px !important; } } @media (max-width: 1279px) { body.cms-all-hang-tags .qwl-top-header .top-header-areas, body.cms-all-hang-tags .top-header-areas { display: flex !important; align-items: center !important; justify-content: space-between !important; height: 32px !important; flex-wrap: nowrap !important; overflow: visible !important; } body.cms-all-hang-tags .top-header-right { display: flex !important; align-items: center !important; gap: 8px !important; margin-left: auto !important; } } @media (max-width: 768px) { body.cms-all-hang-tags .qwl-top-header .banner a { font-size: 11px !important; } body.cms-all-hang-tags .qwl-top-header .top-header-areas { display: flex !important; align-items: center !important; justify-content: space-between !important; } body.cms-all-hang-tags .top-header-right { display: flex !important; align-items: center !important; gap: 8px !important; margin-left: auto !important; } } @media (max-width: 428px) { body.cms-all-hang-tags .qwl-top-header .banner a { font-size: 10px !important; white-space: normal !important; line-height: 1.3 !important; } } @media (max-width: 599px) { body.cms-all-hang-tags .qwl-top-header .top-header-areas { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 12px !important; } body.cms-all-hang-tags .qwl-top-header .banner-container { display: none !important; } body.cms-all-hang-tags .qwl-top-header .google-rating-container { display: block !important; } body.cms-all-hang-tags .qwl-top-header .google-rating-container img { max-height: 1.6rem !important; } body.cms-all-hang-tags .top-header-right { display: flex !important; align-items: center !important; gap: 8px !important; position: static !important; float: none !important; margin-left: auto !important; } body.cms-all-hang-tags .minicart-wrapper, body.cms-all-hang-tags .minicart-container { position: static !important; float: none !important; } body.cms-all-hang-tags .action.showcart { line-height: 1 !important; padding: 0 !important; } body.cms-all-hang-tags .cart-icon-wrap .fa-shopping-bag { font-size: 22px !important; line-height: 24px !important; } body.cms-all-hang-tags .minicart-wrapper .action.showcart .counter.qty { top: 10px !important; } body.cms-all-hang-tags .header-nav .header-areas, body.cms-all-hang-tags .header-areas { display: flex !important; align-items: center !important; justify-content: space-between !important; grid-template-areas: none !important; grid-template-columns: none !important; } body.cms-all-hang-tags .header-nav .header-areas .logo-area, body.cms-all-hang-tags .logo-area { order: 0 !important; flex: 0 0 auto !important; width: auto !important; justify-self: flex-start !important; text-align: left !important; } body.cms-all-hang-tags .logo-area .logo img { height: 32px !important; } body.cms-all-hang-tags .header-nav .header-areas .nav-toggle-area, body.cms-all-hang-tags .nav-toggle-area { order: 1 !important; margin-left: auto !important; } } @media (max-width: 1279px) { body.cms-all-hang-tags .header-nav { padding: 0 16px !important; background: #fff !important; position: relative !important; z-index: 100 !important; min-height: 56px !important; } body.cms-all-hang-tags .header-areas { display: flex !important; align-items: center !important; justify-content: space-between !important; height: 56px !important; } body.cms-all-hang-tags .logo-area { width: auto !important; flex: 0 0 auto !important; } body.cms-all-hang-tags .logo-area .logo img { height: 36px !important; } body.cms-all-hang-tags .navigation-area { display: none !important; } body.cms-all-hang-tags .quote-link-area { display: none !important; } body.cms-all-hang-tags .nav-phone-hours { display: none !important; } body.cms-all-hang-tags .nav-toggle-area { display: flex !important; align-items: center !important; } body.cms-all-hang-tags .menu-toggle a.button { background: transparent !important; color: #4a2d2a !important; box-shadow: none !important; border: none !important; font-size: 24px !important; padding: 6px 10px !important; line-height: 1 !important; } body.cms-all-hang-tags .navigation-area.visible { display: flex !important; flex-direction: column !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: white !important; z-index: 10000 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding: 0 !important; } body.cms-all-hang-tags .navigation-area.visible::before { content: ""; display: block; height: 56px; flex-shrink: 0; border-bottom: 2px solid #EF5732; } body.cms-all-hang-tags .navigation-area.visible .navigation-container { display: flex !important; flex-direction: column !important; padding: 8px 0 !important; } body.cms-all-hang-tags .navigation-area.visible .nav-item { width: 100% !important; border-bottom: 1px solid #f0f0f0 !important; } body.cms-all-hang-tags .navigation-area.visible a.button.nav-tier-1 { width: 100% !important; text-align: left !important; border-radius: 0 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 16px !important; font-weight: 700 !important; padding: 15px 20px !important; background: white !important; color: #4a2d2a !important; box-shadow: none !important; } body.cms-all-hang-tags .navigation-area.visible a.button.nav-tier-1:hover { background: #faf7f2 !important; } body.cms-all-hang-tags .navigation-area.visible ul.subnav, body.cms-all-hang-tags .navigation-area.visible ul.subnav.two-col { position: static !important; display: none !important; column-count: 1 !important; min-width: auto !important; box-shadow: none !important; border: none !important; padding: 0 0 8px 0 !important; background: #faf7f2 !important; border-radius: 0 !important; } body.cms-all-hang-tags .navigation-area.visible .nav-item.open ul.subnav, body.cms-all-hang-tags .navigation-area.visible .nav-item.open ul.subnav.two-col { display: block !important; } body.cms-all-hang-tags .navigation-area.visible ul.subnav a { color: #4a2d2a !important; padding: 12px 20px 12px 32px !important; font-size: 15px !important; display: block !important; } body.cms-all-hang-tags .navigation-area.visible ul.subnav a:hover { background: #f0ebe4 !important; } body.cms-all-hang-tags .navigation-area.visible .subnav-item.rush a { color: #EF5732 !important; font-weight: 700 !important; } body.cms-all-hang-tags.nav-open .menu-open { display: none !important; } body.cms-all-hang-tags.nav-open .menu-close { display: inline-flex !important; } body.cms-all-hang-tags.nav-open { overflow: hidden !important; } } @media (max-width: 1399px) { body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content { padding-bottom: 7vw !important; } } @media (max-width: 1279px) { body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content { padding-bottom: 10vw !important; } } @media (max-width: 1080px) { body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content { padding-top: 4rem !important; padding-bottom: 10vw !important; } } @media (max-width: 1024px) { body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content h1 { font-size: 2.2rem !important; } } @media (max-width: 768px) { body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content h1 { font-size: 1.6rem !important; line-height: 1.2 !important; } body.cms-all-hang-tags .qwl-hero::after, body.cms-all-hang-tags .qwl-hero:after { height: 10vw !important; } body.cms-all-hang-tags .qwl-hero.homepage-hero { margin-bottom: calc(-10vw + 0.5rem) !important; } body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content { padding-bottom: 14vw !important; } body.cms-all-hang-tags .hero-offer { max-width: 280px !important; padding: 14px !important; } body.cms-all-hang-tags .hero-offer .heading { font-size: 1.2rem !important; } body.cms-all-hang-tags .hero-offer ul.hero-checks li { font-size: 13px !important; } body.cms-all-hang-tags .hero-offer .button-container .hero-cta, body.cms-all-hang-tags .hero-offer .button-container .button.hero-cta { font-size: 13px !important; padding: 10px 18px !important; } } @media (max-width: 428px) { body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content h1 { font-size: 1.3rem !important; padding: 0 8px !important; } body.cms-all-hang-tags .hero-offer { max-width: 240px !important; padding: 10px !important; } body.cms-all-hang-tags .hero-offer .heading { font-size: 1rem !important; } body.cms-all-hang-tags .hero-offer ul.hero-checks li { font-size: 11px !important; gap: 4px !important; margin-bottom: 4px !important; } body.cms-all-hang-tags .hero-offer ul.hero-checks li i { font-size: 14px !important; } body.cms-all-hang-tags .hero-offer .button-container .hero-cta, body.cms-all-hang-tags .hero-offer .button-container .button.hero-cta { font-size: 12px !important; padding: 8px 16px !important; } } @media (max-width: 375px) { body.cms-all-hang-tags .qwl-hero.homepage-hero .hero-content h1 { font-size: 1.1rem !important; } body.cms-all-hang-tags .hero-offer { max-width: 210px !important; padding: 8px !important; } body.cms-all-hang-tags .hero-offer ul.hero-checks li { font-size: 10px !important; } body.cms-all-hang-tags .hero-offer .button-container .hero-cta, body.cms-all-hang-tags .hero-offer .button-container .button.hero-cta { font-size: 11px !important; padding: 7px 14px !important; } } @media (max-width: 1024px) { body.cms-all-hang-tags .value-props-row { gap: 2rem !important; } body.cms-all-hang-tags .value-prop span { font-size: 1.3rem !important; } } @media (max-width: 768px) { body.cms-all-hang-tags .value-props-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1.5rem 1rem !important; padding: 1.5rem 1rem !important; } body.cms-all-hang-tags .value-prop { min-width: 0 !important; } body.cms-all-hang-tags .value-prop i { font-size: 2.6rem !important; } body.cms-all-hang-tags .value-prop span { font-size: 1.1rem !important; text-align: center !important; } } @media (max-width: 428px) { body.cms-all-hang-tags .value-props-row { gap: 1rem 0.75rem !important; padding: 1rem 0.75rem !important; } body.cms-all-hang-tags .value-prop i { font-size: 2.2rem !important; } body.cms-all-hang-tags .value-prop span { font-size: 0.95rem !important; } } @media (max-width: 768px) { body.cms-all-hang-tags #qwl-featured-products .featured-products-header .featured-products-footer { max-width: 100% !important; } body.cms-all-hang-tags #qwl-featured-products .featured-products-header .featured-products-footer p { font-size: 15px !important; padding: 0 16px !important; } } @media (max-width: 428px) { body.cms-all-hang-tags #qwl-featured-products .featured-products-header .featured-products-footer p { font-size: 14px !important; padding: 0 12px !important; } } @media (max-width: 1024px) { body.cms-all-hang-tags .featured-products-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 768px) { body.cms-all-hang-tags .featured-products-grid { gap: 16px !important; padding: 0 16px !important; } } @media (max-width: 428px) { body.cms-all-hang-tags .featured-products-grid { gap: 10px !important; padding: 0 12px !important; } body.cms-all-hang-tags .featured-product-info h3 { font-size: 14px !important; } body.cms-all-hang-tags .featured-product-info p { font-size: 12px !important; } } @media (max-width: 768px) { body.cms-all-hang-tags #qwl-featured-products > .wrapper > .featured-products-footer h2, body.cms-all-hang-tags #qwl-featured-products .featured-products-footer h2 { font-size: 1.6rem !important; padding: 0 16px !important; } } @media (max-width: 428px) { body.cms-all-hang-tags #qwl-featured-products > .wrapper > .featured-products-footer h2, body.cms-all-hang-tags #qwl-featured-products .featured-products-footer h2 { font-size: 1.3rem !important; } } @media (max-width: 768px) { body.cms-all-hang-tags #qwl-homepage-categories .carousel-header { padding: 0 16px !important; } body.cms-all-hang-tags #qwl-homepage-categories .carousel-header h2 { font-size: 1.3rem !important; } body.cms-all-hang-tags #qwl-homepage-categories .carousel-header h2 a { font-size: inherit !important; } body.cms-all-hang-tags #qwl-homepage-categories .carousel-header .button { font-size: 11px !important; padding: 6px 12px !important; } body.cms-all-hang-tags #qwl-homepage-categories .wrapper { margin-left: 16px !important; margin-right: 16px !important; } } @media (max-width: 428px) { body.cms-all-hang-tags #qwl-homepage-categories .carousel-header h2 { font-size: 1.15rem !important; } body.cms-all-hang-tags #qwl-homepage-categories .wrapper { margin-left: 12px !important; margin-right: 12px !important; } } @media (max-width: 768px) { body.cms-all-hang-tags #reviews-faq { padding: 2rem 0 !important; } body.cms-all-hang-tags .reviews-faq-grid { padding: 0 16px !important; } body.cms-all-hang-tags .col-header { font-size: 1.4rem !important; } body.cms-all-hang-tags .faq-card button { width: 100% !important; padding: 1rem 1.2rem !important; font-size: 14px !important; } body.cms-all-hang-tags .review-card { padding: 1rem !important; } body.cms-all-hang-tags .review-text { font-size: 14px !important; } } @media (max-width: 428px) { body.cms-all-hang-tags .col-header { font-size: 1.2rem !important; } body.cms-all-hang-tags .faq-card button { font-size: 13px !important; padding: 0.9rem 1rem !important; } body.cms-all-hang-tags .review-text { font-size: 13px !important; } body.cms-all-hang-tags .review-author { font-size: 12px !important; } } @media (max-width: 1024px) { body.cms-all-hang-tags #homepage-sewing-services .ss-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } body.cms-all-hang-tags #homepage-sewing-services #ss-1 { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } body.cms-all-hang-tags #homepage-sewing-services #ss-text { grid-column: 1 / -1 !important; position: relative !important; z-index: 2 !important; background: #fff !important; padding: 24px !important; } body.cms-all-hang-tags #homepage-sewing-services .image-cell img { width: 100% !important; height: 100% !important; object-fit: cover !important; } } @media (max-width: 768px) { body.cms-all-hang-tags #homepage-sewing-services .ss-grid { grid-template-columns: 1fr 1fr !important; padding: 16px !important; } body.cms-all-hang-tags #homepage-sewing-services #ss-1 { grid-column: 1 / -1 !important; grid-template-columns: repeat(3, 1fr) !important; } body.cms-all-hang-tags #homepage-sewing-services #ss-text { grid-column: 1 / -1 !important; padding: 20px !important; } body.cms-all-hang-tags #homepage-sewing-services #ss-text h2 { font-size: 1.4rem !important; } body.cms-all-hang-tags #homepage-sewing-services #ss-text h2 svg { width: 32px !important; height: 32px !important; } } @media (max-width: 428px) { body.cms-all-hang-tags #homepage-sewing-services .ss-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; padding: 12px !important; } body.cms-all-hang-tags #homepage-sewing-services #ss-1 { grid-template-columns: 1fr 1fr !important; } body.cms-all-hang-tags #homepage-sewing-services #ss-1c { display: none !important; } body.cms-all-hang-tags #homepage-sewing-services #ss-text { padding: 16px !important; } body.cms-all-hang-tags #homepage-sewing-services #ss-text h2 { font-size: 1.2rem !important; gap: 8px !important; } body.cms-all-hang-tags #homepage-sewing-services #ss-text h2 svg { width: 28px !important; height: 28px !important; } body.cms-all-hang-tags #homepage-sewing-services #ss-text p, body.cms-all-hang-tags #homepage-sewing-services #ss-text li { font-size: 14px !important; } } @media (max-width: 428px) { body.cms-all-hang-tags .custom-branding { padding: 32px 0 !important; } body.cms-all-hang-tags .custom-branding h2.section-heading { font-size: 1.5rem !important; padding: 0 12px !important; } body.cms-all-hang-tags .branding-grid { gap: 8px !important; padding: 0 12px !important; } body.cms-all-hang-tags .branding-card .branding-text { padding: 12px 8px !important; } body.cms-all-hang-tags .branding-card .branding-btn { font-size: 11px !important; padding: 6px 14px !important; } body.cms-all-hang-tags .branding-card p { font-size: 11px !important; line-height: 1.4 !important; } } @media (max-width: 1024px) { body.cms-all-hang-tags .v2-quote-inner { margin-left: 30% !important; } } @media (max-width: 768px) { body.cms-all-hang-tags .v2-quote-section { padding: 32px 0 !important; } body.cms-all-hang-tags .v2-quote-inner { margin: 0 16px !important; padding: 24px 20px !important; max-width: none !important; } body.cms-all-hang-tags .v2-quote-inner h2 { font-size: 26px !important; } } @media (max-width: 428px) { body.cms-all-hang-tags .v2-quote-inner { margin: 0 12px !important; padding: 20px 16px !important; } body.cms-all-hang-tags .v2-quote-inner h2 { font-size: 22px !important; } body.cms-all-hang-tags .v2-quote-inner .qf-benefits li { font-size: 13px !important; } body.cms-all-hang-tags .v2-quote-inner .qf-note { font-size: 13px !important; } body.cms-all-hang-tags .qf-submit { font-size: 16px !important; height: 52px !important; } } @media (max-width: 768px) { body.cms-all-hang-tags .discounts-section { padding: 32px 0 !important; } body.cms-all-hang-tags .discounts-section h2 { font-size: 1.6rem !important; padding: 0 16px !important; } body.cms-all-hang-tags .discounts-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 0 16px !important; } body.cms-all-hang-tags .trucker-banner { padding: 0 16px !important; } } @media (max-width: 428px) { body.cms-all-hang-tags .discounts-section h2 { font-size: 1.3rem !important; padding: 0 12px !important; } body.cms-all-hang-tags .discounts-grid { gap: 8px !important; padding: 0 12px !important; } body.cms-all-hang-tags .discount-card .blurb { padding: 12px 8px !important; font-size: 13px !important; } body.cms-all-hang-tags .discount-card .blurb em { font-size: 17px !important; } } @media (max-width: 768px) { body.cms-all-hang-tags #homepage-samples { overflow: hidden !important; } body.cms-all-hang-tags #homepage-samples .wrapper { padding: 20px 16px !important; } body.cms-all-hang-tags #homepage-samples .heading { font-size: 1.6rem !important; } body.cms-all-hang-tags #homepage-samples p { font-size: 0.95rem !important; } } @media (max-width: 428px) { body.cms-all-hang-tags #homepage-samples .heading { font-size: 1.3rem !important; } body.cms-all-hang-tags #homepage-samples p { font-size: 0.85rem !important; } } @media (max-width: 768px) { body.cms-all-hang-tags .seo-section { padding: 32px 0 !important; } body.cms-all-hang-tags .seo-section-title { font-size: 1.8rem !important; } } @media (max-width: 428px) { body.cms-all-hang-tags .seo-section-title { font-size: 1.4rem !important; padding: 0 12px 16px !important; } body.cms-all-hang-tags .seo-row { padding: 0 12px !important; gap: 12px !important; margin-bottom: 24px !important; } body.cms-all-hang-tags .seo-row .seo-text h3 { font-size: 17px !important; } body.cms-all-hang-tags .seo-row .seo-text p { font-size: 13px !important; } } @media (max-width: 768px) { body.cms-all-hang-tags #homepage-footer .wrapper { padding: 24px 16px !important; } body.cms-all-hang-tags #homepage-footer .wrapper > p:first-child, body.cms-all-hang-tags #homepage-footer .wrapper p[style*="2.5rem"] { font-size: 1.6rem !important; } body.cms-all-hang-tags #homepage-footer .buttons { flex-direction: column !important; gap: 12px !important; width: 100% !important; } body.cms-all-hang-tags #homepage-footer .buttons .button { width: 100% !important; text-align: center !important; display: block !important; } } @media (max-width: 428px) { body.cms-all-hang-tags #homepage-footer .wrapper > p:first-child, body.cms-all-hang-tags #homepage-footer .wrapper p[style*="2.5rem"] { font-size: 1.3rem !important; } } @media (max-width: 768px) { body.cms-all-hang-tags #homepage-instagram { padding: 0 16px !important; overflow: hidden !important; } body.cms-all-hang-tags #homepage-instagram h2 { font-size: 1.3rem !important; } body.cms-all-hang-tags #homepage-instagram h2 a { font-size: inherit !important; } } @media (max-width: 1024px) { body.cms-all-hang-tags .page-footer .footer-middle .container .row { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; } body.cms-all-hang-tags .page-footer .footer-middle .container .row > .col-lg-4 { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; } } @media (max-width: 768px) { body.cms-all-hang-tags .page-footer .footer-middle .container { padding: 0 16px !important; } body.cms-all-hang-tags .page-footer .footer-middle .container .row { grid-template-columns: 1fr 1fr !important; gap: 20px 16px !important; } body.cms-all-hang-tags .page-footer .footer-middle .container .row > .col-lg-4 { min-width: 0 !important; } body.cms-all-hang-tags .page-footer h2.footer-menu-item-title { font-size: 15px !important; margin-bottom: 8px !important; } body.cms-all-hang-tags .page-footer .footer-menu-item { margin-bottom: 2px !important; } body.cms-all-hang-tags .page-footer .footer-menu-item a, body.cms-all-hang-tags .page-footer .footer-text-item span, body.cms-all-hang-tags .page-footer .footer-text-item a { font-size: 13px !important; } body.cms-all-hang-tags .page-footer .block.newsletter input { font-size: 14px !important; padding: 8px 12px !important; } body.cms-all-hang-tags .page-footer .block.newsletter .actions button { font-size: 13px !important; padding: 8px 16px !important; } body.cms-all-hang-tags .page-footer ~ div, body.cms-all-hang-tags footer > div:last-child { font-size: 12px !important; padding: 16px 12px !important; } body.cms-all-hang-tags .page-footer .accepted-payment-types img { max-width: 100% !important; height: auto !important; } } @media (max-width: 428px) { body.cms-all-hang-tags .page-footer .footer-middle .container { padding: 0 12px !important; } body.cms-all-hang-tags .page-footer .footer-middle .container .row { gap: 16px 12px !important; } body.cms-all-hang-tags .page-footer h2.footer-menu-item-title { font-size: 14px !important; } body.cms-all-hang-tags .page-footer .footer-menu-item a, body.cms-all-hang-tags .page-footer .footer-text-item span, body.cms-all-hang-tags .page-footer .footer-text-item a { font-size: 12px !important; line-height: 1.6 !important; } body.cms-all-hang-tags .page-footer .footer_newsletter_text { font-size: 12px !important; } body.cms-all-hang-tags .page-footer .footer_newsletter_text br { display: none; } } @media (max-width: 375px) { body.cms-all-hang-tags .page-footer h2.footer-menu-item-title { font-size: 13px !important; } body.cms-all-hang-tags .page-footer .footer-menu-item a, body.cms-all-hang-tags .page-footer .footer-text-item span, body.cms-all-hang-tags .page-footer .footer-text-item a { font-size: 11px !important; } } body.cms-all-hang-tags