/* storefront.css — generated from welcome.blade.php inline styles + local Tajawal fonts (minified, single request). */
@font-face {font-family: 'Tajawal';font-style: normal;font-weight: 400;font-display: swap;src: url('../fonts/tajawal/Tajawal-Regular.woff2') format('woff2'),url('../fonts/tajawal/Tajawal-Regular.ttf') format('truetype');}@font-face {font-family: 'Tajawal';font-style: normal;font-weight: 500;font-display: swap;src: url('../fonts/tajawal/Tajawal-Medium.woff2') format('woff2'),url('../fonts/tajawal/Tajawal-Medium.ttf') format('truetype');}@font-face {font-family: 'Tajawal';font-style: normal;font-weight: 700;font-display: swap;src: url('../fonts/tajawal/Tajawal-Bold.woff2') format('woff2'),url('../fonts/tajawal/Tajawal-Bold.ttf') format('truetype');}@font-face {font-family: 'Tajawal';font-style: normal;font-weight: 600;font-display: swap;src: url('../fonts/tajawal/Tajawal-Bold.woff2') format('woff2'),url('../fonts/tajawal/Tajawal-Bold.ttf') format('truetype');}@font-face {font-family: 'Tajawal';font-style: normal;font-weight: 800;font-display: swap;src: url('../fonts/tajawal/Tajawal-Bold.woff2') format('woff2'),url('../fonts/tajawal/Tajawal-Bold.ttf') format('truetype');}
html { -webkit-text-size-adjust: 100%; }* { font-family: 'Tajawal', sans-serif; margin: 0; padding: 0; box-sizing: border-box; }body { background: #f9fafb; color: #374151; font-size: 16px; line-height: 1.6; }a { text-decoration: none; }.nav { background: #fff; padding: 12px 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); position: sticky; top: 0; z-index: 50; }.nav-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }.nav-brand { display: flex; align-items: center; gap: 10px; }.nav-logo { width: 40px; height: 40px; background: #dc2626; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 18px; }.nav-title { font-size: 18px; font-weight: 800; color: #1f2937; }.btn { display: inline-block; padding: 10px 22px; border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer; border: none; transition: all 0.2s; }.btn-red { background: #dc2626; color: #fff; }.btn-red:hover { background: #b91c1c; }.btn-outline { border: 2px solid #fff; color: #fff; background: transparent; }.btn-outline:hover { background: #fff; color: #dc2626; }.hero { background: linear-gradient(135deg, #B71C1C 0%, #E53935 50%, #FF5252 100%); color: #fff; padding: 60px 20px; }.hero-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 40px; }.hero h1 { font-size: clamp(24px, 5.5vw, 36px); font-weight: 800; line-height: 1.3; margin-bottom: 16px; }.hero h1 span { color: #fde047; }.hero p { font-size: 17px; color: #fecaca; line-height: 1.7; margin-bottom: 28px; }.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }.hero-emoji { font-size: 100px; animation: float 3s ease-in-out infinite; text-align: center; }@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }.stats-bar { background: #fff; padding: 28px 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }.stats-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }.stats-bar .num { font-size: 30px; font-weight: 800; color: #dc2626; }.stats-bar .lbl { color: #6b7280; margin-top: 4px; font-size: 14px; }.section { max-width: 1100px; margin: 0 auto; padding: 50px 20px; }.section-title { text-align: center; margin-bottom: 36px; }.section-title h2 { font-size: clamp(22px, 4.5vw, 28px); font-weight: 800; color: #1f2937; margin-bottom: 8px; }.section-title p { color: #6b7280; font-size: 16px; }.eyebrow { display: inline-flex; align-items: center; gap: 6px; background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; font-size: 13px; font-weight: 800; padding: 6px 16px; border-radius: 999px; margin-bottom: 12px; }.update-pill { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; padding: 8px 18px; font-size: 13.5px; color: #4b5563; margin-top: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.04); }.update-pill strong { color: #16a34a; }.pulse { width: 9px; height: 9px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: pulse 2s infinite; flex: 0 0 auto; }@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)} 70%{box-shadow:0 0 0 8px rgba(22,163,74,0)} 100%{box-shadow:0 0 0 0 rgba(22,163,74,0)} }.products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }.product-card { background: #fff; border: 1px solid #f1f5f9; border-radius: 20px; box-shadow: 0 2px 10px rgba(0,0,0,.05); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }.product-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,.10); }.cat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #f3f4f6; }.cat-ico { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px; background: rgba(255,255,255,.75); display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }.cat-meta { flex: 1 1 auto; min-width: 0; }.cat-meta h3 { font-size: 17px; font-weight: 800; color: #1f2937; }.cat-meta .cat-count { font-size: 12px; color: #6b7280; font-weight: 600; }.cat-from { flex: 0 0 auto; text-align: left; background: rgba(255,255,255,.8); border-radius: 12px; padding: 6px 12px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }.cat-from .lbl { font-size: 10.5px; color: #6b7280; font-weight: 700; }.cat-from .val { font-size: 16px; font-weight: 800; color: #dc2626; white-space: nowrap; }.cat-desc { padding: 10px 18px 0; font-size: 13px; color: #6b7280; line-height: 1.8; }.trend-card { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid #f3f4f6; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.06); padding: 22px 20px 14px; }.trend-note { text-align: center; font-size: 12.5px; color: #6b7280; margin-top: 10px; }.product-body { padding: 8px 10px 10px; }.price-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 8px; border-bottom: 1px dashed #eef1f5; border-radius: 12px; transition: background .15s ease; }.price-row:last-child { border-bottom: none; }.price-row:hover { background: #fafbfc; }.price-row .price-info { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }.price-row .name { color: #1f2937; font-weight: 700; font-size: 14.5px; }.price-row .row-meta { font-size: 11.5px; color: #9ca3af; font-weight: 600; margin-top: 1px; }.price-row .p-desc { font-size: 11px; color: #b6bcc7; margin-top: 1px; line-height: 1.5; }.price-row .unit { font-size: 11px; color: #9ca3af; }.price-row .price-pair { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }.price-tag { display: inline-flex; align-items: baseline; gap: 3px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-weight: 800; font-size: 16px; padding: 5px 12px; border-radius: 11px; white-space: nowrap; }.price-tag .cur { font-size: 12px; font-weight: 700; }.price-retail { color: inherit; }.price-row .price-pair .price { font-size: 16px; }.offer-tag { display: inline-block; font-size: 10.5px; font-weight: 800; background: #fffbeb; color: #b45309; border: 1px solid #fde68a; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }.price-changed { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px; margin-right: 4px; }.price-up { background: #fef2f2; color: #dc2626; }.price-down { background: #f0fdf4; color: #16a34a; }.product-note { margin-top: 12px; font-size: 12px; color: #9ca3af; }.bg-yellow { background: linear-gradient(135deg, #fef9c3, #fef3c7); }.bg-red-light { background: linear-gradient(135deg, #fef2f2, #ffe4e6); }.bg-orange { background: linear-gradient(135deg, #fff7ed, #ffedd5); }.bg-blue { background: linear-gradient(135deg, #eff6ff, #dbeafe); }.bg-green { background: linear-gradient(135deg, #f0fdf4, #dcfce7); }.features { background: #fff; padding: 50px 20px; }.features-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }.feature { text-align: center; padding: 24px; }.feature-icon { width: 64px; height: 64px; background: #fee2e2; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 28px; }.feature h3 { font-size: 17px; font-weight: 700; color: #1f2937; margin-bottom: 8px; }.feature p { color: #6b7280; font-size: 14px; line-height: 1.6; }.footer { background: #111827; color: #9ca3af; padding: 40px 20px; }.footer-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }.footer h4 { color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 12px; }.footer p { font-size: 14px; line-height: 1.8; }.footer-bottom { max-width: 1100px; margin: 24px auto 0; padding-top: 20px; border-top: 1px solid #374151; text-align: center; font-size: 13px; }.nav-actions { display: flex; align-items: center; gap: 8px; }.btn-ghost { background: #f3f4f6; color: #374151; }.btn-ghost:hover { background: #e5e7eb; }.price-legend { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: #6b7280; }.price-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-left: 6px; }.dot-retail { background: #dc2626; }.price-row .price-info { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }.price-row .unit { font-size: 11px; color: #9ca3af; }.price-row .price-pair { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }.price-row .price-pair .price { font-size: 15px; }.footer-bottom .footer-links { margin-top: 8px; }.footer-bottom .footer-links a { color: #9ca3af; text-decoration: underline; text-underline-offset: 3px; }.footer-bottom .footer-links a:hover { color: #fff; }.footer a { color: inherit; }.mobile-bar { display: none; }@media (max-width: 768px) {.hero { padding: 40px 16px; }.hero h1 { font-size: 26px; }.hero p { font-size: 15px; }.hero-emoji { font-size: 60px; }.hero-inner { flex-direction: column-reverse; text-align: center; }.hero-btns { justify-content: center; }.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }.stats-bar .num { font-size: 24px; }.products-grid { grid-template-columns: 1fr; }.features-grid { grid-template-columns: 1fr; }.footer-inner { grid-template-columns: 1fr; }body { padding-bottom: 64px; }.mobile-bar { display: flex; position: fixed; right: 0; bottom: 0; left: 0; z-index: 60; gap: 8px; padding: 8px 10px; background: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,.12); }.mobile-bar .mb { flex: 1; padding: 10px 6px; border-radius: 10px; text-align: center; font-size: 13px; font-weight: 700; }.mb-call { background: #f3f4f6; color: #374151; }.mb-wa { background: #16a34a; color: #fff; }.mb-prices { background: #dc2626; color: #fff; }.price-legend { font-size: 12px; gap: 10px; }}@media (max-width: 480px) {.nav-title { font-size: 14px; }.hero h1 { font-size: 22px; }.btn { padding: 8px 16px; font-size: 13px; }}.hero-visual { position: relative; flex: 0 0 auto; width: 320px; max-width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); border-radius: 24px; overflow: hidden; }.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }.price-row { gap: 10px; }.price-row .price-info { flex: 1 1 auto; min-width: 0; }.row-thumb { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 13px; object-fit: cover; background: #f3f4f6; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }.row-thumb-fallback { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 13px; background: #f8fafc; display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }.shop-tools { max-width: 760px; margin: 0 auto 22px; display: flex; flex-direction: column; gap: 14px; }.search-input { width: 100%; padding: 12px 16px; border: 1.5px solid #e5e7eb; border-radius: 12px; background: #fff; color: #374151; font-family: inherit; font-size: 15px; }.search-input::placeholder { color: #9ca3af; }.search-input:focus { outline: none; border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.12); }.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }.chip { border: 1.5px solid #e5e7eb; background: #fff; color: #4b5563; border-radius: 999px; padding: 7px 14px; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: all .15s ease; }.chip:hover { border-color: #fca5a5; color: #dc2626; }.chip.is-active { background: #dc2626; border-color: #dc2626; color: #fff; }.chip .chip-n { opacity: .7; font-weight: 700; }.no-results { max-width: 760px; margin: 0 auto; text-align: center; color: #9ca3af; font-size: 15px; padding: 6px 0 26px; }.faq-list { max-width: 800px; margin: 0 auto; display: grid; gap: 10px; }.faq-item { background: #fff; border: 1px solid #f3f4f6; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.04); }.faq-item summary { position: relative; list-style: none; cursor: pointer; padding: 15px 44px 15px 18px; font-size: 15.5px; font-weight: 700; color: #1f2937; }.faq-item summary::-webkit-details-marker { display: none; }.faq-item summary::after { content: '+'; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #dc2626; font-size: 21px; font-weight: 800; line-height: 1; }.faq-item[open] summary::after { content: '\2212'; }.faq-answer { padding: 0 18px 16px; color: #6b7280; font-size: 14.5px; line-height: 1.9; }.visit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }.visit-card { background: #fff; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.06); padding: 26px 20px; text-align: center; }.visit-card .v-ico { font-size: 26px; margin-bottom: 10px; }.visit-card h3 { font-size: 16px; font-weight: 800; color: #1f2937; margin-bottom: 8px; }.visit-card p { font-size: 14.5px; color: #6b7280; line-height: 1.9; }.visit-card .v-link { display: inline-block; margin-top: 12px; color: #dc2626; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }.order-bar { position: fixed; right: 0; left: 0; bottom: 0; z-index: 70; display: flex; align-items: center; gap: 10px; padding: 11px 18px; background: #111827; color: #fff; box-shadow: 0 -4px 18px rgba(0,0,0,.28); transform: translateY(120%); opacity: 0; visibility: hidden; transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s; }.order-bar.is-visible { transform: translateY(0); opacity: 1; visibility: visible; transition: transform .2s ease, opacity .2s ease; }.order-bar .ob-summary { margin-inline-end: auto; font-size: 14px; font-weight: 700; }.order-bar .ob-btn { display: inline-block; border: none; border-radius: 8px; padding: 9px 14px; font-family: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.15; text-decoration: none; white-space: nowrap; cursor: pointer; }.ob-wa { background: #16a34a; color: #fff; }.ob-copy { background: #374151; color: #fff; }.ob-clear { background: transparent; color: #9ca3af; text-decoration: underline; text-underline-offset: 3px; }.qty { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }.qty-btn { width: 28px; height: 28px; border: 1.5px solid #e5e7eb; background: #fff; color: #374151; border-radius: 8px; font-family: inherit; font-size: 16px; font-weight: 800; line-height: 1; cursor: pointer; }.qty-btn:hover { border-color: #dc2626; color: #dc2626; }.qty-n { min-width: 22px; text-align: center; font-size: 14px; font-weight: 800; color: #dc2626; }.share-card { max-width: 760px; margin: 6px auto 0; background: #fff; border: 1px solid #f3f4f6; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.06); padding: 22px 20px; text-align: center; }.share-card h3 { font-size: 17px; font-weight: 800; color: #1f2937; margin-bottom: 6px; }.share-card p { font-size: 13.5px; color: #6b7280; line-height: 1.8; margin-bottom: 14px; }.share-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }.share-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 20px; border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; border: none; transition: all .15s ease; }.share-fb { background: #1877f2; color: #fff; }.share-fb:hover { background: #1464cc; }.share-wa { background: #16a34a; color: #fff; }.share-wa:hover { background: #15803d; }.share-copy { background: #f3f4f6; color: #374151; }.share-copy:hover { background: #e5e7eb; }@media (max-width: 768px) {.share-btn { flex: 1 1 100%; justify-content: center; }}@media (max-width: 768px) {.hero-visual { width: 100%; max-width: 300px; }.visit-grid { grid-template-columns: 1fr; }.order-bar { bottom: 64px; padding: 9px 12px; gap: 8px; }.order-bar .ob-btn { padding: 8px 11px; font-size: 12.5px; }.order-bar .ob-summary { font-size: 13px; }.row-thumb { width: 36px; height: 36px; }}.announce { background: #111827; color: #fca5a5; text-align: center; font-size: 13px; font-weight: 700; padding: 8px 12px; }.announce a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }.announce .pulse { display: inline-block; margin-left: 6px; }section[id] { scroll-margin-top: 140px; }.slides { position: relative; }.slide { display: none; }.slide.is-active { display: block; animation: fadeSlide .5s ease; }@keyframes fadeSlide { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }.dots { display: flex; gap: 8px; justify-content: center; padding: 14px 0 4px; }.dot-btn { width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(255,255,255,.45); cursor: pointer; padding: 0; }.dot-btn.is-active { background: #fde047; transform: scale(1.25); }.offer-badge { display: inline-block; background: #fde047; color: #92400e; font-size: 12.5px; font-weight: 800; padding: 5px 14px; border-radius: 999px; margin-bottom: 12px; }.offers-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }.offer-card { background: #fff; border: 1px solid #fde68a; border-radius: 18px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.06); display: flex; flex-direction: column; }.offer-top { background: linear-gradient(135deg, #fffbeb, #fef3c7); padding: 16px 18px 12px; }.offer-top .o-name { font-size: 16px; font-weight: 800; color: #1f2937; }.offer-top .o-sub { font-size: 12.5px; color: #92400e; font-weight: 700; margin-top: 2px; }.offer-body { padding: 12px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }.offer-prices { display: flex; align-items: baseline; gap: 10px; }.offer-now { font-size: 24px; font-weight: 800; color: #dc2626; }.offer-was { font-size: 14px; color: #9ca3af; text-decoration: line-through; }.offer-save { align-self: flex-start; font-size: 12px; font-weight: 800; background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; padding: 2px 10px; border-radius: 999px; }.offer-cta { margin-top: auto; display: block; text-align: center; background: #16a34a; color: #fff; font-weight: 800; font-size: 14px; padding: 10px; border-radius: 10px; }.offer-cta:hover { background: #15803d; }.gallery { max-width: 1100px; margin: 0 auto; display: flex; gap: 12px; overflow-x: auto; padding: 4px 20px 10px; scroll-snap-type: x mandatory; }.gallery img { width: 180px; height: 180px; flex: 0 0 auto; object-fit: cover; border-radius: 16px; scroll-snap-align: start; background: #f3f4f6; }.rate-card { max-width: 760px; margin: 20px auto 0; background: #fffbeb; border: 1px solid #fde68a; border-radius: 16px; padding: 20px; text-align: center; }.rate-card a { display: inline-block; margin-top: 10px; background: #dc2626; color: #fff; font-weight: 800; padding: 10px 24px; border-radius: 10px; }@media (max-width: 768px) {.offers-grid { grid-template-columns: 1fr; }.shop-tools { position: sticky; top: 60px; z-index: 40; background: #f9fafb; padding: 10px 6px; border-radius: 14px; }.gallery img { width: 140px; height: 140px; }}@media (min-width: 769px) {.shop-tools { position: sticky; top: 64px; z-index: 40; background: #f9fafb; padding: 12px 6px; border-radius: 14px; }}.ticker { background: #111827; color: #fbbf24; border-bottom: 2px solid #991b1b; display: flex; align-items: stretch; font-size: 13px; font-weight: 700; }.ticker-status { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; background: #991b1b; color: #fff; padding: 8px 14px; font-size: 12.5px; white-space: nowrap; }.ticker-view { flex: 1 1 auto; overflow: hidden; direction: ltr; display: flex; align-items: center; }.ticker-track { display: inline-flex; gap: 0; white-space: nowrap; animation: tickmove 28s linear infinite; will-change: transform; }.ticker-view:hover .ticker-track, .ticker-view:focus-within .ticker-track { animation-play-state: paused; }@keyframes tickmove { from { transform: translateX(0); } to { transform: translateX(-50%); } }.tick { direction: rtl; padding: 8px 18px; color: #fde68a; white-space: nowrap; }.tick b { color: #fff; }.hd-links { background: #fef2f2; border-top: 1px solid #e5e7eb; }.hd-links-inner { max-width: 1100px; margin: 0 auto; padding: 8px 20px; display: flex; gap: 20px; font-size: 13.5px; font-weight: 700; color: #4b5563; overflow-x: auto; white-space: nowrap; }.hd-links-inner a { color: inherit; }.hd-links-inner a:hover { color: #dc2626; }.hd-links-inner .hot { color: #dc2626; margin-inline-start: auto; }.hero2 { position: relative; background: #111827; color: #fff; overflow: hidden; }.hero2-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .35; }.hero2-inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 72px 20px; }.hero2-badge { display: inline-block; background: #ca8a04; color: #111827; font-size: 13px; font-weight: 800; padding: 5px 14px; border-radius: 999px; margin-bottom: 14px; }.hero2 h1 { font-size: clamp(26px, 6.5vw, 40px); font-weight: 800; line-height: 1.35; margin-bottom: 14px; }.hero2 p { font-size: 17px; color: #e5e7eb; max-width: 640px; line-height: 1.8; margin-bottom: 26px; }.catcards { max-width: 1100px; margin: 0 auto; padding: 44px 20px 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }.catcard { background: #fff; border: 1px solid #f3f4f6; border-radius: 18px; padding: 24px 12px; box-shadow: 0 1px 4px rgba(0,0,0,.05); transition: transform .2s, box-shadow .2s; cursor: pointer; }.catcard:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }.catcard .cc-ico { width: 60px; height: 60px; margin: 0 auto 10px; border-radius: 50%; background: #fef2f2; display: flex; align-items: center; justify-content: center; font-size: 28px; }.catcard h3 { font-size: 15.5px; font-weight: 800; color: #1f2937; }.catcard .cc-go { font-size: 12px; color: #dc2626; font-weight: 700; }.feat-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }.feat-card { background: #fff; border: 1px solid #f3f4f6; border-radius: 18px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.05); display: flex; flex-direction: column; transition: box-shadow .2s; }.feat-card:hover { box-shadow: 0 12px 28px rgba(0,0,0,.10); }.feat-img { position: relative; height: 170px; background: #f3f4f6; }.feat-img img { width: 100%; height: 100%; object-fit: cover; }.feat-img .fi-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; background: #fef2f2; }.feat-flag { position: absolute; top: 10px; right: 10px; background: #166534; color: #fff; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 8px; }.feat-flag.hot { background: #ca8a04; color: #111827; }.feat-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }.feat-body h3 { font-size: 15.5px; font-weight: 800; color: #1f2937; }.feat-price { font-size: 20px; font-weight: 800; color: #991b1b; }.feat-price small { font-size: 12px; color: #9ca3af; font-weight: 600; }.feat-calc { background: #f9fafb; border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; }.feat-calc select { flex: 1; border: 1.5px solid #e5e7eb; border-radius: 8px; padding: 6px 8px; font-family: inherit; font-size: 13px; background: #fff; }.feat-total { font-weight: 800; color: #1f2937; white-space: nowrap; }.feat-add { border: none; cursor: pointer; width: 100%; background: #111827; color: #fff; font-family: inherit; font-weight: 800; font-size: 14px; padding: 10px; border-radius: 10px; margin-top: auto; transition: background .15s; }.feat-add:hover { background: #991b1b; }.b2b { max-width: 1100px; margin: 0 auto; padding: 44px 20px; }.b2b-box { background: #111827; border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 16px 40px rgba(0,0,0,.25); }.b2b-txt { padding: 40px 36px; display: flex; flex-direction: column; justify-content: center; }.b2b-txt .kicker { color: #ca8a04; font-weight: 800; font-size: 14px; margin-bottom: 8px; }.b2b-txt h2 { color: #fff; font-size: 26px; font-weight: 800; margin-bottom: 12px; }.b2b-txt p { color: #9ca3af; font-size: 14.5px; line-height: 1.9; margin-bottom: 22px; }.b2b-cta { align-self: flex-start; background: #ca8a04; color: #111827; font-weight: 800; padding: 12px 26px; border-radius: 10px; }.b2b-cta:hover { background: #eab308; }.b2b-img { min-height: 260px; background-size: cover; background-position: center; }.ft { background: #fff; border-top: 1px solid #e5e7eb; padding: 44px 20px 90px; }.ft-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 28px; }.ft h4 { font-size: 15px; font-weight: 800; color: #1f2937; margin-bottom: 12px; }.ft ul { list-style: none; display: grid; gap: 8px; font-size: 13.5px; color: #6b7280; }.ft ul a { color: inherit; }.ft ul a:hover { color: #dc2626; }.ft-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }.ft-social { display: flex; gap: 10px; margin-top: 12px; }.ft-social a { width: 36px; height: 36px; border-radius: 50%; background: #f3f4f6; display: flex; align-items: center; justify-content: center; font-size: 17px; }.ft-bottom { max-width: 1100px; margin: 28px auto 0; padding-top: 18px; border-top: 1px solid #f3f4f6; text-align: center; font-size: 13px; color: #9ca3af; }@media (max-width: 768px) {.hero2-inner { padding: 52px 18px; }.hero2 h1 { font-size: 27px; }.catcards { grid-template-columns: repeat(2, 1fr); padding: 30px 16px 4px; }.feat-grid { grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 0; }.feat-img { height: 130px; }.b2b-box { grid-template-columns: 1fr; }.b2b-img { min-height: 180px; }.ft-grid { grid-template-columns: 1fr 1fr; }.hd-links-inner { font-size: 12.5px; gap: 14px; }}@media (max-width: 480px) {.feat-grid { grid-template-columns: 1fr; }}.skip-link { position: absolute; right: 12px; top: -60px; z-index: 100; background: #111827; color: #fff; padding: 10px 18px; border-radius: 0 0 10px 10px; font-weight: 700; font-size: 14px; transition: top .2s; }.skip-link:focus { top: 0; }:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }.reveal.is-visible { opacity: 1; transform: none; }@media (prefers-reduced-motion: reduce) {.reveal { opacity: 1; transform: none; transition: none; }.ticker-track { animation: none; }}.steps { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }.step { position: relative; background: #fff; border: 1px solid #f3f4f6; border-radius: 18px; padding: 26px 20px 22px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.05); }.step::before { counter-increment: step; content: counter(step); position: absolute; top: -16px; right: 50%; transform: translateX(50%); width: 34px; height: 34px; border-radius: 50%; background: #991b1b; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 16px; }.step .s-ico { font-size: 34px; margin-bottom: 10px; }.step h3 { font-size: 16px; font-weight: 800; color: #1f2937; margin-bottom: 6px; }.step p { font-size: 13.5px; color: #6b7280; line-height: 1.8; }.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(17,24,39,.9); display: none; align-items: center; justify-content: center; padding: 20px; }.lightbox.is-open { display: flex; }.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 16px; object-fit: contain; background: #fff; }.lightbox .lb-x { position: absolute; top: 14px; left: 14px; background: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; cursor: pointer; font-weight: 800; }.gallery img { cursor: zoom-in; }.cv-auto { content-visibility: auto; contain-intrinsic-size: auto 600px; }.counter-hero { position: relative; background: #141210; color: #faf7f0; overflow: hidden; }.counter-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(212,160,23,.09) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; }.ch-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .16; }.ch-inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 64px 20px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 36px; align-items: center; }.ch-live { display: inline-flex; align-items: center; gap: 8px; background: rgba(22,163,74,.14); border: 1px solid rgba(22,163,74,.5); color: #86efac; font-size: 13px; font-weight: 800; padding: 6px 16px; border-radius: 999px; margin-bottom: 14px; }.ch-live.is-closed { background: rgba(220,38,38,.14); border-color: rgba(220,38,38,.5); color: #fca5a5; }.ch-live .pulse { background: currentColor; }.counter-hero h1 { font-size: clamp(28px, 7vw, 42px); font-weight: 800; line-height: 1.4; margin-bottom: 12px; }.counter-hero h1 .gold { color: #eab308; }.counter-hero .ch-sub { font-size: 16.5px; color: #d6d3d1; line-height: 1.9; margin-bottom: 22px; max-width: 520px; }.ch-proof { display: flex; gap: 18px; margin-top: 20px; font-size: 13px; color: #d6d3d1; font-weight: 700; flex-wrap: wrap; }.ch-proof b { color: #eab308; }.ch-calc { background: #faf7f0; color: #1c1917; border-radius: 22px; padding: 26px 24px; box-shadow: 0 24px 60px rgba(0,0,0,.45); }.ch-calc h3 { font-size: 17px; font-weight: 800; margin-bottom: 4px; }.ch-calc .ch-hint { font-size: 12.5px; color: #78716c; margin-bottom: 14px; }.ch-calc label { display: block; font-size: 13px; font-weight: 800; color: #57534e; margin: 12px 0 6px; }.ch-calc select { width: 100%; border: 1.5px solid #e7e5e4; border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 14px; font-weight: 700; background: #fff; color: #1c1917; }.ch-calc input[type=range] { width: 100%; accent-color: #b45309; height: 32px; }.ch-total { display: flex; justify-content: space-between; align-items: baseline; background: #1c1917; color: #faf7f0; border-radius: 12px; padding: 12px 16px; margin: 8px 0 12px; }.ch-total span { font-size: 13px; color: #d6d3d1; }.ch-total b { font-size: 24px; font-weight: 800; color: #eab308; }.ch-add { width: 100%; border: none; cursor: pointer; background: #16a34a; color: #fff; font-family: inherit; font-weight: 800; font-size: 15px; padding: 12px; border-radius: 12px; }.ch-add:hover { background: #15803d; }.ch-fine { display: block; text-align: center; font-size: 11.5px; color: #a8a29e; margin-top: 8px; }.journey { max-width: 1100px; margin: 0 auto; padding: 40px 20px 6px; }.journey-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: #fff; border: 1px solid #f3f4f6; border-radius: 18px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.05); }.j-stage { position: relative; text-align: center; padding: 20px 10px 18px; opacity: .45; }.j-stage + .j-stage { border-right: 1px solid #f3f4f6; }.j-stage .j-time { font-size: 12px; font-weight: 800; color: #b45309; }.j-stage .j-ico { font-size: 30px; margin: 6px 0; }.j-stage h4 { font-size: 14px; font-weight: 800; color: #1f2937; }.j-stage p { font-size: 12px; color: #6b7280; margin-top: 2px; }.j-stage.is-done { opacity: .85; }.j-stage.is-done .j-ico { filter: grayscale(.4); }.j-stage.is-now { opacity: 1; background: #fffbeb; box-shadow: inset 0 -3px 0 #eab308; }.cx-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.cx-card { background: #1c1917; color: #faf7f0; border-radius: 22px; padding: 24px 22px; text-align: center; box-shadow: 0 12px 32px rgba(0,0,0,.18); }.cx-card h3 { font-size: 17px; font-weight: 800; margin-bottom: 2px; }.cx-card .cx-sub { font-size: 12.5px; color: #a8a29e; margin-bottom: 10px; }.cx-zone { cursor: pointer; }.cx-zone rect, .cx-zone ellipse { fill: rgba(234,179,8,.10); stroke: rgba(234,179,8,.55); stroke-width: 1.5; stroke-dasharray: 6 4; transition: fill .15s; }.cx-zone text { fill: #eab308; font-size: 13px; font-weight: 800; }.cx-zone:hover rect, .cx-zone:hover ellipse, .cx-zone:focus rect, .cx-zone:focus ellipse { fill: rgba(234,179,8,.35); }.cx-zone.is-active rect, .cx-zone.is-active ellipse { fill: rgba(234,179,8,.5); stroke-style: solid; }.cx-reset { margin-top: 12px; background: transparent; border: 1px solid #57534e; color: #d6d3d1; border-radius: 10px; padding: 8px 22px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }.cx-reset:hover { border-color: #eab308; color: #eab308; }@media (max-width: 768px) {.ch-inner { grid-template-columns: 1fr; padding: 46px 18px; }.counter-hero h1 { font-size: 28px; }.journey-track { grid-template-columns: 1fr 1fr; }.j-stage:nth-child(3) { border-right: none; }.j-stage:nth-child(3), .j-stage:nth-child(4) { border-top: 1px solid #f3f4f6; }.cx-grid { grid-template-columns: 1fr; }}@media (max-width: 768px) {.steps { grid-template-columns: 1fr; }}.mobile-bar, .order-bar { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }html.is-app .share-card, html.is-app .mobile-bar .mb-prices { display: none; }html.is-app body { padding-bottom: 0; }html.is-app .ft { padding-bottom: 110px; }html.is-app .order-bar { bottom: 0; }@media (display-mode: standalone) {.share-card { display: none; }.mobile-bar, .order-bar { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }}@media print {.ticker, .hd-links, .hero2, .catcards, #featured, #offers, .share-card, #trend, #gallery, .b2b, #faq, #visit, .rate-card, .ft, .mobile-bar, .order-bar, .shop-tools, .dots, .feat-calc .feat-add, .offer-cta, .lightbox { display: none !important; }body { background: #fff; padding: 0; }.section { padding: 10px; }.product-card, .price-row { break-inside: avoid; box-shadow: none; }}


/* ---------- v2 perf release: off-canvas checkout modal + season strip ---------- */
.ob-checkout{background:#dc2626;color:#fff}
.ocm-overlay{position:fixed;inset:0;z-index:95;background:rgba(17,24,39,.72);display:none;align-items:flex-end;justify-content:center}
.ocm-overlay.is-open{display:flex}
.ocm{position:relative;background:#fff;color:#1f2937;width:100%;max-width:460px;max-height:88vh;overflow-y:auto;border-radius:20px 20px 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 40px rgba(0,0,0,.3);animation:ocmUp .22s ease}
@keyframes ocmUp{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.ocm h3{font-size:17px;font-weight:800;margin-bottom:2px}
.ocm .ocm-sub{font-size:12.5px;color:#6b7280;margin-bottom:6px}
.ocm-x{position:absolute;top:12px;left:12px;background:#f3f4f6;border:none;width:34px;height:34px;border-radius:50%;font-size:15px;font-weight:800;color:#374151;cursor:pointer}
.ocm label{display:block;font-size:13px;font-weight:800;color:#4b5563;margin:10px 0 5px}
.ocm input,.ocm select,.ocm textarea{width:100%;padding:11px 12px;border:1.5px solid #e5e7eb;border-radius:10px;font-family:inherit;font-size:14px;background:#fff;color:#1f2937}
.ocm input:focus,.ocm select:focus,.ocm textarea:focus{outline:none;border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.ocm-seg{display:flex;gap:8px}
.ocm-seg button{flex:1;padding:11px;border:1.5px solid #e5e7eb;background:#fff;border-radius:10px;font-family:inherit;font-weight:700;font-size:13.5px;cursor:pointer;color:#374151}
.ocm-seg button.is-active{background:#dc2626;border-color:#dc2626;color:#fff}
.ocm-actions{display:flex;gap:8px;margin-top:16px}
.ocm-send{flex:1;background:#16a34a;color:#fff;border:none;border-radius:12px;padding:13px;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer}
.ocm-send:hover{background:#15803d}
.ocm-copy{background:#f3f4f6;color:#374151;border:none;border-radius:12px;padding:13px 16px;font-family:inherit;font-weight:700;cursor:pointer}
.ocm-fine{display:block;text-align:center;font-size:11px;color:#9ca3af;margin-top:10px}
@media(min-width:769px){.ocm-overlay{align-items:center}.ocm{border-radius:20px}}
.season-strip{background:linear-gradient(90deg,#7c2d12,#b45309);color:#fff;text-align:center;font-size:13.5px;font-weight:700;padding:9px 14px}
.season-strip a{color:#fde047;text-decoration:underline;text-underline-offset:3px;font-weight:800}