@charset "UTF-8";

:root {
  --paper: #f7f4ee;
  --paper-deep: #ede8de;
  --white: #fffefa;
  --ink: #242d27;
  --muted: #74786f;
  --green: #244b3b;
  --green-dark: #173a2b;
  --rust: #a16143;
  --line: #dddcd2;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ease: cubic-bezier(.2,.65,.3,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
body.modal-open { overflow: hidden; }
body:has(dialog[open]) { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, select { cursor: pointer; }
button { color: inherit; }
button:disabled { cursor: not-allowed; opacity: .45; }
a { color: inherit; text-decoration: none; }
button { border: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p { margin: 0; }
button, a, input, select, textarea { outline-offset: 5px; }
:focus-visible { outline: 2px solid var(--rust); }
::selection { color: #fff; background: var(--green); }
[hidden] { display: none !important; }
.container, .wrap { width: min(1240px, calc(100% - 80px)); margin-inline: auto; }
.eyebrow { color: var(--rust); font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.serif { font-family: var(--serif); }
.skip-link { position: fixed; z-index: 120; top: 10px; left: 10px; padding: 9px 16px; color: #fff; background: var(--green); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.announcement, .announcement-bar { padding: 7px 20px; background: var(--green); color: #f6f2e8; text-align: center; font-size: 10px; letter-spacing: .1em; line-height: 1.6; }
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.header-inner, .header-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 91px; }
.brand, .logo { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand svg, .logo svg { width: 39px; height: 39px; color: var(--green); }
.brand-text, .brand-copy { display: grid; gap: 1px; }
.brand strong, .brand-name, .logo strong { font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: .13em; }
.brand small, .brand-en, .logo small { color: var(--green); font-size: 8px; line-height: 1.4; font-weight: 500; letter-spacing: .22em; }
.site-nav, .main-nav, .header-nav, .site-header nav { display: flex; align-items: center; justify-content: center; gap: 34px; font-size: 12px; }
.site-header nav a { padding-block: 10px; position: relative; }
.site-header nav a::after { content: ""; position: absolute; bottom: 5px; left: 0; right: 0; height: 1px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease); }
.site-header nav a:hover::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 23px; }
.language-button, .language-toggle, .lang-button { padding: 7px 0; background: transparent; color: var(--muted); font-size: 11px; letter-spacing: .05em; }
.header-selection, .selection-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 37px; padding: 8px 15px; background: transparent; border: 1px solid var(--green); color: var(--green); font-size: 11px; white-space: nowrap; }
.header-selection svg, .selection-button svg { width: 14px; height: 14px; }
.selection-count, .count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 50%; background: var(--green); color: #fff; font-size: 9px; line-height: 1; }

.hero { position: relative; overflow: hidden; }
.hero-inner, .hero-grid { display: grid; grid-template-columns: 1fr 1.04fr; gap: 74px; align-items: center; padding-block: 64px 70px; }
.hero-copy { padding-bottom: 3px; }
.hero-copy .eyebrow { margin-bottom: 21px; font-size: 10px; letter-spacing: .15em; }
.hero h1 { margin: 0 0 25px; font-family: var(--serif); font-size: clamp(43px, 4.7vw, 62px); font-weight: 400; line-height: 1.23; letter-spacing: -.045em; }
.hero h1 em { color: var(--green); font-style: normal; }
.hero h1 span { color: var(--green); }
.hero-description, .hero-desc, .hero-copy > p:not(.eyebrow) { max-width: 405px; color: #6c7369; font-size: 13px; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 29px; }
.primary-button, .secondary-button, .text-button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 43px; padding: 12px 23px; background: var(--green); color: #fff; border: 1px solid var(--green); font-size: 11px; line-height: 1.4; font-weight: 500; letter-spacing: .025em; transition: background .2s, border-color .2s, transform .2s; }
.primary-button:hover { background: var(--green-dark); border-color: var(--green-dark); }
.primary-button svg, .secondary-button svg { width: 15px; height: 15px; }
.secondary-button { color: var(--green); background: transparent; }
.secondary-button:hover { background: #e8eae0; }
.text-button { gap: 12px; padding-inline: 0; color: var(--ink); background: transparent; border-color: transparent; }
.text-button:hover { color: var(--rust); }
.hero-note, .hero-small { margin-top: 26px; color: #83867c; font-size: 10px; letter-spacing: .025em; }
.hero-visual { position: relative; min-width: 0; padding: 25px 20px 19px; }
.hero-visual::before { content: ""; position: absolute; top: 0; bottom: 22px; left: 54px; right: 0; background: #e6e9dd; }
.hero-visual::after { content: "PACKED WITH POSSIBILITY"; position: absolute; top: 20px; right: -17px; writing-mode: vertical-rl; color: #7e897b; font-size: 8px; letter-spacing: .2em; }
.hero-photo { position: relative; display: grid; place-items: center; aspect-ratio: 1.2; min-width: 0; background: #e9e4d8; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.hero-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 45px #7374490b; }
.hero-photo .hero-caption { z-index: 1; position: absolute; bottom: 20px; left: 23px; }
.hero-caption, .hero-photo-caption { position: relative; display: flex; justify-content: space-between; gap: 20px; margin-top: 13px; color: #7a8173; font-size: 8px; letter-spacing: .06em; }
.hero-label { z-index: 2; position: absolute; bottom: 48px; left: -5px; padding: 12px 17px; background: var(--white); color: var(--green); border: 1px solid #dddccd; font-size: 10px; box-shadow: 0 4px 16px #242d2705; }
.hero-label small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; letter-spacing: .08em; }
.hero-number { position: absolute; z-index: 1; top: 13px; left: 72px; color: #8d967e; font-family: Georgia, serif; font-size: 12px; }
.trust-strip, .spec-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-inner, .trust-grid, .spec-inner { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: 21px; }
.trust-item, .spec-item { display: flex; align-items: center; justify-content: center; gap: 12px; border-right: 1px solid var(--line); color: var(--green); }
.trust-item:first-child, .spec-item:first-child { justify-content: flex-start; }
.trust-item:last-child, .spec-item:last-child { border-right: 0; }
.trust-item svg, .spec-item svg { width: 22px; height: 22px; flex-shrink: 0; stroke-width: 1.2; }
.trust-item strong, .spec-item strong { display: block; font-size: 11px; font-weight: 500; }
.trust-item small, .spec-item small { display: block; color: var(--muted); font-size: 8px; letter-spacing: .05em; }

.catalog-section, #catalog { padding-block: 67px 63px; scroll-margin-top: 25px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 27px; }
.section-head .eyebrow { margin-bottom: 8px; }
.section-head h2, .guide-section h2 { font-family: var(--serif); font-size: 31px; font-weight: 400; line-height: 1.4; letter-spacing: .01em; }
.section-head > p, .section-head .section-description { max-width: 430px; padding-bottom: 3px; color: var(--muted); font-size: 11px; line-height: 1.8; text-align: right; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin-bottom: 21px; }
.search-field { display: flex; align-items: center; gap: 10px; width: 274px; min-height: 40px; padding: 9px 13px; background: #fffefa70; border: 1px solid var(--line); }
.search-field svg { width: 15px; height: 15px; flex-shrink: 0; color: #747e70; }
.search-field input { width: 100%; min-width: 0; padding: 0; background: transparent; border: 0; outline: none; color: var(--ink); font-size: 11px; }
.search-field:focus-within { outline: 2px solid var(--rust); outline-offset: 2px; }
.search-field input::placeholder { color: #95998e; }
.filter-select { height: 40px; min-width: 137px; padding: 7px 32px 7px 13px; border: 1px solid var(--line); border-radius: 0; background-color: #fffefa70; color: #616b5e; font-size: 11px; }
.result-count { margin-left: auto; color: var(--muted); font-size: 10px; white-space: nowrap; }
.category-tabs { display: flex; align-items: center; gap: 7px; overflow-x: auto; padding-bottom: 20px; margin-bottom: 7px; scrollbar-width: thin; scrollbar-color: #a8b09b transparent; }
.category-tabs button { flex-shrink: 0; padding: 7px 15px; background: transparent; border: 1px solid transparent; color: #727a6d; font-size: 11px; line-height: 1.4; transition: background .2s, color .2s; white-space: nowrap; }
.category-tabs button:hover { color: var(--green); background: #eaece2; }
.category-tabs button.active { background: var(--green); color: #fff; border-color: var(--green); }
.category-tabs button span { display: inline-block; margin-left: 5px; font-size: 8px; opacity: .7; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 29px 25px; }
.product-card { position: relative; min-width: 0; background: #fffefa; border: 1px solid #e8e6dd; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.product-card:hover { border-color: #c3caba; box-shadow: 0 8px 24px #243b2310; transform: translateY(-3px); }
.product-photo { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1.27; padding: 20px; background: #efede6; overflow: hidden; cursor: pointer; }
.product-card:nth-child(3n + 2) .product-photo { background: #e9ebe2; }
.product-card:nth-child(3n) .product-photo { background: #eee9e2; }
.product-photo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--ease); }
.product-card:hover .product-photo img { transform: scale(1.045); }
.card-tag { z-index: 1; position: absolute; top: 13px; left: 13px; padding: 3px 7px; background: #fffdf5d9; border: 1px solid #cbd0c260; color: #62705d; font-size: 8px; letter-spacing: .04em; }
.card-tag.dark { background: var(--green); color: #fff; }
.card-body { padding: 19px 21px 18px; }
.card-body .eyebrow { margin-bottom: 5px; font-size: 8px; font-weight: 500; letter-spacing: .14em; }
.card-title { display: block; margin-bottom: 6px; font-family: var(--serif); font-size: 19px; font-weight: 400; line-height: 1.4; letter-spacing: .005em; }
.card-title button { padding: 0; background: none; font: inherit; text-align: left; }
.card-meta { color: #8a8e80; font-size: 9px; line-height: 1.8; }
.swatch-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-height: 30px; margin-top: 9px; }
.swatch { position: relative; display: inline-block; width: 13px; height: 13px; padding: 0; border: 1px solid #56634b30; border-radius: 50%; background: var(--swatch, var(--color, #ded9ce)); }
.swatch.active::after { content: ""; position: absolute; inset: -4px; border: 1px solid #7c8870; border-radius: 50%; }
.swatch-label, .swatch-row > small { margin-left: 4px; color: #8e9386; font-size: 8px; }
.card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 13px; margin-top: 9px; border-top: 1px solid #eae9e1; }
.price { color: var(--green); font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 400; line-height: 1.2; }
.price small { margin-left: 4px; color: var(--muted); font-family: var(--sans); font-size: 8px; font-weight: 400; }
.price .currency { font-size: 13px; margin-right: 2px; }
.detail-button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 7px; background: transparent; border: 1px solid #ccd2c1; border-radius: 50%; color: var(--green); font-size: 16px; line-height: 1; transition: background .2s, color .2s; }
.detail-button svg { width: 14px; height: 14px; }
.detail-button:hover { color: #fff; background: var(--green); border-color: var(--green); }
.catalog-note { margin-top: 25px; color: var(--muted); font-size: 10px; line-height: 1.8; text-align: center; }
.empty-state { grid-column: 1 / -1; padding: 65px 25px; border: 1px dashed #c3cab9; text-align: center; color: var(--muted); }
.empty-state h3 { margin-bottom: 7px; color: var(--ink); font-family: var(--serif); font-weight: 400; font-size: 23px; }
.empty-state p { font-size: 12px; }
.empty-state button { margin-top: 20px; }

.guide-section { padding-block: 53px 56px; border-top: 1px solid var(--line); }
.guide-section .section-head { margin-bottom: 30px; }
.guide-grid, .guide-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; }
.guide-step { position: relative; padding-top: 19px; border-top: 1px solid #cbd0c0; }
.step-number, .guide-step > span:first-child { display: block; margin-bottom: 11px; color: var(--rust); font-family: Georgia, serif; font-size: 12px; }
.guide-step h3 { margin-bottom: 8px; font-family: var(--serif); font-size: 19px; font-weight: 400; }
.guide-step p { max-width: 300px; color: #7f8577; font-size: 10px; line-height: 1.9; }
.contact-section { padding-bottom: 50px; }
.contact-banner { display: flex; justify-content: space-between; align-items: center; gap: 35px; padding: 39px 47px; background: var(--green); color: #f5f2e8; }
.contact-banner .eyebrow { margin-bottom: 9px; color: #c4cfb8; font-size: 8px; letter-spacing: .18em; }
.contact-banner h2 { font-family: var(--serif); font-size: 29px; font-weight: 400; line-height: 1.45; }
.contact-banner p:not(.eyebrow) { margin-top: 9px; color: #c0cbbc; font-size: 10px; line-height: 1.8; }
.contact-banner .primary-button, .contact-banner .secondary-button { flex-shrink: 0; background: #f3f0e6; border-color: #f3f0e6; color: var(--green); }
.contact-banner .primary-button:hover, .contact-banner .secondary-button:hover { background: #fff; }
.site-footer { padding-block: 31px 27px; border-top: 1px solid var(--line); }
.footer-inner, .footer-top { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.site-footer .brand svg { width: 29px; height: 29px; }
.site-footer .brand strong { font-size: 17px; }
.site-footer .brand small { font-size: 6px; }
.footer-note, .footer-links, .footer-meta, .copyright { color: #89907f; font-size: 9px; line-height: 1.8; }
.footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.footer-links a:hover { color: var(--green); }
.footer-bottom { display: flex; justify-content: space-between; gap: 15px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #e5e4da; }
.selection-fab { position: fixed; z-index: 25; right: 27px; bottom: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 12px 18px; background: var(--green); border: 1px solid #56725b; color: #fff; box-shadow: 0 5px 24px #173a2b26; font-size: 11px; }
.selection-fab svg { width: 16px; height: 16px; }
.selection-fab .selection-count { background: #f3f0e7; color: var(--green); }

dialog { padding: 0; color: var(--ink); border: 1px solid #d6dacb; border-radius: 5px; background: var(--white); box-shadow: 0 24px 90px #17271d26; }
dialog::backdrop { background: #17271d75; backdrop-filter: blur(4px); }
.product-dialog { width: min(980px, calc(100vw - 50px)); max-height: calc(100dvh - 55px); overflow: auto; }
.modal-shell { display: grid; grid-template-columns: 42% 58%; }
.modal-photo { display: grid; place-items: center; min-height: 500px; padding: 35px; background: #efede5; }
.modal-photo img { width: 100%; max-height: 480px; object-fit: contain; mix-blend-mode: multiply; }
.modal-info { position: relative; min-width: 0; padding: 39px 35px 30px; }
.modal-close { position: absolute; z-index: 3; top: 13px; right: 15px; display: grid; place-items: center; width: 30px; height: 30px; padding: 5px; background: transparent; border: 1px solid transparent; border-radius: 50%; color: #727c69; font-size: 23px; line-height: 1; }
.modal-close:hover { color: var(--ink); background: var(--paper-deep); }
.modal-close svg { width: 17px; height: 17px; }
.modal-info > .eyebrow { margin-bottom: 8px; font-size: 9px; }
.modal-info h2 { padding-right: 20px; margin-bottom: 8px; font-family: var(--serif); font-size: 29px; font-weight: 400; line-height: 1.4; }
.modal-subtitle, .modal-description { color: var(--muted); font-size: 11px; line-height: 1.8; }
.option-group { margin-top: 23px; }
.option-label { display: block; margin-top: 20px; margin-bottom: 9px; color: #6d7867; font-size: 10px; font-weight: 500; }
.option-label span { margin-left: 7px; color: #9ba08f; font-size: 9px; font-weight: 400; }
.color-options, .size-options { display: flex; flex-wrap: wrap; gap: 7px; }
.option-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 33px; padding: 7px 11px; border: 1px solid #d9ddcf; background: transparent; color: #737e6c; font-size: 10px; line-height: 1.5; }
.option-button:hover { border-color: #87977b; }
.option-button.active { border-color: var(--green); background: #edf0e5; color: var(--green); box-shadow: inset 0 0 0 .5px var(--green); }
.option-button .swatch { width: 10px; height: 10px; flex-shrink: 0; pointer-events: none; }
.dimension-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 19px; border: 1px solid #e0e3d7; background: #f8f8f0; }
.dimension-item { padding: 12px 10px; text-align: center; border-right: 1px solid #e0e3d7; }
.dimension-item:last-child { border: 0; }
.dimension-item small { display: block; color: #87907b; font-size: 8px; }
.dimension-item strong, .dimension-item b { display: block; margin-top: 2px; color: var(--green); font-size: 16px; font-weight: 400; }
.dimension-item strong span, .dimension-item b span { margin-left: 3px; font-size: 8px; color: #8b957f; }
.spec-table { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 10px; }
.spec-table th, .spec-table td { padding: 7px 0; vertical-align: top; border-bottom: 1px solid #eeeee4; text-align: left; line-height: 1.75; }
.spec-table th { width: 90px; padding-right: 15px; color: #939b87; font-weight: 400; }
.spec-table td { color: #66745e; }
.quantity-row { display: flex; align-items: center; justify-content: space-between; gap: 17px; margin-top: 20px; }
.quantity-row label { font-size: 10px; color: #738068; }
.quantity-input { width: 86px; height: 35px; padding: 7px 8px; border: 1px solid #d7ddcc; background: var(--white); color: var(--green); text-align: center; font-size: 12px; }
.price-line { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 21px; padding-top: 17px; border-top: 1px solid #dfe3d5; }
.price-line .price { font-size: 30px; }
.price-line small, .price-note, .modal-note { color: #8a937e; font-size: 9px; line-height: 1.8; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.modal-actions .primary-button { flex: 1; }
.modal-actions .secondary-button { min-width: 90px; }
.modal-note { margin-top: 11px; }
.selection-dialog { position: relative; width: min(760px, calc(100vw - 50px)); max-height: calc(100dvh - 55px); padding: 35px; overflow: auto; }
.selection-dialog h2 { margin-bottom: 5px; padding-right: 25px; font-family: var(--serif); font-size: 28px; font-weight: 400; }
.selection-description { color: var(--muted); font-size: 11px; }
.selection-list { margin-top: 25px; }
.selection-item { display: flex; align-items: center; gap: 17px; padding-block: 15px; border-bottom: 1px solid #e2e5d9; }
.selection-thumb { display: grid; place-items: center; width: 86px; height: 75px; flex-shrink: 0; padding: 8px; background: #eeeee4; }
.selection-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.selection-info { min-width: 0; flex: 1; }
.selection-info h3 { margin-bottom: 3px; font-family: var(--serif); font-size: 17px; font-weight: 400; line-height: 1.4; }
.selection-info p { color: #818c75; font-size: 10px; line-height: 1.8; overflow-wrap: anywhere; }
.selection-info .price { display: inline-block; margin-top: 4px; font-size: 18px; }
.selection-item .quantity-input { width: 65px; flex-shrink: 0; }
.remove-button { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; padding: 5px; color: #8a917e; background: transparent; font-size: 20px; }
.remove-button:hover { color: var(--rust); background: #f4e9df; }
.remove-button svg { width: 14px; height: 14px; }
.selection-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; padding-block: 20px; color: #76856a; font-size: 11px; }
.selection-summary strong { color: var(--green); font-family: Georgia, serif; font-size: 28px; font-weight: 400; }
.selection-summary small { color: #969d89; font-size: 9px; }
.selection-actions { display: flex; gap: 9px; }
.selection-actions .primary-button { flex: 1; }
.selection-actions .secondary-button { flex: 1; }
.selection-empty { padding: 45px 10px; color: var(--muted); text-align: center; font-size: 12px; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 28px; width: max-content; max-width: calc(100vw - 32px); padding: 12px 22px; color: #fff; background: #244b3bf5; border: 1px solid #5f7a5c; box-shadow: 0 4px 18px #173a2b20; transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; font-size: 12px; text-align: center; }
.toast.show, .toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (min-width: 1440px) {
  .hero-inner, .hero-grid { gap: 90px; padding-block: 77px 82px; }
}
@media (max-width: 1100px) {
  .container, .wrap { width: calc(100% - 60px); }
  .hero-inner, .hero-grid { gap: 38px; }
  .hero h1 { font-size: 50px; }
  .site-nav, .main-nav, .header-nav, .site-header nav { gap: 23px; }
  .header-actions { gap: 15px; }
  .product-grid { gap: 22px 18px; }
  .card-body { padding-inline: 17px; }
}
@media (max-width: 900px) {
  .container, .wrap { width: calc(100% - 46px); }
  .header-inner, .header-row { min-height: 80px; }
  .site-header nav { display: none; }
  .hero-inner, .hero-grid { gap: 28px; padding-block: 47px 51px; }
  .hero h1 { font-size: 43px; margin-bottom: 20px; }
  .hero-copy .eyebrow { font-size: 8px; margin-bottom: 17px; }
  .hero-description, .hero-desc, .hero-copy > p:not(.eyebrow) { font-size: 11px; }
  .hero-actions { gap: 13px; margin-top: 23px; }
  .hero-actions .primary-button, .hero-actions .secondary-button { padding-inline: 16px; gap: 10px; }
  .hero-visual { padding: 20px 12px 17px; }
  .hero-visual::before { left: 35px; }
  .hero-visual::after { right: -7px; font-size: 7px; }
  .hero-label { left: 0; bottom: 37px; font-size: 9px; padding: 9px 12px; }
  .hero-caption, .hero-photo-caption { font-size: 7px; gap: 8px; }
  .trust-item, .spec-item { gap: 8px; }
  .trust-item strong, .spec-item strong { font-size: 10px; }
  .trust-item small, .spec-item small { font-size: 7px; }
  .trust-item svg, .spec-item svg { width: 18px; height: 18px; }
  .catalog-section, #catalog { padding-block: 48px; }
  .section-head h2, .guide-section h2 { font-size: 28px; }
  .section-head > p, .section-head .section-description { max-width: 310px; font-size: 10px; }
  .product-grid { gap: 19px 15px; }
  .product-photo { padding: 14px; }
  .card-body { padding: 15px 13px 14px; }
  .card-title { font-size: 17px; }
  .card-meta { font-size: 8px; }
  .price { font-size: 21px; }
  .price small { font-size: 7px; }
  .guide-grid, .guide-steps { gap: 27px; }
  .contact-banner { padding: 30px 32px; gap: 23px; }
  .contact-banner h2 { font-size: 25px; }
  .footer-inner, .footer-top { flex-wrap: wrap; }
  .modal-info { padding: 35px 25px 25px; }
  .modal-info h2 { font-size: 25px; }
  .modal-photo { min-height: 440px; padding: 22px; }
  .option-button { font-size: 9px; padding-inline: 9px; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 20px; }
  .container, .wrap { width: calc(100% - 36px); }
  .announcement, .announcement-bar { padding-block: 7px; font-size: 8px; letter-spacing: .02em; }
  .header-inner, .header-row { min-height: 73px; gap: 10px; }
  .brand, .logo { gap: 8px; }
  .brand svg, .logo svg { width: 30px; height: 30px; }
  .brand strong, .brand-name, .logo strong { font-size: 19px; letter-spacing: .08em; }
  .brand small, .brand-en, .logo small { font-size: 6px; letter-spacing: .13em; }
  .header-actions { gap: 12px; }
  .language-button, .language-toggle, .lang-button { font-size: 10px; }
  .header-selection, .selection-button { gap: 6px; min-height: 31px; padding: 6px 9px; font-size: 9px; }
  .header-selection svg, .selection-button svg { width: 12px; height: 12px; }
  .header-selection .label, .header-selection .button-label { display: none; }
  .selection-count { min-width: 15px; height: 15px; font-size: 8px; }
  .hero-inner, .hero-grid { grid-template-columns: 1fr; gap: 31px; padding-block: 38px 34px; }
  .hero h1 { max-width: 360px; font-size: 40px; line-height: 1.27; letter-spacing: -.04em; }
  .hero-copy .eyebrow { margin-bottom: 17px; font-size: 8px; }
  .hero-description, .hero-desc, .hero-copy > p:not(.eyebrow) { max-width: 340px; font-size: 11px; line-height: 1.9; }
  .hero-actions { margin-top: 23px; gap: 22px; }
  .hero-actions .primary-button { min-height: 41px; padding-inline: 18px; }
  .hero-note, .hero-small { margin-top: 17px; font-size: 8px; }
  .hero-visual { margin-left: 0; padding: 18px 15px 12px 5px; }
  .hero-photo { aspect-ratio: 1.35; }
  .hero-visual::before { left: 35px; right: 3px; bottom: 17px; }
  .hero-visual::after { right: -5px; top: 20px; }
  .hero-label { left: -3px; bottom: 33px; }
  .hero-caption, .hero-photo-caption { margin-top: 10px; font-size: 7px; }
  .hero-number { top: 8px; left: 49px; font-size: 10px; }
  .trust-inner, .trust-grid, .spec-inner { grid-template-columns: repeat(2, 1fr); padding-block: 0; }
  .trust-item, .spec-item { justify-content: flex-start; gap: 10px; padding-block: 16px; }
  .trust-item:nth-child(2n), .spec-item:nth-child(2n) { border-right: 0; padding-left: 19px; }
  .trust-item:nth-child(-n + 2), .spec-item:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .trust-item strong, .spec-item strong { font-size: 10px; }
  .trust-item small, .spec-item small { font-size: 7px; }
  .catalog-section, #catalog { padding-block: 38px 39px; }
  .section-head { align-items: flex-start; flex-direction: column; gap: 11px; margin-bottom: 21px; }
  .section-head .eyebrow { font-size: 8px; margin-bottom: 5px; }
  .section-head h2, .guide-section h2 { font-size: 27px; }
  .section-head > p, .section-head .section-description { max-width: 100%; padding-bottom: 0; font-size: 10px; text-align: left; line-height: 1.8; }
  .toolbar { gap: 9px; margin-bottom: 16px; }
  .search-field { width: 100%; min-height: 39px; }
  .search-field input { font-size: 11px; }
  .filter-select { height: 35px; min-width: 123px; padding-block: 5px; padding-left: 10px; font-size: 10px; }
  .result-count { font-size: 9px; }
  .category-tabs { gap: 4px; margin-right: -18px; padding-right: 18px; padding-bottom: 15px; margin-bottom: 3px; }
  .category-tabs button { padding: 7px 11px; font-size: 10px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 11px; }
  .product-photo { aspect-ratio: 1.08; padding: 10px; }
  .card-tag { top: 8px; left: 8px; padding: 2px 5px; font-size: 7px; }
  .card-body { padding: 13px 11px 12px; }
  .card-body .eyebrow { margin-bottom: 4px; font-size: 7px; letter-spacing: .1em; }
  .card-title { margin-bottom: 5px; font-size: 16px; line-height: 1.4; }
  .card-meta { font-size: 8px; line-height: 1.7; }
  .swatch-row { gap: 7px; min-height: 25px; margin-top: 8px; }
  .swatch { width: 11px; height: 11px; }
  .swatch.active::after { inset: -3px; }
  .swatch-label, .swatch-row > small { display: none; }
  .card-bottom { gap: 6px; margin-top: 6px; padding-top: 10px; }
  .price { font-size: 21px; }
  .price small { margin-left: 2px; font-size: 7px; }
  .price .currency { font-size: 11px; }
  .detail-button { width: 26px; height: 26px; padding: 6px; font-size: 13px; }
  .detail-button svg { width: 12px; height: 12px; }
  .catalog-note { margin-top: 20px; font-size: 9px; text-align: left; }
  .guide-section { padding-block: 35px 37px; }
  .guide-section .section-head { margin-bottom: 20px; }
  .guide-grid, .guide-steps { grid-template-columns: 1fr; gap: 22px; }
  .guide-step { padding-top: 14px; }
  .step-number, .guide-step > span:first-child { margin-bottom: 5px; font-size: 11px; }
  .guide-step h3 { margin-bottom: 5px; font-size: 18px; }
  .guide-step p { max-width: 100%; font-size: 10px; line-height: 1.8; }
  .contact-section { padding-bottom: 33px; }
  .contact-banner { align-items: flex-start; flex-direction: column; gap: 24px; padding: 27px 24px; }
  .contact-banner h2 { font-size: 26px; }
  .contact-banner p:not(.eyebrow) { font-size: 10px; }
  .contact-banner .primary-button, .contact-banner .secondary-button { min-height: 40px; font-size: 10px; padding-inline: 19px; }
  .site-footer { padding-block: 25px 87px; }
  .footer-inner, .footer-top { align-items: flex-start; flex-direction: column; gap: 17px; }
  .footer-links { gap: 20px; }
  .footer-bottom { flex-direction: column; gap: 5px; margin-top: 18px; padding-top: 15px; }
  .footer-note, .footer-links, .footer-meta, .copyright { font-size: 8px; }
  .selection-fab { right: 16px; bottom: 16px; gap: 8px; min-height: 41px; padding: 10px 14px; font-size: 10px; }
  .selection-fab svg { width: 15px; height: 15px; }
  .product-dialog { width: calc(100vw - 22px); max-height: calc(100dvh - 28px); border-radius: 4px; }
  .modal-shell { grid-template-columns: 1fr; }
  .modal-photo { min-height: 0; height: 240px; padding: 23px 45px; }
  .modal-photo img { max-height: 195px; }
  .modal-info { padding: 25px 22px 24px; }
  .modal-close { top: 11px; right: 11px; background: #fffefac9; }
  .modal-info .modal-close { top: -226px; }
  .modal-info > .eyebrow { font-size: 8px; }
  .modal-info h2 { padding-right: 0; font-size: 25px; }
  .modal-subtitle, .modal-description { font-size: 10px; }
  .option-group { margin-top: 18px; }
  .option-label { margin-top: 17px; font-size: 10px; }
  .option-button { min-height: 32px; padding: 6px 10px; font-size: 10px; }
  .dimension-grid { margin-top: 17px; }
  .dimension-item { padding-block: 10px; }
  .dimension-item strong, .dimension-item b { font-size: 15px; }
  .spec-table { margin-top: 14px; font-size: 10px; }
  .spec-table th { width: 80px; }
  .quantity-row { margin-top: 17px; }
  .price-line { margin-top: 17px; padding-top: 15px; }
  .price-line .price { font-size: 29px; }
  .modal-actions { gap: 8px; margin-top: 17px; }
  .modal-actions .primary-button, .modal-actions .secondary-button { font-size: 10px; padding-inline: 15px; }
  .selection-dialog { width: calc(100vw - 22px); max-height: calc(100dvh - 28px); padding: 28px 20px 22px; }
  .selection-dialog h2 { font-size: 25px; }
  .selection-description { font-size: 10px; }
  .selection-list { margin-top: 17px; }
  .selection-item { position: relative; align-items: flex-start; gap: 12px; padding-block: 14px; padding-right: 21px; }
  .selection-thumb { width: 65px; height: 65px; padding: 5px; }
  .selection-info h3 { font-size: 16px; }
  .selection-info p { font-size: 9px; }
  .selection-info .price { font-size: 17px; }
  .selection-item .quantity-input { width: 45px; height: 31px; margin-top: 17px; padding-inline: 4px; font-size: 11px; }
  .selection-item .remove-button { position: absolute; right: -4px; top: 13px; width: 22px; height: 22px; }
  .selection-summary { padding-block: 17px; font-size: 10px; }
  .selection-summary strong { font-size: 26px; }
  .selection-actions { flex-direction: column; gap: 8px; }
  .selection-actions .primary-button, .selection-actions .secondary-button { width: 100%; min-height: 42px; }
  .toast { bottom: 71px; padding: 11px 16px; font-size: 11px; }
}
@media (max-width: 360px) {
  .container, .wrap { width: calc(100% - 28px); }
  .header-actions { gap: 9px; }
  .brand strong, .brand-name, .logo strong { font-size: 17px; }
  .brand svg, .logo svg { width: 27px; height: 27px; }
  .brand small, .brand-en, .logo small { font-size: 5px; }
  .header-selection, .selection-button { padding-inline: 7px; }
  .hero h1 { font-size: 36px; }
  .hero-actions { gap: 15px; }
  .card-body { padding-inline: 9px; }
  .card-title { font-size: 15px; }
  .price { font-size: 19px; }
  .detail-button { width: 24px; height: 24px; }
  .selection-item { gap: 9px; }
  .selection-thumb { width: 53px; height: 56px; }
  .selection-item .quantity-input { width: 39px; }
}
@media (max-width: 339px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-photo { aspect-ratio: 1.35; }
  .card-body { padding-inline: 17px; }
  .card-title { font-size: 19px; }
  .swatch-label, .swatch-row > small { display: inline; }
  .card-meta { font-size: 9px; }
  .header-selection > span:not(.selection-count) { display: none; }
  .hero h1 { font-size: 33px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .product-card:hover, .product-card:hover .product-photo img { transform: none; }
}

/* Application layout and accessible controls. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.announcement { font-size: 11px; }
.main-nav, .site-header nav { font-size: 13px; }
.hero-description { font-size: 14px; }
.hero-image-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 13px 10px; background: #e9e4d8db; color: #61745e; text-align: center; font-size: 9px; letter-spacing: .1em; }
.status-dot { display: inline-block; width: 5px; height: 5px; margin-right: 6px; background: #7d956a; border-radius: 50%; }
.hero-note { display: flex; align-items: center; gap: 3px; }
.text-link { padding: 3px 0; background: transparent; color: var(--green); font-size: 12px; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.spec-item { font-size: 12px; }
.strip-icon { font-size: 18px; }
.section-head .section-description { max-width: none; margin-top: 8px; font-size: 13px; text-align: left; }
.collection-number { color: #89907e; font-size: 11px; }
.search-field { width: 370px; }
.search-field input, .filter-select { font-size: 12px; }
.catalog-filter-row { display: flex; align-items: baseline; gap: 20px; }
.category-tabs { min-width: 0; max-width: 100%; width: 100%; margin-right: 0; margin-bottom: 0; padding-bottom: 20px; }
.category-tabs button { min-height: 36px; font-size: 12px; }
.result-count { padding-bottom: 16px; font-size: 11px; }
.photo-index { position: absolute; bottom: 12px; right: 15px; color: #5b6b50; font-family: Georgia,serif; font-size: 12px; }
.product-photo img { min-height: 0; }
.card-tag { font-size: 10px; }
.card-body .eyebrow { font-size: 9px; }
.card-meta { font-size: 12px; }
.card-meta span { padding-inline: 5px; }
.swatch-row { gap: 3px; margin-top: 8px; }
.swatch { width: 25px; height: 25px; display: grid; place-items: center; background: transparent; border: 0; }
.swatch span { display: block; width: 14px; height: 14px; border: 1px solid #56634b40; border-radius: 50%; background: var(--swatch); }
.swatch.active::after { inset: 2px; }
.price small { font-size: 10px; }
.detail-button { width: 36px; height: 36px; }
.catalog-footnote { margin-top: 26px; color: var(--muted); font-size: 12px; }
.guide-step p { font-size: 13px; max-width: none; }
.contact-banner p:not(.eyebrow) { font-size: 13px; }
.contact-actions { display: flex; align-items: flex-start; flex-direction: column; flex-shrink: 0; gap: 10px; font-size: 12px; }
.contact-wechat { color: #c0cbbc; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-footer > div > p { color: var(--muted); font-size: 12px; margin-top: 4px; }
.site-footer strong { font-size: 12px; letter-spacing: .08em; }
.footer-links { justify-content: flex-end; font-size: 10px; }
.product-dialog { position: fixed; }
.modal-photo { align-content: center; gap: 26px; }
.modal-photo p { align-self: end; color: #7a8271; font-size: 12px; line-height: 1.8; }
.price-line { align-items: baseline; justify-content: flex-start; gap: 12px; }
.price-line > strong { color: var(--green); font: 32px Georgia,serif; font-weight: 400; }
.price-line > span { color: var(--muted); font-size: 12px; }
.option-label { font-size: 12px; }
.option-label strong { margin-left: 12px; color: var(--green); font-weight: 500; }
.option-button { min-height: 38px; font-size: 12px; }
.color-option i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--swatch); border: 1px solid #56634b40; }
.dimension-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.dimension-item > span { display: block; color: #7e8975; font-size: 11px; }
.dimension-item > strong { font-size: 15px; white-space: nowrap; }
.dimension-note, .pack-note { margin-top: 7px; color: #838d7a; font-size: 11px; }
.spec-table { font-size: 12px; }
.spec-table th { width: 135px; }
.quantity-row { justify-content: flex-start; gap: 12px; }
.quantity-row label { margin-right: auto; font-size: 12px; }
.quantity-input { width: 100px; font-size: 14px; height: 40px; }
.product-subtotal { display: flex; justify-content: space-between; gap: 10px; margin-block: 18px; font-size: 12px; color: var(--muted); }
.product-subtotal strong { color: var(--green); font-size: 17px; }
.add-button { width: 100%; justify-content: space-between; font-size: 13px; }
.selection-note { color: var(--muted); font-size: 12px; margin-block: 10px; }
.selection-items { margin-top: 22px; }
.selection-thumb { object-fit: contain; }
.selection-info p { font-size: 11px; }
.selection-item-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; font-size: 12px; }
.selection-item-bottom strong { color: var(--green); font: 19px Georgia,serif; }
.selection-actions { flex-wrap: wrap; margin-top: 22px; }
.selection-actions > * { white-space: nowrap; }
.selection-bottom { display: flex; justify-content: space-between; gap: 15px; margin-top: 22px; }
.empty-icon { display: block; margin-bottom: 8px; color: #87977b; font-size: 40px; }
.toast:not([hidden]) { opacity: 1; transform: translateX(-50%) translateY(0); }
.dialog-status { margin-top: 10px; color: var(--green); font-size: 12px; }
@media (max-width: 900px) {
  .spec-item { gap: 7px; font-size: 10px; }
  .catalog-filter-row { flex-wrap: wrap; gap: 0; }
  .category-tabs { flex: 1 0 100%; }
  .result-count { margin-left: 0; }
  .hero-description { font-size: 13px; }
  .footer-links { gap: 12px; }
}
@media (max-width: 600px) {
  .announcement { font-size: 9px; }
  .hero-description { font-size: 13px; }
  .spec-item { justify-content: flex-start; padding: 5px 0; font-size: 11px; }
  .section-head .section-description { font-size: 12px; }
  .search-field { width: 100%; }
  .search-field input { font-size: 13px; }
  .filter-select { font-size: 12px; }
  .category-tabs button { font-size: 12px; min-height: 38px; }
  .card-body { padding: 14px 12px; }
  .card-body .eyebrow { font-size: 8px; }
  .card-meta { font-size: 11px; }
  .swatch-row { gap: 1px; }
  .swatch { width: 24px; height: 24px; }
  .swatch span { width: 12px; height: 12px; }
  .swatch.active::after { inset: 3px; }
  .card-bottom { gap: 5px; }
  .price { font-size: 21px; }
  .price small { font-size: 9px; display: block; margin: 4px 0 0; }
  .detail-button { width: 32px; height: 32px; }
  .card-tag { font-size: 9px; }
  .guide-step p { font-size: 13px; }
  .contact-banner p:not(.eyebrow) { font-size: 13px; }
  .contact-actions { width: 100%; margin-top: 8px; }
  .site-footer { align-items: flex-start; flex-direction: column; }
  .footer-links { justify-content: flex-start; font-size: 10px; }
  .modal-photo { height: auto; padding: 38px 35px 20px; gap: 12px; }
  .modal-photo img { height: 195px; }
  .modal-photo p { font-size: 11px; }
  .modal-info { padding: 24px 19px; }
  .option-button { font-size: 12px; min-height: 38px; }
  .dimension-item { padding-inline: 5px; }
  .dimension-item > strong { font-size: 14px; }
  .spec-table { font-size: 12px; }
  .spec-table th { width: 120px; }
  .selection-info p { font-size: 11px; }
  .selection-item .quantity-input { width: 72px; height: 36px; margin: 0; font-size: 13px; }
  .selection-item-bottom { flex-wrap: wrap; }
}

/* Product visual collection: original reference, measured diagram, studio and context. */
.visual-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding-block: 14px 24px; border-top: 1px solid var(--line); }
.visual-toolbar > p { color: #747d6d; font-size: 12px; }
.view-switcher { display: flex; flex-shrink: 0; padding: 3px; background: #eceee5; border: 1px solid #d9dece; }
.view-switcher button { padding: 7px 13px; min-height: 34px; background: transparent; color: #7d8873; font-size: 11px; }
.view-switcher button.active { background: #fffefa; color: var(--green); box-shadow: 0 1px 4px #233a2310; }
.editorial-crop { position: absolute; inset: 0; overflow: hidden; background: #eeebe3; }
.editorial-crop > img { display: block; width: 200%; min-width: 200%; max-width: none; height: 100%; max-height: none; object-fit: cover; mix-blend-mode: normal; transform: none; }
.editorial-crop.panel-right > img { transform: translateX(-50%); }
.product-card:hover .editorial-crop > img { transform: none; }
.product-card:hover .editorial-crop.panel-right > img { transform: translateX(-50%); }
.product-photo { padding: 19px; }
.product-photo:has(.editorial-crop) { border-bottom: 1px solid #e9e8df; }
.card-media-caption { padding: 5px 13px; border-bottom: 1px solid #e9e8df; color: #7c8870; font-size: 9px; background: #f4f4ec; letter-spacing: .02em; }
.card-spec-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin-top: 12px; color: #78856e; font-size: 11px; }
.card-spec-line small { font-size: 9px; letter-spacing: .04em; }
.card-dimension { position: absolute; inset: 0; background: #f7f4ee; }
.card-dimension > svg { width: 100%; height: 100%; }
.product-photo.is-dimension .card-tag, .product-photo.is-dimension .photo-index { display: none; }
.modal-photo { display: block; min-height: 0; padding: 22px; }
.product-gallery { position: sticky; top: 22px; width: 100%; }
.gallery-nav { display: flex; padding: 4px; background: #e1e5d9; margin-bottom: 12px; gap: 2px; }
.gallery-nav button { flex: 1; min-width: 0; min-height: 38px; padding: 7px 5px; background: transparent; color: #738169; font-size: 11px; line-height: 1.4; }
.gallery-nav button.active { color: var(--green); background: #fffefa; box-shadow: 0 1px 4px #173a2b10; }
.media-stage { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid #dfe3d5; background: #f2f0e8; }
.media-stage.stage-dimension { aspect-ratio: 720 / 560; }
.media-stage > .dimension-art { width: 100%; height: 100%; }
.dimension-art svg { display: block; width: 100%; height: 100%; }
.modal-photo .media-stage .original-product-image { width: auto; max-width: 90%; height: auto; max-height: 90%; object-fit: contain; mix-blend-mode: multiply; }
.gallery-caption { padding: 15px 2px 0; }
.gallery-caption p, .modal-photo .gallery-caption p { color: #7b8770; font-size: 11px; line-height: 1.8; }
.gallery-caption p + p { margin-top: 5px; }
.concept-badge { display: inline-block; padding: 3px 7px; color: #556c4b; background: #f8f8edf0; border: 1px solid #b9c2ac85; font-size: 9px; font-weight: 500; line-height: 1.4; letter-spacing: .03em; }
.concept-reference { padding: 10px 12px; margin-bottom: 10px; background: #e6eadd; border-left: 2px solid #95a985; }
.concept-reference .concept-badge { margin-bottom: 5px; }
.concept-reference p strong { color: #4b6341; font-weight: 500; }
.current-spec-tag { display: grid; gap: 3px; margin-top: 18px; padding: 13px 0; border-top: 1px solid #d6ddc9; color: #7c8970; font-size: 11px; }
.current-spec-tag strong { color: #426239; font-size: 12px; font-weight: 500; }
.download-dimension { margin-top: 10px; padding: 7px 0; background: transparent; color: var(--green); font-size: 12px; border-bottom: 1px solid #a5b496; }
.media-zoom-trigger { position: absolute; bottom: 9px; right: 9px; display: grid; place-items: center; width: 34px; height: 34px; background: #fffefae8; border: 1px solid #d1d9c6; color: #4a6640; font-size: 18px; }
.media-dialog { position: fixed; width: min(900px, calc(100vw - 30px)); max-height: calc(100dvh - 40px); padding: 40px 24px 20px; overflow: auto; }
.media-dialog .media-stage { width: min(680px, 100%); margin-inline: auto; }
.media-dialog .media-stage.stage-dimension { width: 100%; }
.media-dialog .media-zoom-caption { padding: 12px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.media-zoom-caption > span { display: block; margin-top: 5px; color: var(--green); }
.zoom-scroll { width: 100%; max-width: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-width: auto; scrollbar-color: #809573 #eaede3; }
.media-dialog .zoom-scroll .stage-dimension { width: 720px; min-width: 720px; max-width: none; }
.inspiration-section { padding-block: 8px 65px; }
.inspiration-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.inspiration-card { min-width: 0; background: #efeee5; }
.inspiration-image { position: relative; width: 100%; aspect-ratio: .88; display: block; padding: 0; overflow: hidden; }
.inspiration-image .concept-badge { position: absolute; left: 10px; top: 10px; }
.inspiration-copy { padding: 20px 17px; }
.inspiration-copy .eyebrow { font-size: 8px; margin-bottom: 9px; }
.inspiration-copy h3 { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.6; margin-bottom: 15px; }
.inspiration-copy .text-link { font-size: 11px; }
.hero-photo .editorial-crop img { mix-blend-mode: normal; }
.hero-photo:has(.editorial-crop) { aspect-ratio: 1.1; }
.hero-photo .hero-image-label { z-index: 1; background: #f0efe6d9; }
.single-product-media { position:absolute; inset:0; overflow:hidden; background:#f1eee5; }
.single-product-media img { width:100%; height:100%; object-fit:contain; mix-blend-mode:normal; }
.hero-photo .single-product-media img { object-fit:contain; }
@media (max-width: 1100px) {
  .inspiration-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
  .inspiration-image { aspect-ratio: 1.15; }
  .visual-toolbar { gap: 16px; }
  .modal-photo { padding: 15px; }
  .gallery-nav button { font-size: 10px; }
}
@media (max-width: 600px) {
  .visual-toolbar { align-items: flex-start; flex-direction: column; gap: 12px; padding-block: 10px 20px; }
  .visual-toolbar > p { font-size: 11px; }
  .view-switcher { width: 100%; }
  .view-switcher button { flex: 1; font-size: 11px; min-height: 36px; }
  .card-media-caption { padding: 5px 9px; font-size: 8px; }
  .card-spec-line { font-size: 10px; margin-top: 10px; }
  .card-spec-line small { font-size: 8px; }
  .modal-photo { height: auto; padding: 43px 17px 18px; }
  .product-gallery { position: static; }
  .gallery-nav { margin-bottom: 10px; }
  .gallery-nav button { font-size: 11px; min-height: 40px; }
  .media-stage { aspect-ratio: 1.15; }
  .media-stage.stage-dimension { aspect-ratio: 720 / 560; }
  .modal-photo .media-stage .original-product-image { width: auto; height: auto; max-height: 90%; }
  .gallery-caption p, .modal-photo .gallery-caption p { font-size: 11px; }
  .current-spec-tag { margin-top: 12px; }
  .inspiration-section { padding-block: 0 38px; }
  .inspiration-grid { gap: 14px 11px; }
  .inspiration-image { aspect-ratio: .85; }
  .inspiration-copy { padding: 13px 11px; }
  .inspiration-copy h3 { font-size: 17px; line-height: 1.5; margin-bottom: 10px; }
  .inspiration-copy .eyebrow { font-size: 7px; }
  .inspiration-copy .text-link { font-size: 10px; }
  .inspiration-image .concept-badge { font-size: 8px; top: 7px; left: 7px; }
  .media-dialog { padding: 45px 10px 16px; }
}
@media (max-width: 360px) {
  .header-actions .selection-button > span:not(.selection-count) { display: none; }
  .header-actions .selection-button::before { content: '☷'; font-size: 17px; line-height: 1; }
  .gallery-nav button { font-size: 10px; padding-inline: 2px; overflow-wrap: anywhere; }
  html[lang="en"] .brand strong { font-size: 15px; letter-spacing: .02em; }
}

/* Shared language and currency controls. */
select.language-button { min-height:38px; min-width:104px; max-width:130px; padding:7px 27px 7px 10px; border:1px solid #bdc8b9; border-radius:0; background:var(--white); color:var(--green); font-size:12px; letter-spacing:0; direction:ltr; }
.rate-note { margin-top:10px; color:#53664c; font-size:11px; line-height:1.85; overflow-wrap:anywhere; }
.rate-note a { text-decoration:underline; text-underline-offset:3px; }
.price bdi,.price-line strong,.product-subtotal strong,.selection-item-bottom strong,.selection-summary strong { display:inline-block; direction:ltr; unicode-bidi:isolate; }
.dimension-item strong,.spec-table td,.quantity-input,.card-spec-line bdi,.card-spec-line small,.photo-index { direction:ltr; unicode-bidi:isolate; }
html[dir="rtl"] { --sans:Tahoma,"Segoe UI",Arial,sans-serif; --serif:Tahoma,"Segoe UI",Arial,sans-serif; }
html[dir="rtl"] body { line-height:1.85; }
html[dir="rtl"] .brand strong { font-size:22px; letter-spacing:0; }
html[dir="rtl"] .brand small { direction:ltr; unicode-bidi:isolate; }
html[dir="rtl"] .announcement,html[dir="rtl"] .eyebrow,html[dir="rtl"] .hero-caption,html[dir="rtl"] .card-tag { letter-spacing:0; }
html[dir="rtl"] .hero h1 { letter-spacing:0; line-height:1.5; font-size:clamp(38px,4.3vw,54px); }
html[dir="rtl"] .card-title button,html[dir="rtl"] .section-head .section-description,html[dir="rtl"] .spec-table th { text-align:start; }
html[dir="rtl"] .result-count { margin-left:0; margin-right:auto; }
html[dir="rtl"] .spec-item { border-right:0; border-left:1px solid var(--line); }
html[dir="rtl"] .spec-item:last-child { border-left:0; }
html[dir="rtl"] .filter-select { padding-inline:13px 32px; }
html[dir="rtl"] .card-tag { left:auto; right:13px; }
html[dir="rtl"] .photo-index { right:auto; left:15px; }
html[dir="rtl"] .option-label strong { margin-left:0; margin-right:12px; }
html[dir="rtl"] .quantity-row label { margin-right:0; margin-left:auto; }
html[dir="rtl"] .concept-reference { border-left:0; border-right:2px solid #95a985; }
html[dir="rtl"] .spec-table th { padding-right:0; padding-left:15px; }
html[dir="rtl"] .spec-table td { text-align:end; }
html[dir="rtl"] .selection-fab { right:auto; left:27px; }
html[dir="rtl"] .status-dot { margin-right:0; margin-left:6px; }
html[dir="rtl"] .modal-close { right:auto; left:15px; }
html[dir="rtl"] .modal-info h2,html[dir="rtl"] .selection-dialog h2 { padding-right:0; padding-left:25px; }
html[dir="rtl"] .hero-visual::after { content:"تغليف يفتح الآفاق"; letter-spacing:0; }
html[dir="rtl"] .contact-actions a[href^="mailto:"],html[dir="rtl"] .footer-links a[href*="miit"],html[dir="rtl"] .collection-number { direction:ltr; unicode-bidi:isolate; }
@media(max-width:1100px){html[dir="rtl"] .header-inner{gap:14px;}html[dir="rtl"] .header-actions{gap:12px;}html[dir="rtl"] .main-nav{gap:20px;}}
@media(max-width:600px){
  select.language-button { min-height:34px; min-width:91px; max-width:105px; padding:6px 20px 6px 7px; font-size:11px; }
  .header-actions { flex-shrink:0; gap:9px; }
  html[lang="en"] .brand strong { font-size:17px; letter-spacing:0; }
  .header-actions .selection-button > span:not(.selection-count) { display:none; }
  .header-actions .selection-button::before { content:'☷'; font-size:17px; line-height:1; }
  html[dir="rtl"] .brand strong { font-size:17px; }
  html[dir="rtl"] .header-inner { gap:8px; }
  html[dir="rtl"] .header-actions { gap:8px; }
  html[dir="rtl"] .card-tag { right:8px; }
  html[dir="rtl"] .spec-item:nth-child(2n) { border-left:0; padding-left:0; padding-right:19px; }
  html[dir="rtl"] .category-tabs { margin-right:0; margin-left:0; padding-left:0; }
  html[dir="rtl"] .result-count { margin-right:0; }
  html[dir="rtl"] .selection-fab { left:16px; }
  html[dir="rtl"] .selection-item { padding-right:0; padding-left:21px; }
  html[dir="rtl"] .selection-item .remove-button { right:auto; left:-4px; }
  html[dir="rtl"] .modal-close { left:11px; }
  html[dir="rtl"] .section-head h2,html[dir="rtl"] .contact-banner h2 { line-height:1.6; }
  .rate-note { font-size:10px; }
}
@media(max-width:360px){
  .header-inner { gap:8px; }
  .brand { gap:7px; }
  html[dir="rtl"] .brand strong { font-size:15px; }
  html[dir="rtl"] .brand svg { width:28px; height:28px; }
  html[dir="rtl"] .brand small { font-size:6px; }
  select.language-button { min-width:87px; max-width:96px; }
  .header-actions .selection-button { padding-inline:6px; gap:4px; }
  html[lang="en"] .brand strong { max-width:90px; font-size:15px; }
  html[lang="en"] .brand small { font-size:6px; letter-spacing:.1em; }
  html[lang="en"] .brand svg { width:28px; height:28px; }
}