/* ==========================================================================
   SU XIU - Journal 5v3 "Lettuce" skin
   Green / yellow / charcoal supermarket layout, rebuilt with SU XIU artwork.
   Loaded last. Every rule is scoped to .v3-body so the older demo-1
   stylesheet cannot win by source order.
   ========================================================================== */

.v3-body {
    --v3-green: #00a15c;
    --v3-green-2: #098a52;
    --v3-green-d: #087546;
    --v3-green-soft: #e8f5ec;
    --v3-yellow: #ffc107;
    --v3-yellow-d: #e9ac00;
    --v3-dark: #25282a;
    --v3-dark-2: #1d2022;
    --v3-bg: #f2f4f4;
    --v3-bg-2: #eef1f1;
    --v3-line: #e3e8e7;
    --v3-text: #363c3e;
    --v3-muted: #8b9493;
    --v3-red: #e04a3c;
    --v3-shadow: 0 2px 10px rgba(20, 40, 30, .06);
}

.v3-body {
    overflow-x: clip;
    background: var(--v3-bg);
    color: var(--v3-text);
    font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
.v3-body a { color: inherit; text-decoration: none; }
.v3-body a:hover { color: var(--v3-green); }
.v3-body img { max-width: 100%; }
.v3-body ul { list-style: none; margin: 0; padding: 0; }
.v3-body h1, .v3-body h2, .v3-body h3, .v3-body h4, .v3-body h5, .v3-body h6 { margin: 0; }
.v3-body .jf-wrap { max-width: 1400px; padding: 0 22px; }
.v3-body main { display: block; }
.v3-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--v3-yellow); color: #23282a !important; font-weight: 700;
    font-size: 12px; letter-spacing: .02em; padding: 10px 20px; border: 0;
    border-radius: 2px; cursor: pointer; transition: background .18s ease, transform .18s ease;
}
.v3-btn:hover { background: var(--v3-yellow-d); transform: translateY(-1px); }
.v3-btn.v3-btn-green { background: var(--v3-green); color: #fff !important; }
.v3-btn.v3-btn-green:hover { background: var(--v3-green-d); }
.v3-link { color: var(--v3-text); font-size: 12px; font-weight: 600; }
.v3-link:hover { color: var(--v3-green); }
.v3-sec { padding: 34px 0; }
.v3-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; gap: 16px; }
.v3-head h3 { font-size: 17px; font-weight: 700; color: #252b2c; letter-spacing: -.01em; }
.v3-head .v3-see { font-size: 12px; color: #6d7775; font-weight: 600; }
.v3-head .v3-see:hover { color: var(--v3-green); }

/* ============================== HEADER ================================== */
.v3-body .jf-announce {
    background: var(--v3-green-2); color: #fff; height: 34px; padding: 0;
    border: 0; position: relative;
}
.v3-body .d1-announce-in,
.v3-body .jf-announce-in { max-width: 1400px; margin: 0 auto; height: 34px; padding: 0 44px; display: flex; align-items: center; justify-content: center; position: relative; }
.v3-body .jf-announce-text { font-size: 12px; font-weight: 500; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 7px; }
.v3-ann-arrow { position: absolute; top: 0; width: 38px; height: 34px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); font-size: 15px; cursor: pointer; }
.v3-ann-arrow.prev { left: 12px; }
.v3-ann-arrow.next { right: 46px; }
.v3-ann-arrow:hover { color: #fff; }
.v3-body .jf-ann-close { position: absolute; right: 12px; top: 0; width: 30px; height: 34px; background: none; border: 0; color: #fff; font-size: 13px; cursor: pointer; }

.v3-body .jf-topbar { background: #fff; border-bottom: 1px solid var(--v3-line); height: 33px; }
.v3-body .jf-topbar-in { height: 33px; display: flex; align-items: center; justify-content: space-between; }
.v3-body .jf-topbar-left { display: flex; align-items: center; gap: 18px; }
.v3-body .jf-topbar-left a, .v3-body .jf-topbar-right span { font-size: 11px; color: #7c8584; display: inline-flex; align-items: center; gap: 5px; }
.v3-body .jf-topbar-left a:hover { color: var(--v3-green); }
.v3-body .jf-topbar-right { display: flex; gap: 16px; }

/* Brand title row (Journal 5v3 has a big shop name above the logo row) */
.v3-brandbar { background: #fff; border-bottom: 1px solid var(--v3-line); }
.v3-brandbar-in { max-width: 1400px; margin: 0 auto; padding: 16px 22px 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.v3-brandname { font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: #202526; line-height: 1; }
.v3-brandname::after { content: ""; display: block; width: 26px; height: 2px; margin-top: 9px; background: var(--v3-green); }
.v3-brand-links { display: flex; gap: 17px; align-items: center; flex-wrap: wrap; }
.v3-brand-links a, .v3-brand-links span { font-size: 11px; color: #7b8483; display: inline-flex; gap: 5px; align-items: center; }
.v3-brand-links a:hover { color: var(--v3-green); }

.v3-body .jf-header { background: #fff; }
.v3-body .jf-header-row1 { display: flex; align-items: center; gap: 26px; padding-top: 16px; padding-bottom: 16px; }
.v3-body .jf-logo { flex: 0 0 168px; }
.v3-body .jf-logo img { max-height: 42px; width: auto; }
.v3-logo { display: inline-flex; flex-direction: column; line-height: 1; }
.v3-logo span { font-size: 27px; font-weight: 900; letter-spacing: -.045em; color: #202526; }
.v3-logo small { font-size: 8px; font-weight: 700; letter-spacing: .18em; color: var(--v3-green); margin-top: 5px; }
.v3-body .jf-search { flex: 1 1 auto; min-width: 0; }
.v3-body .jf-search-form { display: flex; align-items: stretch; height: 40px; border: 1px solid #d8dedc; border-radius: 2px; background: #fff; overflow: hidden; }
.v3-body .jf-search-cat { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 0 12px; border-right: 1px solid var(--v3-line); position: relative; }
.v3-body .jf-search-cat select { border: 0; appearance: none; background: transparent; font-size: 12px; color: #4a5352; padding-right: 14px; outline: none; max-width: 105px; }
.v3-body .jf-search-cat i { font-size: 10px; color: #8b9493; }
.v3-body .jf-search-form input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; padding: 0 14px; font-size: 12px; color: var(--v3-text); }
.v3-body .jf-search-form button { flex: 0 0 46px; border: 0; background: #fff; color: #4d5655; font-size: 15px; cursor: pointer; }
.v3-body .jf-search-form button:hover { color: var(--v3-green); }
.v3-body .jf-header-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.v3-body .jf-langcur { display: flex; align-items: center; gap: 8px; }
.v3-body .jf-lang-hint { font-size: 11px; color: #6f7877; display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; }
.v3-body .jf-lang-btn, .v3-body .jf-cur-slot .dropdown > button,
.v3-body .jf-ht { height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid #dfe4e3; background: #fff; border-radius: 2px; font-size: 12px; color: #3d4645; white-space: nowrap; }
.v3-body .jf-ht:hover, .v3-body .jf-lang-btn:hover { border-color: var(--v3-green); color: var(--v3-green); }
.v3-body .jf-cur-slot .dropdown > button { min-width: 42px; justify-content: center; }
.v3-body .jf-lang-menu { min-width: 240px; border-radius: 3px; border-color: var(--v3-line); box-shadow: 0 12px 28px rgba(0,0,0,.12); }
.v3-body .jf-lang-menu-head { padding: 9px 14px; font-size: 11px; font-weight: 700; color: var(--v3-green-d); border-bottom: 1px solid var(--v3-line); }
.v3-body .jf-lang-menu .dropdown-item.active { background: var(--v3-green-soft); color: var(--v3-green-d); }

.v3-body .jf-nav { background: #fff; border-top: 1px solid var(--v3-line); border-bottom: 1px solid var(--v3-line); }
.v3-body .jf-nav-row2 { display: flex; align-items: center; gap: 0; min-height: 46px; }
.v3-body .jf-nav-all { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 16px; background: var(--v3-green); color: #fff !important; font-size: 12px; font-weight: 700; position: relative; }
.v3-body .jf-nav-all:hover { background: var(--v3-green-d); }
.v3-body .jf-new-badge { position: absolute; top: -8px; right: 8px; background: #2f8ae0; color: #fff; font-size: 9px; padding: 1px 5px; border-radius: 2px; }
.v3-body .jf-nav-links { display: flex; align-items: center; gap: 0; flex: 1 1 auto; }
.v3-body .jf-nav-links > li { position: relative; }
.v3-body .jf-nav-links > li > a { display: inline-flex; align-items: center; gap: 5px; padding: 0 14px; height: 46px; font-size: 12px; font-weight: 600; color: #3b4342; white-space: nowrap; }
.v3-body .jf-nav-links > li > a:hover { color: var(--v3-green); }
.v3-body .jf-nav-links .jf-sale-badge { background: #f3e2e0; color: var(--v3-red); font-size: 9px; padding: 2px 5px; border-radius: 2px; }
.v3-body .jf-mega { display: none; position: absolute; left: 0; top: 46px; z-index: 60; background: #fff; border: 1px solid var(--v3-line); box-shadow: 0 14px 30px rgba(0,0,0,.12); padding: 18px; min-width: 520px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.v3-body .jf-nav-links li.has-child:hover > .jf-mega { display: grid; }
.v3-body .jf-mega h6 { font-size: 12px; font-weight: 700; margin-bottom: 10px; color: var(--v3-green-d); }
.v3-body .jf-mega a { display: block; font-size: 12px; padding: 5px 0; color: #5c6564; }
.v3-body .jf-mega a:hover { color: var(--v3-green); }
.v3-body .jf-nav-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.v3-body .jf-nav-util { font-size: 12px; color: #46504f; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.v3-body .jf-nav-util:hover { color: var(--v3-green); }
.v3-body .jf-nav-contact { display: none; }
.v3-body #cart .dropdown > button { height: 34px; background: var(--v3-green) !important; border: 0 !important; border-radius: 2px; font-size: 12px; font-weight: 600; padding: 0 14px; color: #fff !important; }
.v3-body #cart .dropdown > button:hover { background: var(--v3-green-d) !important; }
.v3-body #cart .dropdown > button::after { display: none; }
.v3-body .jf-nav-toggle { display: none; }

/* ======================= SERVICE STRIP ================================= */
.v3-service { background: var(--v3-green); color: #fff; }
.v3-service .v3-wrap2 { max-width: 1400px; margin: 0 auto; padding: 16px 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.v3-service .si { display: flex; align-items: center; gap: 12px; justify-content: center; }
.v3-service .si > i { font-size: 24px; opacity: .95; }
.v3-service .si b { display: block; font-size: 12px; font-weight: 700; }
.v3-service .si span { display: block; font-size: 10px; opacity: .82; margin-top: 2px; }
.v3-body .jf-service-strip { background: var(--v3-green); }
.v3-body .jf-service-strip .jf-wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.v3-body .jf-service-strip .si { display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; }
.v3-body .jf-service-strip .si i { font-size: 23px; }
.v3-body .jf-service-strip .si b { font-size: 12px; }
.v3-body .jf-service-strip .si span { font-size: 10px; opacity: .85; }

/* ============================== HERO =================================== */
.v3-hero-sec { background: #fff; padding: 18px 0 20px; }
.v3-hero-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr) 210px; gap: 10px; align-items: stretch; }
.v3-side-cats { background: #fff; border: 1px solid var(--v3-line); padding: 7px 0; }
.v3-side-cats a { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 12px; color: #596260; border-bottom: 1px solid #f0f2f1; }
.v3-side-cats a:last-child { border-bottom: 0; }
.v3-side-cats a:hover { color: var(--v3-green); background: #f8fbfa; }
.v3-side-cats i { width: 15px; color: #9aa3a1; font-size: 12px; }

.v3-slider { position: relative; overflow: hidden; background: #1b2a22; min-height: 356px; }
.v3-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s ease; }
.v3-slide.active { opacity: 1; visibility: visible; position: relative; }
.v3-slide img.v3-slide-bg { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-slider[data-h="1"] .v3-slide { position: absolute; }
.v3-slider[data-h="1"] .v3-slide.active { position: absolute; }
.v3-slide-copy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; color: #fff; }
.v3-slide-kicker { display: inline-block; background: rgba(255,255,255,.92); color: #2a3330; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 12px; border-radius: 2px; margin-bottom: 14px; }
.v3-slide-copy h2 { font-size: 34px; line-height: 1.18; font-weight: 700; letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(0,0,0,.35); max-width: 620px; }
.v3-slide-copy p { font-size: 13px; margin: 10px 0 18px; opacity: .92; text-shadow: 0 1px 6px rgba(0,0,0,.4); max-width: 520px; }
.v3-slide-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.15); color: #fff; font-size: 12px; cursor: pointer; }
.v3-slide-arrow:hover { background: rgba(255,255,255,.35); }
.v3-slide-arrow.prev { left: 14px; }
.v3-slide-arrow.next { right: 14px; }
.v3-slide-dots { position: absolute; bottom: 14px; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; gap: 7px; }
.v3-slide-dots button { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #fff; background: transparent; padding: 0; cursor: pointer; }
.v3-slide-dots button.active { background: #fff; }

.v3-offers { background: #fff; border: 1px solid var(--v3-line); padding: 14px 13px; }
.v3-offers h5 { font-size: 13px; font-weight: 700; padding-bottom: 10px; border-bottom: 1px solid var(--v3-line); margin-bottom: 4px; }
.v3-offer { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #f0f2f1; }
.v3-offer:last-child { border-bottom: 0; }
.v3-offer .num { flex: 0 0 16px; font-size: 11px; color: #a9b1b0; }
.v3-offer img { flex: 0 0 42px; width: 42px; height: 42px; object-fit: cover; border: 1px solid #eef0ef; }
.v3-offer .t { min-width: 0; flex: 1; }
.v3-offer .t b { display: block; font-size: 11px; font-weight: 600; color: #4a5351; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-offer .t span { font-size: 11px; font-weight: 700; color: #2b3230; }
.v3-offer .t s { color: #a9b1b0; font-size: 10px; margin-left: 4px; }

/* ======================= PASTEL CATEGORY TILES ========================= */
.v3-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.v3-tile { position: relative; min-height: 118px; padding: 20px 16px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; }
.v3-tile:nth-child(1) { background: #e7eee6; }
.v3-tile:nth-child(2) { background: #f3ebdc; }
.v3-tile:nth-child(3) { background: #f4e8ec; }
.v3-tile:nth-child(4) { background: #ecebf3; }
.v3-tile .tx { position: relative; z-index: 2; max-width: 62%; }
.v3-tile b { display: block; font-size: 14px; font-weight: 700; color: #2c3432; line-height: 1.25; }
.v3-tile small { display: block; font-size: 10px; color: #78817f; margin: 5px 0 9px; }
.v3-tile .v3-chip { display: inline-block; background: #fff; font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 2px; color: #3a4341; }
.v3-tile .ln { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: #3b4442; margin-top: 8px; }
.v3-tile img { position: relative; z-index: 1; width: 108px; height: 108px; object-fit: contain; }

/* ============================ PRODUCT CARDS ============================ */
.v3-pgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.v3-pcard { background: #fff; position: relative; display: flex; flex-direction: column; min-height: 288px; }
.v3-pcard-img { display: block; height: 190px; padding: 16px 16px 4px; }
.v3-pcard-img img { width: 100%; height: 100%; object-fit: contain; }
.v3-pbadge { position: absolute; top: 10px; left: 10px; z-index: 3; font-size: 9px; font-weight: 700; padding: 3px 7px; color: #fff; background: var(--v3-green); }
.v3-pbadge.sale { background: var(--v3-red); }
.v3-bookmark { position: absolute; top: 0; left: 14px; z-index: 3; width: 14px; height: 20px; background: var(--v3-red); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); }
.v3-pcard-body { padding: 6px 13px 12px; margin-top: auto; }
.v3-pcard .brand { display: block; font-size: 10px; color: #99a2a0; margin-bottom: 3px; }
.v3-pcard .pname { display: block; font-size: 12px; font-weight: 600; color: #333b39; line-height: 1.3; min-height: 31px; }
.v3-pcard .pname:hover { color: var(--v3-green); }
.v3-price { font-size: 13px; font-weight: 700; color: #2b3230; margin: 6px 0 9px; }
.v3-price s { font-size: 11px; font-weight: 400; color: var(--v3-red); margin-left: 6px; }
.v3-pcard-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--v3-line); padding-top: 9px; gap: 5px; }
.v3-pcard-foot .qty { display: inline-flex; align-items: center; border: 1px solid #dfe4e3; height: 26px; }
.v3-pcard-foot .qty input { width: 28px; border: 0; text-align: center; font-size: 11px; outline: none; }
.v3-pcard-foot .add { font-size: 10px; font-weight: 600; color: #4a5452; display: inline-flex; gap: 5px; align-items: center; }
.v3-pcard-foot .add:hover { color: var(--v3-green); }
.v3-pcard-foot .icons { display: inline-flex; gap: 8px; color: #9aa3a1; font-size: 11px; }

/* ===================== CATEGORY MODULE (table grid) ==================== */
.v3-catmod { background: #fff; padding: 16px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.v3-catmod + .v3-catmod { margin-top: 26px; }
.v3-catmod-pic { position: relative; min-height: 286px; background: #6d5d4d; overflow: hidden; }
.v3-catmod-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-catmod-pic .over { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,28,22,.35), rgba(18,28,22,.05) 60%); padding: 16px; display: flex; flex-direction: column; align-items: flex-start; }
.v3-catmod-pic .lbl { background: #fff; color: #2c3532; font-size: 9px; font-weight: 700; padding: 4px 9px; border-radius: 2px; }
.v3-catmod-pic h4 { color: #fff; font-size: 19px; font-weight: 700; margin-top: 14px; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.v3-catmod-pic small { color: rgba(255,255,255,.9); font-size: 10px; margin-top: 5px; }
.v3-catmod-pic .v3-btn { margin-top: auto; }
.v3-catmod-body .cm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.v3-catmod-body .cm-head b { font-size: 14px; font-weight: 700; }
.v3-cm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, 1fr); gap: 8px; }
.v3-cm-cell { background: #fff; border: 1px solid #eef0ef; padding: 12px 13px; min-height: 84px; min-width: 0; overflow: hidden; }
.v3-cm-cell b { display: block; max-width: 100%; font-size: 11px; font-weight: 600; color: #46504e; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-cm-cell .pr { font-size: 11px; font-weight: 700; color: #2b3230; }
.v3-cm-cell .pr s { color: var(--v3-red); font-weight: 400; font-size: 10px; margin-left: 4px; }
.v3-cm-cell .ic { color: #a9b1b0; font-size: 10px; margin-top: 6px; display: flex; gap: 9px; }

/* ============================ DARK BANNER ============================== */
.v3-darkbanner { position: relative; background: #242628; overflow: hidden; min-height: 220px; display: flex; align-items: center; }
.v3-darkbanner .copy { position: relative; z-index: 2; padding: 32px 40px; max-width: 56%; }
.v3-darkbanner .lbl { display: inline-block; background: var(--v3-green); color: #fff; font-size: 9px; font-weight: 700; padding: 4px 9px; border-radius: 2px; margin-bottom: 14px; }
.v3-darkbanner h3 { color: #fff; font-size: 24px; font-weight: 700; }
.v3-darkbanner p { color: rgba(255,255,255,.68); font-size: 11px; margin: 8px 0 18px; }
.v3-darkbanner .art { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); width: 300px; height: 300px; opacity: .95; }
.v3-darkbanner .art img { width: 100%; height: 100%; object-fit: contain; }

/* =========================== AWARD / BRAND CARDS ======================= */
.v3-brandcards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.v3-brandcard { background: #fff; min-height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.v3-brandcard b { font-size: 12px; color: #303836; }
.v3-brandcard span { font-size: 10px; color: #99a2a0; }

/* ============================ TOP PRODUCTS ============================= */
.v3-topproducts { background: var(--v3-dark); padding: 40px 0 34px; }
.v3-tp-head { text-align: center; margin-bottom: 24px; }
.v3-tp-head h3 { color: #fff; font-size: 22px; font-weight: 700; }
.v3-tp-head p { color: rgba(255,255,255,.55); font-size: 11px; margin-top: 6px; }
.v3-tp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.v3-tp-col > b { display: block; color: #fff; font-size: 12px; font-weight: 700; margin-bottom: 9px; }
.v3-tp-item { background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px; margin-bottom: 7px; min-height: 56px; position: relative; }
.v3-tp-item .t { min-width: 0; }
.v3-tp-item .t b { display: block; font-size: 11px; font-weight: 600; color: #3d4644; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-tp-item .t span { font-size: 11px; font-weight: 700; color: #2b3230; }
.v3-tp-item .t s { font-size: 10px; color: var(--v3-red); margin-left: 4px; font-weight: 400; }
.v3-tp-item .t i { display: block; color: #b0b8b6; font-size: 9px; font-style: normal; margin-top: 3px; }
.v3-tp-item .n { font-size: 15px; font-weight: 700; color: #c9d0ce; }
.v3-tp-item .bm { position: absolute; left: 0; top: -1px; width: 12px; height: 17px; background: var(--v3-red); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); }

/* ============================== MARQUEE ================================ */
.v3-marquee { background: var(--v3-green); color: #fff; overflow: hidden; contain: paint; max-width: 100%; height: 34px; display: flex; align-items: center; }
.v3-marquee-track { display: flex; align-items: center; gap: 22px; white-space: nowrap; animation: v3marq 38s linear infinite; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.v3-marquee-track i { opacity: .7; font-style: normal; }
@keyframes v3marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================= TESTIMONIALS ============================ */
.v3-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.v3-quote { background: #fff; padding: 24px 24px 26px; min-height: 210px; }
.v3-quote .qm { font-size: 38px; color: #3b4442; line-height: .7; font-family: Georgia, serif; margin-bottom: 16px; }
.v3-quote p { font-size: 12px; line-height: 1.75; color: #6a7371; }
.v3-quote b { display: block; font-size: 11px; margin-top: 16px; color: #2f3735; }

/* ==================== FEATURES / ARTICLES ============================== */
.v3-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.v3-feature .num { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 30px; background: var(--v3-green); color: #fff; font-size: 12px; font-weight: 700; padding: 0 8px; }
.v3-feature h5 { font-size: 12px; font-weight: 700; margin: 14px 0 8px; color: #303836; }
.v3-feature p { font-size: 11px; line-height: 1.7; color: #78817f; }
.v3-feature a { font-size: 11px; font-weight: 700; color: var(--v3-green); display: inline-flex; gap: 5px; align-items: center; margin-top: 10px; }
.v3-tabs { display: flex; gap: 20px; border-bottom: 1px solid #dfe4e3; margin-bottom: 22px; }
.v3-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 0 10px; font-size: 13px; font-weight: 700; color: #8b9493; cursor: pointer; }
.v3-tabs button.active { color: #2b3230; border-bottom-color: #2b3230; }
.v3-pane { display: none; }
.v3-pane.active { display: block; }

/* ============================== FOOTER ================================ */
.v3-prefooter { background: var(--v3-dark); padding: 22px 0; border-top: 1px solid rgba(255,255,255,.06); }
.v3-prefooter .v3-brandcards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v3-prefooter .v3-brandcard { min-height: 72px; }
.v3-prefooter .v3-tabs { border-bottom-color: rgba(255,255,255,.12); padding-top: 2px; }
.v3-prefooter .v3-tabs button { color: rgba(255,255,255,.6); }
.v3-prefooter .v3-tabs button.active { color: #fff; border-bottom-color: var(--v3-green); }
.v3-prefooter .v3-see { color: rgba(255,255,255,.65); font-size: 11px; align-self: center; padding-bottom: 10px; }
.v3-prefooter .v3-see:hover { color: #fff; }
.v3-footer { background: var(--v3-dark-2); color: #c3c9c8; }
.v3-footer-in { max-width: 1400px; margin: 0 auto; padding: 42px 22px 36px; }
.v3-footer-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,.08); }
.v3-footer-logo { font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: #fff !important; }
.v3-footer-social { display: flex; gap: 9px; }
.v3-footer-social a { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: #c3c9c8; font-size: 12px; }
.v3-footer-social a:hover { color: var(--v3-green); }
.v3-footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; padding: 34px 0 40px; }
.v3-footer h5 { color: #fff; font-size: 12px; font-weight: 700; margin-bottom: 16px; }
.v3-footer ul li { margin-bottom: 9px; }
.v3-footer ul a { font-size: 11px; color: #a7aeac; }
.v3-footer ul a:hover { color: var(--v3-green); }
.v3-news p { font-size: 11px; line-height: 1.7; color: #a7aeac; margin-bottom: 12px; }
.v3-news form { display: flex; height: 36px; background: #fff; border-radius: 2px; overflow: hidden; }
.v3-news input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; padding: 0 12px; font-size: 11px; }
.v3-news button { flex: 0 0 40px; border: 0; background: #2c3032; color: #fff; cursor: pointer; }
.v3-news button:hover { background: var(--v3-green); }
.v3-news label { font-size: 10px; color: #8d9593; display: flex; gap: 7px; align-items: center; margin-top: 10px; }
.v3-footer-bottom { background: #191b1d; border-top: 1px solid rgba(255,255,255,.06); }
.v3-footer-bottom-in { max-width: 1400px; margin: 0 auto; padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.v3-footer-bottom span { font-size: 10px; color: #858d8b; display: inline-flex; gap: 6px; align-items: center; }
.v3-pay { display: flex; gap: 5px; }
.v3-pay i { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 19px; background: #3a3e40; color: #c9cfcd; font-size: 8px; font-style: normal; font-weight: 700; border-radius: 2px; }
.v3-body .jf-to-top { background: var(--v3-green); }

/* ============================ PRODUCT PAGE ============================= */
.v3-body .jf-pwrap { max-width: 1400px; margin: 0 auto; padding: 0 22px 30px; }
.v3-body .jf-pbread { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--v3-bg-2); border: 1px solid var(--v3-line); color: #7b8483; font-size: 11px; padding: 11px; margin: 16px 0 0; }
.v3-body .jf-pbread a:hover { color: var(--v3-green); }
.v3-body .jf-ptitle { font-size: 26px; font-weight: 700; color: #202526; padding: 26px 0 18px; }
.v3-body .jf-ptitle::after { content: ""; display: block; width: 26px; height: 2px; background: var(--v3-green); margin-top: 10px; }
.v3-body .jf-product { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 250px; gap: 26px; align-items: start; background: #fff; padding: 22px; }
.v3-body .jf-pgallery .image > a > img { width: 100%; max-height: 470px; object-fit: contain; }
.v3-body .jf-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.v3-body .jf-thumbs img { width: 66px; height: 66px; object-fit: cover; border: 1px solid var(--v3-line); }
.v3-body .jf-thumbs a:hover img { border-color: var(--v3-green); }
.v3-body .jf-pintro { font-size: 12px; color: #7b8483; line-height: 1.6; }
.v3-body .jf-pprice { font-size: 27px; font-weight: 700; color: #222827; margin: 8px 0 2px; }
.v3-body .jf-pprice .old { font-size: 15px; font-weight: 400; color: #a4acaa; text-decoration: line-through; margin-left: 8px; }
.v3-body .jf-ptax { font-size: 11px; color: #8b9493; }
.v3-body .jf-pmeta { margin: 14px 0; }
.v3-body .jf-pmeta li { font-size: 11px; color: #606a68; margin-bottom: 5px; }
.v3-body .jf-pmeta a { color: var(--v3-green); text-decoration: underline; }
.v3-body .jf-pbuy { display: flex; align-items: center; gap: 12px; margin: 18px 0 10px; flex-wrap: wrap; }
.v3-body .jf-qty { display: inline-flex; align-items: center; border: 1px solid #d8dedc; height: 40px; }
.v3-body .jf-qty button { width: 34px; height: 38px; border: 0; background: #fff; font-size: 14px; cursor: pointer; }
.v3-body .jf-qty input { width: 46px; border: 0; text-align: center; font-size: 13px; outline: none; }
.v3-body #button-cart, .v3-body .jf-pbuy .btn-primary { background: var(--v3-dark) !important; border-color: var(--v3-dark) !important; color: #fff !important; height: 40px; padding: 0 18px; font-size: 12px; font-weight: 700; border-radius: 2px; }
.v3-body #button-cart:hover { background: var(--v3-green) !important; border-color: var(--v3-green) !important; }
.v3-body .jf-plinks { display: flex; gap: 16px; margin: 8px 0 16px; }
.v3-body .jf-plinks a, .v3-body .jf-plinks button { font-size: 11px; color: #6d7775; display: inline-flex; gap: 5px; align-items: center; background: none; border: 0; }
.v3-body .jf-plinks a:hover { color: var(--v3-green); }
.v3-body .jf-pacc { border-top: 1px solid var(--v3-line); border-bottom: 1px solid var(--v3-line); margin: 10px 0; }
.v3-body .jf-pacc summary, .v3-body .jf-pacc > button, .v3-body .jf-pacc-head { width: 100%; text-align: left; background: #fff; border: 0; padding: 13px 2px; font-size: 12px; font-weight: 600; color: #3d4644; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.v3-body .jf-pacc-body { font-size: 11px; color: #78817f; line-height: 1.7; padding: 0 2px 14px; }
.v3-body .jf-pshare { display: flex; gap: 6px; justify-content: center; margin: 18px 0 4px; }
.v3-body .jf-pshare a { width: 27px; height: 27px; display: inline-flex; align-items: center; justify-content: center; background: #9aa3a1; color: #fff; font-size: 11px; border-radius: 2px; }
.v3-body .jf-pshare a:hover { background: var(--v3-green); }
.v3-body .jf-pside { display: flex; flex-direction: column; gap: 12px; }
.v3-body .jf-pcard { background: #fff; border: 1px solid #eef0ef; padding: 16px; }
.v3-body .jf-pcard h5 { font-size: 13px; font-weight: 700; margin-bottom: 12px; color: #2c3432; }
.v3-body .jf-pcard p { font-size: 11px; color: #7b8483; margin-bottom: 10px; }
.v3-body .jf-pcard ul li { font-size: 11px; color: #596260; margin-bottom: 8px; display: flex; gap: 7px; align-items: flex-start; }
.v3-body .jf-pcard ul li i { color: var(--v3-green); margin-top: 2px; }
.v3-body .jf-side-item { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid #f0f2f1; }
.v3-body .jf-side-item:last-child { border-bottom: 0; }
.v3-body .jf-side-item img { width: 38px; height: 38px; object-fit: cover; border: 1px solid #eef0ef; }
.v3-body .jf-side-item .t b { display: block; font-size: 11px; font-weight: 600; color: #4a5351; }
.v3-body .jf-side-item .t span { font-size: 11px; font-weight: 700; color: #2b3230; }
.v3-body .jf-ptabs { display: flex; gap: 24px; border-bottom: 1px solid #dfe4e3; margin: 26px 0 0; background: #fff; padding: 0 22px; }
.v3-body .jf-ptabs .nav-link { border: 0; border-bottom: 2px solid transparent; padding: 16px 0; font-size: 13px; font-weight: 700; color: #8b9493; border-radius: 0; }
.v3-body .jf-ptabs .nav-link.active { color: #2b3230; border-bottom-color: #2b3230; background: none; }
.v3-body #product-info > .tab-content { background: #fff; padding: 22px; font-size: 12px; line-height: 1.8; color: #6a7371; }
.v3-body .jf-related { margin-top: 14px; }
.v3-body .jf-related h3 { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.v3-body .jf-related .product-thumb { background: #fff; border: 1px solid var(--v3-line); padding: 12px; height: 100%; }
.v3-body .jf-related .product-thumb .image img { width: 100%; height: 150px; object-fit: contain; }
.v3-body .jf-related .product-thumb h4 a { font-size: 12px; }
.v3-body .jf-related .price { font-size: 13px; font-weight: 700; color: #2b3230; }

/* Inquiry form (unchanged functionality, restyled to match) */
.v3-body .jf-inquiry { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px; }
.v3-body .jf-inquiry-intro h3 { font-size: 17px; font-weight: 700; color: #2b3230; margin-bottom: 10px; }
.v3-body .jf-inquiry-intro p { font-size: 12px; line-height: 1.7; color: #6a7371; }
.v3-body .jf-inquiry-intro ul { margin: 14px 0; }
.v3-body .jf-inquiry-intro ul li { font-size: 11px; color: #596260; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.v3-body .jf-inquiry-intro ul li i { color: var(--v3-green); }
.v3-body .jf-inquiry-contact { display: flex; flex-direction: column; gap: 8px; font-size: 11px; color: #6d7775; }
.v3-body .jf-inq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.v3-body .jf-inq-field { margin-bottom: 14px; }
.v3-body .jf-inq-field label { display: block; font-size: 11px; font-weight: 700; color: #46504e; margin-bottom: 6px; }
.v3-body .jf-inq-field label em { color: var(--v3-red); font-style: normal; }
.v3-body .jf-inq-field input, .v3-body .jf-inq-field textarea { width: 100%; border: 1px solid #d8dedc; border-radius: 2px; padding: 10px 12px; font-size: 12px; outline: none; background: #fff; box-sizing: border-box; }
.v3-body .jf-inq-field input:focus, .v3-body .jf-inq-field textarea:focus { border-color: var(--v3-green); }
.v3-body .jf-captcha-row { display: flex; gap: 8px; align-items: center; }
.v3-body .jf-captcha-row input { flex: 1 1 auto; min-width: 0; }
.v3-body .jf-captcha-row img { flex: 0 0 150px; height: 44px; border: 1px solid #d8dedc; }
.v3-body #jf-captcha-refresh { flex: 0 0 40px; height: 44px; border: 1px solid #d8dedc; background: #fff; cursor: pointer; }
.v3-body #jf-captcha-refresh:hover { color: var(--v3-green); border-color: var(--v3-green); }
.v3-body .jf-inquiry-submit, .v3-body #jf-inquiry-submit { background: var(--v3-green) !important; color: #fff !important; border: 0; border-radius: 2px; padding: 11px 22px; font-size: 12px; font-weight: 700; }
.v3-body #jf-inquiry-submit:hover { background: var(--v3-green-d) !important; }
.v3-body .jf-inq-msg { font-size: 12px; margin-top: 12px; }
.v3-body .jf-hp { position: absolute !important; left: -9999px !important; }

/* Generic OpenCart pages (category / checkout / account) recolour */
.v3-body .btn-primary { background: var(--v3-green) !important; border-color: var(--v3-green) !important; }
.v3-body .btn-primary:hover { background: var(--v3-green-d) !important; border-color: var(--v3-green-d) !important; }
.v3-body .breadcrumb { background: var(--v3-bg-2); }
.v3-body .card, .v3-body .list-group-item { border-color: var(--v3-line); }
.v3-body #cart .dropdown-menu { border-radius: 2px; }

/* =============================== RTL ================================== */
.v3-body[dir="rtl"] .v3-side-cats a, .v3-body[dir="rtl"] .v3-offer,
.v3-body[dir="rtl"] .v3-service .si, .v3-body[dir="rtl"] .jf-topbar-left { direction: rtl; }
.v3-body[dir="rtl"] .v3-slide-arrow.prev { left: auto; right: 14px; }
.v3-body[dir="rtl"] .v3-slide-arrow.next { right: auto; left: 14px; }
.v3-body[dir="rtl"] .jf-nav-right { margin-left: 0; margin-right: auto; }
.v3-body[dir="rtl"] .jf-logo, .v3-body[dir="rtl"] .jf-pgallery { direction: ltr; }
.v3-body[dir="rtl"] .v3-tile, .v3-body[dir="rtl"] .v3-catmod, .v3-body[dir="rtl"] .v3-pcard,
.v3-body[dir="rtl"] .v3-quote, .v3-body[dir="rtl"] .v3-feature { text-align: right; }
.v3-body[dir="rtl"] .v3-bookmark { left: auto; right: 14px; }

/* ============================ RESPONSIVE =============================== */
@media (max-width: 1200px) {
    .v3-body .jf-header-row1 { flex-wrap: wrap; gap: 14px; }
    .v3-body .jf-logo { flex-basis: 150px; }
    .v3-body .jf-header-tools { flex-wrap: wrap; }
    .v3-body .jf-nav-links > li > a { padding: 0 9px; }
    .v3-hero-grid { grid-template-columns: 170px minmax(0, 1fr) 180px; }
    .v3-body .jf-product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 220px; gap: 16px; padding: 16px; }
}
@media (max-width: 991px) {
    .v3-hero-grid { grid-template-columns: minmax(0, 1fr) 190px; }
    .v3-side-cats { display: none; }
    .v3-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v3-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .v3-catmod { grid-template-columns: 200px minmax(0, 1fr); }
    .v3-cm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, 1fr); }
    .v3-tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v3-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v3-body .jf-product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .v3-body .jf-pside { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
    .v3-body .jf-pside .jf-pcard { flex: 1 1 240px; }
    .v3-body .jf-nav-links { display: none; }
    .v3-body .jf-nav-toggle { display: inline-flex; background: none; border: 0; font-size: 17px; padding: 0 12px; }
    .v3-body .jf-nav-toggle.open ~ .jf-nav-links { display: flex; position: absolute; left: 0; right: 0; top: 46px; background: #fff; z-index: 70; flex-direction: column; align-items: stretch; box-shadow: 0 12px 24px rgba(0,0,0,.12); }
    .v3-body .jf-nav { position: relative; }
    .v3-body .jf-nav-links > li > a { height: 40px; }
    .v3-body .jf-mega { position: static; box-shadow: none; min-width: 0; display: none; }
    .v3-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .v3-body .jf-wrap { padding: 0 14px; }
    .v3-body .jf-topbar-right, .v3-brand-links { display: none; }
    .v3-body .jf-topbar-left { gap: 10px; overflow: hidden; }
    .v3-body .jf-topbar-left a:nth-child(n+4) { display: none; }
    .v3-brandbar-in { padding: 12px 14px; }
    .v3-brandname { font-size: 20px; }
    .v3-body .jf-header-row1 { gap: 10px; padding: 12px 0; }
    .v3-body .jf-logo { flex-basis: 110px; }
    .v3-body .jf-logo img { max-height: 32px; }
    .v3-body .jf-search { order: 3; flex-basis: 100%; }
    .v3-body .jf-header-tools { margin-left: auto; gap: 5px; }
    .v3-body .jf-lang-hint, .v3-body .jf-acct, .v3-body .jf-header-tools > .jf-ht { display: none; }
    .v3-body .jf-ht, .v3-body .jf-lang-btn, .v3-body .jf-cur-slot .dropdown > button { height: 34px; padding: 0 9px; }
    .v3-body .jf-nav-row2 { min-height: 42px; }
    .v3-body .jf-nav-all { height: 42px; padding: 0 11px; font-size: 11px; }
    .v3-body .jf-nav-util .jf-util-label { display: none; }
    .v3-hero-sec { padding: 12px 0; }
    .v3-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .v3-offers { display: none; }
    .v3-slider { min-height: 240px; }
    .v3-slide-copy h2 { font-size: 22px; }
    .v3-slide-copy p { font-size: 11px; }
    .v3-tiles { gap: 8px; }
    .v3-tile { min-height: 100px; padding: 14px 10px; }
    .v3-tile b { font-size: 12px; }
    .v3-tile img { width: 74px; height: 74px; }
    .v3-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .v3-pcard { min-height: 240px; }
    .v3-pcard-img { height: 140px; padding: 12px 12px 2px; }
    .v3-catmod { grid-template-columns: minmax(0, 1fr); }
    .v3-catmod-pic { min-height: 190px; }
    .v3-cm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, 1fr); }
    .v3-darkbanner { min-height: 200px; }
    .v3-darkbanner .copy { max-width: 76%; padding: 22px 18px; }
    .v3-darkbanner h3 { font-size: 18px; }
    .v3-darkbanner .art { width: 170px; height: 170px; right: -30px; opacity: .55; }
    .v3-brandcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v3-tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v3-tp-item { padding: 9px; }
    .v3-quotes { grid-template-columns: minmax(0, 1fr); }
    .v3-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v3-service .v3-wrap2, .v3-body .jf-service-strip .jf-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .v3-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .v3-footer-bottom-in { flex-direction: column; align-items: flex-start; }
    .v3-body .jf-product { grid-template-columns: minmax(0, 1fr); padding: 14px; }
    .v3-body .jf-pgallery .image > a > img { max-height: 330px; }
    .v3-body .jf-pside { flex-direction: column; }
    .v3-body .jf-ptabs { gap: 14px; padding: 0 14px; overflow-x: auto; }
    .v3-body .jf-ptabs .nav-link { font-size: 11px; white-space: nowrap; }
    .v3-body .jf-inquiry { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .v3-body .jf-inq-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .v3-body #product-info > .tab-content { padding: 16px; }
    .v3-body .jf-pwrap { padding: 0 0 20px; }
    .v3-body .jf-pbread { margin: 10px 14px 0; }
    .v3-body .jf-ptitle { padding: 18px 14px 12px; font-size: 21px; }
}
@media (max-width: 479px) {
    .v3-service .v3-wrap2, .v3-body .jf-service-strip .jf-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v3-service .si { justify-content: flex-start; gap: 8px; }
    .v3-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v3-tp-grid { grid-template-columns: minmax(0, 1fr); }
    .v3-tp-col:nth-child(n+3) { display: none; }
    .v3-footer-cols { grid-template-columns: minmax(0, 1fr); }
    .v3-prefooter .v3-brandcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==================== final overrides / polish ========================= */
/* The legacy base stylesheet hides every <footer> in the old demo shell. */
.v3-body footer.v3-footer { display: block !important; }

/* Keep the hero headline white over the photo collage. The old theme sets
   a dark colour on all h2 elements, which otherwise wins by inheritance. */
/* No dark scrim on the photographs - the green text panel handles contrast. */
.v3-body .v3-slide-copy h2 { color: #fff !important; text-shadow: 0 2px 14px rgba(0,0,0,.8); }
.v3-body .v3-slide-copy p { color: rgba(255,255,255,.95) !important; }

/* Long real product titles must not blow up the cards. */
.v3-body .v3-pcard .pname,
.v3-body .jf-side-item .t b,
.v3-body .v3-offer .t b {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; max-height: 32px; line-height: 16px;
}
.v3-body .v3-offer .t b { -webkit-line-clamp: 1; max-height: 16px; }
.v3-body .jf-ptitle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.3; }

/* Product buy buttons: dark primary + outlined secondary, like Journal 5v3. */
.v3-body .jf-pbuy #button-cart {
    background: var(--v3-dark) !important; border: 1px solid var(--v3-dark) !important;
    color: #fff !important; border-radius: 2px; height: 40px; padding: 0 18px;
}
.v3-body .jf-pbuy #button-cart:hover { background: var(--v3-green) !important; border-color: var(--v3-green) !important; }
.v3-body .jf-pbuy #jf-buynow {
    background: #fff !important; border: 1px solid #d8dedc !important;
    color: #3d4645 !important; border-radius: 2px; height: 40px; padding: 0 18px;
}
.v3-body .jf-pbuy #jf-buynow:hover { border-color: var(--v3-green) !important; color: var(--v3-green) !important; }

/* Left photo of a category module: darker scrim for the white headline. */
.v3-body .v3-catmod-pic .over {
    background: linear-gradient(180deg, rgba(10,24,17,.74) 0%, rgba(10,24,17,.42) 55%, rgba(10,24,17,.18) 100%);
}

@media (max-width: 767px) {
    .v3-body .v3-tile small, .v3-body .v3-tile .ln { display: none; }
    .v3-body .v3-tile b { font-size: 11px; line-height: 1.25; }
    .v3-body .v3-tile .tx { max-width: 56%; }
    .v3-body .v3-tile img { width: 82px; height: 82px; }
    .v3-body .v3-slide-copy h2 { font-size: 20px; }
    .v3-body .v3-slide-copy p { font-size: 10px; }
}

/* OpenCart's default stylesheet absolutely positions <footer>; the old
   demo-1 skin hid it entirely. Restore normal flow for the 5v3 footer. */
.v3-body footer.v3-footer {
    display: block !important;
    position: static !important;
    bottom: auto !important;
    width: 100% !important;
    border: 0 !important;
    padding-top: 0 !important;
    background: var(--v3-dark-2) !important;
    color: #c3c9c8 !important;
}

/* Absolutely positioned marquee track cannot widen the document. */
.v3-body .v3-marquee { position: relative; }
.v3-body .v3-marquee-track { position: absolute; left: 0; top: 0; height: 100%; }

/* Compact the 390px header row so the cart button fits without widening
   the document (wishlist / compare / cart share a very narrow row). */
@media (max-width: 767px) {
    .v3-body .jf-nav-row2 { gap: 0; }
    .v3-body .jf-nav-toggle { padding: 0 8px; font-size: 15px; }
    .v3-body .jf-nav-all { height: 42px; padding: 0 9px; font-size: 10px; gap: 6px; }
    .v3-body .jf-nav-right { gap: 8px; }
    .v3-body .jf-nav-util:nth-of-type(2) { display: none; }
    .v3-body #cart .dropdown > button { padding: 0 9px; font-size: 11px; height: 32px; }
}

/* The old theme adds an ::after underline to the product title; inside the
   line-clamped box it renders as a clipped third line. */
.v3-body .jf-ptitle::after { display: none !important; }

/* ==================== parity fixes vs official 5v3 ==================== */
/* Official shows four testimonials per row and an outline quote mark, not the
   old text glyph (which rendered as "99" in several fonts). */
.v3-body .v3-quotes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v3-body .v3-quote { min-height: 208px; padding: 22px 22px 24px; }
.v3-body .v3-quote .qm { font-size: 0; line-height: 0; height: 28px; margin-bottom: 18px; color: #3b4442; }
.v3-body .v3-quote .qm svg { display: block; width: 38px; height: 28px; }

/* "Recently viewed" dark strip that sits right above the footer. */
.v3-body .v3-recent { background: var(--v3-dark-2); padding: 24px 0 30px; }
.v3-body .v3-recent-tabs { display: flex; gap: 26px; margin-bottom: 16px; }
.v3-body .v3-recent-tabs button {
    background: none; border: 0; padding: 0 0 8px; font-size: 12px; font-weight: 700;
    color: #8b9391; border-bottom: 2px solid transparent; cursor: pointer;
}
.v3-body .v3-recent-tabs button.active { color: #fff; border-bottom-color: #fff; }
.v3-body .v3-recent-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.v3-body .v3-rcard {
    background: #fff; min-height: 76px; padding: 16px 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    transition: box-shadow .2s ease;
}
.v3-body .v3-rcard .t { min-width: 0; }
.v3-body .v3-rcard .t b {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; font-size: 12px; font-weight: 700; line-height: 1.35; color: #2f3735;
}
.v3-body .v3-rcard .pr { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; color: #202526; }
.v3-body .v3-rcard .pr s { margin-left: 6px; font-size: 11px; font-weight: 400; color: #a0a8a6; }
.v3-body .v3-rcard .ic { display: flex; flex-direction: column; gap: 5px; color: #9aa3a1; font-size: 11px; }
.v3-body .v3-rcard:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }

/* The official breadcrumb is centred inside its light band. */
.v3-body .breadcrumb { justify-content: center; }

@media (max-width: 991px) {
    .v3-body .v3-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v3-body .v3-recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .v3-body .v3-quotes { grid-template-columns: minmax(0, 1fr); }
    .v3-body .v3-recent-grid { grid-template-columns: minmax(0, 1fr); }
    .v3-body .v3-quote { min-height: 0; }
}

/* ==========================================================================
   PARITY PASS 2 - Journal 5v3 reference look
   The previous skin (journal-fresh*.css) painted the header, search box,
   side menu and cards with a warm #fcfaf5 tint and 10px radii. The 5v3 demo
   is strictly neutral: page #f7f7f7, surfaces pure white, square corners.
   These rules sit last and out-specify the legacy selectors.
   ========================================================================== */
.v3-body.jf-body { background: #f7f7f7 !important; }
.v3-body { --v3-bg: #f7f7f7; --v3-bg-2: #f2f2f2; --v3-line: #e8e8e8; }

/* header: white bar, hairline underneath */
.v3-body .jf-header,
.v3-body .jf-header-row1 { background: #fff !important; border-color: var(--v3-line) !important; }
.v3-body .jf-header { border-bottom: 1px solid var(--v3-line) !important; }

/* search: white field, 1px border, square, green submit block */
.v3-body .jf-search .jf-search-form {
    background: #fff !important; border: 1px solid #e2e6e5 !important;
    border-radius: 0 !important; height: 42px !important; overflow: hidden;
}
.v3-body .jf-search .jf-search-cat,
.v3-body .jf-search .jf-search-cat select,
.v3-body .jf-search input[type="text"],
.v3-body .jf-search .jf-search-form input {
    background: #fff !important; border-radius: 0 !important; height: 100% !important;
}
.v3-body .jf-search button {
    background: var(--v3-green) !important; color: #fff !important;
    border-radius: 0 !important; width: 46px !important; height: 100% !important;
}
.v3-body .jf-search button:hover { background: var(--v3-green-d) !important; }

/* top utility bar uses the demo's deep green */
.v3-body .jf-topbar { background: #0b6d4e !important; }

/* flat, square utility buttons in the header */
.v3-body .jf-lang-btn,
.v3-body .jf-cur-slot .dropdown-toggle,
.v3-body .jf-ht,
.v3-body .jf-header-tools .btn {
    background: #fff !important; border: 1px solid #e2e6e5 !important;
    border-radius: 0 !important;
}
.v3-body .jf-header-tools .btn:hover,
.v3-body .jf-lang-btn:hover { border-color: var(--v3-green) !important; color: var(--v3-green) !important; }

/* hero side menu + offer list + product cards: white, square */
.v3-body .jf-sidecats,
.v3-body .v3-side-cats,
.v3-body .v3-offers,
.v3-body .jf-toplist,
.v3-body .jf-mcard,
.v3-body .v3-pcard,
.v3-body .v3-tp-item,
.v3-body .v3-catmod,
.v3-body .v3-brandcard,
.v3-body .v3-quote,
.v3-body .v3-rcard,
.v3-body .v3-article {
    background: #fff !important; border-radius: 0 !important;
}
.v3-body .v3-tiles .v3-tile,
.v3-body .v3-tile { border-radius: 0 !important; }

/* the demo prints big ghost numerals down the right edge of Top Products */
.v3-body .v3-tp-item .n {
    font-size: 26px; font-weight: 300; line-height: 1;
    color: #d3d9d7; letter-spacing: -.03em;
}

/* keep the mobile navigation from widening the document */
@media (max-width: 991px) {
    .v3-body .jf-nav { overflow-x: clip; overflow-y: visible; }
    .v3-body .jf-nav-row2 { overflow-x: clip; }
}

/* The demo has a single deep-green utility bar. The old skin stacked a second
   bright-green marquee (#098a52) with white prev/next chips on top of it,
   which read as two unrelated strips and produced the white blocks in the
   top-left corner. Keep one bar, in the reference colour. */
.v3-body #jf-announce,
.v3-body .jf-announce { display: none !important; }
.v3-body .jf-topbar { background: #0b6d4e !important; min-height: 38px; }
.v3-body .jf-topbar .v3-ann-arrow { display: none !important; }

/* Utility bar text must read white on the deep-green band. */
.v3-body .jf-topbar,
.v3-body .jf-topbar a,
.v3-body .jf-topbar span,
.v3-body .jf-topbar i { color: rgba(255,255,255,.88) !important; }
.v3-body .jf-topbar a:hover { color: #fff !important; }
.v3-body .jf-topbar .jf-soc-num,
.v3-body .jf-topbar .num { color: rgba(255,255,255,.72) !important; }

/* Service strip: the label and its sub-line were inline siblings, so they
   collided into one run of text. The demo stacks them under the icon. */
.v3-body .jf-service-strip .si > div {
    display: flex; flex-direction: column; align-items: flex-start;
    line-height: 1.35; min-width: 0;
}
.v3-body .jf-service-strip .si > div > b {
    display: block; font-size: 12px; font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.v3-body .jf-service-strip .si > div > span {
    display: block; font-size: 10px; color: rgba(255,255,255,.8);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.v3-body .jf-service-strip .si > i { flex: 0 0 auto; opacity: .95; }

/* Offer rail: the demo shows thumbnail first, copy second, and no numbering. */
.v3-body .v3-offer { display: flex; align-items: center; gap: 10px; }
.v3-body .v3-offer .num { display: none; }
.v3-body .v3-offer img { order: -1; flex: 0 0 46px; width: 46px; height: 46px; }

/* Brand cards: uppercase small-caps label with a hairline above, as in the demo */
.v3-body .v3-brandcard { min-height: 72px; gap: 5px; padding: 14px 10px; }
.v3-body .v3-brandcard b { font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.v3-body .v3-brandcard span,
.v3-body .v3-brandcard a { font-size: 9.5px; text-transform: uppercase; letter-spacing: .09em; color: #8b9493; }

/* Give the offer rail the demo's slightly wider column so prices stay on one line. */
@media (min-width: 1200px) {
    .v3-body .v3-hero-grid { grid-template-columns: 205px minmax(0, 1fr) 232px; }
}
.v3-body .v3-offer .t b { font-size: 11.5px; }
.v3-body .v3-offer .t span { white-space: nowrap; }

/* Mobile header was flush to the edge (the row padding reset the wrap padding)
   and the currency picker overflowed the right edge. Tighten it to the demo's
   logo | language | cart arrangement. */
@media (max-width: 767px) {
    .v3-body .jf-header-row1 { padding: 12px 14px !important; }
    .v3-body .jf-logo { flex: 0 0 auto; }
    .v3-body .jf-cur-slot { display: none !important; }
    .v3-body .jf-lang-btn { padding: 0 7px !important; }
    .v3-body .v3-logo span { font-size: 22px; }
    .v3-body .v3-logo small { font-size: 8px; }
}

/* Bootstrap rows carry -12px gutters; inside the flush product wrapper that
   pushed the document 12px wider than the viewport on phones. */
.v3-body main { overflow-x: clip; }
@media (max-width: 767px) {
    .v3-body .jf-pwrap .row { margin-left: 0 !important; margin-right: 0 !important; }
}

/* The clamp never took effect on this element (it computes as flow-root), so
   long SEO titles were painted a third line and then sliced in half. Let the
   title breathe instead of cropping it. */
.v3-body h1.jf-ptitle {
    display: block !important; overflow: visible !important;
    -webkit-line-clamp: unset !important; max-height: none !important;
    font-size: 23px; line-height: 1.34; padding: 22px 0 14px;
}

/* force the title box to grow with its text (the clamp was still reserving
   two lines of height while letting the third line paint outside the box) */
.v3-body h1.jf-ptitle {
    height: auto !important; min-height: 0 !important;
    -webkit-box-orient: unset !important; box-orient: unset !important;
    line-clamp: unset !important;
}

/* Testimonials: the reference uses heavy filled quote glyphs, not a thin
   outline. Fill the SVG paths and darken them. */
.v3-body .v3-quote .qm { height: 30px; margin-bottom: 20px; color: #2b3230; }
.v3-body .v3-quote .qm svg { width: 44px; height: 32px; }
.v3-body .v3-quote .qm svg path { fill: currentColor; stroke: currentColor; stroke-width: .8; }

/* Recently viewed: headed strip with a "+ View All" link on the right. */
.v3-body .v3-recent-tabs { justify-content: space-between; align-items: baseline; }
.v3-body .v3-recent-see {
    font-size: 11px; font-weight: 600; color: rgba(255,255,255,.72);
    padding-bottom: 8px; white-space: nowrap;
}
.v3-body .v3-recent-see:hover { color: #fff; }

/* Article cards: white date chip with a green top edge, like the demo. */
.v3-body .v3-feature .num {
    background: #fff !important; color: #303836 !important;
    border: 1px solid #e2e6e5; border-top: 2px solid var(--v3-green);
    min-width: 40px; height: 38px; font-size: 13px; border-radius: 0;
}

/* Slightly taller product cards so the image area reads like the demo. */
@media (min-width: 992px) {
    .v3-body .v3-pcard { min-height: 312px; }
    .v3-body .v3-pcard-img { height: 206px; }
}
/* Top Products rows stay one-line, with the large ghost numeral to the right. */
.v3-body .v3-tp-item .t b { max-width: 100%; font-size: 11.5px; }
.v3-body .v3-tp-item .n { min-width: 22px; text-align: right; }

/* The recently-viewed band is a shade lighter than the footer that follows;
   using the same tone made the two merge into one black block. */
.v3-body .v3-recent { background: #25282a !important; padding-top: 30px; padding-bottom: 36px; }
.v3-body .v3-recent .v3-rcard { box-shadow: 0 2px 12px rgba(0,0,0,.16); }

/* Product gallery + related cards: give the artwork more room, as the demo's
   imagery dominates the left half of the detail page. */
@media (min-width: 992px) {
    .v3-body .jf-pgallery .image > a > img { max-height: 560px; }
    .v3-body .jf-related .product-thumb .image img { height: 190px; }
    .v3-body .jf-related .product-thumb { padding: 14px; }
}

/* Related-product names: the demo shows one short line, not the whole SEO title. */
.v3-body .jf-related .product-thumb h4 { margin: 0 0 8px; }
.v3-body .jf-related .product-thumb h4 a {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; line-height: 1.35; max-height: 2.7em;
    font-size: 12px; font-weight: 600;
}

/* ==========================================================================
   PARITY PASS 3 - tables, badges and form controls
   ========================================================================== */

/* 3x3 compact tables: the demo reads as one ruled table, not nine loose cards.
   1px gaps over a hairline background draw a continuous grid, and the fixed
   row height keeps every cell's name / size / price on the same baseline. */
.v3-body .v3-cm-grid {
    gap: 1px !important; background: #e6e9e8 !important;
    border: 1px solid #e6e9e8; grid-auto-rows: 1fr;
}
.v3-body .v3-cm-cell {
    border: 0 !important; background: #fff !important; padding: 12px 13px !important;
    min-height: 96px; display: flex !important; flex-direction: column;
    justify-content: flex-start; overflow: hidden;
}
.v3-body .v3-cm-cell b { margin-bottom: 3px; }
.v3-body .v3-cm-cell .sp {
    display: block; font-size: 9px; letter-spacing: .04em; text-transform: uppercase;
    color: #9aa3a1; margin-bottom: 6px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis;
}
.v3-body .v3-cm-cell .pr { margin-top: auto; font-size: 12px; }

/* product cards: secondary size line under the name */
.v3-body .v3-pcard .spec {
    display: block; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
    color: #9aa3a1; margin: 3px 0 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Top Products rows: the muted line carries the size, which is what actually
   tells two identically titled variants apart. */
.v3-body .v3-tp-item .t i { letter-spacing: .03em; }

/* Article numbers: solid green squares with white numerals, as in the demo. */
.v3-body .v3-feature .num {
    background: var(--v3-green) !important; color: #fff !important;
    border: 0 !important; min-width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; letter-spacing: .02em;
}
.v3-body .v3-feature h5 { margin-top: 16px; }

/* Testimonials quote mark: outlined, not solid. */
.v3-body .v3-quote .qm svg path { fill: none !important; stroke: currentColor !important; stroke-width: 1.5 !important; }
.v3-body .v3-quote .qm { color: #2b3230; }

/* Newsletter: the agree checkbox inherited the text-input width rule and grew
   to 123px, which pushed the label away from its box. */
.v3-body .v3-news label { align-items: center; gap: 6px; line-height: 1.5; }
.v3-body .v3-news label input[type="checkbox"] {
    width: 13px !important; height: 13px !important; min-width: 13px !important;
    flex: 0 0 13px !important; margin: 0 !important; padding: 0 !important;
    accent-color: var(--v3-green); cursor: pointer;
}
.v3-body .v3-news button { display: inline-flex; align-items: center; justify-content: center; }

/* Recently viewed band: two tabs on the left, link on the right, and one-line
   card titles so the strip stays as tight as the reference. */
.v3-body .v3-recent-tabs { display: flex; justify-content: space-between; align-items: baseline; }
.v3-body .v3-recent-tabs .tabs { display: flex; gap: 24px; align-items: baseline; }
.v3-body .v3-rcard .t b {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 11.5px; font-weight: 600; line-height: 1.4;
}
.v3-body .v3-rcard { padding: 13px 14px; min-height: 0; }
.v3-body .v3-rcard .pr { margin-top: 4px; }
.v3-body .v3-recent { padding-top: 26px !important; padding-bottom: 30px !important; }

/* The long nowrap title forced the flex row wider than the card, pushing the
   rank numeral outside the white block. Pin the text column and let it clip. */
.v3-body .v3-tp-item .t { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.v3-body .v3-tp-item .n { flex: 0 0 auto; }
.v3-body .v3-tp-item { overflow: hidden; }

/* Product header: the demo prints a short product name with a hairline rule
   and the size underneath. The raw SEO title (subject | materials | size |
   artisan no) belongs in the <title> tag, not in the H1. */
.v3-body .jf-pspec {
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: #8d9694; margin: -6px 0 18px;
}
.v3-body .jf-pbread a {
    display: inline-block; max-width: 360px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}

/* Short green rule under the product name, as on the demo's detail page. */
.v3-body h1.jf-ptitle::after {
    content: ''; display: block; width: 46px; height: 2px;
    background: var(--v3-green); margin-top: 12px;
}

/* Size / serial line added under listing-card titles (see journal-5v3.js). */
.v3-body .jf-list-spec {
    display: block; font-size: 9px; letter-spacing: .07em; text-transform: uppercase;
    color: #9aa3a1; margin: 2px 0 6px;
}
.v3-body .jf-related .product-thumb h4 { margin-bottom: 2px; }

/* Phones: the wrapper had its horizontal padding zeroed out, so the H1 and
   the spec line ran flush against the screen edge. */
@media (max-width: 767px) {
    .v3-body .jf-pwrap { padding: 0 14px 24px !important; }
    .v3-body h1.jf-ptitle { padding: 16px 0 12px; font-size: 20px; }
    .v3-body .jf-pspec { margin: -2px 0 14px; }
    .v3-body .jf-pbread { padding: 0; }
}

/* Description images are 800px wide source photos; spanning the full tab made
   the page scroll for three extra screens and blurred the artwork. */
.v3-body #tab-description img {
    display: block; width: auto; max-width: min(100%, 800px); height: auto;
    margin: 16px auto; outline: 1px solid #eceeed;
}
.v3-body #tab-description br { display: none; }
.v3-body #tab-description .su-product-intro h2 { font-size: 20px; }
.v3-body #tab-description > p { font-size: 11px; color: #78817f; }

/* Cap the height as well, otherwise a 3:4 source photo still eats a screen. */
.v3-body #tab-description img { max-height: 800px; object-fit: contain; }

/* ==========================================================================
   PARITY PASS 4 - full-bleed layout, bright artwork, editorial cards

   1. The demo runs its content almost edge-to-edge. Our .jf-wrap was capped at
      1400px, leaving ~100px gutters at 1600 and much more on wide monitors.
   2. The slider photographs were darkened twice: a baked gradient in
      make_assets.py AND a radial black scrim in CSS. Both are gone. The left
      44% is now a solid brand-green panel (as the demo's hero is green) and
      the right side shows the unmodified collage.
   3. Category-module photos keep a solid green headline band instead of a
      full-height black gradient.
   4. Top Products rows gain their product thumbnail.
   5. Latest Articles cards become real blog cards.
   ========================================================================== */

@media (min-width: 768px) {
    .v3-body .jf-wrap {
        max-width: none; width: 100%; box-sizing: border-box;
        padding-left: 24px; padding-right: 24px;
    }
}
@media (min-width: 992px) {
    .v3-hero-grid { min-height: 438px; }
    .v3-slider { min-height: 438px; }
    .v3-side-cats { display: flex; flex-direction: column; justify-content: space-around; }
    .v3-offers { display: flex; flex-direction: column; }
    .v3-offers .v3-offer { flex: 1 1 auto; }
}

/* Clear photographs: a hard-edged green block, not a shadow over the image. */
.v3-body .v3-slide-copy {
    background: linear-gradient(90deg, #00a15c 0%, #00a15c 44%, rgba(0,161,92,0) 44%) !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    padding: 30px 48px !important;
}
.v3-body .v3-slide-copy h2 { max-width: 430px; font-size: clamp(27px, 2.5vw, 40px); }
.v3-body .v3-slide-copy p { max-width: 360px; }
.v3-body .v3-slide-kicker { color: #fff; background: rgba(255,255,255,.2); }

/* Category tiles: NO overlay on the photograph at all. The headline sits in a
   compact green tag, so 90%+ of the (bright) embroidery photo stays visible. */
.v3-body .v3-catmod-pic .over {
    background: transparent !important;
    padding: 12px !important;
}
.v3-body .v3-catmod-pic .v3-cm-copy {
    display: flex; flex-direction: column; align-items: flex-start;
    background: var(--v3-green); padding: 9px 11px 11px;
    max-width: 100%;
}
.v3-body .v3-catmod-pic .v3-cm-copy .lbl { margin-bottom: 8px; }
.v3-body .v3-catmod-pic .v3-cm-copy h4 {
    margin-top: 0; font-size: 16px; line-height: 1.25; text-shadow: none;
}
.v3-body .v3-catmod-pic .v3-cm-copy small { margin-top: 4px; color: #fff; }
.v3-body .v3-catmod-pic .v3-btn { align-self: flex-start; }

/* Top Products: every row shows the product photo on the left. */
.v3-body .v3-tp-item { gap: 10px; }
.v3-body .v3-tp-thumb {
    flex: 0 0 44px; width: 44px; height: 44px;
    object-fit: cover; background: #fff; border: 1px solid #eef0ef;
}

/* Editorial cards: 16:9 cover, date square, meta row, title, excerpt, link. */
.v3-body .v3-features { gap: 18px; }
.v3-body .v3-feature { background: transparent; padding: 0; }
.v3-body .v3-feature-img {
    display: block; position: relative; overflow: hidden;
    aspect-ratio: 16 / 9; background: #f0f2f1; margin: 0;
}
.v3-body .v3-feature-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .3s ease;
}
.v3-body .v3-feature-img:hover img { transform: scale(1.04); }
.v3-body .v3-feature .num {
    position: absolute; left: 12px; top: 12px;
    width: 44px; height: 44px; min-width: 44px; padding: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--v3-green) !important; color: #fff !important; border: 0;
}
.v3-body .v3-feature .num b { font-size: 17px; line-height: 1; font-weight: 700; }
.v3-body .v3-feature .num small { font-size: 8.5px; line-height: 1; margin-top: 4px; text-transform: uppercase; }
.v3-body .v3-feature-meta {
    display: flex; gap: 15px; align-items: center;
    padding: 9px 0; border-bottom: 1px solid #eceeed;
    color: #9aa3a1; font-size: 10px;
}
.v3-body .v3-feature-meta i { margin-right: 5px; font-size: 9px; }
.v3-body .v3-feature h5 { margin: 14px 0 7px; font-size: 13px; }
.v3-body .v3-feature p {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; line-height: 1.6; min-height: 3.2em; margin: 0;
}
.v3-body .v3-feature > a:last-child { margin-top: 10px; }
.v3-body[dir="rtl"] .v3-feature .num { left: auto; right: 12px; }
.v3-body[dir="rtl"] .v3-feature-meta { justify-content: flex-end; }

/* Phones: a left-hand green gradient keeps the copy readable while the right
   half of the slider still shows the bright, un-shadowed embroidery photo. */
@media (max-width: 767px) {
    .v3-body .v3-slide-copy {
        background: linear-gradient(90deg,
                    rgba(0,161,92,.96) 0%, rgba(0,161,92,.93) 52%,
                    rgba(0,161,92,.35) 72%, rgba(0,161,92,0) 88%) !important;
        padding: 14px 16px !important;
        align-items: flex-start !important;
        justify-content: center !important;
        text-align: left !important;
    }
    .v3-body .v3-slide-copy h2 { font-size: 19px; max-width: 60%; }
    .v3-body .v3-slide-copy p { font-size: 10px; max-width: 58%; }
    .v3-body .v3-slide-copy .v3-btn { font-size: 11px; padding: 8px 14px; }
    .v3-body .v3-slide-kicker { font-size: 9px; margin-bottom: 9px; }
    .v3-body[dir="rtl"] .v3-slide-copy {
        background: linear-gradient(270deg,
                    rgba(0,161,92,.96) 0%, rgba(0,161,92,.93) 52%,
                    rgba(0,161,92,.35) 72%, rgba(0,161,92,0) 88%) !important;
        text-align: right !important;
        align-items: flex-start !important; /* flex-start = right edge in RTL */
    }
    .v3-body .v3-feature-img { aspect-ratio: 16 / 10; }
}

/* ===================================================================
   Header fixes 2026-11-13
   1) "All Departments" used to be <a href="#jf-sidecats">. The side list
      is display:none below 992px, so a tap did nothing. It is now a button
      opening this panel on click / tap.
   2) journal-fresh.css forces the cart button into a 44px circle with
      font-size:0; v3 restores the label but keeps width:44px, so only a
      clipped "0" was visible. Let the chip grow to fit the whole label.
   =================================================================== */
.v3-body .jf-nav-row2 { position: relative; }
.v3-body button.jf-nav-all { border: 0; font-family: inherit; line-height: 1; cursor: pointer; }
.v3-body .jf-nav-all .jf-dept-chev { font-size: 9px; margin-left: 1px; transition: transform .18s ease; }
.v3-body .jf-nav-all.open .jf-dept-chev { transform: rotate(180deg); }
.v3-body .jf-dept-panel {
  display: none;
  position: absolute;
  left: 0;
  top: 46px;
  z-index: 80;
  width: 272px;
  background: #fff;
  border: 1px solid var(--v3-line);
  border-top: 0;
  box-shadow: 0 16px 34px rgba(0,0,0,.14);
  padding: 6px 0 8px;
}
.v3-body .jf-dept-panel.open { display: block; }
.v3-body .jf-dept-head {
  padding: 10px 16px 9px;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--v3-green-d);
  border-bottom: 1px solid var(--v3-line);
}
.v3-body .jf-dept-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 12.5px;
  color: #3d4645;
  text-decoration: none;
}
.v3-body .jf-dept-panel a i { width: 12px; font-size: 10px; color: #9aa3a1; }
.v3-body .jf-dept-panel a:hover { background: var(--v3-green-soft); color: var(--v3-green-d); }
.v3-body .jf-dept-panel a:hover i { color: var(--v3-green); }

.v3-body #cart .dropdown > button {
  width: auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  overflow: visible;
  line-height: 1;
  border-radius: 3px;
}
.v3-body #cart .dropdown > button i { font-size: 15px; line-height: 1; }

@media (max-width: 767px) {
  .v3-body .jf-dept-panel { left: 0; right: 0; top: 42px; width: auto; }
  .v3-body .jf-dept-head { padding: 12px 18px 10px; font-size: 11.5px; }
  .v3-body .jf-dept-panel a { padding: 12px 18px; font-size: 13.5px; }
}

/* >>> SILK SLIDER BACKDROP START >>> */
/*

   Su-embroidery silk brocade slider backdrop  |  variant A  |  v=20261113i
   The left panel used to be a flat #00a15c colour block. It is now a deep
   silk ground with an antique-gold peony roundel; a scrim keeps the headline
   area quiet and lets the motif surface only toward the right edge.
   Phones keep the same jade tone but no motif (too little room for the type).
   To switch: python flowtest/deploy_silk_slider.py --variant B|C
*/
@media (min-width: 768px) {
    .v3-body .v3-slide-copy {
        background:
          linear-gradient(90deg,
            rgba(10,49,37,.93) 0%, rgba(10,49,37,.55) 24%,
            rgba(10,49,37,.06) 43%, rgba(10,49,37,0) 44.2%) 0 0 / 100% 100% no-repeat,
          url('/image/catalog/su/silk/A_jade_gold.svg?v=20261113i') 0 0 / 44% 100% no-repeat,
          linear-gradient(90deg, #0A3125 0%, #0A3125 44%, rgba(10,49,37,0) 44%) 0 0 / 100% 100% no-repeat !important;
    }
}
@media (max-width: 767px) {
    .v3-body .v3-slide-copy {
        background: linear-gradient(90deg,
            rgba(10,49,37,.97) 0%, rgba(10,49,37,.94) 52%,
            rgba(10,49,37,.38) 72%, rgba(10,49,37,0) 88%) !important;
    }
    .v3-body[dir="rtl"] .v3-slide-copy {
        background: linear-gradient(270deg,
            rgba(10,49,37,.97) 0%, rgba(10,49,37,.94) 52%,
            rgba(10,49,37,.38) 72%, rgba(10,49,37,0) 88%) !important;
    }
}
/* <<< SILK SLIDER BACKDROP END <<< */

/* >>> CATMOD THUMB CARDS START >>> */
/*
   Homepage category modules - thumbnail product cards, v=20261113j
   Replaces the ruled text-only 3x3 table. Square silk-toned image well on
   the left, short label / spec / price / icons on the right. Kept in one
   marker block so the change is idempotent and easy to roll back.
*/
.v3-body .v3-cm-grid {
    gap: 10px !important;
    background: transparent !important;
    border: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: minmax(106px, auto) !important;
}
.v3-body .v3-cm-cell {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 106px !important;
    padding: 10px 12px !important;
    border: 1px solid #e9ece9 !important;
    border-radius: 3px !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(24, 48, 36, .045);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.v3-body .v3-cm-cell:hover {
    border-color: #c7d8cd !important;
    box-shadow: 0 6px 18px rgba(24, 55, 39, .10);
    transform: translateY(-1px);
}
.v3-body .v3-cm-thumb {
    flex: 0 0 84px;
    width: 84px; height: 84px;
    display: flex; align-items: center; justify-content: center;
    background: #f5f2eb;
    border-radius: 2px;
    overflow: hidden;
}
.v3-body .v3-cm-thumb img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 38%;
    display: block;
    transition: transform .35s ease;
}
.v3-body .v3-cm-cell:hover .v3-cm-thumb img { transform: scale(1.05); }
.v3-body .v3-cm-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex; flex-direction: column; justify-content: center;
    align-self: stretch;
}
.v3-body .v3-cm-cell b {
    display: -webkit-box;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; white-space: normal; text-overflow: ellipsis;
    font-size: 12px; line-height: 1.32; max-height: 2.64em;
    font-weight: 600; color: #37413e;
    margin-bottom: 2px;
}
.v3-body .v3-cm-cell .sp {
    font-size: 9px; margin-bottom: 4px;
}
.v3-body .v3-cm-cell .pr {
    margin-top: 0 !important; font-size: 12.5px;
}
.v3-body .v3-cm-cell .ic {
    margin-top: 5px; font-size: 10px;
}
@media (max-width: 1100px) {
    .v3-body .v3-cm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px) {
    .v3-body .v3-cm-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .v3-body .v3-cm-thumb { flex-basis: 88px; width: 88px; height: 88px; }
}
/* <<< CATMOD THUMB CARDS END <<< */

/* >>> SU KNOWLEDGE COLUMN START >>> */
#su-knowledge,#su-article{overflow-x:hidden;max-width:100vw}
.su-kn-page *,.su-art-page *,.su-kn-page *::before,.su-art-page *::after{box-sizing:border-box}
.su-kn-page,.su-art-page{background:#f7f5ef;color:#22302a;padding:0 0 64px;font-family:inherit}
.su-kn-wrap,.su-art-wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.su-kn-crumb{background:none;padding:18px 0;margin:0;font-size:13px}
.su-kn-crumb .breadcrumb-item a{color:#5c6b62;text-decoration:none}
.su-kn-crumb .breadcrumb-item+.breadcrumb-item::before{color:#a9b4ac}
.su-kn-kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#a98a52;font-weight:700}
.su-kn-hero{position:relative;background:#0a3125;color:#f6f2e7;padding:52px 56px 46px;border-radius:4px;overflow:hidden;margin:8px 0 34px}
.su-kn-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 86% 18%,rgba(201,169,97,.20),transparent 46%),repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 2px,transparent 2px 8px);pointer-events:none}
.su-kn-hero>*{position:relative;z-index:1}
.su-kn-hero h1{font-size:42px;line-height:1.14;margin:16px 0 14px;font-weight:600;letter-spacing:-.01em;color:#fff}
.su-kn-deck{max-width:760px;font-size:16px;line-height:1.75;color:#d8e2d7;margin:0;overflow-wrap:break-word}
.su-kn-stats{display:flex;gap:34px;margin-top:30px;padding-top:22px;border-top:1px solid rgba(201,169,97,.35);font-size:13px;letter-spacing:.04em;color:#c9d6c7}
.su-kn-stats b{color:#e3c88b;font-size:18px;margin-right:5px}
.su-kn-library{display:grid;grid-template-columns:1.15fr 1fr;gap:36px;align-items:center;background:#fff;border:1px solid #e5e1d5;padding:30px 34px;margin:0 0 40px}
.su-kn-library h2{font-size:25px;font-weight:600;margin:10px 0 8px;color:#0a3125}
.su-kn-library p{font-size:14px;line-height:1.7;color:#5c6b62;margin:0}
.su-kn-lib-links{display:flex;flex-wrap:wrap;gap:9px}
.su-kn-lib-links a{font-size:13px;padding:9px 13px;border:1px solid #e2ded0;color:#33463c;text-decoration:none;background:#faf9f4;transition:.18s}
.su-kn-lib-links a:hover{border-color:#a98a52;color:#0a3125;background:#fff}
.su-kn-lib-links .su-kn-lib-main{background:#0a3125;border-color:#0a3125;color:#fff;flex:1 0 100%;text-align:center;font-weight:600;letter-spacing:.03em}
.su-kn-lib-links .su-kn-lib-main:hover{background:#14503a;color:#fff}
.su-kn-refine{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-bottom:24px}
.su-kn-refine h2{font-size:24px;font-weight:600;color:#0a3125;margin:0 auto 0 0}
.su-kn-search{max-width:430px;flex:1 1 320px}
.su-kn-search .form-control,.su-kn-search .form-select,.su-kn-sort select{border-radius:0;border-color:#ded9c9;font-size:14px;height:42px;background:#fff}
.su-kn-search .btn-primary,.su-kn-search .btn{border-radius:0;background:#0a3125;border-color:#0a3125;font-size:14px;padding:0 18px}
.su-kn-sort{display:flex;align-items:center;gap:9px;font-size:13px;color:#5c6b62}
.su-kn-sort select{min-width:180px}
.su-kn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.su-kn-card{background:#fff;border:1px solid #e5e1d5;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.su-kn-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(10,49,37,.10)}
.su-kn-thumb{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:#eee9dc}
.su-kn-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.su-kn-card:hover .su-kn-thumb img{transform:scale(1.05)}
.su-kn-num{position:absolute;left:0;top:0;background:#0a3125;color:#e3c88b;font-size:12px;font-weight:700;letter-spacing:.08em;padding:8px 12px}
.su-kn-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.su-kn-meta{font-size:11.5px;letter-spacing:.03em;color:#8b968d;text-transform:uppercase;margin-bottom:9px}
.su-kn-body h3{font-size:18px;line-height:1.35;font-weight:600;margin:0 0 10px;color:#0a3125}
.su-kn-body h3 a{color:inherit;text-decoration:none}
.su-kn-body h3 a:hover{color:#a98a52}
.su-kn-body p{font-size:13.5px;line-height:1.68;color:#5c6b62;margin:0 0 18px;flex:1}
.su-kn-more{font-size:12.5px;font-weight:700;letter-spacing:.05em;color:#0a3125;text-decoration:none;text-transform:uppercase}
.su-kn-more:hover{color:#a98a52}
.su-kn-more i{font-size:10px;margin-left:4px}
.su-kn-pager{display:flex;justify-content:space-between;align-items:center;margin-top:30px;font-size:13px;color:#5c6b62}
.su-kn-empty{text-align:center;padding:50px 0;color:#5c6b62}
.su-art-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start}
.su-art-main{background:#fff;border:1px solid #e5e1d5;padding:42px 48px 46px}
.su-art-main h1{font-size:36px;line-height:1.2;font-weight:600;color:#0a3125;margin:14px 0 14px;letter-spacing:-.01em}
.su-art-meta{font-size:12.5px;color:#8b968d;border-bottom:1px solid #ece8dc;padding-bottom:20px;margin-bottom:28px}
.su-art-meta a{color:#5c6b62}
.su-art-hero-img{width:100%;max-height:420px;object-fit:cover;display:block;margin:0 0 30px}
.su-art-body{font-size:16px;line-height:1.85;color:#33463c}
.su-art-body h2{font-size:22px;line-height:1.35;font-weight:600;color:#0a3125;margin:34px 0 12px;padding-left:14px;border-left:3px solid #a98a52}
.su-art-body p{margin:0 0 16px}
.su-art-body ul{margin:0 0 20px;padding-left:22px}
.su-art-body li{margin-bottom:9px}
.su-art-body a{color:#0a6b45;text-decoration:underline;text-underline-offset:2px}
.su-art-body .su-lead{font-size:18px;line-height:1.75;color:#22302a;background:#faf9f4;border-left:3px solid #a98a52;padding:18px 22px;margin:0 0 28px}
.su-art-body .su-fact{background:#f3f6f1;border:1px solid #dde6dc;padding:18px 22px;margin:24px 0;font-size:15px;line-height:1.75}
.su-art-body .su-fact b{color:#0a3125}
.su-art-body .su-cta{border-top:1px solid #ece8dc;margin-top:34px;padding-top:22px;font-size:15px;color:#5c6b62}
.su-art-tags{margin-top:28px;font-size:13px;color:#8b968d}
.su-art-tags a{color:#0a3125;text-decoration:none;margin-left:6px}
.su-art-actions{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid #ece8dc;font-size:13px}
.su-art-actions a{color:#0a3125;text-decoration:none;font-weight:600}
.su-art-actions a:hover{color:#a98a52}
.su-art-comments{margin-top:36px}
.su-art-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:20px}
.su-art-side-box{background:#fff;border:1px solid #e5e1d5;padding:24px 22px}
.su-art-side-box h3{font-size:18px;font-weight:600;color:#0a3125;line-height:1.4;margin:10px 0 16px}
.su-art-side-box>a{display:block;font-size:13.5px;line-height:1.5;color:#33463c;text-decoration:none;padding:9px 0;border-bottom:1px solid #f0ede4}
.su-art-side-box>a:last-child{border-bottom:0}
.su-art-side-box>a:hover{color:#a98a52}
.su-art-side-note{background:#0a3125;border-color:#0a3125;color:#d8e2d7}
.su-art-side-note h3{color:#fff}
.su-art-side-note p{font-size:13.5px;line-height:1.7;margin:0 0 16px}
.su-art-side-note>a{color:#e3c88b;border:0;padding:0;font-weight:600}
.jf-nav-links .su-knowledge-nav>a{color:#a98a52;font-weight:600}
.jf-nav-links .su-knowledge-nav>a i{font-size:12px;margin-right:5px}
.jf-dept-panel a.su-dept-knowledge{color:#a98a52;font-weight:600}
@media(max-width:1100px){.su-kn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.su-art-layout{grid-template-columns:minmax(0,1fr) 260px;gap:26px}.su-art-main{padding:32px}.su-kn-library{grid-template-columns:1fr}}
@media(max-width:820px){.su-kn-wrap,.su-art-wrap{padding:0 12px}.su-kn-hero{padding:30px 20px;margin:6px 0 24px}.su-kn-hero h1{font-size:27px;overflow-wrap:break-word}.su-kn-deck{font-size:15px;line-height:1.65}.su-kn-stats{gap:14px;font-size:12px;margin-top:22px;padding-top:18px}.su-kn-grid,.su-art-layout{grid-template-columns:1fr}.su-art-side{position:static}.su-art-main{padding:24px 20px}.su-art-main h1{font-size:26px}.su-art-body{font-size:15px}.su-kn-library{padding:22px 20px;gap:18px}.su-kn-library h2{font-size:21px}.su-kn-refine{gap:12px}.su-kn-refine h2{flex:1 0 100%;font-size:21px}.su-kn-search{flex:1 1 100%;max-width:none;min-width:0}.su-kn-search .form-control,.su-kn-search .form-select{min-width:0}.su-kn-sort{flex:1 1 100%}.su-kn-sort select{flex:1;min-width:0}.su-kn-pager{flex-direction:column;gap:10px}.su-art-actions{flex-direction:column}}
/* <<< SU KNOWLEDGE COLUMN END <<< */