/* CableShop public storefront. All selectors are scoped to avoid changing administration UI. */
.public-shell{--cs-black:#0d0d0d;--cs-charcoal:#191919;--cs-dark:#242424;--cs-yellow:#f4c300;--cs-yellow-hover:#dcaf00;--cs-warm:#f7f7f4;--cs-white:#fff;--cs-text:#151515;--cs-muted:#6b6b6b;--cs-border:#e4e4de;--cs-r:18px;--cs-space:clamp(4rem,8vw,8rem);background:var(--cs-warm);line-height:1.8}.cs-container{width:min(1320px,calc(100% - 2rem));margin-inline:auto}.cs-section{padding-block:var(--cs-space)}.public-shell .public-topbar{width:100%;max-width:none;padding:.45rem max(1rem,calc((100% - 1320px)/2));background:#080808;color:#aaa;font-size:.75rem}.public-topbar a{color:#eee}.public-shell .public-header{background:#0d0d0dfa;box-shadow:none;border-block-end:1px solid #ffffff18}.public-shell .public-header-main{max-width:none;width:min(1320px,calc(100% - 2rem));padding:0;min-height:82px}.public-nav{justify-content:center}.public-shell .public-nav a{position:relative;padding-block:1.55rem;border:0;font-size:.86rem}.public-nav a:after{content:"";position:absolute;inset-inline:0;bottom:1rem;height:2px;background:var(--cs-yellow);transform:scaleX(0);transition:.2s}.public-nav a:hover:after,.public-nav a.active:after{transform:scaleX(1)}.public-nav a.active{color:var(--cs-yellow)}.public-actions select,.public-footer select{background:#242424;color:#fff;border:1px solid #4b4b4b;border-radius:10px;padding:.65rem}.header-search{font-size:1.55rem;color:#fff;text-decoration:none}.mobile-menu-button span{display:block}.cs-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:.7rem 1.25rem;border-radius:10px;border:1px solid var(--cs-border);font-weight:800;text-decoration:none;cursor:pointer}.cs-button-primary{background:var(--cs-yellow);border-color:var(--cs-yellow);color:#111!important}.cs-button-primary:hover{background:var(--cs-yellow-hover)}.cs-button-outline{border-color:#ffffff66;color:#fff;background:transparent}.public-main{overflow:hidden}.section-eyebrow{display:block;color:#806700;font-size:.76rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase;margin-block-end:.6rem}.public-hero{position:relative;min-height:clamp(580px,78vh,820px);background:#0d0d0d;color:#fff;overflow:hidden}.public-hero picture,.public-hero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#0d0d0df2 7%,#0d0d0d99 47%,#0d0d0d22)}html[dir=rtl] .hero-overlay{background:linear-gradient(270deg,#0d0d0df2 7%,#0d0d0d99 47%,#0d0d0d22)}.hero-inner,.hero-fallback{position:relative;z-index:2;min-height:inherit;display:flex;align-items:center}.hero-copy{width:min(700px,75%);padding-block:5rem}.hero-copy .section-eyebrow,.quotation-band .section-eyebrow{color:var(--cs-yellow)}.hero-copy h1,.hero-fallback h1{font-size:clamp(2.45rem,6vw,5.6rem);line-height:1.12;letter-spacing:-.04em;margin:.4rem 0 1.5rem;text-wrap:balance}.hero-copy p,.hero-fallback p{font-size:clamp(1rem,1.5vw,1.25rem);color:#ddd}.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-block-start:2rem}.hero-index{position:absolute;inset-inline-end:0;bottom:3rem;color:#aaa}.cable-line{position:absolute;width:42vw;height:42vw;border:1px solid #f4c30055;border-radius:50%;inset-inline-end:-20vw;bottom:-25vw;box-shadow:0 0 0 60px #f4c3000a,0 0 0 120px #f4c30008}.trust-strip{background:#fff;border-block-end:1px solid var(--cs-border)}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}.trust-grid>div{padding:1.6rem;border-inline-end:1px solid var(--cs-border);display:flex;align-items:center;gap:.8rem}.trust-grid strong{font-size:1.75rem}.trust-grid span{font-size:.82rem;color:var(--cs-muted)}.editorial-heading{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-block-end:2.5rem}.editorial-heading h2,.intro-copy h2,.quotation-band h2,.contact-callout h2{font-size:clamp(1.9rem,4vw,3.5rem);line-height:1.25;margin:0;text-wrap:balance}.text-arrow{color:#191919;font-weight:800;text-decoration:none;border-block-end:1px solid}.category-editorial{display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:repeat(2,260px);gap:1rem}.category-tile{position:relative;overflow:hidden;border-radius:var(--cs-r);background:#222;color:#fff}.category-tile-0{grid-row:span 2}.category-tile img{width:100%;height:100%;object-fit:cover;transition:.5s}.category-tile:hover img{transform:scale(1.04)}.category-overlay{position:absolute;inset:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:end;background:linear-gradient(transparent 10%,#090909df)}.category-overlay h3{font-size:clamp(1.25rem,2vw,2rem);margin:.3rem 0}.category-overlay p{color:#ddd;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.category-overlay>span{position:absolute;inset-inline-end:1.5rem;top:1.5rem;width:42px;height:42px;background:var(--cs-yellow);color:#111;border-radius:50%;display:grid;place-items:center}.company-intro{background:#fff}.intro-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,7vw,7rem)}.intro-visual{min-height:510px;border-radius:30px;background:#151515;position:relative;overflow:hidden;color:#fff;display:grid;place-items:center}.intro-visual>div{text-align:center;z-index:1}.intro-visual b{display:block;font-size:7rem;line-height:1;color:var(--cs-yellow)}.cable-disc{position:absolute;width:360px;height:360px;border:55px solid #2d2d2d;border-radius:50%;box-shadow:0 0 0 3px var(--cs-yellow)}.intro-copy p,.advantage-grid p{color:var(--cs-muted)}.intro-copy ul{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;list-style:none;padding:0}.intro-copy li:before{content:"";display:inline-block;width:8px;height:8px;background:var(--cs-yellow);margin-inline-end:.6rem}.premium-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}.product-card-premium{background:#fff;border:1px solid var(--cs-border);border-radius:var(--cs-r);overflow:hidden;transition:.25s}.product-card-premium:hover{transform:translateY(-6px);box-shadow:0 20px 50px #1111}.product-media{display:block;height:290px;position:relative;background:#efefeb;overflow:hidden}.product-media img{width:100%;height:100%;object-fit:cover;transition:.45s}.product-card-premium:hover .product-media img{transform:scale(1.045)}.featured-badge{position:absolute;top:1rem;inset-inline-start:1rem;background:var(--cs-yellow);color:#111;padding:.25rem .65rem;border-radius:999px;font-size:.7rem;font-weight:900}.image-placeholder{width:100%;height:100%;display:grid;place-items:center;background:#e9e9e4;color:#aaa;font-size:3rem;font-weight:900}.product-card-content{padding:1.25rem}.product-meta{display:flex;gap:.5rem;flex-wrap:wrap}.product-meta span{font-size:.7rem;color:var(--cs-muted);background:#f2f2ef;padding:.18rem .5rem;border-radius:999px}.product-card-content h3{font-size:1.15rem;margin:.8rem 0}.product-card-content h3 a{color:inherit;text-decoration:none}.product-card-content>p{color:var(--cs-muted);font-size:.86rem;min-height:3.2rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.product-card-actions{display:flex;justify-content:space-between;align-items:end;border-block-start:1px solid var(--cs-border);padding-block-start:1rem}.product-price{display:flex;align-items:baseline;gap:.3rem}.arrow-link{width:40px;height:40px;border:1px solid var(--cs-border);border-radius:50%;display:grid;place-items:center;color:#806800;text-decoration:none}.quote-inline{display:block;text-align:center;margin-block-start:1rem;color:#111;font-weight:900;font-size:.8rem}.quotation-band{background:#111;color:#fff;padding-block:var(--cs-space)}.quotation-band-inner{display:grid;grid-template-columns:2fr 1fr;align-items:center}.quotation-band p{color:#bbb}.quote-mark{font-size:12rem;color:var(--cs-yellow);text-align:center}.advantage-grid{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--cs-border)}.advantage-grid article{padding:2rem;border-inline-end:1px solid var(--cs-border)}.advantage-grid b{color:#927500}.brand-section{background:#efefeb}.brand-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.7rem}.brand-grid a{min-height:130px;background:#fff;border:1px solid var(--cs-border);border-radius:10px;padding:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#333;text-decoration:none}.brand-grid img{width:100%;height:70px;object-fit:contain;filter:grayscale(1);opacity:.75}.brand-grid a:hover img{filter:none;opacity:1}.document-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.document-grid article{background:#fff;border:1px solid var(--cs-border);border-radius:var(--cs-r);padding:1.25rem;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem}.pdf-mark{background:#191919;color:var(--cs-yellow);padding:.8rem .6rem;border-radius:8px;font-weight:900}.document-grid h3,.document-grid p{margin:0}.document-grid a{width:44px;height:44px;border-radius:50%;background:var(--cs-yellow);display:grid;place-items:center;color:#111;text-decoration:none}.process-section{background:#fff}.process-section ol{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;padding:0}.process-section li{position:relative;padding:2rem;border-block-start:2px solid #222;display:flex;flex-direction:column;gap:1rem}.process-section li:before{content:"";position:absolute;top:-7px;inset-inline-start:0;width:12px;height:12px;border-radius:50%;background:var(--cs-yellow)}.contact-callout{margin-block:var(--cs-space);padding:clamp(2rem,5vw,4rem);background:var(--cs-yellow);border-radius:30px;display:flex;justify-content:space-between;align-items:center;gap:2rem}.contact-actions{display:flex;flex-wrap:wrap;gap:1rem}.contact-callout .cs-button-primary{background:#111;border-color:#111;color:#fff!important}.public-shell .public-footer{display:block;padding:var(--cs-space) 0 1.5rem;border:0}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:3rem}.footer-grid>div:not(.footer-brand){display:flex;flex-direction:column;align-items:start}.footer-grid h3{color:#fff}.footer-grid a{color:#aaa;text-decoration:none}.footer-brand img{height:64px;max-width:180px}.footer-bottom{margin-block-start:3rem;padding-block-start:1.5rem;border-block-start:1px solid #333;display:flex;justify-content:space-between}.catalog-hero{background:#151515;color:#fff;padding:clamp(4rem,8vw,7rem) 0}.catalog-hero h1{font-size:clamp(2.2rem,5vw,4.8rem);line-height:1.15}.catalog-layout{display:grid;grid-template-columns:280px 1fr;gap:2.5rem;align-items:start}.filter-panel{background:#fff;border:1px solid var(--cs-border);border-radius:var(--cs-r);padding:1.4rem;position:sticky;top:110px}.filter-panel label,.purchase-summary label{display:grid;gap:.35rem;font-size:.8rem;font-weight:800;margin-block:1rem}.filter-panel input,.filter-panel select,.purchase-summary input,.purchase-summary select{width:100%;padding:.8rem;border:1px solid var(--cs-border);border-radius:8px}.filter-panel .cs-button{width:100%}.filter-reset{width:100%;border:0;background:none;padding:1rem}.filter-close,.mobile-filter-button,.filter-backdrop{display:none}.product-skeleton-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.product-skeleton-grid article{background:#fff;padding:1rem}.product-skeleton-grid i{display:block;height:260px;background:#eee}.empty-catalog{text-align:center;background:#fff;border:1px dashed var(--cs-border);border-radius:var(--cs-r);padding:5rem 1rem}.detail-shell{padding-block:2rem var(--cs-space)}.breadcrumb{display:flex;gap:.6rem;color:var(--cs-muted);font-size:.78rem;margin-block:1rem 2rem}.product-detail-premium{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);gap:clamp(2rem,5vw,5rem);align-items:start}.gallery-main{height:590px;border-radius:var(--cs-r);overflow:hidden;background:#eee}.gallery-main img{width:100%;height:100%;object-fit:contain;background:#fff}.gallery-thumbs{display:flex;gap:.7rem;margin-block-start:.8rem;overflow:auto}.gallery-thumbs button{width:82px;height:82px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden}.gallery-thumbs button.active{border-color:var(--cs-yellow)}.gallery-thumbs img{width:100%;height:100%;object-fit:cover}.purchase-summary{position:sticky;top:110px;background:#fff;border:1px solid var(--cs-border);border-radius:var(--cs-r);padding:clamp(1.5rem,3vw,2.5rem)}.purchase-summary h1{font-size:clamp(2rem,3.5vw,3.5rem);line-height:1.2}.price-panel{background:#151515;color:#fff;padding:1.2rem;border-radius:12px;display:flex;flex-direction:column}.price-panel strong{font-size:1.5rem;color:var(--cs-yellow)}.calculated-total{display:flex;justify-content:space-between;border-block:1px solid var(--cs-border);padding-block:1rem;margin-block:1rem}.full-button{width:100%}.detail-content-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-block:var(--cs-space)}.detail-content-grid>article{background:#fff;border:1px solid var(--cs-border);border-radius:var(--cs-r);padding:clamp(1.5rem,4vw,3rem)}.spec-list>div{display:flex;justify-content:space-between;padding:.8rem 0;border-block-end:1px solid var(--cs-border)}.spec-list dd{margin:0;font-weight:800}
@media(max-width:1100px){.premium-product-grid{grid-template-columns:repeat(2,1fr)}.brand-grid{grid-template-columns:repeat(3,1fr)}.category-editorial{grid-template-columns:1.2fr 1fr}.category-tile:nth-child(n+4){display:none}.advantage-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.public-shell .public-topbar{display:none}.public-header-main{min-height:68px}.mobile-menu-button{display:grid;width:42px;gap:5px;order:3}.mobile-menu-button span{height:2px;background:var(--cs-yellow)}.public-shell .public-nav{top:68px}.public-actions{margin-inline-start:auto}.header-search,.header-quote{display:none}.hero-copy{width:100%}.trust-grid{grid-template-columns:repeat(2,1fr)}.category-editorial{grid-template-columns:1fr;grid-template-rows:420px repeat(2,240px)}.category-tile-0{grid-row:auto}.intro-grid,.quotation-band-inner,.detail-content-grid{grid-template-columns:1fr}.intro-visual{min-height:380px}.quote-mark{display:none}.footer-grid{grid-template-columns:1fr 1fr}.catalog-layout{display:block}.filter-panel{display:none;position:fixed;z-index:302;inset-block:0;inset-inline-start:0;width:min(340px,88vw);border-radius:0;overflow:auto}.filter-panel.is-open,.filter-close,.mobile-filter-button{display:block}.filter-backdrop.is-open{display:block;position:fixed;z-index:301;inset:0;background:#0009}.product-detail-premium{grid-template-columns:1fr}.purchase-summary{position:static}.gallery-main{height:460px}}
@media(max-width:560px){.cs-container{width:min(100% - 1.2rem,1320px)}.cs-section{padding-block:3.5rem}.public-hero{min-height:600px}.hero-copy h1,.hero-fallback h1{font-size:clamp(2.2rem,12vw,3.6rem)}.hero-actions>*{width:100%}.trust-grid>div{padding:1rem;flex-direction:column}.category-editorial{grid-template-rows:380px repeat(2,220px)}.intro-visual{min-height:320px}.cable-disc{width:250px;height:250px;border-width:40px}.intro-copy ul{grid-template-columns:1fr}.premium-product-grid,.product-skeleton-grid,.document-grid{grid-template-columns:1fr}.advantage-grid{grid-template-columns:1fr}.brand-grid{grid-template-columns:repeat(2,1fr)}.process-section ol{grid-template-columns:1fr}.contact-callout{margin-inline:.6rem;flex-direction:column;align-items:start}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:1rem}.gallery-main{height:360px}.purchase-summary{padding:1.2rem}}
@media(prefers-reduced-motion:reduce){.public-shell *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Screenshot-informed refinement: compact corporate canvas and original cable geometry. */
@media(min-width:801px){.public-shell .cs-container{width:min(1180px,calc(100% - 3rem))}.public-shell .public-header-main{width:min(1180px,calc(100% - 3rem))}.public-shell .public-hero{width:min(1180px,calc(100% - 3rem));margin:1.25rem auto 0;min-height:620px;border-radius:34px 34px 110px 34px}.public-shell .trust-strip{width:min(1080px,calc(100% - 5rem));margin:-1px auto 0;border-radius:0 0 18px 18px;position:relative;z-index:3}.public-shell .cs-section{padding-block:clamp(4.5rem,7vw,7rem)}.public-shell .category-editorial{grid-template-rows:repeat(2,230px)}.public-shell .intro-visual{min-height:440px}.public-shell .product-media{height:250px}.public-shell .quotation-band{width:min(1180px,calc(100% - 3rem));margin-inline:auto;border-radius:34px 110px 34px 34px}.public-shell .contact-callout{width:min(1100px,calc(100% - 5rem));border-radius:28px 90px 28px 28px}}
.public-shell .editorial-heading{position:relative;padding-block:.7rem;margin-block-end:2.2rem;border-block-start:10px solid var(--cs-charcoal)}.public-shell .editorial-heading:before{content:"";position:absolute;top:-10px;inset-inline-end:0;width:54px;height:10px;background:var(--cs-yellow);border-radius:4px}.public-shell .editorial-heading h2{font-size:clamp(1.65rem,3vw,2.65rem)}.public-shell .category-overlay,.public-shell .product-card-content{backdrop-filter:none}.public-shell .product-card-premium{box-shadow:0 14px 35px #1515150b}.public-shell .brand-grid a{border-block-start:3px solid transparent}.public-shell .brand-grid a:hover{border-block-start-color:var(--cs-yellow)}.public-shell .document-grid article{box-shadow:0 14px 30px #1515150a}.public-shell .process-section li b{display:inline-grid;place-items:center;width:52px;height:52px;background:var(--cs-charcoal);color:var(--cs-yellow);border-radius:16px 16px 5px 16px}.public-shell .footer-grid{background:#121f23;border-radius:28px;padding:clamp(1.5rem,4vw,3rem);position:relative}.public-shell .footer-grid:before{content:"";position:absolute;inset-inline-start:-10px;top:34px;width:20px;height:90px;background:var(--cs-yellow);border-radius:8px}.public-shell .catalog-hero{width:min(1180px,calc(100% - 3rem));margin:1.25rem auto 0;border-radius:30px 30px 90px 30px;padding-inline:clamp(1rem,4vw,4rem)}
@media(max-width:800px){.public-shell .public-hero{border-radius:0 0 48px 0}.public-shell .editorial-heading{border-block-start-width:7px}.public-shell .editorial-heading:before{top:-7px;height:7px}.public-shell .quotation-band{border-radius:0 48px 0 0}.public-shell .catalog-hero{border-radius:0 0 48px 0}.public-shell .footer-grid{border-radius:20px}.public-shell .footer-grid:before{display:none}}

/* Public identity v2: all selectors remain isolated from the administrator UI. */
.public-shell{--font-family-base:"IRANSansFaNum","IRANSans","Vazirmatn",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-family-num:"IRANSansFaNum","IRANSans","Vazirmatn",sans-serif;--public-navy:#061a2e;--public-navy-2:#0b233c;--public-navy-light:#112d49;--public-yellow:#fbb800;--public-yellow-soft:#ffd24a;--public-text:#142033;--public-muted:#6f7b8b;--public-border:#e7ebf0;--public-surface:#fff;--public-soft:#f7f9fb;background:var(--public-surface);color:var(--public-text);font-family:var(--font-family-base);letter-spacing:0;overflow:clip}.public-shell *{box-sizing:border-box}.public-container{width:min(1240px,calc(100% - 40px));margin-inline:auto}.public-main{min-height:50vh}.public-section{padding-block:clamp(4.5rem,7vw,7rem)}.section-kicker{display:inline-flex;align-items:center;gap:.55rem;color:#b18000;font-size:.82rem;font-weight:800;letter-spacing:0;text-transform:uppercase}.section-kicker:before{content:"";width:24px;height:3px;background:var(--public-yellow)}.public-button{min-height:46px;padding:.7rem 1.25rem;border:1px solid transparent;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:var(--public-navy)!important;font-size:.88rem;font-weight:800;text-decoration:none;transition:.2s ease}.public-button.yellow{background:var(--public-yellow);box-shadow:0 10px 25px #fbb80026}.public-button.yellow:hover{background:var(--public-yellow-soft);transform:translateY(-2px)}.public-button.outline{color:#fff!important;border-color:#ffffff55;background:#ffffff0c}.public-button.outline:hover{border-color:var(--public-yellow);color:var(--public-yellow)!important}
.site-header{position:sticky;z-index:500;top:0;color:#fff;background:var(--public-navy);box-shadow:0 10px 35px #061a2e20}.site-topline{background:#041321;border-block-end:1px solid #ffffff10;font-size:.8125rem;color:#aebdca}.site-topline .public-container{min-height:32px;display:flex;align-items:center;justify-content:space-between}.site-topline a{color:var(--public-yellow);text-decoration:none}.site-nav{height:82px;display:grid;grid-template-columns:minmax(190px,270px) 1fr auto;align-items:stretch}.site-brand{position:relative;isolation:isolate;padding-inline:1rem 2.3rem;display:flex;align-items:center;gap:.75rem;color:#fff;text-decoration:none;background:var(--public-yellow)}[dir=ltr] .site-brand{padding-inline:2.3rem 1rem}.site-brand:after{content:"";position:absolute;z-index:-1;inset-block:0;inset-inline-end:-35px;width:70px;background:var(--public-yellow);transform:skewX(-24deg)}[dir=ltr] .site-brand:after{transform:skewX(24deg)}.site-brand img{width:52px;height:52px;object-fit:contain}.site-brand>span:not(.brand-monogram){min-width:0;display:grid;color:var(--public-navy)}.site-brand strong{font-size:1.0625rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.site-brand small{font-size:.75rem;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-monogram{width:42px;height:42px;border:2px solid var(--public-navy);border-radius:11px 11px 3px 11px;display:grid;place-items:center;color:var(--public-navy);font-weight:950}.site-links{padding-inline-start:3.6rem;display:flex;align-items:center;justify-content:center;gap:clamp(.55rem,1.5vw,1.45rem)}.site-links a{position:relative;padding-block:1.9rem;color:#d8e1e8;text-decoration:none;font-size:.875rem;font-weight:800;white-space:nowrap}.site-links a:after{content:"";position:absolute;inset-inline:20%;bottom:0;height:4px;border-radius:4px 4px 0 0;background:var(--public-yellow);transform:scaleX(0);transition:.2s}.site-links a:hover,.site-links a.active{color:#fff}.site-links a.active:after{transform:scaleX(1)}.site-actions{display:flex;align-items:center;gap:.55rem}.icon-action,.language-action{width:42px;height:42px;border:1px solid #ffffff30;border-radius:8px;display:grid;place-items:center;background:transparent;color:#fff;text-decoration:none;font:800 .8125rem inherit}.icon-action:hover,.language-action:hover{border-color:var(--public-yellow);color:var(--public-yellow)}.nav-quote{white-space:nowrap}.nav-toggle{display:none}
.industrial-hero{position:relative;min-height:clamp(520px,64vw,690px);isolation:isolate;display:flex;align-items:center;color:#fff;background:var(--public-navy);overflow:hidden}.hero-picture,.hero-shade{position:absolute;z-index:-2;inset:0}.hero-picture img{width:100%;height:100%;object-fit:cover}.hero-shade{z-index:-1;background:linear-gradient(90deg,#061a2e33 0%,#061a2ed9 54%,#061a2efa 100%)}[dir=ltr] .hero-shade{background:linear-gradient(-90deg,#061a2e33 0%,#061a2ed9 54%,#061a2efa 100%)}.hero-content{padding-block:6rem;width:min(1240px,calc(100% - 40px))}.hero-content>*{max-width:620px}.hero-content h1{margin:.8rem 0 1.2rem;font-size:clamp(2.35rem,5vw,5rem);line-height:1.15;font-weight:950}.hero-content p{font-size:clamp(.95rem,1.4vw,1.15rem);line-height:2;color:#d1dce5}.hero-buttons{display:flex;flex-wrap:wrap;gap:.75rem;margin-block-start:2rem}.hero-corner{position:absolute;inset-inline-end:-70px;bottom:-110px;width:320px;height:260px;border:34px solid var(--public-yellow);transform:rotate(35deg);opacity:.9}.industrial-hero:after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:34%;height:8px;background:var(--public-yellow)}
.trust-bar{position:relative;z-index:5;margin-block-start:-1px;background:var(--public-navy-2);color:#fff;border-block-end:4px solid var(--public-yellow)}.trust-items{display:grid;grid-template-columns:repeat(4,1fr)}.trust-items article{min-height:105px;padding:1.4rem;display:flex;align-items:center;gap:1rem;border-inline-end:1px solid #ffffff18}.trust-items article:first-child{border-inline-start:1px solid #ffffff18}.trust-items strong{min-width:42px;color:var(--public-yellow);font-size:1.8rem;font-weight:950}.trust-items span{font-size:.875rem;color:#c7d2dc}
.section-heading-v2{margin-block-end:2.2rem;padding-block-start:1rem;display:flex;align-items:end;justify-content:space-between;gap:1rem;border-block-start:8px solid var(--public-navy);position:relative}.section-heading-v2:after{content:"";position:absolute;top:-8px;inset-inline-end:0;width:64px;height:8px;background:var(--public-yellow)}.section-heading-v2 h2{margin:.4rem 0 0;font-size:clamp(1.65rem,3vw,2.6rem);font-weight:950}.section-heading-v2>a{color:var(--public-navy);font-size:.875rem;font-weight:900;text-decoration:none}.section-heading-v2>a span{color:#a67a00}
.category-grid-v2{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}.industrial-category-card{min-height:225px;padding:1rem;display:grid;grid-template-columns:42% 1fr;align-items:center;gap:1.2rem;background:#fff;border:1px solid var(--public-border);border-radius:18px 18px 55px 18px;color:var(--public-text);text-decoration:none;overflow:hidden;transition:.25s}.industrial-category-card:hover{transform:translateY(-5px);border-color:#fbb80099;box-shadow:0 22px 50px #061a2e12}.category-card-media{height:190px;border-radius:12px 12px 42px 12px;background:var(--public-soft);overflow:hidden;display:grid;place-items:center}.category-card-media img{width:100%;height:100%;object-fit:cover}.category-card-media>span{font-size:3rem;font-weight:950;color:#ccd3da}.industrial-category-card small{color:#a17900;font-size:.78rem}.industrial-category-card h3{margin:.35rem 0;font-size:1.125rem;font-weight:950}.industrial-category-card p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--public-muted);font-size:.8125rem;line-height:1.8}.industrial-category-card strong{color:var(--public-navy);font-size:.8125rem}.industrial-category-card i{color:#a17900;font-style:normal}
.brand-zone{background:var(--public-soft)}.industrial-brand-strip{display:flex;gap:.8rem;overflow-x:auto;padding-block:.5rem 1rem;scroll-snap-type:x mandatory;scrollbar-width:thin}.industrial-brand-strip a{scroll-snap-align:start;flex:1 0 170px;min-height:125px;padding:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.65rem;background:#fff;border:1px solid var(--public-border);border-block-start:3px solid transparent;border-radius:12px;color:var(--public-muted);text-decoration:none}.industrial-brand-strip a:hover{border-block-start-color:var(--public-yellow)}.industrial-brand-strip img{width:120px;height:60px;object-fit:contain}.industrial-brand-strip span{font-size:.78rem}
.featured-product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}.public-shell .product-card-premium{border-radius:16px 16px 48px 16px;border-color:var(--public-border);overflow:hidden}.public-shell .product-media{height:265px;background:var(--public-soft)}.public-shell .product-media img{object-fit:contain;padding:1rem}.public-shell .model-code{display:block;margin-block:.35rem;color:var(--public-muted)}
.catalog-consultation{position:relative;min-height:330px;padding:clamp(2rem,5vw,4.5rem);display:flex;align-items:center;justify-content:space-between;gap:2rem;color:#fff;background:linear-gradient(130deg,var(--public-navy),var(--public-navy-2));border-radius:28px 28px 100px 28px;overflow:hidden}.catalog-consultation>div{max-width:690px}.catalog-consultation h2{margin:.6rem 0;font-size:clamp(2rem,4vw,3.5rem)}.catalog-consultation p{color:#bdc9d4;line-height:1.9}.catalog-symbol{width:190px;aspect-ratio:1;display:grid;place-items:center;border:22px solid var(--public-yellow);border-radius:50%;color:var(--public-yellow);font-size:2rem;font-weight:950;transform:rotate(-12deg)}
.catalog-grid-v2{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.catalog-card-v2{display:grid;grid-template-columns:42% 1fr;background:#fff;border:1px solid var(--public-border);border-radius:16px 16px 45px 16px;overflow:hidden}.catalog-cover{position:relative;min-height:230px;background:var(--public-soft);display:grid;place-items:center}.catalog-cover img{width:100%;height:100%;object-fit:cover}.catalog-cover>span{font-size:2rem;font-weight:950;color:#c4cbd3}.catalog-cover i{position:absolute;top:.7rem;inset-inline-start:.7rem;padding:.35rem .55rem;border-radius:6px;background:var(--public-yellow);color:var(--public-navy);font-size:.75rem;font-style:normal;font-weight:950}.catalog-card-v2>div:last-child{padding:1.25rem;display:flex;flex-direction:column;align-items:start;justify-content:center}.catalog-card-v2 small,.catalog-card-v2 p{color:var(--public-muted)}.catalog-card-v2 h3{font-size:1rem}.catalog-card-v2 a{margin-block-start:auto;color:#8d6900;font-size:.875rem;font-weight:900;text-decoration:none}
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--public-border);border-radius:18px;overflow:hidden}.benefits-grid article{padding:2rem;border-inline-end:1px solid var(--public-border)}.benefits-grid article:last-child{border:0}.benefits-grid b{display:grid;place-items:center;width:48px;height:48px;color:var(--public-yellow);background:var(--public-navy);border-radius:13px 13px 3px 13px}.benefits-grid h3{font-size:1rem}.benefits-grid p{color:var(--public-muted);font-size:.8125rem;line-height:1.9}
.about-band{margin-block-end:clamp(4rem,7vw,7rem);padding:clamp(2rem,5vw,4rem);display:grid;grid-template-columns:260px 1fr;align-items:center;gap:clamp(2rem,5vw,5rem);background:var(--public-soft);border-radius:80px 22px 22px 22px}.about-mark{width:220px;aspect-ratio:1;display:grid;place-items:center;background:var(--public-yellow);border-radius:50% 50% 18% 50%;color:var(--public-navy);font-size:5rem;font-weight:950}.about-band h2{font-size:clamp(1.6rem,3vw,2.5rem)}.about-band p{color:var(--public-muted);line-height:2}.about-band a{color:#8b6800;font-weight:900;text-decoration:none}.contact-band{margin-block-end:clamp(4rem,7vw,7rem);padding:clamp(2rem,5vw,3.5rem);display:flex;align-items:center;justify-content:space-between;gap:2rem;color:#fff;background:var(--public-navy);border-radius:22px 70px 22px 22px;border-inline-start:9px solid var(--public-yellow)}.contact-band h2{margin:.5rem 0;font-size:clamp(1.7rem,3vw,2.7rem)}.contact-band p{color:#b9c5cf}.contact-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem}.contact-actions>a:not(.public-button){color:#fff;text-decoration:none;border-block-end:1px solid #ffffff55}
.site-footer{position:relative;padding-block:5rem 1.5rem;color:#d7e0e8;background:linear-gradient(145deg,#041321,var(--public-navy-2));overflow:hidden}.footer-angle{position:absolute;top:0;inset-inline-end:-5%;width:35%;height:16px;background:var(--public-yellow);transform:skewX(-35deg)}.footer-primary{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.15fr;gap:clamp(1.5rem,4vw,4rem)}.footer-identity img{max-width:190px;height:72px;object-fit:contain}.footer-identity>strong{font-size:1.5rem;color:#fff}.footer-identity p{color:#9fafbc;line-height:1.9}.footer-primary h3{margin-block:0 1rem;color:var(--public-yellow);font-size:1rem}.footer-links,.footer-contact{display:flex;flex-direction:column;align-items:start;gap:.7rem}.footer-links a,.footer-contact a{color:#c5d0d9;font-size:.8125rem;text-decoration:none}.footer-contact span{color:#93a4b2;font-size:.8125rem}.social-links{display:flex;flex-wrap:wrap;gap:.5rem}.social-links a{width:37px;height:37px;display:grid;place-items:center;border:1px solid #ffffff2b;border-radius:8px;color:#fff;text-decoration:none;font-size:.72rem;font-weight:900}.social-links a:hover{border-color:var(--public-yellow);color:var(--public-yellow)}.footer-secondary{margin-block-start:3.5rem;display:grid;grid-template-columns:1.35fr 1fr;gap:1rem}.company-location,.quick-quote{min-height:270px;padding:2rem;border:1px solid #ffffff18;border-radius:18px;background:#ffffff08}.company-location{position:relative;overflow:hidden;display:flex;align-items:end}.map-grid{position:absolute;inset:0;opacity:.16;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:28px 28px;transform:perspective(300px) rotateX(55deg) scale(1.4)}.company-location>div{position:relative;max-width:75%}.company-location h3,.quick-quote h3{color:#fff;font-size:1.35rem}.company-location address{color:#b4c1cb;font-style:normal;line-height:1.9}.company-location a{color:var(--public-yellow);font-size:.875rem;font-weight:900;text-decoration:none}.quick-quote{display:grid;align-content:center;gap:.65rem}.quick-quote h3,.quick-quote p{margin:0}.quick-quote p,.quick-quote small{color:#9fafbc;font-size:.8125rem}.quick-quote label{display:grid;gap:.35rem;font-size:.8125rem}.quick-quote select{width:100%;padding:.72rem;border:1px solid #ffffff25;border-radius:8px;background:#fff;color:var(--public-text)}.footer-bottom{margin-block-start:2.5rem;padding-block-start:1.25rem;display:flex;justify-content:space-between;border-block-start:1px solid #ffffff18;color:#8395a3}.public-loading{min-height:70vh;display:flex;align-items:center;justify-content:center;gap:.5rem}.public-loading i{width:12px;height:12px;border-radius:50%;background:var(--public-yellow);animation:publicPulse .9s infinite alternate}.public-loading i:nth-child(2){animation-delay:.2s}.public-loading i:nth-child(3){animation-delay:.4s}@keyframes publicPulse{to{transform:translateY(-10px);opacity:.35}}
@media(max-width:1200px){.site-nav{grid-template-columns:220px 1fr auto}.site-links{gap:.7rem;padding-inline-start:2.8rem}.site-links a{font-size:.8125rem}.nav-quote{display:none}.featured-product-grid{grid-template-columns:repeat(3,1fr)}.category-grid-v2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:992px){.site-nav{height:70px;grid-template-columns:1fr auto auto}.site-brand{max-width:280px}.nav-toggle{width:42px;height:42px;margin:auto .65rem;display:grid;align-content:center;gap:5px;border:1px solid #ffffff2b;border-radius:8px;background:transparent}.nav-toggle i{width:20px;height:2px;margin:auto;background:var(--public-yellow)}.site-links{position:fixed;z-index:510;top:70px;inset-inline:20px;padding:1rem;display:none;align-items:stretch;background:var(--public-navy-2);border:1px solid #ffffff18;border-radius:0 0 16px 16px;box-shadow:0 25px 60px #0006}.site-topline+.site-nav .site-links{top:101px}.site-links.open{display:grid}.site-links a{padding:.75rem 1rem}.site-links a:after{inset-inline:0 auto;bottom:0;width:4px;height:100%}.featured-product-grid{grid-template-columns:repeat(2,1fr)}.catalog-grid-v2{grid-template-columns:repeat(2,1fr)}.benefits-grid{grid-template-columns:repeat(2,1fr)}.benefits-grid article:nth-child(2){border:0}.benefits-grid article:nth-child(-n+2){border-block-end:1px solid var(--public-border)}.footer-primary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.public-container{width:min(100% - 24px,1240px)}.site-topline{display:none}.site-brand{margin-inline-start:-12px;padding-inline:1rem 2rem}.site-brand small{display:none}.site-links,.site-topline+.site-nav .site-links{top:70px}.site-actions .icon-action{display:none}.industrial-hero{min-height:620px;align-items:end}.hero-shade{background:linear-gradient(0deg,#061a2efa 10%,#061a2eaa 70%,#061a2e33)}.hero-content{padding-block:8rem 4rem}.hero-corner{width:220px;height:180px}.trust-items{grid-template-columns:repeat(2,1fr)}.category-grid-v2{grid-template-columns:1fr}.featured-product-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-block-end:1rem}.featured-product-grid>.product-card-premium{flex:0 0:min(82vw,330px);scroll-snap-align:start}.catalog-consultation{border-radius:20px 20px 65px 20px}.catalog-symbol{width:120px;border-width:14px}.about-band{grid-template-columns:150px 1fr}.about-mark{width:140px;font-size:3rem}.contact-band{align-items:start;flex-direction:column}.footer-secondary{grid-template-columns:1fr}}
@media(max-width:576px){.site-brand{max-width:190px}.site-brand img{width:40px;height:40px}.site-brand strong{font-size:.78rem}.language-action{width:38px}.industrial-hero{min-height:570px}.hero-content h1{font-size:2.35rem}.hero-buttons>*{width:100%}.trust-items article{min-height:90px;padding:.9rem;flex-direction:column;align-items:start;gap:.2rem}.trust-items strong{font-size:1.35rem}.industrial-category-card{grid-template-columns:38% 1fr;min-height:190px}.category-card-media{height:160px}.catalog-consultation{align-items:start;flex-direction:column}.catalog-symbol{position:absolute;inset-inline-end:-25px;bottom:-35px;opacity:.2}.catalog-grid-v2{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-block-end:1rem}.catalog-grid-v2>.catalog-card-v2{flex:0 0:min(88vw,360px);scroll-snap-align:start}.benefits-grid{grid-template-columns:1fr}.benefits-grid article{border:0!important;border-block-end:1px solid var(--public-border)!important}.benefits-grid article:last-child{border-block-end:0!important}.about-band{grid-template-columns:1fr;border-radius:45px 16px 16px 16px}.about-mark{width:95px}.footer-primary{grid-template-columns:1fr}.footer-secondary{margin-block-start:2rem}.footer-bottom{flex-direction:column;gap:.5rem}.company-location>div{max-width:100%}}
@media(max-width:420px){.site-brand>span:not(.brand-monogram){display:none}.site-brand{max-width:105px}.site-actions{gap:.25rem}.industrial-category-card{grid-template-columns:1fr}.category-card-media{height:190px}.section-heading-v2{align-items:start;flex-direction:column}.contact-actions{width:100%}.contact-actions .public-button{width:100%}}

/* Public storefront hardening. Keep shared/admin surfaces outside this scope. */
.public-shell{overflow-x:clip}.public-shell :where(a,button,select,input):focus-visible{outline:3px solid var(--public-yellow);outline-offset:3px}.public-shell :where(.site-nav,.site-links,.site-actions,.hero-content,.footer-primary,.footer-secondary)>*{min-width:0}.public-shell :where(.category-card-media,.product-media,.catalog-cover) img{max-width:100%}.public-shell .industrial-brand-strip{overscroll-behavior-inline:contain}.public-shell .industrial-brand-strip a,.public-shell .featured-product-grid>*{scroll-snap-stop:always}.public-shell[data-culture="en"] .hero-shade{background:linear-gradient(-90deg,#061a2e33 0%,#061a2ed9 54%,#061a2efa 100%)}
@media(min-width:1400px){.public-shell .industrial-hero{min-height:690px}.public-shell .category-grid-v2{grid-template-columns:repeat(3,minmax(0,1fr))}.public-shell .featured-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:992px){.public-shell .site-links{max-height:calc(100dvh - 90px);overflow-y:auto}.public-shell .nav-toggle{touch-action:manipulation}}
@media(max-width:576px){.public-shell .public-section{padding-block:clamp(3.25rem,13vw,4.5rem)}.public-shell .site-nav{grid-template-columns:minmax(0,1fr) auto auto}.public-shell .quick-quote,.public-shell .company-location{padding:1.35rem}.public-shell .catalog-card-v2{grid-template-columns:40% 1fr}}
@media(max-width:420px){.public-shell .site-brand{min-width:82px}.public-shell .catalog-card-v2{grid-template-columns:1fr}.public-shell .catalog-cover{min-height:180px}.public-shell .footer-primary{gap:2rem}}

/* Ecommerce homepage v3. Scoped typography and layout tokens matching Digikala design system. */
.public-shell{--public-navy:#08243a;--public-navy-2:#0d304b;--public-yellow:#f7b900;--public-yellow-soft:#ffd65c;--public-text:#172434;--public-muted:#6d7885;--public-border:#e5e9ee;--public-surface:#fff;--public-soft:#f5f7f9;background:#fff;color:var(--public-text)}
.public-shell .public-container{width:min(1400px,calc(100% - 40px));margin-inline:auto}.public-shell .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.public-shell .public-button{min-height:42px;padding:.62rem 1.05rem;border-radius:10px;box-shadow:none}.public-shell .home-page{background:#fff}.public-shell .home-section{padding-block:clamp(3rem,5vw,4.5rem)}

.public-shell .commerce-header{position:sticky;z-index:500;top:0;background:#fff;color:var(--public-text);border-block-end:1px solid var(--public-border);box-shadow:0 8px 24px #08243a0a}.public-shell .commerce-topbar{background:var(--public-navy);color:#c9d4dd;font-size:.8125rem}.public-shell .commerce-topbar .public-container{min-height:32px;display:flex;align-items:center;justify-content:space-between}.public-shell .commerce-topbar a{color:var(--public-yellow);text-decoration:none}.public-shell .commerce-header-main{min-height:82px;display:grid;grid-template-columns:minmax(190px,250px) minmax(320px,1fr) auto;align-items:center;gap:clamp(1rem,2.5vw,2.5rem)}.public-shell .commerce-brand{min-width:0;display:flex;align-items:center;gap:.7rem;color:var(--public-navy);text-decoration:none}.public-shell .commerce-brand img{width:54px;height:54px;object-fit:contain}.public-shell .commerce-brand>span:last-child{min-width:0;display:grid}.public-shell .commerce-brand strong{font-size:1.0625rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.public-shell .commerce-brand small{font-size:.75rem;color:var(--public-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.public-shell .commerce-brand-mark{width:48px;aspect-ratio:1;display:grid;place-items:center;border-radius:14px;background:var(--public-yellow);font-weight:950}.public-shell .header-product-search{height:46px;padding-inline:1rem .35rem;display:flex;align-items:center;gap:.5rem;background:var(--public-soft);border:1px solid var(--public-border);border-radius:999px}.public-shell .header-product-search:focus-within{border-color:#d9a400;box-shadow:0 0 0 3px #f7b90020}.public-shell .header-product-search input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--public-text);font:inherit;font-size:.875rem}.public-shell .header-product-search button{width:38px;height:38px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--public-yellow);color:var(--public-navy);font-size:1.2rem;cursor:pointer}.public-shell .commerce-header-actions{display:flex;align-items:center;gap:.45rem}.public-shell .commerce-icon-action{min-width:42px;height:42px;padding-inline:.65rem;display:flex;align-items:center;justify-content:center;gap:.4rem;border:1px solid var(--public-border);border-radius:10px;background:#fff;color:var(--public-navy);text-decoration:none;font:750 .8125rem inherit;cursor:pointer}.public-shell .commerce-icon-action small{font-size:.75rem;white-space:nowrap}.public-shell .commerce-icon-action:hover{border-color:var(--public-yellow)}.public-shell .header-quotation{white-space:nowrap}.public-shell .commerce-nav-shell{border-block-start:1px solid #f1f3f5}.public-shell .commerce-nav-row{min-height:48px;display:flex;align-items:center}.public-shell .commerce-navigation{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.8rem)}.public-shell .commerce-navigation a{position:relative;padding-block:.85rem;color:#394958;text-decoration:none;font-size:.875rem;font-weight:750;white-space:nowrap}.public-shell .commerce-navigation a:after{content:"";position:absolute;inset-inline:15%;bottom:0;height:3px;border-radius:3px;background:var(--public-yellow);transform:scaleX(0);transition:.18s}.public-shell .commerce-navigation a:hover,.public-shell .commerce-navigation a.active{color:var(--public-navy)}.public-shell .commerce-navigation a.active:after{transform:scaleX(1)}.public-shell .nav-toggle{display:none}

.public-shell .home-intro{padding-block:20px 0}.public-shell .home-intro-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr);gap:20px}.public-shell .home-intro-grid.hero-only{grid-template-columns:1fr}.public-shell .home-hero{position:relative;height:clamp(420px,34vw,500px);min-height:0;max-height:500px;isolation:isolate;overflow:hidden;border-radius:22px;background:var(--public-navy);color:#fff}.public-shell .home-hero-picture,.public-shell .home-hero-overlay{position:absolute;z-index:-2;inset:0}.public-shell .home-hero-picture{animation:heroFadeIn .65s cubic-bezier(.16,1,.3,1)}.public-shell .home-hero-picture img{width:100%;height:100%;object-fit:cover}@keyframes heroFadeIn{from{opacity:.25;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}.public-shell .home-hero-overlay{z-index:-1;background:linear-gradient(90deg,#08243a22 0%,#08243ad8 62%,#08243af5 100%)}.public-shell[data-culture="en"] .home-hero-overlay{background:linear-gradient(-90deg,#08243a22 0%,#08243ad8 62%,#08243af5 100%)}.public-shell .home-hero-content{height:100%;padding:clamp(2rem,4vw,4rem);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;max-width:68%;animation:heroContentIn .55s cubic-bezier(.16,1,.3,1)}@keyframes heroContentIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.public-shell .home-hero-kicker{color:var(--public-yellow);font-size:.8125rem;font-weight:800}.public-shell .home-hero h1{margin:.65rem 0 1rem;font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.3;font-weight:900;text-wrap:balance}.public-shell .home-hero p{margin:0;color:#d4dde4;font-size:.9375rem;line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.public-shell .home-hero-actions{margin-block-start:1.4rem;display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}.public-shell .hero-glass-btn{background:rgba(251,184,0,.88)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.35)!important;box-shadow:0 8px 32px 0 rgba(251,184,0,.35),inset 0 1px 1px 0 rgba(255,255,255,.45);color:var(--public-navy)!important;border-radius:12px;padding:.75rem 1.45rem;font-size:.875rem;font-weight:800;transition:all .3s cubic-bezier(.16,1,.3,1)}.public-shell .hero-glass-btn:hover{background:rgba(255,210,74,.96)!important;transform:translateY(-2px);box-shadow:0 12px 36px 0 rgba(251,184,0,.5),inset 0 1px 2px 0 rgba(255,255,255,.6);border-color:rgba(255,255,255,.6)!important}.public-shell .hero-glass-btn-secondary{background:rgba(255,255,255,.14)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.35)!important;box-shadow:0 8px 24px 0 rgba(0,0,0,.2),inset 0 1px 1px 0 rgba(255,255,255,.3);color:#fff!important;border-radius:12px;padding:.75rem 1.45rem;font-size:.875rem;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.16,1,.3,1)}.public-shell .hero-glass-btn-secondary:hover{background:rgba(255,255,255,.26)!important;border-color:rgba(255,255,255,.6)!important;transform:translateY(-2px);box-shadow:0 12px 32px 0 rgba(0,0,0,.25);color:#fff!important}.public-shell .home-hero-link{color:#fff;text-decoration:none;font-size:.84rem;font-weight:800;border-block-end:1px solid #ffffff77}.public-shell .home-hero-controls{position:absolute;inset-inline:0;bottom:1.25rem;display:flex;justify-content:center;align-items:center;z-index:10;pointer-events:none}.public-shell .home-hero-dots{pointer-events:auto;display:flex;align-items:center;gap:.45rem;background:rgba(6,26,46,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.35rem .65rem;box-shadow:0 8px 24px rgba(0,0,0,.25)}.public-shell .home-hero-dots button{width:8px;height:8px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1)}.public-shell .home-hero-dots button:hover{background:rgba(255,255,255,.8);transform:scale(1.15)}.public-shell .home-hero-dots button.active{width:26px;border-radius:999px;background:var(--public-yellow);border-color:rgba(255,255,255,.6);box-shadow:0 0 14px rgba(251,184,0,.7)}.public-shell .btn-arrow-icon{display:inline-block;vertical-align:middle;flex-shrink:0;transition:transform .2s ease}.public-shell[data-culture="fa-IR"] .btn-arrow-icon,html[dir="rtl"] .btn-arrow-icon{transform:scaleX(-1)}.public-shell[data-culture="fa-IR"] a:hover .btn-arrow-icon,html[dir="rtl"] a:hover .btn-arrow-icon{transform:scaleX(-1) translateX(3px)}.public-shell[data-culture="en"] a:hover .btn-arrow-icon,html[dir="ltr"] a:hover .btn-arrow-icon{transform:translateX(3px)}.public-shell .home-promos{height:clamp(420px,34vw,500px);display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:20px}.public-shell .home-promo-card{position:relative;min-height:0;padding:1.4rem;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(90px,.8fr);align-items:center;gap:.7rem;border:1px solid var(--public-border);border-radius:18px;overflow:hidden}.public-shell .catalog-promo{background:var(--public-navy);color:#fff;border-color:transparent}.public-shell .article-promo{background:var(--public-soft)}.public-shell .home-promo-copy{min-width:0;position:relative;z-index:1}.public-shell .home-promo-copy>span{color:#b58200;font-size:.78rem;font-weight:800}.public-shell .catalog-promo .home-promo-copy>span{color:var(--public-yellow)}.public-shell .home-promo-copy h2{margin:.35rem 0;font-size:clamp(1.05rem,1.4vw,1.35rem);font-weight:800;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.public-shell .home-promo-copy p{margin:.25rem 0;color:var(--public-muted);font-size:.8125rem;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.public-shell .catalog-promo .home-promo-copy p{color:#b9c7d1}.public-shell .home-promo-copy a{display:inline-flex;align-items:center;gap:.4rem;margin-block-start:.55rem;color:#9a7100;text-decoration:none;font-size:.8125rem;font-weight:800}.public-shell .catalog-promo .home-promo-copy a{color:var(--public-yellow)}.public-shell .home-promo-media{height:100%;min-height:110px;display:grid;place-items:center;overflow:hidden;border-radius:12px;background:#ffffff12}.public-shell .article-promo .home-promo-media{background:#fff}.public-shell .home-promo-media img{width:100%;height:100%;object-fit:contain;padding:.5rem}.public-shell .home-promo-media strong{font-size:1.5rem;color:var(--public-yellow)}.public-shell .article-promo .home-promo-media strong{color:#b8c0c8}

.public-shell .commerce-section-heading{margin-block-end:1.4rem;display:flex;align-items:end;justify-content:space-between;gap:1rem}.public-shell .commerce-section-heading>div:first-child>span{color:#9a7100;font-size:.8125rem;font-weight:800}.public-shell .commerce-section-heading h2{margin:.25rem 0 0;font-size:clamp(1.25rem,2vw,1.6rem);font-weight:850;line-height:1.35}.public-shell .commerce-section-heading.compact h2{font-size:clamp(1.15rem,1.8vw,1.45rem)}.public-shell .section-view-all{color:var(--public-navy);text-decoration:none;font-size:.84rem;font-weight:800}.public-shell .carousel-controls{display:flex;gap:.4rem}.public-shell .carousel-controls a{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--public-border);border-radius:50%;color:var(--public-navy);text-decoration:none;background:#fff}.public-shell .commerce-category-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(135px,1fr);gap:.8rem;overflow-x:auto;padding:.25rem .15rem 1rem;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin}.public-shell .commerce-category-card{scroll-snap-align:start;min-width:0;padding:.85rem;display:flex;flex-direction:column;align-items:center;gap:.65rem;background:#fff;border:1px solid var(--public-border);border-radius:14px;color:var(--public-text);text-decoration:none;box-shadow:0 8px 20px #08243a08;transition:.18s}.public-shell .commerce-category-card:hover{transform:translateY(-3px);border-color:#f7b90088}.public-shell .commerce-category-image{width:100%;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border-radius:10px;background:var(--public-soft)}.public-shell .commerce-category-image img{width:100%;height:100%;object-fit:contain;object-position:center;padding:.65rem}.public-shell .commerce-category-image span{font-size:2rem;font-weight:950;color:#c5ccd3}.public-shell .commerce-category-card h3{margin:0;max-width:100%;font-size:.84rem;font-weight:750;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.public-shell .featured-products-section{background:var(--public-soft)}.public-shell .commerce-product-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}.public-shell .catalog-product-card{height:100%;display:flex;flex-direction:column;border:1px solid var(--public-border);border-radius:16px;background:#fff;box-shadow:0 8px 20px #08243a07;overflow:hidden;transform:none}.public-shell .catalog-product-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px #08243a0d}.public-shell .catalog-product-card .product-card-image{width:100%;height:auto!important;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;border-block-end:1px solid #eff1f3}.public-shell .catalog-product-card .product-card-image img{width:100%;height:100%;object-fit:contain;object-position:center;padding:12px}.public-shell .catalog-product-card .image-placeholder{width:100%;height:100%;display:grid;place-items:center;background:var(--public-soft);color:#c5ccd3}.public-shell .catalog-product-card .product-card-content{padding:1rem;display:flex;flex:1;flex-direction:column}.public-shell .catalog-product-card .product-meta{min-height:22px}.public-shell .catalog-product-card .product-meta span{font-size:.75rem;font-weight:500}.public-shell .catalog-product-card h3{margin:.6rem 0 .25rem;font-size:.9375rem;font-weight:750;line-height:1.6}.public-shell .catalog-product-card h3 a{color:var(--public-text);text-decoration:none}.public-shell .catalog-product-card .model-code{font-size:.75rem;color:var(--public-muted)}.public-shell .catalog-product-card p{min-height:3.2em;margin:.55rem 0;color:var(--public-muted);font-size:.8125rem;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.public-shell .catalog-product-card .product-price{min-height:38px;margin-block-start:auto;display:flex;align-items:baseline;gap:.3rem;color:var(--public-navy)}.public-shell .catalog-product-card .product-price strong{font-size:1.125rem;font-weight:850;font-family:var(--font-family-num)}.public-shell .catalog-product-card .product-price small{font-size:.75rem;font-weight:600;color:var(--public-muted)}.public-shell .catalog-product-actions{margin-block-start:.75rem;display:grid;grid-template-columns:1fr auto;gap:.45rem}.public-shell .product-primary-action,.public-shell .product-secondary-action{min-height:38px;padding:.5rem .75rem;display:flex;align-items:center;justify-content:center;border-radius:8px;text-decoration:none;font-size:.8125rem;font-weight:800}.public-shell .product-primary-action{background:var(--public-yellow);color:var(--public-navy)}.public-shell .product-secondary-action{background:var(--public-yellow);border:1px solid var(--public-yellow);color:var(--public-navy)}.public-shell .product-quotation-alternate{margin-block-start:.45rem;color:#876500;text-align:center;text-decoration:none;font-size:.78rem;font-weight:800}

.public-shell .commerce-benefits{margin-block:clamp(3rem,5vw,4.5rem);display:grid;grid-template-columns:repeat(4,1fr);background:var(--public-navy);border-radius:16px;overflow:hidden}.public-shell .commerce-benefits article{min-height:112px;padding:1.25rem;display:flex;align-items:center;gap:.8rem;border-inline-end:1px solid #ffffff16}.public-shell .commerce-benefits article:last-child{border:0}.public-shell .commerce-benefits i{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#ffffff0e;color:var(--public-yellow);font-style:normal;font-size:1.1rem}.public-shell .commerce-benefits h3{margin:0 0 .25rem;color:#fff;font-size:.9375rem;font-weight:750}.public-shell .commerce-benefits p{margin:0;color:#aebdc8;font-size:.8125rem;line-height:1.65}

.public-shell .home-content-columns{display:grid;grid-template-columns:1.15fr .85fr;gap:1.25rem}.public-shell .home-content-panel{min-width:0;padding:1.25rem;border:1px solid var(--public-border);border-radius:18px;background:#fff}.public-shell .home-article-list,.public-shell .home-catalog-list{display:grid;gap:.75rem}.public-shell .public-article-card{min-width:0;padding:.65rem;display:grid;grid-template-columns:120px minmax(0,1fr);gap:1rem;border:1px solid #edf0f2;border-radius:12px}.public-shell .article-card-image{aspect-ratio:1.25;overflow:hidden;border-radius:9px;background:var(--public-soft)}.public-shell .article-card-image img{width:100%;height:100%;object-fit:cover}.public-shell .article-card-image span{width:100%;height:100%;display:grid;place-items:center;color:#bcc4cc;font-size:1.5rem;font-weight:900}.public-shell .public-article-card time{color:var(--public-muted);font-size:.75rem}.public-shell .public-article-card h3{margin:.2rem 0;font-size:.9375rem;font-weight:750;line-height:1.55}.public-shell .public-article-card h3 a{color:var(--public-text);text-decoration:none}.public-shell .public-article-card p{margin:.25rem 0;color:var(--public-muted);font-size:.8125rem;line-height:1.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.public-shell .article-read-link{color:#8a6700;text-decoration:none;font-size:.8125rem;font-weight:800}.public-shell .brand-commerce-section{background:var(--public-soft)}.public-shell .industrial-brand-strip{gap:.75rem;padding-block:.25rem .8rem}.public-shell .industrial-brand-strip a{flex:0 0 155px;min-height:105px;padding:1rem;border-radius:12px}.public-shell .industrial-brand-strip img{height:50px;object-fit:contain;padding:.2rem}.public-shell .quotation-commerce-cta{margin-block:clamp(3rem,5vw,4.5rem);padding:clamp(1.6rem,3vw,2.5rem);display:flex;align-items:center;justify-content:space-between;gap:2rem;border:1px solid #f1df9f;border-radius:18px;background:#fffaf0}.public-shell .quotation-commerce-cta>div:first-child{max-width:760px}.public-shell .quotation-commerce-cta span{color:#9a7100;font-size:.8125rem;font-weight:800}.public-shell .quotation-commerce-cta h2{margin:.35rem 0;font-size:clamp(1.35rem,2.2vw,1.85rem);font-weight:850}.public-shell .quotation-commerce-cta p{margin:.4rem 0;color:var(--public-muted);font-size:.875rem;line-height:1.75}.public-shell .quotation-commerce-cta>div:last-child{display:flex;align-items:center;gap:1rem}.public-shell .quotation-inquiry-link{color:var(--public-navy);text-decoration:none;font-size:.875rem;font-weight:800;border-block-end:1px solid}

.public-shell .commerce-footer{padding-block:3.5rem 1.2rem;background:var(--public-navy);color:#cbd5dc}.public-shell .commerce-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.25fr;gap:clamp(1.5rem,4vw,3.5rem)}.public-shell .commerce-footer .footer-identity img{max-width:170px;height:58px;object-fit:contain}.public-shell .commerce-footer .footer-identity>strong{color:#fff;font-size:1.25rem}.public-shell .commerce-footer .footer-identity p{max-width:380px;color:#a8b8c3;font-size:.8125rem;line-height:1.85}.public-shell .commerce-footer h3{margin:0 0 .8rem;color:var(--public-yellow);font-size:.9375rem;font-weight:750}.public-shell .commerce-footer .footer-links,.public-shell .commerce-footer .footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}.public-shell .commerce-footer a{color:#c7d1d8;text-decoration:none;font-size:.8125rem;line-height:1.75}.public-shell .commerce-footer .footer-contact address{color:#a8b8c3;font-size:.8125rem;font-style:normal;line-height:1.8}.public-shell .commerce-footer .footer-contact span{color:#a8b8c3;font-size:.8125rem}.public-shell .commerce-footer .social-links{display:flex;gap:.4rem}.public-shell .commerce-footer .social-links a{width:36px;height:36px;display:grid;place-items:center;border:1px solid #ffffff28;border-radius:8px;font-size:.72rem}.public-shell .commerce-footer-bottom{margin-block-start:2rem;padding-block-start:1rem;display:flex;justify-content:space-between;border-block-start:1px solid #ffffff18;color:#8fa2af;font-size:.78rem}.public-shell .commerce-footer-bottom a{color:var(--public-yellow)}

.public-shell .public-articles-page,.public-shell .public-article-detail{padding-block:clamp(2.5rem,5vw,4.5rem)}.public-shell .public-page-heading{margin-block-end:2rem}.public-shell .public-page-heading span,.public-shell .public-article-detail time{color:#987000;font-size:.8125rem;font-weight:800}.public-shell .public-page-heading h1,.public-shell .public-article-detail h1{margin:.35rem 0;font-size:clamp(1.75rem,3vw,2.5rem);font-weight:850}.public-shell .public-articles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.public-shell .public-articles-grid .public-article-card{grid-template-columns:1fr}.public-shell .public-article-detail{max-width:920px}.public-shell .public-article-detail>header p{color:var(--public-muted);font-size:1.05rem;line-height:1.9}.public-shell .article-detail-cover{width:100%;max-height:480px;margin-block:1.5rem;object-fit:cover;border-radius:18px}.public-shell .article-rich-content{font-size:1rem;line-height:2.1}.public-shell .article-rich-content img{max-width:100%;height:auto}

@media(max-width:1200px){.public-shell .commerce-header-main{grid-template-columns:210px minmax(260px,1fr) auto}.public-shell .commerce-icon-action small{display:none}.public-shell .header-quotation{display:none}.public-shell .commerce-navigation{gap:1rem}.public-shell .commerce-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:992px){.public-shell .commerce-header-main{padding-block:.75rem;grid-template-columns:minmax(0,1fr) auto;gap:.75rem}.public-shell .header-product-search{grid-column:1/-1;grid-row:2}.public-shell .commerce-nav-row{position:relative;justify-content:flex-end}.public-shell .nav-toggle{width:42px;height:38px;display:grid;align-content:center;gap:4px;border:1px solid var(--public-border);border-radius:9px;background:#fff}.public-shell .nav-toggle i{width:19px;height:2px;margin:auto;background:var(--public-navy)}.public-shell .commerce-navigation{position:absolute;z-index:510;top:48px;inset-inline:0;padding:.8rem;display:none;grid-template-columns:repeat(2,1fr);background:#fff;border:1px solid var(--public-border);border-radius:0 0 14px 14px;box-shadow:0 18px 35px #08243a18}.public-shell .commerce-navigation.open{display:grid}.public-shell .commerce-navigation a{padding:.55rem}.public-shell .home-intro-grid{grid-template-columns:1fr}.public-shell .home-promos{height:auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:220px}.public-shell .commerce-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.public-shell .commerce-benefits{grid-template-columns:repeat(2,1fr)}.public-shell .commerce-benefits article:nth-child(2){border-inline-end:0}.public-shell .commerce-benefits article:nth-child(-n+2){border-block-end:1px solid #ffffff16}.public-shell .home-content-columns{grid-template-columns:1fr}.public-shell .commerce-footer-grid{grid-template-columns:repeat(2,1fr)}.public-shell .public-articles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:768px){.public-shell .public-container{width:min(100% - 32px,1400px)}.public-shell .commerce-topbar{display:none}.public-shell .commerce-brand img{width:46px;height:46px}.public-shell .commerce-icon-action.login-action{display:none}.public-shell .home-intro{padding-block:16px 0}.public-shell .home-hero{height:clamp(360px,62vw,440px);max-height:440px;border-radius:18px}.public-shell .home-hero-content{max-width:82%;padding:2rem}.public-shell .home-hero h1{font-size:clamp(1.5rem,5.5vw,2.1rem)}.public-shell .home-promos{grid-template-columns:1fr;grid-template-rows:repeat(2,210px)}.public-shell .commerce-category-strip{grid-auto-columns:minmax(125px,32vw)}.public-shell .commerce-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.public-shell .quotation-commerce-cta{align-items:flex-start;flex-direction:column}.public-shell .commerce-footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:576px){.public-shell .public-container{width:min(100% - 32px,1400px)}.public-shell .commerce-header-main{min-height:0}.public-shell .commerce-brand small{display:none}.public-shell .commerce-header-actions{gap:.3rem}.public-shell .quote-summary{display:none}.public-shell .commerce-navigation{grid-template-columns:1fr}.public-shell .home-hero-content{max-width:100%;padding:1.5rem}.public-shell .home-hero-overlay{background:linear-gradient(0deg,#08243af5 5%,#08243ab8 75%,#08243a45)}.public-shell .home-hero-actions{align-items:flex-start;flex-direction:column;gap:.65rem}.public-shell .home-promo-card{padding:1.1rem}.public-shell .commerce-section-heading{align-items:flex-start}.public-shell .commerce-product-grid{gap:.65rem}.public-shell .catalog-product-card .product-card-content{padding:.75rem}.public-shell .catalog-product-actions{grid-template-columns:1fr}.public-shell .commerce-benefits{grid-template-columns:1fr}.public-shell .commerce-benefits article{border-inline-end:0;border-block-end:1px solid #ffffff16!important}.public-shell .commerce-benefits article:last-child{border-block-end:0!important}.public-shell .home-content-panel{padding:.9rem}.public-shell .public-article-card{grid-template-columns:95px minmax(0,1fr)}.public-shell .commerce-footer-grid{grid-template-columns:1fr}.public-shell .commerce-footer-bottom{flex-direction:column;gap:.6rem}.public-shell .public-articles-grid{grid-template-columns:1fr}}
@media(max-width:420px){.public-shell .commerce-brand>span:last-child{display:none}.public-shell .commerce-brand{width:48px}.public-shell .commerce-product-grid{grid-template-columns:1fr}.public-shell .commerce-category-strip{grid-auto-columns:minmax(118px,42vw)}.public-shell .quotation-commerce-cta>div:last-child{width:100%;align-items:stretch;flex-direction:column}.public-shell .quotation-commerce-cta .public-button{width:100%}}
@media(prefers-reduced-motion:reduce){.public-shell .commerce-category-strip{scroll-behavior:auto}.public-shell :where(.commerce-category-card,.catalog-product-card,.commerce-navigation a:after){transition:none!important}}

/* ==========================================================================
   Public Ecommerce Header v5: Standard 2-Row & Interactive MegaMenu Stage
   ========================================================================== */
.public-shell .commerce-header {
  position: sticky;
  z-index: 1000;
  top: 0;
  background: #ffffff;
  color: var(--public-text);
  box-shadow: 0 4px 20px rgba(13, 27, 46, 0.08);
}

/* Row 1: Top Bar (Clean Light Background) */
.public-shell .commerce-topbar-row {
  background: #ffffff;
  border-block-end: 1px solid #e2e8f0;
  padding-block: 10px;
}
.public-shell .commerce-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 2.5rem);
}
.public-shell .header-brand-link {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #0D1B2E;
  text-decoration: none;
  flex-shrink: 0;
}
.public-shell .header-brand-logo {
  max-width: 140px;
  height: 50px;
  object-fit: contain;
}
.public-shell .header-brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--public-yellow);
  color: #0D1B2E;
  font-size: 1.4rem;
  font-weight: 900;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.public-shell .header-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.public-shell .header-brand-name {
  font-size: 1.125rem;
  font-weight: 900;
  color: #0D1B2E;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.public-shell .header-brand-tagline {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fast Search Bar */
.public-shell .header-search-form {
  flex: 1;
  max-width: 520px;
  min-width: 220px;
}
.public-shell .header-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 999px;
  padding: 3px 6px 3px 16px;
  transition: all 0.2s ease;
}
.public-shell .header-search-wrapper:focus-within {
  border-color: #FECC00;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(254, 204, 0, 0.18);
}
.public-shell .header-search-wrapper input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.88rem;
  color: #1e293b;
  font-family: inherit;
  font-weight: 500;
}
.public-shell input[type="search"]::-webkit-search-cancel-button,
.public-shell input[type="search"]::-webkit-search-decoration,
.public-shell input[type="search"]::-webkit-search-results-button,
.public-shell input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none !important;
}
.public-shell .header-search-wrapper input::placeholder {
  color: #94a3b8;
  font-size: 0.82rem;
}
.public-shell .header-search-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-inline-end: 6px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
  line-height: 1;
  padding: 0;
}
.public-shell .header-search-clear-btn:hover {
  background: #cbd5e1;
  color: #0f172a;
}
.public-shell .header-search-submit {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #FECC00;
  color: #0D1B2E;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease, background 0.15s ease;
}
.public-shell .header-search-submit:hover {
  background: #e6b800;
  transform: scale(1.05);
}
.public-shell .header-search-submit svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

/* Desktop Action Pill Buttons */
.public-shell .header-desktop-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.public-shell .header-pill-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
.public-shell .header-pill-action svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.public-shell .pill-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.public-shell .pill-badge {
  position: absolute;
  top: -8px;
  inset-inline-end: -10px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border: 2px solid #ffffff;
}
.public-shell .pill-badge.inquiry-badge {
  background: #FECC00;
  color: #0D1B2E;
  border-color: #0D1B2E;
}

/* Shopping Cart Pill */
.public-shell .header-cart-pill {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  color: #1e293b;
}
.public-shell .header-cart-pill:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0D1B2E;
}

/* Inquiry Basket Pill (Distinct / Solid) */
.public-shell .header-inquiry-pill {
  background: #0D1B2E;
  border: 1.5px solid #0D1B2E;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(13, 27, 46, 0.18);
}
.public-shell .header-inquiry-pill:hover {
  background: #193556;
  border-color: #193556;
  color: #FECC00;
}

/* User Account Pill */
.public-shell .header-user-pill,
.public-shell .header-login-pill {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  color: #1e293b;
}
.public-shell .header-user-pill:hover,
.public-shell .header-user-pill.active,
.public-shell .header-login-pill:hover {
  border-color: #FECC00;
  background: #fffdf5;
  color: #0D1B2E;
}
.public-shell .user-avatar-icon svg {
  color: #64748b;
}
.public-shell .user-btn-caret {
  transition: transform 0.2s ease;
  display: inline-flex;
}
.public-shell .header-user-pill.active .user-btn-caret {
  transform: rotate(180deg);
}

/* Mobile Compact Actions */
.public-shell .header-mobile-actions {
  display: none;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
}
.public-shell .mobile-action-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  color: #0D1B2E;
  text-decoration: none;
  position: relative;
  transition: all 0.15s;
}
.public-shell .mobile-action-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.public-shell .mobile-action-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.public-shell .mobile-badge {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
}
.public-shell .mobile-badge.inquiry-badge {
  background: #FECC00;
  color: #0D1B2E;
  border-color: #0D1B2E;
}

/* Row 2: Navigation & Categories Bar (Dark Navy #0D1B2E) */
.public-shell .commerce-navbar-row {
  background: #0D1B2E;
  color: #ffffff;
  position: relative;
  border-block-end: 2px solid rgba(254, 204, 0, 0.4);
}
.public-shell .commerce-navbar-inner {
  display: flex;
  align-items: center;
  min-height: 50px;
  position: relative;
}

/* Category MegaMenu Trigger Button */
.public-shell .megamenu-trigger-wrapper {
  position: relative;
  display: flex;
  align-items: stretch;
}
.public-shell .megamenu-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 20px;
  background: #FECC00;
  color: #0D1B2E;
  border: none;
  font-size: 0.95rem;
  font-weight: 850;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.public-shell .megamenu-trigger-btn:hover,
.public-shell .megamenu-trigger-btn.active {
  background: #ffd633;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
}
.public-shell .trigger-icon svg {
  width: 20px;
  height: 20px;
}
.public-shell .trigger-caret {
  display: inline-flex;
  transition: transform 0.2s ease;
}
.public-shell .trigger-caret.open {
  transform: rotate(180deg);
}

/* Main Navigation Links */
.public-shell .commerce-main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: 12px;
}
.public-shell .nav-item-link {
  display: inline-flex;
  align-items: center;
  padding: 14px 14px;
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  position: relative;
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.public-shell .nav-item-link:hover {
  color: #FECC00;
}
.public-shell .nav-item-link.active {
  color: #ffffff;
  font-weight: 850;
}
.public-shell .nav-item-link.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline: 14px;
  height: 3px;
  background: #FECC00;
  border-radius: 3px 3px 0 0;
}

/* Support Phone Link on Row 2 */
.public-shell .commerce-nav-support {
  margin-inline-start: auto;
}
.public-shell .nav-support-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e2e8f0;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 700;
  transition: color 0.15s ease;
}
.public-shell .nav-support-link:hover {
  color: #FECC00;
}
.public-shell .support-icon svg {
  width: 16px;
  height: 16px;
  color: #FECC00;
}

/* ==========================================================================
   2-Column MegaMenu Stage Dropdown
   ========================================================================== */
.public-shell .megamenu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 990;
  background: rgba(13, 27, 46, 0.45);
  backdrop-filter: blur(2px);
  animation: mmFadeIn 0.2s ease;
}
@keyframes mmFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.public-shell .megamenu-stage-dropdown {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  width: 1000px;
  max-width: 90vw;
  z-index: 995;
  background: #ffffff;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 25px 50px -12px rgba(13, 27, 46, 0.28), 0 0 0 1px rgba(13, 27, 46, 0.06);
  overflow: hidden;
  animation: mmSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes mmSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.public-shell .megamenu-container {
  display: grid;
  grid-template-columns: 58% 42%;
  min-height: 440px;
  max-height: 520px;
}

/* MegaMenu Right Column: Category Tree */
.public-shell .megamenu-tree-col {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-inline-end: 1px solid #e2e8f0;
}
.public-shell .megamenu-tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #f8fafc;
  border-block-end: 1px solid #e2e8f0;
  font-size: 0.82rem;
  font-weight: 800;
  color: #475569;
}
.public-shell .megamenu-tree-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0D1B2E;
}
.public-shell .megamenu-tree-title svg {
  width: 18px;
  height: 18px;
  color: #0284c7;
}
.public-shell .megamenu-category-count {
  background: #e2e8f0;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

.public-shell .megamenu-tree-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  scrollbar-width: thin;
}
.public-shell .megamenu-empty-tree {
  display: grid;
  place-items: center;
  height: 200px;
  color: #94a3b8;
  font-size: 0.88rem;
}

.public-shell .megamenu-parent-group {
  border-radius: 8px;
  margin-bottom: 2px;
  transition: background 0.15s ease;
}
.public-shell .megamenu-parent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.public-shell .megamenu-parent-item:hover,
.public-shell .megamenu-parent-item.active-parent {
  background: #f1f5f9;
}
.public-shell .megamenu-parent-item.active-parent .parent-item-name {
  color: #0D1B2E;
  font-weight: 850;
}
.public-shell .parent-item-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.public-shell .parent-item-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.public-shell .parent-item-thumb {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 6px;
  background: #f8fafc;
  padding: 2px;
  border: 1px solid #e2e8f0;
}
.public-shell .parent-bullet-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
}
.public-shell .megamenu-parent-item.active-parent .parent-bullet-dot {
  background: #FECC00;
  box-shadow: 0 0 6px rgba(254, 204, 0, 0.8);
}
.public-shell .parent-item-name {
  font-size: 0.88rem;
  font-weight: 750;
  color: #334155;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.public-shell .parent-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.public-shell .children-count-chip {
  font-size: 0.7rem;
  font-weight: 700;
  background: #e2e8f0;
  color: #475569;
  padding: 1px 6px;
  border-radius: 999px;
}
.public-shell .parent-accordion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #64748b;
  padding: 4px 6px;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.public-shell .parent-accordion-toggle:hover {
  background: #e2e8f0;
  color: #0D1B2E;
}
.public-shell .accordion-arrow {
  display: inline-flex;
  transition: transform 0.2s ease;
}
.public-shell .parent-accordion-toggle.expanded .accordion-arrow {
  transform: rotate(180deg);
}
.public-shell .parent-arrow-icon svg {
  width: 15px;
  height: 15px;
  color: #94a3b8;
}

/* Subcategories Accordion List */
.public-shell .megamenu-children-list {
  padding: 4px 28px 8px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: #f8fafc;
  border-radius: 6px;
  margin: 2px 0 6px;
}
.public-shell .megamenu-child-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  transition: all 0.15s ease;
}
.public-shell .megamenu-child-item:hover,
.public-shell .megamenu-child-item.active-child {
  color: #0D1B2E;
  background: #e2e8f0;
  font-weight: 750;
}
.public-shell .child-item-dash {
  color: #94a3b8;
  font-size: 0.75rem;
}
.public-shell .child-item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.public-shell .megamenu-tree-footer {
  padding: 10px 18px;
  border-block-start: 1px solid #f1f5f9;
  background: #ffffff;
}
.public-shell .megamenu-all-products-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 800;
  color: #0284c7;
  text-decoration: none;
  transition: gap 0.15s;
}
.public-shell .megamenu-all-products-link:hover {
  color: #0369a1;
  gap: 12px;
}

/* MegaMenu Left Column: Live Stage Preview */
.public-shell .megamenu-stage-col {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #0D1B2E;
}
.public-shell .megamenu-stage-viewport {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}
.public-shell .megamenu-stage-bg {
  position: absolute;
  inset: 0;
  transition: background-image 0.35s ease-in-out, opacity 0.35s ease;
}
.public-shell .megamenu-stage-bg.gradient-fallback {
  background: linear-gradient(135deg, #0D1B2E 0%, #163354 50%, #0D1B2E 100%);
}
.public-shell .megamenu-stage-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 27, 46, 0.96) 0%, rgba(13, 27, 46, 0.65) 55%, rgba(13, 27, 46, 0.35) 100%);
}
.public-shell .megamenu-stage-content {
  position: relative;
  z-index: 2;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.public-shell .stage-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(254, 204, 0, 0.2);
  border: 1px solid rgba(254, 204, 0, 0.4);
  color: #FECC00;
  font-size: 0.72rem;
  font-weight: 800;
  width: fit-content;
}
.public-shell .stage-tag-badge svg {
  width: 14px;
  height: 14px;
}
.public-shell .stage-category-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  line-height: 1.3;
}
.public-shell .stage-category-desc {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: #cbd5e1;
  max-width: 95%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.public-shell .stage-subcategories-chips {
  margin-top: 4px;
}
.public-shell .stage-chips-title {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.public-shell .stage-chips-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.public-shell .stage-sub-chip {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  text-decoration: none;
  transition: all 0.15s ease;
}
.public-shell .stage-sub-chip:hover {
  background: rgba(254, 204, 0, 0.35);
  color: #FECC00;
}
.public-shell .stage-sub-chip.more {
  background: transparent;
  color: #94a3b8;
  padding: 2px 4px;
}
.public-shell .stage-cta-wrapper {
  margin-top: 6px;
}
.public-shell .stage-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 10px;
  background: #FECC00;
  color: #0D1B2E;
  font-size: 0.85rem;
  font-weight: 850;
  text-decoration: none;
  width: fit-content;
  transition: transform 0.15s ease, background 0.15s ease;
  box-shadow: 0 4px 14px rgba(254, 204, 0, 0.35);
}
.public-shell .stage-cta-btn:hover {
  background: #ffd633;
  transform: translateY(-2px);
}
.public-shell .stage-cta-btn svg {
  width: 15px;
  height: 15px;
}

/* ==========================================================================
   Mobile Responsive Rules & Navigation Drawer (< 992px)
   ========================================================================== */
.public-shell .nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  min-width: 40px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  align-content: center;
  place-content: center;
  gap: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  touch-action: manipulation;
}
.public-shell .nav-toggle i {
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: #0D1B2E;
  display: block;
  border-radius: 2px;
}

/* Mobile Drawer */
.public-shell .header-mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1010;
  background: rgba(13, 27, 46, 0.5);
  backdrop-filter: blur(2px);
}
.public-shell .header-mobile-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  width: 320px;
  max-width: 85vw;
  background: #ffffff;
  z-index: 1020;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  direction: rtl;
  text-align: right;
  animation: drawerSlideRtl 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes drawerSlideRtl {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.public-shell[data-culture="en"] .header-mobile-drawer {
  right: auto;
  left: 0;
  direction: ltr;
  text-align: left;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.2);
  animation: drawerSlideLtr 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes drawerSlideLtr {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.public-shell .mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #0D1B2E;
  color: #ffffff;
}
.public-shell .drawer-title {
  font-size: 1rem;
  font-weight: 850;
  color: #FECC00;
}
.public-shell .drawer-close-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.public-shell .mobile-drawer-search {
  padding: 12px 16px;
  border-block-end: 1px solid #e2e8f0;
  background: #f8fafc;
}
.public-shell .mobile-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}
.public-shell .mobile-search-input-wrap:focus-within {
  border-color: #FECC00;
  box-shadow: 0 0 0 3px rgba(254, 204, 0, 0.2);
}
.public-shell .mobile-search-input-wrap input {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: none;
  background: transparent;
  padding: 0 12px;
  font-size: 0.88rem;
  outline: none;
  font-family: inherit;
  color: #0D1B2E;
}
.public-shell .mobile-search-input-wrap input::placeholder {
  color: #94a3b8;
  font-size: 0.82rem;
}
.public-shell .mobile-search-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: 0 4px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
  line-height: 1;
  padding: 0;
}
.public-shell .mobile-search-clear-btn:hover {
  background: #cbd5e1;
  color: #0f172a;
}
.public-shell .mobile-search-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: #FECC00;
  color: #0D1B2E;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.public-shell .mobile-search-submit-btn:hover {
  background: #ffd633;
}
.public-shell .mobile-search-submit-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}
.public-shell .mobile-drawer-links {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  border-block-end: 1px solid #e2e8f0;
}
.public-shell .mobile-drawer-links a {
  padding: 11px 20px;
  font-size: 0.9rem;
  font-weight: 750;
  color: #334155;
  text-decoration: none;
  border-block-end: 1px solid #f8fafc;
  transition: all 0.15s ease;
}
.public-shell .mobile-drawer-links a:hover {
  background: #f8fafc;
  color: #0284c7;
}

/* Mobile Category Accordion */
.public-shell .mobile-drawer-categories {
  padding: 12px 0 24px;
  flex: 1;
}
.public-shell .mobile-categories-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px 10px;
  font-size: 0.8rem;
  font-weight: 850;
  color: #64748b;
  border-block-end: 1px solid #f1f5f9;
  text-transform: uppercase;
}
.public-shell .mobile-cat-count {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 600;
}
.public-shell .mobile-cat-accordion-list {
  display: flex;
  flex-direction: column;
}
.public-shell .mobile-cat-item-wrap {
  border-block-end: 1px solid #f1f5f9;
  transition: background 0.15s ease;
}
.public-shell .mobile-cat-item-wrap.expanded {
  background: #fbfcfe;
}
.public-shell .mobile-cat-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 46px;
}
.public-shell .mobile-cat-name-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 10px 16px;
  text-decoration: none;
  color: #1e293b;
  font-size: 0.88rem;
  font-weight: 750;
  transition: color 0.15s ease, background 0.15s ease;
}
.public-shell .mobile-cat-name-link:hover {
  color: #0284c7;
  background: rgba(2, 132, 199, 0.04);
}
.public-shell .mobile-cat-thumb {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 6px;
  background: #f1f5f9;
  padding: 2px;
  flex-shrink: 0;
}
.public-shell .mobile-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  flex-shrink: 0;
}
.public-shell .mobile-cat-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.public-shell .mobile-cat-arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 14px;
  background: transparent;
  border: none;
  border-inline-start: 1px solid #f1f5f9;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.public-shell .mobile-cat-arrow-btn:hover {
  background: #f1f5f9;
  color: #0D1B2E;
}
.public-shell .mobile-child-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1.3;
}
.public-shell .mobile-arrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.public-shell .mobile-arrow-icon svg {
  width: 14px;
  height: 14px;
}
.public-shell .mobile-cat-arrow-btn.open .mobile-arrow-icon {
  transform: rotate(180deg);
}
.public-shell .mobile-cat-arrow-btn.open .mobile-child-chip {
  background: #FECC00;
  color: #0D1B2E;
}
.public-shell .mobile-subcat-list {
  display: flex;
  flex-direction: column;
  padding: 4px 0 8px 0;
  background: #f8fafc;
  border-block-start: 1px dashed #e2e8f0;
}
.public-shell .mobile-subcat-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 24px 9px 20px;
  text-decoration: none;
  color: #475569;
  font-size: 0.83rem;
  font-weight: 650;
  transition: all 0.15s ease;
}
.public-shell .mobile-subcat-link:hover {
  background: #f1f5f9;
  color: #0284c7;
  padding-inline-start: 28px;
}
.public-shell .mobile-subcat-dash {
  color: #94a3b8;
  font-size: 0.85rem;
  font-weight: 700;
}

.public-shell .mobile-drawer-footer {
  padding: 14px 20px;
  background: #f8fafc;
  border-block-start: 1px solid #e2e8f0;
}
.public-shell .mobile-phone-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0D1B2E;
  font-weight: 750;
  font-size: 0.85rem;
  text-decoration: none;
}

@media (max-width: 992px) {
  .public-shell .header-desktop-actions {
    display: none;
  }
  .public-shell .commerce-topbar-inner {
    gap: 8px;
  }
  .public-shell .header-brand-link {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 175px);
  }
  .public-shell .header-brand-text {
    min-width: 0;
    flex: 1 1 auto;
  }
  .public-shell .header-brand-name {
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .public-shell .header-mobile-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
  }
  .public-shell .mobile-action-btn {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
  }
  .public-shell .nav-toggle {
    display: grid !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    align-content: center;
    place-content: center;
    gap: 4px;
    touch-action: manipulation;
  }
  .public-shell .nav-toggle i {
    width: 18px;
    height: 2px;
    margin: 0 auto;
    background: #0D1B2E;
    display: block;
    border-radius: 2px;
  }
  .public-shell .commerce-main-nav {
    display: none;
  }
  .public-shell .commerce-navbar-row {
    display: none;
  }
  .public-shell .header-search-form {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .public-shell .header-brand-tagline {
    display: none;
  }
  .public-shell .header-brand-logo {
    height: 40px;
    max-width: 100px;
  }
  .public-shell .commerce-topbar-row {
    padding-block: 8px;
  }
  .public-shell .header-search-form {
    display: none;
  }
}

@media (max-width: 480px) {
  .public-shell .public-container {
    width: min(100% - 20px, 1400px);
  }
  .public-shell .header-brand-link {
    max-width: calc(100% - 160px);
    gap: 8px;
  }
  .public-shell .header-brand-logo {
    height: 36px;
    max-width: 80px;
  }
  .public-shell .header-brand-name {
    font-size: 0.85rem;
  }
  .public-shell .header-mobile-actions {
    gap: 5px;
  }
  .public-shell .mobile-action-btn {
    width: 36px;
    height: 36px;
  }
  .public-shell .nav-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }
  .public-shell .nav-toggle i {
    width: 16px;
  }
}

@media (max-width: 360px) {
  .public-shell .header-brand-link {
    max-width: calc(100% - 148px);
    gap: 6px;
  }
  .public-shell .header-mobile-actions {
    gap: 4px;
  }
  .public-shell .mobile-action-btn {
    width: 34px;
    height: 34px;
  }
  .public-shell .nav-toggle {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }
  .public-shell .nav-toggle i {
    width: 15px;
  }
}

/* Hero and featured promo image treatment. */
.public-shell .home-hero-primary{min-height:48px;padding-inline:1.35rem;border-radius:14px;gap:.6rem;font-size:.875rem;font-weight:800}.public-shell .home-hero-primary::after{content:"←";font-size:1.1rem;line-height:1}.public-shell[data-culture="en"] .home-hero-primary::after{content:"→"}
.public-shell .home-promo-card{display:flex;align-items:center;padding:1.4rem;isolation:isolate;background:var(--public-soft)}
.public-shell .home-promo-background,.public-shell .home-promo-overlay{position:absolute;z-index:-2;inset:0}
.public-shell .home-promo-background img{width:100%;height:100%;object-fit:cover;object-position:center}
.public-shell .home-promo-overlay{z-index:-1;background:linear-gradient(90deg,rgba(8,36,58,.12) 0%,rgba(8,36,58,.82) 52%,#08243afa 100%)}
.public-shell[data-culture="en"] .home-promo-overlay{background:linear-gradient(-90deg,rgba(8,36,58,.12) 0%,rgba(8,36,58,.82) 52%,#08243afa 100%)}
.public-shell .article-promo .home-promo-overlay{background:linear-gradient(90deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.9) 55%,#f7f8fafd 100%)}
.public-shell[data-culture="en"] .article-promo .home-promo-overlay{background:linear-gradient(-90deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.9) 55%,#f7f8fafd 100%)}
.public-shell .home-promo-copy{width:min(72%,270px)}
.public-shell .catalog-promo .home-promo-copy{color:#fff}.public-shell .article-promo .home-promo-copy{color:var(--public-text)}
.public-shell .home-promo-card:not(:has(.home-promo-background)) .home-promo-overlay{opacity:.25}

/* Compact category carousel: centered heading, fixed cards, and restrained media. */
.public-shell .category-commerce-section{padding-block:clamp(2.25rem,3.5vw,3.25rem)}
.public-shell .category-commerce-heading{margin-block-end:1.35rem;text-align:center}
.public-shell .category-commerce-heading h2{position:relative;margin:0;padding-block-end:.7rem;color:var(--public-navy);font-size:clamp(1.25rem,2vw,1.6rem);font-weight:850;line-height:1.4}
.public-shell .category-commerce-heading h2::after{content:"";position:absolute;left:50%;bottom:0;width:32px;height:3px;border-radius:999px;background:var(--public-yellow);transform:translateX(-50%)}
.public-shell .category-carousel-frame{position:relative;width:100%;max-width:none;margin-inline:auto;padding-inline:50px}
.public-shell .category-carousel-button{position:absolute;z-index:2;top:50%;width:36px;height:36px;padding:0;display:grid;place-items:center;border:1px solid #e8edf2;border-radius:50%;background:#fff;color:#526274;text-decoration:none;box-shadow:0 5px 16px #08243a0d;font-family:Arial,sans-serif;font-size:1.25rem;line-height:1;cursor:pointer;transform:translateY(-50%);transition:border-color .18s ease,color .18s ease,transform .18s ease}
.public-shell .category-carousel-button.previous{left:0}.public-shell .category-carousel-button.next{right:0}
.public-shell .category-carousel-button:hover{border-color:var(--public-yellow);color:var(--public-navy);transform:translateY(-50%) scale(1.05)}
.public-shell .category-commerce-section .commerce-category-strip{width:100%;margin-inline:auto;display:flex;justify-content:safe center;gap:12px;overflow-x:auto;padding:5px 4px 12px;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.public-shell .category-commerce-section .commerce-category-strip::-webkit-scrollbar{display:none}
.public-shell .category-commerce-section .commerce-category-card{flex:0 0 136px;width:136px;min-height:130px;padding:6px 6px 10px;gap:8px;justify-content:flex-start;border:1px solid #e5eaf0;border-radius:12px;background:#fff;box-shadow:0 7px 20px #08243a0a;overflow:hidden}
.public-shell .category-commerce-section .commerce-category-card:hover{border-color:#f7b90099;box-shadow:0 10px 24px #08243a12}
.public-shell .category-commerce-section .commerce-category-image{width:100%;height:86px;aspect-ratio:auto;border-radius:9px;background:#f1f4f7;overflow:hidden}
.public-shell .category-commerce-section .commerce-category-image img{width:100%;height:100%;padding:0;object-fit:cover;filter:none;opacity:1}
.public-shell .category-commerce-section .commerce-category-image span{width:100%;height:100%;display:grid;place-items:center;font-size:1.55rem;color:#8694a3}
.public-shell .category-commerce-section .commerce-category-card h3{width:100%;margin:0;padding-inline:3px;font-size:.8125rem;font-weight:750;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:600px){.public-shell .category-commerce-section{padding-block:2rem}.public-shell .category-carousel-frame{padding-inline:38px}.public-shell .category-carousel-button{width:31px;height:31px}.public-shell .category-commerce-section .commerce-category-strip{justify-content:flex-start;gap:9px}.public-shell .category-commerce-section .commerce-category-card{flex-basis:118px;width:118px;min-height:118px}.public-shell .category-commerce-section .commerce-category-image{height:76px}}

/* Compact featured-product carousel. */
.public-shell .home-product-carousel-section{padding-block:clamp(2.5rem,4vw,3.75rem);background:#fff}
.public-shell .product-carousel-heading{margin-block-end:1.35rem;text-align:center}
.public-shell .product-carousel-heading h2{position:relative;margin:0;padding-block-end:.7rem;color:var(--public-navy);font-size:clamp(1.25rem,2vw,1.6rem);font-weight:850;line-height:1.4}
.public-shell .product-carousel-heading h2::after{content:"";position:absolute;left:50%;bottom:0;width:32px;height:3px;border-radius:999px;background:var(--public-yellow);transform:translateX(-50%)}
.public-shell .product-carousel-frame{position:relative;width:100%;padding-inline:50px}
.public-shell .home-product-carousel-strip{width:100%;margin-inline:auto;display:flex;justify-content:safe center;gap:14px;overflow-x:auto;padding:6px 4px 16px;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.public-shell .home-product-carousel-strip::-webkit-scrollbar{display:none}
.public-shell .home-product-carousel-strip .catalog-product-card{flex:0 0 178px;width:178px;height:auto;min-height:236px;scroll-snap-align:start;border-radius:14px;border:1px solid #e2e8f0;background:#fff;box-shadow:0 6px 18px rgba(8,36,58,0.06);overflow:hidden;transition:all .25s ease}
.public-shell .home-product-carousel-strip .catalog-product-card:hover{border-color:#f7b90099;box-shadow:0 12px 28px rgba(8,36,58,0.12);transform:translateY(-3px)}
.public-shell .home-product-carousel-strip .catalog-product-card .product-card-image{height:130px!important;aspect-ratio:auto;border-block-end:1px solid #f1f5f9;background:#fff;display:flex;align-items:center;justify-content:center}
.public-shell .home-product-carousel-strip .catalog-product-card .product-card-image img{padding:10px;object-fit:contain;transition:transform .3s ease}
.public-shell .home-product-carousel-strip .catalog-product-card:hover .product-card-image img{transform:scale(1.05)}
.public-shell .home-product-carousel-strip .catalog-product-card .product-card-content{padding:.75rem;display:flex;flex-direction:column;flex:1}
.public-shell .home-product-carousel-strip .compact-product-category{display:block;color:#9a7100;font-size:.72rem;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.public-shell .home-product-carousel-strip .catalog-product-card .product-meta{min-height:18px;gap:.25rem}.public-shell .home-product-carousel-strip .catalog-product-card .product-meta span{padding:.12rem .35rem;font-size:.72rem}
.public-shell .home-product-carousel-strip .catalog-product-card h3{margin:0 0 .25rem;font-size:.875rem;font-weight:750;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.public-shell .home-product-carousel-strip .catalog-product-card h3 a{display:block;color:var(--public-navy);text-decoration:none;transition:color .2s ease}.public-shell .home-product-carousel-strip .catalog-product-card h3 a:hover{color:#d97706}
.public-shell .home-product-carousel-strip .catalog-product-card .model-code{font-size:.72rem;color:var(--public-muted);margin-bottom:.35rem}.public-shell .home-product-carousel-strip .catalog-product-card>div>p{display:none}
.public-shell .home-product-carousel-strip .compact-product-footer{margin-block-start:auto;padding-block-start:.6rem;display:flex;align-items:center;justify-content:space-between;gap:.45rem;border-block-start:1px solid #f1f5f9}
.public-shell .home-product-carousel-strip .catalog-product-card .product-price{min-height:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem;font-family:var(--font-family-num)}
.public-shell .home-product-carousel-strip .catalog-product-card .product-price .price-prefix{font-size:.72rem;color:#8492a6;font-weight:500}
.public-shell .home-product-carousel-strip .catalog-product-card .product-price .price-amount{font-size:1.0625rem;font-weight:850;color:var(--public-navy);font-family:var(--font-family-num);line-height:1}
.public-shell .home-product-carousel-strip .catalog-product-card .product-price .price-suffix{font-size:.72rem;color:#64748b;font-weight:600}
.public-shell .home-product-carousel-strip .catalog-product-card .product-price .inquiry-badge{display:inline-block;font-size:.75rem;font-weight:800;color:#b45309;background:#fef3c7;padding:2px 7px;border-radius:5px;line-height:1.4}
.public-shell .home-product-carousel-strip .compact-product-actions{flex:0 0 auto;display:flex;align-items:center}
.public-shell .home-product-carousel-strip .compact-product-action.quote{width:32px;height:32px;display:grid;place-items:center;border:1px solid rgba(247,185,0,0.5);border-radius:8px;background:var(--public-yellow);color:var(--public-navy);text-decoration:none;box-shadow:0 2px 8px rgba(247,185,0,0.25);transition:all .2s ease;cursor:pointer}
.public-shell .home-product-carousel-strip .compact-product-action.quote:hover{background:#ffd65c;transform:translateY(-2px);box-shadow:0 4px 12px rgba(247,185,0,0.45)}
.public-shell .home-product-carousel-strip .compact-product-action.quote svg{width:16px;height:16px;stroke-width:2.2}
.public-shell .product-carousel-footer{margin-block-start:.75rem;text-align:center}.public-shell .all-products-button{min-height:42px;padding:.6rem 1.4rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:10px;background:var(--public-yellow);color:var(--public-navy);font-size:.875rem;font-weight:850;text-decoration:none;box-shadow:0 8px 20px #fbb80026;transition:all .2s ease}.public-shell .all-products-button:hover{background:var(--public-yellow-soft);transform:translateY(-2px)}
@media(max-width:600px){.public-shell .product-carousel-frame{padding-inline:38px}.public-shell .home-product-carousel-strip{justify-content:flex-start;gap:9px}.public-shell .home-product-carousel-strip .catalog-product-card{flex-basis:158px;width:158px}}

/* Compact article and catalog showcase. */
.public-shell .compact-content-showcase{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px;padding-block:clamp(2.5rem,4vw,3.75rem)}
.public-shell .compact-content-showcase .home-content-panel{padding:20px;border:1px solid #e2e8f0;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(8,36,58,0.05);display:flex;flex-direction:column}
.public-shell .home-showcase-heading{margin-block-end:16px;padding-block-end:12px;border-block-end:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.public-shell .home-showcase-heading h2{margin:0;color:var(--public-navy);font-size:1.1875rem;font-weight:850;line-height:1.4;display:flex;align-items:center;gap:8px}
.public-shell .home-showcase-heading h2::before{content:"";display:inline-block;width:4px;height:18px;border-radius:4px;background:var(--public-yellow)}
.public-shell .home-showcase-heading a{color:#9a7100;text-decoration:none;font-size:.8125rem;font-weight:800;white-space:nowrap;transition:color .2s ease}
.public-shell .home-showcase-heading a:hover{color:#d97706}
.public-shell .compact-content-showcase .home-article-list{display:flex;flex-direction:column;gap:10px}
.public-shell .compact-content-showcase .modern-article-card{min-height:92px;padding:10px 12px;display:grid;grid-template-columns:100px minmax(0,1fr);flex-direction:row;align-items:center;gap:14px;border:1px solid #edf2f7;border-radius:12px;box-shadow:0 2px 8px rgba(8,36,58,0.03);background:#fff;transition:all .25s ease}
.public-shell .compact-content-showcase .modern-article-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(8,36,58,0.08);border-color:#f7b90088;background:#fafbfc}
.public-shell .compact-content-showcase .article-card-media{width:100px;height:78px;aspect-ratio:auto;border-radius:9px;overflow:hidden;flex:none;background:#08243a}
.public-shell .compact-content-showcase .article-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.public-shell .compact-content-showcase .modern-article-card:hover .article-card-media img{transform:scale(1.06)}
.public-shell .compact-content-showcase .modern-article-card .article-category-badge{display:none}
.public-shell .compact-content-showcase .modern-article-card .article-card-content{padding:0;min-width:0;display:flex;flex-direction:column;justify-content:center}
.public-shell .compact-content-showcase .modern-article-card .article-card-meta{margin-bottom:3px;display:flex;align-items:center;gap:10px;font-size:.72rem;color:#8492a6;font-family:var(--font-family-num)}
.public-shell .compact-content-showcase .modern-article-card .article-meta-item{display:inline-flex;align-items:center;gap:4px}
.public-shell .compact-content-showcase .modern-article-card .article-meta-item svg{color:#94a3b8}
.public-shell .compact-content-showcase .modern-article-card .article-card-title{margin:0 0 3px;font-size:.875rem;font-weight:750;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.public-shell .compact-content-showcase .modern-article-card .article-card-title a{display:block;color:var(--public-navy);text-decoration:none;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease}
.public-shell .compact-content-showcase .modern-article-card:hover .article-card-title a{color:#d97706}
.public-shell .compact-content-showcase .modern-article-card .article-card-summary{margin:0;font-size:.78rem;line-height:1.6;color:#64748b;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.public-shell .compact-content-showcase .modern-article-card .article-card-footer{display:none}

.public-shell .compact-content-showcase .home-catalog-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.public-shell .compact-content-showcase .home-catalog-list .catalog-card-v2{min-width:0;min-height:0;display:flex;flex-direction:column;border:1px solid #e2e8f0;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 4px 14px rgba(8,36,58,0.04);transition:all .25s ease;height:100%}
.public-shell .compact-content-showcase .home-catalog-list .catalog-card-v2:hover{border-color:#f7b90099;transform:translateY(-3px);box-shadow:0 10px 24px rgba(8,36,58,0.09)}
.public-shell .compact-content-showcase .home-catalog-list .catalog-cover{position:relative;width:100%;height:124px;min-height:124px;border-radius:0;background:linear-gradient(135deg,#091e32 0%,#15385b 100%);display:flex;align-items:center;justify-content:center;overflow:hidden}
.public-shell .compact-content-showcase .home-catalog-list .catalog-cover img{width:100%;height:100%;padding:0;object-fit:cover;opacity:.92;transition:transform .35s ease}
.public-shell .compact-content-showcase .home-catalog-list .catalog-card-v2:hover .catalog-cover img{transform:scale(1.06)}
.public-shell .compact-content-showcase .home-catalog-list .catalog-cover .catalog-cover-placeholder{font-size:1.6rem;font-weight:900;color:rgba(255,255,255,.25)}
.public-shell .compact-content-showcase .home-catalog-list .catalog-cover .catalog-badge{position:absolute;top:8px;inset-inline-start:8px;padding:2px 7px;border-radius:5px;background:var(--public-yellow);color:var(--public-navy);font-size:.7rem;font-weight:900;font-style:normal;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.public-shell .compact-content-showcase .home-catalog-list .catalog-card-body{padding:10px 11px 11px;display:flex;flex-direction:column;flex:1;justify-content:space-between;background:#fff}
.public-shell .compact-content-showcase .home-catalog-list .catalog-product-name{width:100%;color:#9a7100;font-size:.72rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin-bottom:2px}
.public-shell .compact-content-showcase .home-catalog-list .catalog-card-title{width:100%;margin:0 0 8px;font-size:.8125rem;font-weight:750;line-height:1.5;color:var(--public-navy);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.public-shell .compact-content-showcase .home-catalog-list .catalog-card-footer{margin-top:auto;padding-top:6px;border-top:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between;gap:6px}
.public-shell .compact-content-showcase .home-catalog-list .catalog-version-badge{font-size:.72rem;font-weight:600;color:#64748b;font-family:var(--font-family-num);background:#f8fafc;padding:2px 6px;border-radius:4px;border:1px solid #edf2f7}
.public-shell .compact-content-showcase .home-catalog-list .catalog-version-badge.empty{background:transparent;border:0;padding:0}
.public-shell .compact-content-showcase .home-catalog-list .catalog-download-icon-btn{width:32px;height:32px;display:grid;place-items:center;border:1px solid rgba(247,185,0,.4);border-radius:8px;background:#08243a;color:var(--public-yellow);text-decoration:none;transition:all .2s ease;cursor:pointer;flex-shrink:0;box-shadow:0 2px 6px rgba(8,36,58,.15)}
.public-shell .compact-content-showcase .home-catalog-list .catalog-download-icon-btn:hover{background:var(--public-yellow);color:#08243a;border-color:var(--public-yellow);transform:translateY(-2px);box-shadow:0 4px 12px rgba(247,185,0,.45)}
.public-shell .compact-content-showcase .home-catalog-list .catalog-download-icon-btn svg{width:17px;height:17px;stroke:currentColor}
@media(max-width:992px){.public-shell .compact-content-showcase{grid-template-columns:1fr}.public-shell .compact-content-showcase .catalog-panel{grid-row:2}}
@media(max-width:600px){.public-shell .compact-content-showcase .home-content-panel{padding:14px}.public-shell .compact-content-showcase .home-catalog-list{grid-template-columns:repeat(3,minmax(130px,1fr));overflow-x:auto;padding-block-end:8px}.public-shell .compact-content-showcase .modern-article-card{grid-template-columns:80px minmax(0,1fr);gap:10px}.public-shell .compact-content-showcase .article-card-media{width:80px;height:68px}}

/* Reference-aligned public typography and compact partner-brand carousel. */
.public-shell{font-family:var(--font-family-base);font-weight:400;letter-spacing:0}
.public-shell h1{font-family:var(--font-family-base);font-weight:850!important;letter-spacing:0}
.public-shell h2{font-family:var(--font-family-base);font-weight:800!important;letter-spacing:0}
.public-shell h3{font-family:var(--font-family-base);font-weight:750!important;letter-spacing:0}
.public-shell p{font-family:var(--font-family-base);font-weight:400;letter-spacing:0}
.public-shell .brand-commerce-section{padding-block:clamp(2.25rem,3.5vw,3.25rem);background:#fff}
.public-shell .brand-commerce-heading{margin-block-end:1.35rem;text-align:center}
.public-shell .brand-commerce-heading h2{position:relative;margin:0;padding-block-end:.7rem;color:var(--public-navy);font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.4;font-weight:850}
.public-shell .brand-commerce-heading h2::after{content:"";position:absolute;left:50%;bottom:0;width:32px;height:3px;border-radius:999px;background:var(--public-yellow);transform:translateX(-50%)}
.public-shell .brand-carousel-frame{position:relative;width:100%;padding-inline:50px}
.public-shell .brand-carousel-button{position:absolute;z-index:2;top:50%;width:36px;height:36px;padding:0;display:grid;place-items:center;border:1px solid #e8edf2;border-radius:50%;background:#fff;color:#526274;box-shadow:0 5px 16px #08243a0d;font-family:Arial,sans-serif;font-size:1.25rem;line-height:1;cursor:pointer;transform:translateY(-50%);transition:border-color .18s ease,color .18s ease,transform .18s ease}
.public-shell .brand-carousel-button.previous{left:0}.public-shell .brand-carousel-button.next{right:0}
.public-shell .brand-carousel-button:hover{border-color:var(--public-yellow);color:var(--public-navy);transform:translateY(-50%) scale(1.05)}
.public-shell .home-brand-carousel-strip{width:100%;margin-inline:auto;display:flex;justify-content:safe center;gap:10px;overflow-x:auto;padding:5px 4px 12px;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.public-shell .home-brand-carousel-strip::-webkit-scrollbar{display:none}
.public-shell .home-brand-carousel-strip .industrial-brand-card{flex:0 0 120px;width:120px;min-height:92px;padding:8px 7px 7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;scroll-snap-align:start;border:1px solid #e8edf2;border-radius:12px;background:#fff;color:var(--public-navy);text-align:center;text-decoration:none;box-shadow:0 7px 20px #08243a0a;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.public-shell .home-brand-carousel-strip .industrial-brand-card:hover{border-color:#f7b90099;box-shadow:0 10px 24px #08243a12;transform:translateY(-2px)}
.public-shell .industrial-brand-logo{width:52px;height:44px;display:grid;place-items:center;background:transparent}
.public-shell .industrial-brand-logo img{width:100%;height:100%;padding:1px;object-fit:contain;filter:none}
.public-shell .industrial-brand-logo strong{font-size:1.3rem;font-weight:700;color:#8592a0}
.public-shell .industrial-brand-name{width:100%;overflow:hidden;color:var(--public-navy);font-size:.75rem;font-weight:700;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){.public-shell .brand-carousel-frame{padding-inline:38px}.public-shell .brand-carousel-button{width:31px;height:31px}.public-shell .home-brand-carousel-strip{justify-content:flex-start;gap:9px}.public-shell .home-brand-carousel-strip .industrial-brand-card{flex-basis:108px;width:108px;min-height:86px}}

/* Integrated premium footer: quotation banner, structured information, services, and identity. */
.public-shell .premium-commerce-footer{position:relative;padding-block:24px 0;color:#d6e0e8;background:radial-gradient(circle at 16% 35%,#0b3150 0,transparent 28%),linear-gradient(150deg,#031321 0%,#061f34 52%,#02111e 100%);overflow:hidden}
.public-shell .premium-commerce-footer::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.08;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:18px 18px}
.public-shell .premium-commerce-footer>.public-container{position:relative;z-index:1}
.public-shell .premium-footer-grid{padding-block:clamp(2.5rem,4vw,4rem);display:grid;grid-template-columns:1.15fr 1.05fr .85fr .85fr 1.05fr;gap:0}
.public-shell .premium-footer-grid>section,.public-shell .premium-footer-grid>nav{min-width:0;padding-inline:clamp(1rem,2.2vw,2rem);border-inline-end:1px solid #ffffff21}.public-shell .premium-footer-grid>*:last-child{border-inline-end:0}
.public-shell .premium-footer-grid h3{margin:0 0 1.15rem;display:flex;align-items:center;gap:.65rem;color:var(--public-yellow);font-size:.9375rem;font-weight:800}.public-shell .premium-footer-grid h3>span{font-size:1.25rem;font-weight:400}.public-shell .premium-footer-grid h4{margin:1.2rem 0 .6rem;display:flex;align-items:center;gap:.5rem;color:var(--public-yellow);font-size:.875rem;font-weight:750}
.public-shell .footer-request-column p{margin:0 0 1.25rem;color:#aebdca;font-size:.8125rem;line-height:2}.public-shell .footer-request-button{min-height:44px;padding:.65rem 1rem;display:flex;align-items:center;justify-content:center;gap:.5rem;border-radius:8px;background:var(--public-yellow);color:#071a2b!important;text-decoration:none;font-size:.8125rem;font-weight:800}
.public-shell .footer-contact-column{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem}.public-shell .footer-contact-column>a,.public-shell .footer-contact-column address{margin:0;display:flex;align-items:flex-start;gap:.6rem;color:#d1dbe3;text-decoration:none;font-size:.8125rem;font-style:normal;line-height:1.75}.public-shell .footer-contact-column i{width:18px;color:#fff;font-style:normal;text-align:center}
.public-shell .premium-footer-socials{display:flex;flex-wrap:wrap;gap:.45rem}.public-shell .premium-footer-socials a{width:36px;height:36px;display:grid;place-items:center;border:1px solid #ffffff5a;border-radius:8px;color:#fff;text-decoration:none;font-family:Arial,sans-serif;font-size:.72rem;font-weight:700}.public-shell .premium-footer-socials a:hover{border-color:var(--public-yellow);color:var(--public-yellow)}
.public-shell .footer-navigation-column{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem}.public-shell .footer-navigation-column a{display:flex;align-items:center;gap:.6rem;color:#c7d2dc;text-decoration:none;font-size:.8125rem;line-height:1.8}.public-shell .footer-navigation-column a>span{color:var(--public-yellow)}.public-shell .footer-navigation-column a:hover{color:#fff}
.public-shell .footer-location-column address{margin:0 0 1rem;color:#c6d1da;font-size:.8125rem;font-style:normal;line-height:1.9}.public-shell .footer-location-column>p{margin:0;color:#aebdca;font-size:.8125rem;line-height:1.9}
.public-shell .footer-map-card{position:relative;height:132px;display:flex;align-items:flex-end;justify-content:center;padding:12px;border:1px solid #ffffff2b;border-radius:10px;color:#fff;text-decoration:none;overflow:hidden;background-color:#dce5df;background-image:linear-gradient(35deg,transparent 46%,#b5c4bd 47%,#b5c4bd 49%,transparent 50%),linear-gradient(-35deg,transparent 46%,#cad5cf 47%,#cad5cf 49%,transparent 50%);background-size:36px 36px}.public-shell .footer-map-card::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,#06182955)}.public-shell .footer-map-card strong{position:relative;z-index:2;padding:.45rem .8rem;border-radius:7px;background:#061829;color:#fff;font-size:.78rem;font-weight:700}.public-shell .footer-map-pin{position:absolute;z-index:2;inset-block-start:28px;left:50%;width:34px;height:34px;display:grid;place-items:center;border-radius:50% 50% 50% 0;background:var(--public-yellow);color:#fff;transform:translateX(-50%) rotate(-45deg)}
@media(max-width:1100px){.public-shell .premium-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem}.public-shell .premium-footer-grid>section,.public-shell .premium-footer-grid>nav{border-inline-end:0}.public-shell .footer-location-column{grid-column:1/-1}.public-shell .footer-map-card{max-width:420px}}
@media(max-width:700px){.public-shell .premium-commerce-footer{padding-block-start:12px}.public-shell .premium-footer-grid{grid-template-columns:1fr}.public-shell .premium-footer-grid>section,.public-shell .premium-footer-grid>nav{padding:1.4rem 0;border-block-end:1px solid #ffffff20}.public-shell .footer-location-column{grid-column:auto}}

/* Database-driven public product catalog. */
.public-shell .public-products-page{background:#fff;color:var(--public-navy)}
.public-shell .products-list-hero{position:relative;height:154px;color:#fff;background:linear-gradient(100deg,#071a2d,#0a2944);overflow:hidden;isolation:isolate}
.public-shell .products-list-hero>img{position:absolute;z-index:-2;left:0;top:0;width:38%;height:100%;object-fit:cover;object-position:center;filter:saturate(.72) brightness(.68)}
.public-shell .products-list-hero-overlay{position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,transparent 0,#071a2d77 32%,#071a2df5 55%,#071a2d 100%)}
.public-shell[data-culture="en"] .products-list-hero-overlay{background:linear-gradient(-90deg,transparent 0,#071a2d77 32%,#071a2df5 55%,#071a2d 100%)}
.public-shell .products-list-hero-content{height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.public-shell .products-list-hero-content h1{position:relative;margin:0;padding-inline-end:42px;color:#fff;font-size:clamp(1.45rem,2.4vw,2rem);line-height:1.35;font-weight:850}.public-shell .products-list-hero-content h1::after{content:"";position:absolute;top:55%;inset-inline-end:0;width:30px;height:3px;background:var(--public-yellow)}.public-shell .products-list-hero-content p{margin:.45rem 0 0;color:#c4d0da;font-size:.8125rem}
.public-shell .products-breadcrumb{min-height:52px;display:flex;align-items:center;justify-content:flex-start;gap:.55rem;color:#84909c;font-size:.8125rem}.public-shell .products-breadcrumb a{color:#6f7c89;text-decoration:none}.public-shell .products-breadcrumb strong{color:var(--public-navy);font-weight:700}
.public-shell .products-catalog-shell{padding-block-end:clamp(3rem,5vw,5rem);display:grid;grid-template-columns:250px minmax(0,1fr);align-items:start;gap:24px}
.public-shell .products-filter-sidebar{position:sticky;top:96px;border:1px solid #e4e9ee;border-radius:10px;background:#fff;box-shadow:0 5px 18px #08243a08;overflow:hidden}.public-shell .products-filter-title{height:52px;padding-inline:14px;display:flex;align-items:center;justify-content:space-between;border-block-end:1px solid #edf0f3}.public-shell .products-filter-title h2{margin:0;display:flex;align-items:center;gap:.55rem;font-size:.9375rem;font-weight:800}.public-shell .products-filter-title h2>span{color:var(--public-yellow);font-size:1.1rem}.public-shell .products-filter-title>button{display:none;border:0;background:transparent;font-size:1.4rem}
.public-shell .products-filter-search{position:relative;margin:12px;display:block}.public-shell .products-filter-search input{width:100%;height:40px;padding:0 34px 0 10px;border:1px solid #e2e7ec;border-radius:7px;background:#fff;color:var(--public-text);font-family:inherit;font-size:.8125rem}.public-shell[data-culture="en"] .products-filter-search input{padding:0 10px 0 34px}.public-shell .products-filter-search i{position:absolute;right:11px;top:50%;color:#8694a1;font-style:normal;transform:translateY(-50%)}.public-shell[data-culture="en"] .products-filter-search i{right:auto;left:11px}
.public-shell .products-facet-section{border-block-start:1px solid #edf0f3}.public-shell .products-facet-heading{width:100%;min-height:44px;padding:8px 13px;display:flex;align-items:center;justify-content:space-between;border:0;background:#fff;color:var(--public-navy);font-family:inherit;font-size:.84rem;font-weight:750;cursor:pointer}.public-shell .products-facet-heading i{font-style:normal;color:#526273}.public-shell .products-facet-options{padding:0 12px 10px;display:grid;gap:4px}.public-shell .products-facet-option{width:100%;min-height:28px;padding:3px 0;display:flex;align-items:center;gap:8px;border:0;background:transparent;color:#536170;text-align:start;font-family:inherit;font-size:.8125rem;cursor:pointer}.public-shell .products-facet-option .facet-label{flex:1;min-width:0;text-align:start}.public-shell .products-facet-option small{font-size:.72rem;color:#8995a0;margin-inline-start:auto}.public-shell .facet-checkbox{width:15px;height:15px;border:1px solid #cfd7de;border-radius:3px;background:#fff;flex-shrink:0}.public-shell .facet-color-dot{width:14px;height:14px;border-radius:50%;display:inline-block;flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,0.15)}.public-shell .products-facet-option.active .facet-checkbox{border-color:var(--public-yellow);background:var(--public-yellow);box-shadow:inset 0 0 0 3px #fff}.public-shell .products-facet-option.active .facet-label{color:var(--public-navy);font-weight:750}.public-shell .products-show-more{padding:.35rem 0;border:0;background:transparent;color:#4d6680;text-align:start;font-family:inherit;font-size:.75rem;font-weight:600;cursor:pointer}
.public-shell .products-filter-actions{padding:12px;display:flex;align-items:center;justify-content:center;border-block-start:1px solid #edf0f3}.public-shell .products-reset-filter{display:flex;align-items:center;justify-content:center;gap:.45rem;width:100%;min-height:38px;padding:.5rem 1rem;border:1px solid #e2e8f0;border-radius:7px;background:#f8fafc;color:#e11d48;font-family:inherit;font-size:.8125rem;font-weight:750;cursor:pointer;transition:all .2s ease}.public-shell .products-reset-filter:hover{background:#fff1f2;border-color:#fca5a5;color:#be123c}
.public-shell .products-results{min-width:0}.public-shell .products-result-summary{min-height:31px;display:flex;align-items:center;justify-content:flex-start;color:#5d6975;font-size:.8125rem}.public-shell .products-result-summary strong{color:var(--public-navy);font-weight:750}
.public-shell .products-result-toolbar{height:50px;margin-block-end:12px;display:flex;align-items:center;justify-content:flex-end;gap:10px}.public-shell .products-view-switch{display:flex;border:1px solid #e1e7ec;border-radius:7px;overflow:hidden}.public-shell .products-view-switch button{width:39px;height:38px;padding:0;border:0;border-inline-end:1px solid #e1e7ec;background:#fff;color:#5a6875;font-size:1rem;cursor:pointer}.public-shell .products-view-switch button:last-child{border-inline-end:0}.public-shell .products-view-switch button.active{background:var(--public-yellow);color:var(--public-navy)}.public-shell .products-sort-select{height:40px;padding-inline:12px;display:flex;align-items:center;gap:.5rem;border:1px solid #e1e7ec;border-radius:7px;color:#52606e;font-size:.8125rem}.public-shell .products-sort-select select{min-width:120px;border:0;outline:0;background:#fff;color:var(--public-navy);font-family:inherit;font-size:.8125rem;font-weight:600}
.public-shell .products-list-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.public-shell .public-product-list-card{min-width:0;border:1px solid #e4e9ee;border-radius:10px;background:#fff;overflow:hidden;box-shadow:0 5px 15px #08243a08;transition:border-color .18s ease,transform .18s ease}.public-shell .public-product-list-card:hover{border-color:#f7b9008c;transform:translateY(-2px)}.public-shell .product-list-card-visual{position:relative;height:154px;display:block;background:#fff;overflow:hidden}.public-shell .product-list-card-visual img{width:100%;height:100%;padding:10px;object-fit:contain}.public-shell .product-list-card-visual .image-placeholder{font-size:2rem}.public-shell .product-list-card-content{padding:12px}.public-shell .product-list-card-meta{display:flex;gap:.35rem;white-space:nowrap;overflow:hidden}.public-shell .product-list-card-meta span{color:#8995a0;font-size:.72rem;text-overflow:ellipsis;overflow:hidden}.public-shell .product-list-card-content h3{margin:.35rem 0 .15rem;font-size:.875rem;font-weight:750;line-height:1.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.public-shell .product-list-card-content h3 a{color:var(--public-navy);text-decoration:none}.public-shell .product-list-card-content>small{display:block;color:#7b8894;font-size:.72rem}.public-shell .product-list-card-footer{min-height:36px;margin-block-start:.55rem;padding-block-start:.55rem;display:flex;align-items:end;justify-content:space-between;gap:.5rem;border-block-start:1px solid #eff2f4}.public-shell .product-list-card-footer .product-price{display:flex;align-items:baseline;gap:.25rem;flex-wrap:wrap}.public-shell .product-list-card-footer .product-price small{color:#8a96a1;font-size:.72rem;font-weight:600}.public-shell .product-list-card-footer .product-price strong{color:#9b7200;font-size:1.0625rem;font-weight:850;font-family:var(--font-family-num)}.public-shell .product-list-card-footer>a,.public-shell .product-card-link-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;background:var(--public-yellow);color:var(--public-navy)!important;border:1px solid var(--public-yellow);border-radius:7px;padding:.38rem .85rem;font-size:.78rem;font-weight:800;text-decoration:none;white-space:nowrap;transition:all .2s ease;cursor:pointer}.public-shell .product-list-card-footer>a:hover,.public-shell .product-card-link-btn:hover{background:var(--public-yellow-soft,#ffd65c);border-color:var(--public-yellow-soft,#ffd65c);color:var(--public-navy)!important;transform:translateY(-1px);box-shadow:0 4px 12px rgba(247,185,0,.35)}.public-shell .product-list-card-footer>a svg,.public-shell .product-card-link-btn svg{flex-shrink:0;transition:transform .2s ease}[dir=rtl] .public-shell .product-list-card-footer>a svg,[dir=rtl] .public-shell .product-card-link-btn svg{transform:rotate(180deg)}.public-shell .product-list-card-footer>a:hover svg,.public-shell .product-card-link-btn:hover svg{transform:translateX(-3px)}[dir=rtl] .public-shell .product-list-card-footer>a:hover svg,[dir=rtl] .public-shell .product-card-link-btn:hover svg{transform:rotate(180deg) translateX(3px)}
.public-shell .products-list-grid.list-view{grid-template-columns:1fr}.public-shell .products-list-grid.list-view .public-product-list-card{display:grid;grid-template-columns:190px minmax(0,1fr)}.public-shell .products-list-grid.list-view .product-list-card-visual{height:145px}.public-shell .products-list-grid.list-view .product-list-card-content{display:flex;flex-direction:column;justify-content:center}.public-shell .products-list-grid.list-view .product-list-card-content h3{font-size:.9375rem}.public-shell .products-list-skeleton{height:250px;border-radius:9px;background:linear-gradient(90deg,#f3f5f7 25%,#e9edf0 50%,#f3f5f7 75%);background-size:200% 100%;animation:productSkeleton 1.2s linear infinite}@keyframes productSkeleton{to{background-position:-200% 0}}
.public-shell .products-pagination{margin-block-start:24px;display:flex;align-items:center;justify-content:center;gap:8px}.public-shell .products-pagination button{width:36px;height:36px;padding:0;border:1px solid #e0e6eb;border-radius:50%;background:#fff;color:var(--public-navy);font-family:inherit;font-size:.8125rem;font-weight:650;cursor:pointer}.public-shell .products-pagination button.active{border-color:var(--public-yellow);background:var(--public-yellow);font-weight:800}.public-shell .products-pagination button:disabled{opacity:.4;cursor:default}.public-shell .products-mobile-filter,.public-shell .products-filter-backdrop{display:none}.public-shell .mud-pagination,.public-shell .public-pagination{gap:6px!important;padding:0!important;align-items:center}.public-shell .mud-pagination .mud-pagination-item,.public-shell .public-pagination .mud-pagination-item{min-width:38px!important;height:38px!important;border-radius:8px!important;font-family:var(--font-family-num,var(--font-family-base),sans-serif)!important;font-size:.875rem!important;font-weight:700!important;border:1px solid var(--public-border,#e5e9ee)!important;background-color:transparent!important;color:var(--public-navy)!important;transition:all .2s ease!important}.public-shell .mud-pagination .mud-pagination-item:not(.mud-pagination-item-selected):not(:disabled):hover,.public-shell .public-pagination .mud-pagination-item:not(.mud-pagination-item-selected):not(:disabled):hover{background-color:rgba(247,185,0,.08)!important;border-color:var(--public-yellow)!important;color:var(--public-navy)!important;transform:translateY(-1px)}.public-shell .mud-pagination .mud-pagination-item.mud-pagination-item-selected,.public-shell .public-pagination .mud-pagination-item.mud-pagination-item-selected{background-color:transparent!important;border-color:var(--public-yellow)!important;color:var(--public-yellow)!important;font-weight:850!important;box-shadow:none!important;transform:none!important}.public-shell .mud-pagination .mud-pagination-item.mud-pagination-item-selected:hover,.public-shell .public-pagination .mud-pagination-item.mud-pagination-item-selected:hover{background-color:rgba(247,185,0,.08)!important;border-color:var(--public-yellow)!important;color:var(--public-yellow)!important}.public-shell .mud-pagination .mud-pagination-item:disabled,.public-shell .public-pagination .mud-pagination-item:disabled{opacity:.4!important;background-color:transparent!important;border-color:#e2e8f0!important;color:#94a3b8!important;cursor:not-allowed!important;transform:none!important;box-shadow:none!important}.public-shell .mud-pagination .mud-pagination-item svg,.public-shell .public-pagination .mud-pagination-item svg{color:var(--public-navy)!important;width:20px;height:20px}
@media(max-width:1100px){.public-shell .products-list-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.public-shell .products-catalog-shell{display:block}.public-shell .products-mobile-filter{min-height:40px;margin-block-end:12px;padding:.5rem 1rem;display:inline-flex;align-items:center;gap:.5rem;border:0;border-radius:7px;background:var(--public-yellow);color:var(--public-navy);font-family:inherit;font-size:.8125rem;font-weight:750}.public-shell .products-filter-sidebar{position:fixed;z-index:620;top:0;right:0;width:min(330px,88vw);height:100dvh;border-radius:0;overflow-y:auto;transform:translateX(105%);transition:transform .2s ease}.public-shell .products-filter-sidebar.is-open{transform:translateX(0)}.public-shell[data-culture="en"] .products-filter-sidebar{right:auto;left:0;transform:translateX(-105%)}.public-shell[data-culture="en"] .products-filter-sidebar.is-open{transform:translateX(0)}.public-shell .products-filter-title>button{display:block}.public-shell .products-filter-backdrop.is-open{position:fixed;z-index:610;inset:0;display:block;background:#00101c99}.public-shell .products-result-summary{min-height:25px}.public-shell .products-list-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.public-shell .products-list-hero{height:132px}.public-shell .products-list-hero>img{width:55%;opacity:.7}.public-shell .products-list-hero-content p{max-width:82%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.public-shell .products-breadcrumb{min-height:45px}.public-shell .products-result-toolbar{height:auto;align-items:stretch;justify-content:space-between}.public-shell .products-sort-select{flex:1}.public-shell .products-sort-select select{min-width:0;width:100%}.public-shell .products-list-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.public-shell .product-list-card-visual{height:125px}.public-shell .product-list-card-content{padding:8px}.public-shell .product-list-card-meta{display:none}.public-shell .product-list-card-footer{align-items:flex-start;flex-direction:column}.public-shell .products-list-grid.list-view .public-product-list-card{grid-template-columns:125px minmax(0,1fr)}.public-shell .products-list-grid.list-view .product-list-card-visual{height:130px}}
.public-shell .products-facet-heading small{margin-inline-start:.25rem;color:#7c8794;font-size:.72rem;font-weight:500}

/* Minimalist Glassmorphism & Database-driven Public Product Detail */
:root{--cs-logo-yellow:#f4c300;--cs-logo-yellow-hover:#dcaf00;--cs-logo-yellow-glow:rgba(244,195,0,0.32);--cs-glass-bg:rgba(255,255,255,0.72);--cs-glass-border:rgba(255,255,255,0.85);--cs-glass-subpanel:rgba(248,250,252,0.65);--cs-glass-shadow:0 10px 30px 0 rgba(15,23,42,0.04)}
.public-shell .glass-panel{background:rgba(255,255,255,0.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,0.85);border-radius:18px;box-shadow:0 10px 30px 0 rgba(15,23,42,0.04)}
.public-shell .glass-card{background:rgba(255,255,255,0.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(226,232,240,0.8);border-radius:14px;box-shadow:0 4px 18px 0 rgba(15,23,42,0.03)}
.public-shell .glass-subpanel{background:rgba(248,250,252,0.68);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(226,232,240,0.75);border-radius:12px}
.public-shell .glass-pill{display:inline-flex;align-items:center;gap:6px;padding:.25rem .75rem;border-radius:9999px;background:rgba(241,245,249,0.8);backdrop-filter:blur(6px);border:1px solid rgba(226,232,240,0.8);font-size:.74rem;color:#475569;font-weight:600}
.public-shell .glass-pill-btn{display:inline-flex;align-items:center;gap:6px;padding:.3rem .85rem;border-radius:9999px;background:rgba(255,255,255,0.8);backdrop-filter:blur(6px);border:1px solid rgba(203,213,225,0.85);font-size:.74rem;color:#334155;font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none;transition:all .2s ease}
.public-shell .glass-pill-btn:hover{background:#fff;border-color:var(--cs-logo-yellow);color:#0f172a;transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,0.04)}

/* Glass Buttons */
.public-shell .cs-glass-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.65rem 1.25rem;border-radius:12px;font-family:inherit;font-size:.85rem;font-weight:800;cursor:pointer;text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1)}
.public-shell .cs-glass-btn.primary{background:linear-gradient(135deg,#f4c300 0%,#ffd700 100%);color:#111827!important;border:1px solid rgba(255,255,255,0.7);box-shadow:0 6px 20px var(--cs-logo-yellow-glow)}
.public-shell .cs-glass-btn.primary:hover{background:linear-gradient(135deg,#e5b700 0%,#f4c300 100%);transform:translateY(-2px);box-shadow:0 8px 24px var(--cs-logo-yellow-glow)}
.public-shell .cs-glass-btn.secondary{background:rgba(255,255,255,0.75);backdrop-filter:blur(8px);border:1px solid rgba(203,213,225,0.85);color:#1e293b}
.public-shell .cs-glass-btn.secondary:hover{background:#fff;border-color:var(--public-navy);transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,0,0,0.05)}
.public-shell .cs-glass-btn.full-width{width:100%}
.public-shell .cs-glass-btn.download-btn{padding:.45rem .85rem;font-size:.76rem;background:rgba(255,255,255,0.85);border:1px solid rgba(203,213,225,0.8);color:#0f172a}
.public-shell .cs-glass-btn.download-btn:hover{background:var(--cs-logo-yellow);border-color:var(--cs-logo-yellow);color:#111827}

/* ==========================================================
/* ==========================================================
   Product Detail - Industrial Navy & Logo Yellow Theme
   ========================================================== */
.public-shell .product-detail-page-wrapper {
  --navy-dark: #0D1B2E;
  --navy: #152640;
  --navy-light: #1E3557;
  --public-yellow: #F7B900;
  --public-yellow-hover: #E5AC00;
  --public-yellow-light: #FFF8E1;
  --gold: #F5A623;
  --gold-bg: #FEF6E9;
  --bg-page: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-surface: #F1F5F9;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --border-color: #E2E8F0;
  --border-subtle: #EDF2F7;
  --green: #10B981;
  --green-bg: #ECFDF5;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(13, 27, 46, 0.05);
  --shadow-md: 0 4px 14px rgba(13, 27, 46, 0.07);
  --shadow-lg: 0 10px 30px rgba(13, 27, 46, 0.1);
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--bg-page);
  color: var(--text-primary);
}

.public-shell .mono {
  font-family: var(--font-mono);
}

/* 1. Full-Width Dark Navy Hero Header */
.public-shell .product-hero-navy {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 60%, var(--navy-light) 100%);
  color: #FFFFFF;
  padding-block: 22px 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(13, 27, 46, 0.2);
}

.public-shell .product-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.public-shell .hero-left-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.public-shell .hero-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.8rem;
  color: #94A3B8;
}

.public-shell .hero-breadcrumb a {
  color: #CBD5E1;
  text-decoration: none;
  transition: color 0.2s;
}

.public-shell .hero-breadcrumb a:hover {
  color: var(--public-yellow);
}

.public-shell .hero-breadcrumb .sep {
  color: #64748B;
}

.public-shell .hero-breadcrumb .cur {
  color: #F8FAFC;
  font-weight: 600;
}

.public-shell .hero-title-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.public-shell .hero-title {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.95rem);
  font-weight: 850;
  line-height: 1.35;
  color: #FFFFFF;
  letter-spacing: 0;
}

.public-shell .hero-meta-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
}

.public-shell .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  color: #E2E8F0;
}

.public-shell .hero-badge b {
  color: #FFFFFF;
  font-weight: 700;
}

.public-shell .hero-badge.in-stock {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34D399;
  font-weight: 700;
}

.public-shell .pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34D399;
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
}

.public-shell .hero-right-action {
  display: flex;
  align-items: center;
}

.public-shell .hero-cta-orange-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--public-yellow);
  color: var(--navy-dark) !important;
  font-weight: 800;
  font-size: 0.88rem;
  font-family: inherit;
  padding: 10px 18px;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(247, 185, 0, 0.35);
  transition: all 0.2s ease;
}

.public-shell .hero-cta-orange-btn:hover {
  background: var(--public-yellow-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(247, 185, 0, 0.45);
}

/* 2. Main Content Container (Sticky Footer Support) */
.public-shell .product-main-container {
  flex: 1 0 auto;
  padding-block: 28px 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* 3. Dynamic & Icon-Free Key Specification Badges (Chips) */
.public-shell .spec-chips-section {
  width: 100%;
}

.public-shell .spec-chips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.public-shell .spec-chip-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-inline-start: 3.5px solid var(--public-yellow);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.public-shell .spec-chip-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--public-yellow);
}

.public-shell .spec-chip-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.public-shell .spec-chip-value {
  font-size: 0.95rem;
  color: var(--navy-dark);
  font-weight: 750;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.public-shell .spec-chip-unit {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* 4. Top Grid: Gallery + Sticky Buy Box */
.public-shell .product-top-grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 32px;
  align-items: start;
}

/* Gallery Column */
.public-shell .gallery-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.public-shell .gallery-main-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 1 / 0.85;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  padding: 20px;
}

.public-shell .gallery-img-el {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.public-shell .gallery-main-card:hover .gallery-img-el {
  transform: scale(1.04);
}

.public-shell .gallery-empty-state {
  width: 80px;
  height: 80px;
}

.public-shell .badge-stock {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  background: var(--green-bg);
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
}

.public-shell .badge-stock::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.public-shell .badge-featured {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  background: var(--gold-bg);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 750;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 2;
}

.public-shell .gallery-zoom-btn {
  position: absolute;
  bottom: 14px;
  inset-inline-start: 14px;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  cursor: pointer;
  z-index: 2;
  transition: all 0.2s;
}

.public-shell .gallery-zoom-btn:hover {
  background: var(--navy-dark);
  color: #FFFFFF;
  border-color: var(--navy-dark);
}

.public-shell .thumbs-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.public-shell .thumb-btn {
  width: 68px;
  height: 68px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  padding: 4px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.public-shell .thumb-btn:hover {
  border-color: var(--public-yellow);
}

.public-shell .thumb-btn.active {
  border-color: var(--public-yellow);
  box-shadow: 0 0 0 2px rgba(247, 185, 0, 0.3);
}

.public-shell .thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.public-shell .thumbs-more-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 27, 46, 0.85);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.82rem;
}

/* Buy Box Column (Sticky) */
.public-shell .buybox-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 22px;
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.public-shell .buybox-category {
  font-size: 0.8125rem;
  color: var(--public-yellow);
  font-weight: 800;
  letter-spacing: 0;
}

.public-shell .buybox-title {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 800;
  color: var(--navy-dark);
  line-height: 1.4;
}

.public-shell .buybox-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.public-shell .buybox-meta-row b {
  color: var(--navy-dark);
}

.public-shell .buybox-price-container {
  border-block: 1px dashed var(--border-color);
  padding-block: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.public-shell .price-label-text {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 600;
}

.public-shell .price-figure-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.public-shell .price-number {
  font-size: 1.85rem;
  font-weight: 900;
  color: var(--navy-dark);
  line-height: 1.1;
}

.public-shell .price-currency {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.public-shell .price-subtext {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.public-shell .price-inquiry-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 12px;
  background: var(--public-yellow-light);
  color: #926C00;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 800;
}

.public-shell .price-inquiry-note {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy-dark);
  margin-top: 4px;
}

.public-shell .buybox-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.public-shell .field-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy-dark);
}

.public-shell .variants-pills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 110px;
  overflow-y: auto;
}

.public-shell .color-swatches-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-height: 140px;
  overflow-y: auto;
}

.public-shell .color-swatch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  color: #334155;
  transition: all 0.18s ease;
}

.public-shell .color-swatch-btn:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  transform: translateY(-1px);
}

.public-shell .color-swatch-btn.selected {
  border-color: var(--public-yellow);
  background: #fffbeb;
  color: #854d0e;
  font-weight: 750;
  box-shadow: 0 0 0 1px var(--public-yellow);
}

.public-shell .color-swatch-circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.public-shell .color-swatch-name {
  line-height: 1;
}

.public-shell .color-swatch-btn .check-icon {
  color: #854d0e;
  margin-inline-start: 2px;
}

.public-shell .variant-pill {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  min-height: 32px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 0.8rem;
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s;
}

.public-shell .variant-pill:hover {
  border-color: var(--public-yellow);
}

.public-shell .variant-pill.active {
  background: var(--public-yellow-light);
  border-color: var(--public-yellow);
  color: #8A6400;
  font-weight: 800;
}

.public-shell .stepper-unit-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.public-shell .quantity-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #FFFFFF;
}

.public-shell .step-btn {
  width: 34px;
  height: 36px;
  background: var(--bg-surface);
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--navy-dark);
  font-weight: 700;
  transition: background 0.2s;
}

.public-shell .step-btn:hover {
  background: var(--border-color);
}

.public-shell .step-input {
  width: 56px;
  height: 36px;
  text-align: center;
  border: none;
  border-inline: 1px solid var(--border-color);
  font-size: 0.92rem;
  font-family: inherit;
  font-weight: 750;
  color: var(--navy-dark);
  outline: 0;
}

.public-shell .unit-tag {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  height: 36px;
  padding-inline: 12px;
  font-size: 0.82rem;
  background: var(--bg-surface);
  color: var(--navy);
  display: flex;
  align-items: center;
  font-weight: 600;
}

/* Action Buttons */
.public-shell .buybox-actions-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.public-shell .btn-cta-orange {
  width: 100%;
  background: var(--public-yellow);
  color: var(--navy-dark) !important;
  border: none;
  border-radius: var(--radius-sm);
  height: 44px;
  font-size: 0.95rem;
  font-weight: 850;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(247, 185, 0, 0.3);
  transition: all 0.2s ease;
}

.public-shell .btn-cta-orange:hover {
  background: var(--public-yellow-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(247, 185, 0, 0.4);
}

.public-shell .btn-cta-secondary {
  width: 100%;
  background: transparent;
  border: 1.5px solid var(--navy);
  color: var(--navy) !important;
  border-radius: var(--radius-sm);
  height: 40px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.public-shell .btn-cta-secondary:hover {
  background: var(--navy);
  color: #FFFFFF !important;
}

/* Buy Box Mini Price Chart */
.public-shell .buybox-mini-chart {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.public-shell .chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 750;
  color: var(--navy-dark);
}

.public-shell .chart-legend {
  display: flex;
  gap: 8px;
  font-size: 0.68rem;
  color: var(--text-secondary);
}

.public-shell .chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.public-shell .legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.public-shell .legend-dot.green {
  background: var(--green);
}

.public-shell .legend-dot.blue {
  background: var(--navy);
}

.public-shell .chart-canvas-wrap {
  width: 100%;
  height: 60px;
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 2px;
}

.public-shell .chart-svg-box {
  width: 100%;
  height: 100%;
}

.public-shell .buybox-footer-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

.public-shell .tool-btn {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s;
}

.public-shell .tool-btn:hover {
  color: var(--navy-dark);
}

.public-shell .tool-btn.active {
  color: #E11D48;
}

/* 5. Tabs Section */
.public-shell .product-tabs-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.public-shell .tabs-nav-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface);
  overflow-x: auto;
  padding-inline: 16px;
}

.public-shell .tab-button {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--text-secondary);
  padding: 14px 18px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color 0.2s;
}

.public-shell .tab-button:hover {
  color: var(--navy-dark);
}

.public-shell .tab-button.active {
  color: var(--navy-dark);
  font-weight: 800;
}

.public-shell .tab-button.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--public-yellow);
}

.public-shell .tab-panel-container {
  padding: 24px;
}

/* Technical Datasheet Table */
.public-shell .datasheet-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.public-shell .datasheet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.public-shell .datasheet-table tr {
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.15s;
}

.public-shell .datasheet-table tr:hover {
  background: var(--bg-surface);
}

.public-shell .datasheet-table tr:nth-child(even) {
  background: #FAFBFD;
}

.public-shell .datasheet-table th {
  width: 30%;
  padding: 12px 18px;
  text-align: start;
  font-weight: 600;
  color: var(--text-secondary);
  border-inline-end: 1px solid var(--border-subtle);
}

.public-shell .datasheet-table td {
  padding: 12px 18px;
  color: var(--navy-dark);
  font-weight: 700;
}

.public-shell .datasheet-table .unit-text {
  font-weight: normal;
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-inline-start: 4px;
}

.public-shell .color-badges-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.public-shell .color-spec-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  padding: 3px 10px 3px 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.public-shell .color-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

/* Standards / Description Panels */
.public-shell .standards-content-box,
.public-shell .overview-content-box {
  font-size: 0.9rem;
  line-height: 2;
  color: var(--text-secondary);
}

.public-shell .standards-content-box h3,
.public-shell .overview-content-box h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy-dark);
  margin: 0 0 10px;
}

/* Documents Grid */
.public-shell .documents-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.public-shell .doc-item-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
}

.public-shell .doc-type-badge {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.78rem;
}

.public-shell .doc-type-badge.pdf {
  background: #FEE2E2;
  color: #DC2626;
}

.public-shell .doc-type-badge.xls {
  background: #DCFCE7;
  color: #16A34A;
}

.public-shell .doc-type-badge.img {
  background: #E0E7FF;
  color: #4F46E5;
}

.public-shell .doc-type-badge.file {
  background: var(--bg-surface);
  color: var(--text-secondary);
}

.public-shell .doc-meta-info strong {
  display: block;
  font-size: 0.88rem;
  color: var(--navy-dark);
}

.public-shell .doc-meta-info p {
  margin: 2px 0 0;
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.public-shell .doc-meta-info small {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.public-shell .btn-doc-download {
  padding: 6px 14px;
  background: var(--public-yellow);
  color: var(--navy-dark) !important;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.2s;
}

.public-shell .btn-doc-download:hover {
  background: var(--public-yellow-hover);
}

/* Reviews Panel */
.public-shell .reviews-content-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.public-shell .reviews-score-bar {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 18px 24px;
}

.public-shell .score-summary-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
}

.public-shell .score-large {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--navy-dark);
  line-height: 1;
}

.public-shell .score-stars {
  color: var(--gold);
  font-size: 1.15rem;
  letter-spacing: 2px;
}

.public-shell .score-summary-cell small {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.public-shell .score-breakdown-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.public-shell .progress-row {
  display: grid;
  grid-template-columns: 120px 1fr 40px;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.public-shell .progress-track {
  height: 6px;
  border-radius: 3px;
  background: var(--border-color);
  overflow: hidden;
}

.public-shell .progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--public-yellow);
}

.public-shell .reviews-feed-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
  padding-inline-end: 4px;
}

.public-shell .reviews-feed-list::-webkit-scrollbar {
  width: 4px;
}

.public-shell .reviews-feed-list::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.public-shell .review-item-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.public-shell .review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.public-shell .author-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.public-shell .author-box strong {
  font-size: 0.84rem;
  font-weight: 750;
  color: var(--navy-dark);
}

.public-shell .badge-verified {
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--green-bg);
  color: var(--green);
  font-weight: 650;
}

.public-shell .badge-variant {
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--gold-bg);
  color: var(--gold);
  font-weight: 650;
}

.public-shell .review-date {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.public-shell .review-title {
  margin: 2px 0 0;
  font-size: 0.86rem;
  font-weight: 750;
  color: var(--navy-dark);
}

.public-shell .review-text {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.public-shell .empty-reviews-state {
  padding: 2.5rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.86rem;
}

/* 6. Related Products Section */
.public-shell .related-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.public-shell .section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.public-shell .section-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy-dark);
}

.public-shell .related-grid-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.public-shell .related-product-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  position: relative;
  text-decoration: none;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.public-shell .related-product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--public-yellow);
}

.public-shell .card-featured-pill {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  background: var(--gold-bg);
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 750;
  padding: 2px 7px;
  border-radius: 12px;
  z-index: 1;
}

.public-shell .card-image-wrap {
  background: var(--bg-surface);
  border-radius: 4px;
  aspect-ratio: 1 / 0.85;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  overflow: hidden;
  padding: 8px;
}

.public-shell .card-image-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.public-shell .card-product-name {
  font-size: 0.84rem;
  font-weight: 750;
  margin: 0 0 6px;
  color: var(--navy-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
}

.public-shell .card-price-value {
  font-size: 0.82rem;
  color: var(--public-yellow);
  font-weight: 800;
  margin-top: auto;
}

/* Lightbox Zoom Modal */
.public-shell .product-lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(13, 27, 46, 0.85);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.public-shell .product-lightbox-modal {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  max-width: 700px;
  width: 100%;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
  display: flex;
  flex-direction: column;
}

.public-shell .lightbox-close-btn {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: #FFFFFF;
  color: var(--navy-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  z-index: 10;
}

.public-shell .lightbox-image-container {
  width: 100%;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  padding: 20px;
}

.public-shell .lightbox-image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.public-shell .lightbox-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: #FFFFFF;
  border-top: 1px solid var(--border-color);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy-dark);
}

.public-shell .lightbox-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.public-shell .lightbox-controls button {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: #FFFFFF;
  cursor: pointer;
  font-size: 14px;
}

/* Responsiveness */
@media (max-width: 960px) {
  .public-shell .product-top-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .public-shell .buybox-card {
    position: static;
  }
  .public-shell .related-grid-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .public-shell .documents-cards-grid {
    grid-template-columns: 1fr;
  }
  .public-shell .reviews-score-bar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .public-shell .spec-chips-grid {
    grid-template-columns: 1fr 1fr;
  }
  .public-shell .datasheet-table th {
    width: 38%;
    padding: 10px 12px;
  }
  .public-shell .datasheet-table td {
    padding: 10px 12px;
  }
  .public-shell .progress-row {
    grid-template-columns: 90px 1fr 35px;
  }
}

@media (max-width: 480px) {
  .public-shell .spec-chips-grid {
    grid-template-columns: 1fr;
  }
  .public-shell .related-grid-row {
    grid-template-columns: 1fr;
  }
  .public-shell .hero-cta-orange-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Redesigned Public Articles Catalog & Modern Article Cards
   ========================================================================== */
.public-shell .public-articles-page-wrapper {
  background: #fff;
  color: var(--public-navy);
  min-height: 80vh;
}
.public-shell .articles-hero {
  background: linear-gradient(115deg, #091e32 0%, #0d2843 60%, #15385b 100%);
}
.public-shell .articles-catalog-shell {
  padding-block-end: clamp(3rem, 5vw, 5rem);
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: start;
  gap: 28px;
}
.public-shell .articles-filter-sidebar {
  position: sticky;
  top: 96px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(8, 36, 58, 0.05);
  overflow: hidden;
}
.public-shell .articles-search-box {
  position: relative;
  margin: 14px;
}
.public-shell .articles-search-box input {
  width: 100%;
  height: 42px;
  padding-inline-start: 36px;
  padding-inline-end: 32px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--public-text);
  font-family: inherit;
  font-size: 0.72rem;
  transition: all 0.2s ease;
}
.public-shell .articles-search-box input:focus {
  border-color: var(--public-yellow);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(245, 196, 0, 0.18);
  outline: none;
}
.public-shell .articles-search-box i {
  position: absolute;
  inset-inline-start: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-style: normal;
  font-size: 1rem;
  pointer-events: none;
}
.public-shell .search-clear-btn {
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.public-shell .search-clear-btn:hover {
  background: #cbd5e1;
  color: #1e293b;
}
.public-shell .articles-results {
  min-width: 0;
}
.public-shell .articles-list-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

/* Modern Article Card */
.public-shell .modern-article-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(8, 36, 58, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.public-shell .modern-article-card:hover {
  transform: translateY(-5px);
  border-color: #cbd5e1;
  box-shadow: 0 12px 28px rgba(8, 36, 58, 0.09);
}
.public-shell .article-card-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9.5;
  background: #0f2742;
  overflow: hidden;
}
.public-shell .article-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.public-shell .modern-article-card:hover .article-card-media img {
  transform: scale(1.06);
}
.public-shell .article-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0d2843 0%, #15385b 100%);
  color: rgba(255, 255, 255, 0.4);
}
.public-shell .article-category-badge {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(13, 38, 64, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fbbf24;
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0;
  z-index: 2;
}
.public-shell .article-card-content {
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.public-shell .article-card-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  color: #64748b;
  font-size: 0.75rem;
  font-family: var(--font-family-num);
}
.public-shell .article-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.public-shell .article-meta-item svg {
  color: #94a3b8;
}
.public-shell .article-card-title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.public-shell .article-card-title a {
  color: var(--public-navy);
  text-decoration: none;
  transition: color 0.2s ease;
}
.public-shell .article-card-title a:hover {
  color: var(--public-yellow);
}
.public-shell .article-card-summary {
  margin: 0 0 16px;
  color: #52606d;
  font-size: 0.8125rem;
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.public-shell .article-card-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.public-shell .article-read-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--public-yellow);
  font-size: 0.8125rem;
  font-weight: 800;
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}
.public-shell .article-read-btn:hover {
  color: var(--public-yellow-hover, #d9ad00);
  gap: 9px;
}
.public-shell .article-read-btn .arrow-icon {
  transition: transform 0.2s ease;
}
.public-shell[data-culture="en"] .article-read-btn .arrow-icon {
  transform: rotate(180deg);
}

/* List View for Articles */
.public-shell .articles-list-grid.list-view {
  grid-template-columns: 1fr;
  gap: 18px;
}
.public-shell .articles-list-grid.list-view .modern-article-card {
  flex-direction: row;
  min-height: 190px;
}
.public-shell .articles-list-grid.list-view .article-card-media {
  flex: 0 0 250px;
  aspect-ratio: auto;
}
.public-shell .articles-list-grid.list-view .article-card-content {
  padding: 18px 24px;
}
.public-shell .articles-list-grid.list-view .article-card-title {
  font-size: 1.05rem;
}
.public-shell .articles-list-grid.list-view .article-card-summary {
  -webkit-line-clamp: 2;
}

/* Skeleton Loading */
.public-shell .article-list-skeleton {
  height: 340px;
  border-radius: 14px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: productSkeleton 1.2s linear infinite;
}
.public-shell .empty-articles {
  padding: 4rem 1rem;
  text-align: center;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
}
.public-shell .empty-articles b {
  font-size: 3rem;
  display: block;
  margin-bottom: 1rem;
}
.public-shell .empty-articles h2 {
  font-size: 1.2rem;
  color: var(--public-navy);
  margin-bottom: 0.5rem;
}
.public-shell .empty-articles p {
  color: #64748b;
  font-size: 0.8rem;
}

/* Responsive Media Queries */
@media (max-width: 1100px) {
  .public-shell .articles-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 850px) {
  .public-shell .articles-catalog-shell {
    display: block;
  }
  .public-shell .articles-filter-sidebar {
    position: fixed;
    z-index: 620;
    top: 0;
    right: 0;
    width: min(330px, 88vw);
    height: 100dvh;
    border-radius: 0;
    overflow-y: auto;
    transform: translateX(105%);
    transition: transform 0.2s ease;
  }
  .public-shell .articles-filter-sidebar.is-open {
    transform: translateX(0);
  }
  .public-shell[data-culture="en"] .articles-filter-sidebar {
    right: auto;
    left: 0;
    transform: translateX(-105%);
  }
  .public-shell[data-culture="en"] .articles-filter-sidebar.is-open {
    transform: translateX(0);
  }
  .public-shell .articles-list-grid.list-view .modern-article-card {
    flex-direction: row;
    min-height: 140px;
  }
  .public-shell .articles-list-grid.list-view .article-card-media {
    flex: 0 0 160px;
    aspect-ratio: auto;
  }
  .public-shell .articles-list-grid.list-view .article-card-content {
    padding: 12px 16px;
  }
}
@media (max-width: 680px) {
  /* Mobile Grid View: 2 columns */
  .public-shell .articles-list-grid:not(.list-view) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .public-shell .articles-list-grid:not(.list-view) .modern-article-card {
    border-radius: 12px;
  }
  .public-shell .articles-list-grid:not(.list-view) .article-card-media {
    aspect-ratio: 16 / 10;
  }
  .public-shell .articles-list-grid:not(.list-view) .article-card-content {
    padding: 10px 12px;
  }
  .public-shell .articles-list-grid:not(.list-view) .article-card-title {
    font-size: 0.88rem;
    line-height: 1.35;
    margin-bottom: 6px;
  }
  .public-shell .articles-list-grid:not(.list-view) .article-card-summary {
    display: none;
  }
  .public-shell .articles-list-grid:not(.list-view) .article-card-meta {
    gap: 6px;
    margin-bottom: 6px;
    font-size: 0.72rem;
  }
  .public-shell .articles-list-grid:not(.list-view) .article-read-btn {
    font-size: 0.76rem;
    padding: 3px 0;
  }

  /* Mobile List View: 1 single column full width */
  .public-shell .articles-list-grid.list-view {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .public-shell .articles-list-grid.list-view .modern-article-card {
    flex-direction: row;
    min-height: 120px;
  }
  .public-shell .articles-list-grid.list-view .article-card-media {
    flex: 0 0 130px;
    aspect-ratio: auto;
  }
  .public-shell .articles-list-grid.list-view .article-card-content {
    padding: 10px 14px;
  }
  .public-shell .articles-list-grid.list-view .article-card-title {
    font-size: 0.95rem;
  }
}
@media (max-width: 440px) {
  .public-shell .articles-list-grid.list-view .article-card-media {
    flex: 0 0 100px;
  }
  .public-shell .articles-list-grid.list-view .article-card-summary {
    -webkit-line-clamp: 1;
    font-size: 0.78rem;
  }
}

/* ==========================================================================
   Public Article Detail Page & Rich Content Typography / Tables / Badges
   ========================================================================== */
.public-shell .public-article-detail-page-wrapper {
  background: #ffffff;
  min-height: 80vh;
}
.public-shell .article-detail-hero {
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, #091e32 0%, #0d2843 60%, #15385b 100%);
}
.public-shell .article-detail-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: 2.8rem;
  max-width: 960px;
  margin-inline: auto;
}
.public-shell .article-detail-hero-content .article-hero-title {
  margin: 0 0 1.2rem;
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1.45;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  text-align: center;
}
.public-shell .article-detail-badges {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 0.5rem;
}

/* Navy & Yellow Badge */
.public-shell .article-navy-yellow-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(9, 30, 50, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  border: 1px solid rgba(245, 196, 0, 0.6);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.public-shell .article-navy-yellow-badge .badge-icon {
  color: var(--public-yellow);
  flex-shrink: 0;
}

.public-shell .article-detail-breadcrumb {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  min-height: 40px;
}
.public-shell .article-detail-breadcrumb .breadcrumb-current {
  color: var(--public-navy);
  max-width: 380px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
}
.public-shell .public-article-detail {
  max-width: 880px;
  margin-inline: auto;
  padding-block-end: clamp(3rem, 6vw, 6rem);
}

/* Glassmorphism Navy & Yellow Editorial Lead Summary Box */
.public-shell .article-detail-summary-lead {
  max-width: 880px;
  margin: 0 auto 2rem;
  padding: 18px 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(9, 30, 50, 0.94) 0%, rgba(13, 40, 67, 0.91) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(245, 196, 0, 0.38);
  box-shadow: 0 14px 34px -8px rgba(8, 36, 58, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  text-align: start;
  position: relative;
  overflow: hidden;
}
.public-shell .article-detail-summary-lead::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--public-yellow) 50%, transparent 100%);
  opacity: 0.85;
}
.public-shell .summary-lead-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding-bottom: 9px;
  margin-bottom: 12px;
  border-bottom: 1px dashed rgba(245, 196, 0, 0.25);
  color: var(--public-yellow);
  font-size: 0.8125rem;
  font-weight: 850;
  letter-spacing: 0;
}
.public-shell .summary-lead-label svg {
  color: var(--public-yellow);
  flex-shrink: 0;
}
.public-shell .article-detail-summary-lead p {
  margin: 0;
  color: #fef9c3;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 2.05;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Rich Article Content Typography */
.public-shell .article-rich-content {
  color: #1e293b;
  font-size: 1.02rem;
  line-height: 2.2;
}
.public-shell .article-rich-content p {
  margin-block: 1.25rem;
  color: #334155;
}
.public-shell .article-rich-content h2 {
  font-size: 1.45rem;
  font-weight: 850;
  color: var(--public-navy);
  margin-top: 2.6rem;
  margin-bottom: 1rem;
  padding-inline-start: 14px;
  border-inline-start: 4px solid var(--public-yellow);
}
.public-shell .article-rich-content h3 {
  font-size: 1.22rem;
  font-weight: 800;
  color: #1e293b;
  margin-top: 2rem;
  margin-bottom: 0.8rem;
}
.public-shell .article-rich-content h4 {
  font-size: 1.08rem;
  font-weight: 750;
  color: #334155;
  margin-top: 1.5rem;
  margin-bottom: 0.6rem;
}
.public-shell .article-rich-content ul {
  list-style: none;
  padding-inline-start: 0;
  margin-block: 1.4rem;
}
.public-shell .article-rich-content ul > li {
  position: relative;
  padding-inline-start: 28px;
  margin-block: 0.6rem;
  color: #334155;
  line-height: 2;
}
.public-shell .article-rich-content ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 6px;
  top: 0.68em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--public-yellow);
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px rgba(13, 40, 67, 0.12);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.public-shell .article-rich-content ul > li:hover::before {
  transform: rotate(45deg) scale(1.2);
  background: #d9ad00;
}
.public-shell .article-rich-content ol {
  padding-inline-start: 1.8rem;
  margin-block: 1.4rem;
}
.public-shell .article-rich-content ol > li {
  margin-block: 0.6rem;
  padding-inline-start: 6px;
  color: #334155;
  line-height: 2;
}
.public-shell .article-rich-content ol > li::marker {
  color: var(--public-navy);
  font-weight: 800;
}
.public-shell .article-rich-content a {
  color: var(--public-navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--public-yellow);
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}
.public-shell .article-rich-content a:hover {
  color: #b45309;
}
.public-shell .article-rich-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2rem auto;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Modern Tables Template */
.public-shell .article-rich-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 2.2rem 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 18px rgba(8, 36, 58, 0.05);
  font-size: 0.88rem;
}
.public-shell .article-rich-content thead tr {
  background: linear-gradient(135deg, #091e32 0%, #0d2843 100%);
  color: #ffffff;
}
.public-shell .article-rich-content th {
  padding: 13px 18px;
  font-weight: 800;
  text-align: start;
  border-bottom: 3px solid var(--public-yellow);
  font-size: 0.88rem;
  white-space: nowrap;
}
.public-shell .article-rich-content td {
  padding: 12px 18px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  font-size: 0.87rem;
  line-height: 1.6;
}
.public-shell .article-rich-content tbody tr:last-child td {
  border-bottom: 0;
}
.public-shell .article-rich-content tbody tr:nth-child(even) {
  background: #f8fafc;
}
.public-shell .article-rich-content tbody tr:hover {
  background: #fdfcee;
  transition: background-color 0.15s ease;
}

/* Important Notes & Callout Boxes */
.public-shell .article-rich-content blockquote,
.public-shell .article-rich-content .callout-box,
.public-shell .article-rich-content .note-box {
  margin: 2rem 0;
  padding: 18px 24px;
  background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-inline-start: 5px solid var(--public-yellow);
  border-radius: 10px;
  color: var(--public-navy);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.95;
  box-shadow: 0 3px 12px rgba(8, 36, 58, 0.03);
}
.public-shell .article-rich-content blockquote p,
.public-shell .article-rich-content .callout-box p,
.public-shell .article-rich-content .note-box p {
  margin: 0;
  color: inherit;
}
.public-shell .article-rich-content .callout-tip,
.public-shell .article-rich-content .note-tip {
  border-inline-start-color: #10b981;
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #14532d;
}
.public-shell .article-rich-content .callout-warning,
.public-shell .article-rich-content .note-warning {
  border-inline-start-color: #f59e0b;
  background: #fffbeb;
  border-color: #fde68a;
  color: #78350f;
}
.public-shell .article-rich-content .callout-info,
.public-shell .article-rich-content .note-info {
  border-inline-start-color: var(--public-yellow);
  background: #fdfcee;
  border-color: #fef08a;
  color: #713f12;
}

/* Tags & Footer Navigation */
.public-shell .article-detail-tags-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 3.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid #e2e8f0;
}
.public-shell .tags-heading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--public-navy);
}
.public-shell .tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.public-shell .article-tag-item {
  padding: 4px 12px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid #e2e8f0;
}
.public-shell .article-detail-actions {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
}
.public-shell .article-detail-actions .outline-navy {
  border: 1.5px solid var(--public-navy);
  color: var(--public-navy);
  background: transparent;
  padding: 10px 24px;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}
.public-shell .article-detail-actions .outline-navy:hover {
  background: var(--public-navy);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(13, 40, 67, 0.2);
}
.public-shell .article-detail-actions .outline-navy .back-icon {
  transition: transform 0.2s ease;
}
.public-shell[data-culture="en"] .article-detail-actions .outline-navy .back-icon {
  transform: rotate(180deg);
}

/* ==========================================================================
   Public About Us Page Styling (Glassmorphic Stats, Distinct Cards, Carousels)
   ========================================================================== */
.public-shell .public-about-page {
  background: #ffffff;
  min-height: 80vh;
}
.public-shell .about-hero {
  min-height: 320px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 95px;
}
.public-shell .about-hero h1 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.public-shell .about-hero-subtitle {
  margin-top: 0.8rem;
  font-size: clamp(0.95rem, 1.35vw, 1.18rem);
  color: #d1dce5;
  max-width: 720px;
  line-height: 1.7;
  margin-inline: auto;
}
.public-shell .about-content-container {
  padding-block-end: clamp(3.5rem, 6vw, 6.5rem);
}

/* Glassmorphic Key Stats Strip - Exactly Centered Across Hero & Body */
.public-shell .about-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-block: -95px 4.5rem;
  position: relative;
  z-index: 25;
}
.public-shell .about-stat-card.glass-stat {
  background: linear-gradient(135deg, rgba(9, 30, 50, 0.94) 0%, rgba(13, 40, 67, 0.88) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(245, 196, 0, 0.35);
  border-radius: 22px;
  padding: 26px 20px 22px;
  text-align: center;
  box-shadow: 0 20px 45px rgba(8, 36, 58, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.18);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}
.public-shell .about-stat-card.glass-stat::before {
  content: "";
  position: absolute;
  top: -25px;
  inset-inline-end: -25px;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 196, 0, 0.25) 0%, transparent 70%);
  pointer-events: none;
}
.public-shell .about-stat-card.glass-stat:hover {
  transform: translateY(-8px);
  border-color: var(--public-yellow);
  box-shadow: 0 26px 55px rgba(8, 36, 58, 0.36), 0 0 30px rgba(245, 196, 0, 0.22);
}
.public-shell .about-stat-card .stat-icon-wrapper {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(245, 196, 0, 0.2) 0%, rgba(245, 196, 0, 0.06) 100%);
  border: 1px solid rgba(245, 196, 0, 0.4);
  color: var(--public-yellow);
  display: inline-grid;
  place-items: center;
  margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(245, 196, 0, 0.15);
  transition: transform 0.3s ease;
}
.public-shell .about-stat-card:hover .stat-icon-wrapper {
  transform: scale(1.08) rotate(6deg);
}
.public-shell .about-stat-card .stat-number {
  font-size: clamp(2rem, 2.7vw, 2.6rem);
  font-weight: 950;
  color: #ffffff;
  line-height: 1.15;
  font-family: var(--font-family-num);
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.public-shell .about-stat-card .counter-val {
  display: inline-block;
  min-width: 45px;
}
.public-shell .about-stat-card .stat-unit {
  color: var(--public-yellow);
  font-size: 1.6rem;
  margin-inline-start: 4px;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(245, 196, 0, 0.4);
}
.public-shell .about-stat-card .stat-label {
  font-size: 0.86rem;
  font-weight: 750;
  color: #cbd5e1;
  margin-top: 8px;
  line-height: 1.4;
}

/* Company Story, Mission & Vision Section (Distinct Custom Cards) */
.public-shell .about-story-section {
  margin-block-end: 4.5rem;
}
.public-shell .about-story-grid {
  display: grid;
  grid-template-columns: 1.28fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.public-shell .about-story-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-inline-start: 4px solid var(--public-yellow);
  border-radius: 22px;
  padding: 32px 30px;
  box-shadow: 0 8px 30px rgba(8, 36, 58, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.public-shell .story-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 850;
  color: #92400e;
  background: rgba(245, 196, 0, 0.14);
  border: 1px solid rgba(245, 196, 0, 0.4);
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.public-shell .about-story-header h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 900;
  color: var(--public-navy);
  margin: 0 0 16px;
}
.public-shell .about-story-body p {
  font-size: 0.98rem;
  line-height: 2.15;
  color: #334155;
  margin: 0;
}

.public-shell .about-cards-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
}
.public-shell .card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* Mission Card (Deep Navy) */
.public-shell .mission-card-navy {
  background: linear-gradient(135deg, #091e32 0%, #0d2843 100%);
  border-radius: 22px;
  padding: 26px 26px 22px;
  border: 1px solid rgba(245, 196, 0, 0.35);
  box-shadow: 0 10px 30px rgba(9, 30, 50, 0.2);
  color: #ffffff;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.public-shell .mission-card-navy:hover {
  transform: translateY(-4px);
  border-color: var(--public-yellow);
  box-shadow: 0 16px 36px rgba(9, 30, 50, 0.28);
}
.public-shell .mission-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(245, 196, 0, 0.15);
  color: var(--public-yellow);
  border: 1px solid rgba(245, 196, 0, 0.4);
  display: grid;
  place-items: center;
  box-shadow: 0 0 16px rgba(245, 196, 0, 0.2);
}
.public-shell .mission-tag {
  background: var(--public-yellow);
  color: var(--public-navy);
  font-weight: 850;
  font-size: 0.74rem;
  padding: 4px 14px;
  border-radius: 999px;
}
.public-shell .mission-card-navy .card-content h3 {
  font-size: 1.15rem;
  font-weight: 850;
  color: #ffffff;
  margin: 0 0 8px;
}
.public-shell .mission-card-navy .card-content p {
  font-size: 0.9rem;
  color: #cbd5e1;
  line-height: 1.85;
  margin: 0;
}

/* Vision Card (Warm Amber Glow) */
.public-shell .vision-card-amber {
  background: linear-gradient(135deg, #fefce8 0%, #fffbeb 60%, #fef3c7 100%);
  border-radius: 22px;
  padding: 26px 26px 22px;
  border: 1.5px solid rgba(245, 196, 0, 0.55);
  box-shadow: 0 10px 30px rgba(245, 196, 0, 0.12);
  color: #091e32;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.public-shell .vision-card-amber:hover {
  transform: translateY(-4px);
  border-color: #f59e0b;
  box-shadow: 0 16px 36px rgba(245, 196, 0, 0.22);
}
.public-shell .vision-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #091e32;
  color: var(--public-yellow);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(9, 30, 50, 0.2);
}
.public-shell .vision-tag {
  background: #091e32;
  color: #ffffff;
  font-weight: 850;
  font-size: 0.74rem;
  padding: 4px 14px;
  border-radius: 999px;
}
.public-shell .vision-card-amber .card-content h3 {
  font-size: 1.15rem;
  font-weight: 850;
  color: #091e32;
  margin: 0 0 8px;
}
.public-shell .vision-card-amber .card-content p {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.85;
  margin: 0;
}

/* Compact Section Header with Controls */
.public-shell .about-section-header-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.public-shell .heading-with-icon {
  display: flex;
  align-items: center;
  gap: 12px;
}
.public-shell .heading-accent-dot {
  width: 8px;
  height: 26px;
  border-radius: 4px;
  background: var(--public-yellow);
}
.public-shell .heading-with-icon h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 900;
  color: var(--public-navy);
  margin: 0;
}
.public-shell .about-carousel-controls {
  display: flex;
  gap: 8px;
}
.public-shell .carousel-control-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: var(--public-navy);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.public-shell .carousel-control-btn:hover {
  background: var(--public-yellow);
  border-color: var(--public-yellow);
  color: var(--public-navy);
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(245, 196, 0, 0.35);
}

/* Gallery Slideshow Carousel */
.public-shell .about-gallery-carousel-section {
  margin-block: 4.5rem;
}
.public-shell .about-gallery-carousel-track {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-block: 28px 34px;
  padding-inline: max(40px, calc(50% - 170px));
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.public-shell .about-gallery-carousel-track::-webkit-scrollbar {
  display: none;
}
.public-shell .about-gallery-slide {
  flex: 0 0 340px;
  max-width: 340px;
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 20px rgba(8, 36, 58, 0.05);
  cursor: pointer;
  scroll-snap-align: center;
  transform: scale(0.88) translateZ(0);
  opacity: 0.65;
  will-change: transform, opacity, box-shadow;
  backface-visibility: hidden;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}
.public-shell .about-gallery-slide.is-center,
.public-shell .about-gallery-slide:hover {
  transform: scale(1.12) translateY(-8px) translateZ(0);
  opacity: 1;
  border-color: var(--public-yellow);
  box-shadow: 0 24px 50px rgba(8, 36, 58, 0.28), 0 0 30px rgba(247, 185, 0, 0.35);
  z-index: 20;
}
.public-shell .gallery-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #091e32;
}
.public-shell .gallery-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s ease-out;
}
.public-shell .about-gallery-slide.is-center .gallery-image-wrapper img,
.public-shell .about-gallery-slide:hover .gallery-image-wrapper img {
  transform: scale(1.06);
}
.public-shell .gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 30, 50, 0.88) 0%, rgba(9, 30, 50, 0.2) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  opacity: 0.92;
  transition: opacity 0.2s ease;
}
.public-shell .gallery-zoom-btn {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--public-navy);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: scale(0.85);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.public-shell .about-gallery-slide.is-center .gallery-zoom-btn,
.public-shell .about-gallery-slide:hover .gallery-zoom-btn {
  transform: scale(1);
  background: var(--public-yellow);
  color: var(--public-navy);
}
.public-shell .gallery-item-title {
  color: #ffffff;
  font-size: 0.96rem;
  font-weight: 800;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.public-shell .gallery-item-caption {
  padding: 12px 18px;
  margin: 0;
  font-size: 0.84rem;
  color: #64748b;
  line-height: 1.65;
}

/* Team Single-Row Slideshow Carousel (Dark Navy Background Theme) */
.public-shell .about-team-carousel-section {
  margin-block: 5rem;
  background: linear-gradient(135deg, #091e32 0%, #0d2843 55%, #123356 100%);
  border-radius: 28px;
  padding: 42px 36px 48px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(8, 36, 58, 0.22);
}
.public-shell .about-team-carousel-section::before {
  content: "";
  position: absolute;
  top: -60px;
  inset-inline-end: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 196, 0, 0.16) 0%, transparent 70%);
  pointer-events: none;
}
.public-shell .about-team-carousel-section::after {
  content: "";
  position: absolute;
  bottom: -80px;
  inset-inline-start: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 40, 67, 0.6) 0%, transparent 70%);
  pointer-events: none;
}
.public-shell .about-team-carousel-section .heading-with-icon h2 {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.public-shell .about-team-carousel-track {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-block: 28px 34px;
  padding-inline: max(40px, calc(50% - 140px));
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  z-index: 5;
}
.public-shell .about-team-carousel-track::-webkit-scrollbar {
  display: none;
}
.public-shell .about-team-slide {
  flex: 0 0 280px;
  max-width: 280px;
  cursor: pointer;
  scroll-snap-align: center;
  transform: scale(0.92) translateZ(0);
  opacity: 0.85;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}
.public-shell .about-team-slide.is-center,
.public-shell .about-team-slide:hover {
  transform: scale(1.12) translateY(-8px) translateZ(0);
  opacity: 1;
  z-index: 20;
}
.public-shell .about-team-slide .team-member-card {
  background: #0f243c;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 22px;
  padding: 28px 20px 22px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.45s ease, border-color 0.45s ease, background 0.45s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.public-shell .about-team-slide.is-center .team-member-card,
.public-shell .about-team-slide:hover .team-member-card {
  border-color: var(--public-yellow);
  background: #14304f;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55), 0 0 32px rgba(247, 185, 0, 0.35);
}
.public-shell .member-avatar-wrapper {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
}
.public-shell .member-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.public-shell .member-avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #091e32 0%, #0d2843 100%);
  color: var(--public-yellow);
  font-size: 2.1rem;
  font-weight: 900;
  display: grid;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.public-shell .avatar-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px dashed rgba(245, 196, 0, 0.6);
  pointer-events: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.public-shell .about-team-slide.is-center .avatar-ring,
.public-shell .about-team-slide:hover .avatar-ring {
  border-color: var(--public-yellow);
  border-style: solid;
  box-shadow: 0 0 14px rgba(245, 196, 0, 0.6);
}
.public-shell .member-name {
  font-size: 1.18rem;
  font-weight: 850;
  color: #ffffff;
  margin: 0 0 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.public-shell .member-role-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--public-yellow);
  color: var(--public-navy);
  font-size: 0.8rem;
  font-weight: 850;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.public-shell .member-bio {
  font-size: 0.88rem;
  color: #f1f5f9;
  font-weight: 500;
  line-height: 1.7;
  margin: 0 0 16px;
  min-height: 42px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.public-shell .member-contacts {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.public-shell .contact-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: all 0.2s ease;
}
.public-shell .contact-icon-btn:hover {
  background: var(--public-yellow);
  color: var(--public-navy);
  border-color: var(--public-yellow);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(245, 196, 0, 0.45);
}

/* CTA Card */
.public-shell .about-cta-card {
  margin-top: 4.5rem;
  background: linear-gradient(115deg, #091e32 0%, #0d2843 60%, #15385b 100%);
  border-radius: 22px;
  padding: 44px;
  color: #ffffff;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(8, 36, 58, 0.18);
}
.public-shell .about-cta-card::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 40%;
  height: 6px;
  background: var(--public-yellow);
}
.public-shell .about-cta-card h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 900;
  margin: 0 0 10px;
  color: #ffffff;
}
.public-shell .about-cta-card p {
  font-size: 0.98rem;
  color: #cbd5e1;
  max-width: 680px;
  margin: 0 auto 26px;
  line-height: 1.8;
}
.public-shell .about-cta-card .cta-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Lightbox Modal */
.public-shell .about-lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(9, 30, 50, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  place-items: center;
  padding: 20px;
  cursor: zoom-out;
}
.public-shell .about-lightbox-dialog {
  position: relative;
  max-width: min(960px, 92vw);
  max-height: 85vh;
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.public-shell .about-lightbox-dialog img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.public-shell .lightbox-close-btn {
  position: absolute;
  top: -46px;
  inset-inline-end: 0;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.public-shell .lightbox-close-btn:hover {
  background: var(--public-yellow);
  color: var(--public-navy);
}
.public-shell .lightbox-caption {
  margin-top: 12px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .public-shell .about-hero {
    min-height: 280px;
    padding-bottom: 70px;
  }
  .public-shell .about-stats-strip {
    grid-template-columns: repeat(2, 1fr);
    margin-block: -70px 3.5rem;
  }
  .public-shell .about-story-grid {
    grid-template-columns: 1fr;
  }
  .public-shell .about-gallery-slide {
    flex: 0 0 300px;
    max-width: 300px;
  }
  .public-shell .about-team-slide {
    flex: 0 0 250px;
    max-width: 250px;
  }
}
@media (max-width: 580px) {
  .public-shell .about-hero {
    min-height: 250px;
    padding-bottom: 50px;
  }
  .public-shell .about-stats-strip {
    grid-template-columns: 1fr;
    margin-block: -50px 2.5rem;
  }
  .public-shell .about-gallery-slide {
    flex: 0 0 260px;
    max-width: 260px;
  }
  .public-shell .about-team-slide {
    flex: 0 0 240px;
    max-width: 240px;
  }
  .public-shell .about-cta-card {
    padding: 26px 18px;
  }
}

/* ==========================================================================
   PUBLIC CONTACT US PAGE (Industrial Navy & Logo Yellow Theme)
   ========================================================================== */
.public-shell .public-contact-page {
  padding-bottom: 5rem;
}
.public-shell .contact-hero {
  position: relative;
  min-height: 310px;
  background: linear-gradient(135deg, #091e32 0%, #0d2843 55%, #15385b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 16px 85px;
  overflow: hidden;
}
.public-shell .contact-hero::before {
  content: "";
  position: absolute;
  top: -60px;
  inset-inline-start: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 196, 0, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.public-shell .contact-hero::after {
  content: "";
  position: absolute;
  bottom: -40px;
  inset-inline-end: -40px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 40, 67, 0.6) 0%, transparent 70%);
  pointer-events: none;
}
.public-shell .contact-hero .products-list-hero-content {
  position: relative;
  z-index: 2;
  max-width: 860px;
}
.public-shell .contact-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 16px;
}
.public-shell .contact-hero-badge .pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  animation: contactPulse 2s infinite;
}
@keyframes contactPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.public-shell .contact-hero h1 {
  font-size: 2.15rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 12px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.public-shell .contact-hero-subtitle {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto;
}

.public-shell .contact-content-container {
  position: relative;
  z-index: 5;
}

/* 4 Floating Glassmorphic Channel Cards */
.public-shell .contact-channels-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-block: -65px 4rem;
}
.public-shell .contact-channel-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px 20px;
  box-shadow: 0 12px 32px rgba(8, 36, 58, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}
.public-shell .contact-channel-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 45px rgba(8, 36, 58, 0.14);
  border-color: rgba(245, 196, 0, 0.6);
}
.public-shell .contact-channel-card.highlight-whatsapp {
  border-color: rgba(16, 185, 129, 0.35);
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}
.public-shell .contact-channel-card.highlight-whatsapp:hover {
  border-color: #10b981;
  box-shadow: 0 20px 45px rgba(16, 185, 129, 0.18);
}
.public-shell .channel-icon-wrapper {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 2px;
}
.public-shell .channel-icon-wrapper.phone {
  background: rgba(9, 30, 50, 0.08);
  color: var(--public-navy);
}
.public-shell .channel-icon-wrapper.whatsapp {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.public-shell .channel-icon-wrapper.email {
  background: rgba(245, 196, 0, 0.14);
  color: #b45309;
}
.public-shell .channel-icon-wrapper.hours {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}
.public-shell .channel-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 4px;
}
.public-shell .channel-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: #091e32;
  margin-bottom: 8px;
}
.public-shell .channel-numbers {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.public-shell .channel-link {
  font-size: 1.15rem;
  font-weight: 800;
  color: #091e32;
  text-decoration: none;
  font-family: var(--font-family-num);
  letter-spacing: 0;
  transition: color 0.2s ease;
}
.public-shell .channel-link:hover {
  color: #d97706;
}
.public-shell .channel-alt {
  font-size: 0.88rem;
  color: #64748b;
  font-weight: 600;
}
.public-shell .channel-text {
  font-size: 0.86rem;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}
.public-shell .channel-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.public-shell .channel-action-btn.phone {
  background: #091e32;
  color: #ffffff;
}
.public-shell .channel-action-btn.phone:hover {
  background: #15385b;
  box-shadow: 0 4px 14px rgba(9, 30, 50, 0.25);
}
.public-shell .channel-action-btn.whatsapp {
  background: #10b981;
  color: #ffffff;
}
.public-shell .channel-action-btn.whatsapp:hover {
  background: #059669;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}
.public-shell .channel-action-btn.email {
  background: rgba(9, 30, 50, 0.06);
  color: #091e32;
  border: 1px solid #e2e8f0;
}
.public-shell .channel-action-btn.email:hover {
  background: var(--public-yellow);
  color: #091e32;
  border-color: var(--public-yellow);
}
.public-shell .channel-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  width: fit-content;
}
.public-shell .channel-status-pill.open {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.public-shell .channel-status-pill .status-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
}

/* 2-Column Main Section: Interactive Form + Map & Physical Address */
.public-shell .contact-main-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  margin-block: 4.5rem;
}
.public-shell .contact-form-card,
.public-shell .contact-map-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 26px;
  padding: 36px 32px;
  box-shadow: 0 10px 35px rgba(8, 36, 58, 0.06);
}
.public-shell .card-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f1f5f9;
  color: #475569;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  margin-bottom: 12px;
}
.public-shell .card-header-badge .badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #091e32;
}
.public-shell .card-header-badge .badge-dot.yellow {
  background: var(--public-yellow);
}
.public-shell .contact-form-card h2,
.public-shell .contact-map-card h2 {
  font-size: 1.45rem;
  font-weight: 900;
  color: #091e32;
  margin-bottom: 8px;
}
.public-shell .form-desc {
  font-size: 0.92rem;
  color: #64748b;
  line-height: 1.65;
  margin-bottom: 24px;
}

/* Form Styling */
.public-shell .contact-form-fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.public-shell .form-row.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.public-shell .form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.public-shell .form-group label {
  font-size: 0.86rem;
  font-weight: 700;
  color: #334155;
}
.public-shell .required-star {
  color: #ef4444;
}
.public-shell .input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}
.public-shell .input-with-icon svg {
  position: absolute;
  inset-inline-start: 14px;
  color: #94a3b8;
  pointer-events: none;
}
.public-shell .input-with-icon input,
.public-shell .input-with-icon select,
.public-shell .form-group textarea {
  width: 100%;
  padding: 12px 14px;
  padding-inline-start: 42px;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  font-size: 0.92rem;
  color: #0f172a;
  background: #ffffff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
}
.public-shell .form-group textarea {
  padding-inline-start: 14px;
  resize: vertical;
  min-height: 110px;
}
.public-shell .input-with-icon input:focus,
.public-shell .input-with-icon select:focus,
.public-shell .form-group textarea:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3.5px rgba(245, 158, 11, 0.18);
}
.public-shell .contact-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #f5c400 0%, #eab308 100%);
  color: #091e32;
  font-size: 0.98rem;
  font-weight: 800;
  padding: 14px 28px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(245, 196, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: 6px;
}
.public-shell .contact-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(245, 196, 0, 0.45);
}
.public-shell .contact-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}
.public-shell .btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(9, 30, 50, 0.3);
  border-top-color: #091e32;
  border-radius: 50%;
  animation: contactSpin 0.7s linear infinite;
}
@keyframes contactSpin {
  to { transform: rotate(360deg); }
}

/* Success Alert */
.public-shell .contact-success-alert {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.public-shell .contact-success-alert .alert-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #10b981;
  color: #ffffff;
  display: grid;
  place-items: center;
}
.public-shell .contact-success-alert h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #065f46;
  margin: 0;
}
.public-shell .contact-success-alert p {
  font-size: 0.92rem;
  color: #166534;
  margin: 0;
}
.public-shell .alert-reset-btn {
  margin-top: 8px;
  background: #065f46;
  color: #ffffff;
  border: none;
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

/* Map Card Details */
.public-shell .address-box-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px 18px;
  margin-block: 16px 20px;
}
.public-shell .address-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(9, 30, 50, 0.08);
  color: #091e32;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.public-shell .address-text-wrap strong {
  display: block;
  font-size: 0.94rem;
  color: #0f172a;
  line-height: 1.6;
  margin-bottom: 4px;
}
.public-shell .address-sub {
  font-size: 0.8rem;
  color: #64748b;
}
.public-shell .map-wrapper-card {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  margin-bottom: 20px;
}
.public-shell .map-action-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
.public-shell .map-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #091e32;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.public-shell .map-nav-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: translateY(-2px);
}
.public-shell .map-nav-btn.google {
  color: #1a73e8;
  border-color: rgba(26, 115, 232, 0.25);
  background: rgba(26, 115, 232, 0.04);
}
.public-shell .map-nav-btn.neshan {
  color: #059669;
  border-color: rgba(5, 150, 105, 0.25);
  background: rgba(5, 150, 105, 0.04);
}
.public-shell .map-nav-btn.balad {
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.25);
  background: rgba(245, 158, 11, 0.04);
}
.public-shell .map-nav-btn.copy {
  color: #475569;
  border-color: #e2e8f0;
  background: #f8fafc;
}

/* Social Media Strip */
.public-shell .contact-social-strip {
  margin-block: 4.5rem;
  background: linear-gradient(135deg, #091e32 0%, #0d2843 100%);
  border-radius: 24px;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 16px 40px rgba(8, 36, 58, 0.18);
}
.public-shell .social-strip-header {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
}
.public-shell .social-strip-header h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
}
.public-shell .social-links-grid {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.public-shell .social-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.public-shell .social-pill:hover {
  transform: translateY(-2px);
  background: var(--public-yellow);
  color: var(--public-navy);
  border-color: var(--public-yellow);
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
  .public-shell .contact-channels-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-block: -50px 3.5rem;
  }
  .public-shell .contact-main-grid {
    grid-template-columns: 1fr;
  }
  .public-shell .contact-social-strip {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
  }
}
@media (max-width: 640px) {
  .public-shell .contact-channels-grid {
    grid-template-columns: 1fr;
    margin-block: -40px 2.5rem;
  }
  .public-shell .contact-hero h1 {
    font-size: 1.65rem;
  }
  .public-shell .form-row.two-cols {
    grid-template-columns: 1fr;
  }
  .public-shell .map-action-buttons {
    grid-template-columns: 1fr;
  }
  .public-shell .contact-form-card,
  .public-shell .contact-map-card {
    padding: 24px 18px;
  }
}

/* ==========================================================================
   Public Catalogs & Documents Portal Styles
   ========================================================================== */
.public-shell .public-catalogs-page {
  background: #f8fafc;
  color: var(--public-navy);
  min-height: 85vh;
}

.public-shell .catalogs-hero {
  position: relative;
  height: 160px;
  background: linear-gradient(135deg, #091a2e 0%, #132844 50%, #1e3a5f 100%);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
}

.public-shell .catalogs-hero img {
  position: absolute;
  z-index: -2;
  inset-inline-start: 0;
  top: 0;
  width: 45%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.65);
}

.public-shell .catalogs-hero .products-list-hero-overlay {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(9, 26, 46, 0.75) 30%, rgba(9, 26, 46, 0.95) 60%, #091a2e 100%);
}

.public-shell .catalogs-hero h1 {
  color: #fff;
  font-size: clamp(1.4rem, 2.2vw, 1.95rem);
  font-weight: 850;
  margin-bottom: 6px;
}

.public-shell .catalogs-hero p {
  color: #cbd5e1;
  font-size: 0.875rem;
  max-width: 650px;
  line-height: 1.6;
}

/* Document Grid */
.public-shell .catalog-documents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 22px;
  margin-bottom: 2.5rem;
}

/* Document Card v3 - Premium Modern Card */
.public-shell .document-card-v3 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 16px rgba(13, 27, 46, 0.04);
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.public-shell .document-card-v3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: background 0.24s ease;
}

.public-shell .document-card-v3:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(13, 27, 46, 0.09);
  border-color: #cbd5e1;
}

.public-shell .document-card-v3:hover::before {
  background: var(--public-yellow);
}

/* Document Top Meta */
.public-shell .document-top-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.public-shell .document-format-badge {
  font-size: 0.72rem;
  font-weight: 850;
  padding: 3.5px 9px;
  border-radius: 7px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.public-shell .document-format-badge.format-pdf {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

.public-shell .document-format-badge.format-xls {
  background: #dcfce7;
  color: #16a34a;
  border: 1px solid #86efac;
}

.public-shell .document-format-badge.format-doc {
  background: #f3e8ff;
  color: #9333ea;
  border: 1px solid #d8b4fe;
}

.public-shell .document-format-badge.format-img {
  background: #e0f2fe;
  color: #0284c7;
  border: 1px solid #7dd3fc;
}

.public-shell .document-format-badge.format-file {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.public-shell .document-type-pill {
  font-size: 0.73rem;
  font-weight: 750;
  padding: 3.5px 9px;
  border-radius: 7px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}

.public-shell .document-type-pill.type-catalog {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}

.public-shell .document-type-pill.type-pricelist {
  background: #ecfdf5;
  color: #065f46;
  border-color: #a7f3d0;
}

.public-shell .document-type-pill.type-datasheet {
  background: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe;
}

.public-shell .document-type-pill.type-certificate {
  background: #faf5ff;
  color: #6b21a8;
  border-color: #e9d5ff;
}

.public-shell .document-version-tag {
  font-size: 0.7rem;
  font-weight: 650;
  color: #64748b;
  font-family: var(--font-family-num);
  background: #f8fafc;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid #e2e8f0;
  margin-inline-start: auto;
}

/* Document Body */
.public-shell .document-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.public-shell .document-title {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.55;
  margin: 0 0 8px;
}

.public-shell .document-title a {
  color: var(--public-navy);
  text-decoration: none;
  transition: color 0.18s ease;
}

.public-shell .document-title a:hover {
  color: #0284c7;
}

.public-shell .document-desc {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Associated Product Strip */
.public-shell .doc-product-strip {
  background: #f8fafc;
  border: 1px solid #edf2f7;
  border-radius: 10px;
  padding: 8px 12px;
  margin-top: auto;
  margin-bottom: 14px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.public-shell .doc-product-strip:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.public-shell .doc-product-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.public-shell .doc-product-thumb {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 7px;
  background: #fff;
  border: 1px solid #e2e8f0;
  padding: 2px;
  flex-shrink: 0;
}

.public-shell .doc-product-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 7px;
  background: #e2e8f0;
  color: #94a3b8;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.public-shell .doc-product-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.public-shell .doc-product-label {
  font-size: 0.68rem;
  color: #94a3b8;
}

.public-shell .doc-product-name {
  font-size: 0.8rem;
  font-weight: 750;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.public-shell .doc-product-arrow {
  font-size: 1.1rem;
  color: #94a3b8;
  transition: transform 0.2s ease;
}

.public-shell .doc-product-link:hover .doc-product-arrow {
  transform: translateX(-3px);
  color: var(--public-navy);
}

/* Document Footer */
.public-shell .document-footer {
  border-top: 1px solid #f1f5f9;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.public-shell .document-meta-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #64748b;
  font-family: var(--font-family-num);
}

.public-shell .doc-size-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 650;
}

.public-shell .doc-brand-text {
  background: #f1f5f9;
  padding: 2px 7px;
  border-radius: 5px;
  font-weight: 650;
  color: #475569;
  font-size: 0.72rem;
}

.public-shell .doc-cat-text {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 2px 7px;
  border-radius: 5px;
  font-weight: 600;
  color: #64748b;
  font-size: 0.72rem;
}

.public-shell .doc-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--public-yellow);
  color: #071a2d !important;
  border: 1px solid rgba(247, 185, 0, 0.7);
  border-radius: 9px;
  font-size: 0.8125rem;
  font-weight: 850;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 3px 8px rgba(247, 185, 0, 0.28);
}

.public-shell .doc-download-btn:hover {
  background: #f59e0b;
  border-color: #f59e0b;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(247, 185, 0, 0.42);
}

/* List View */
.public-shell .catalog-documents-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 2.5rem;
}

.public-shell .document-list-row {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 2px 10px rgba(13, 27, 46, 0.03);
  transition: all 0.2s ease;
}

.public-shell .document-list-row:hover {
  border-color: #cbd5e1;
  box-shadow: 0 8px 20px rgba(13, 27, 46, 0.06);
  transform: translateY(-2px);
}

.public-shell .document-format-badge.list-badge {
  font-size: 0.82rem;
  padding: 10px 14px;
  border-radius: 9px;
}

.public-shell .doc-list-main {
  flex: 1;
  min-width: 0;
}

.public-shell .document-list-title {
  font-size: 0.95rem;
  font-weight: 800;
  margin: 0 0 5px;
}

.public-shell .document-list-title a {
  color: var(--public-navy);
  text-decoration: none;
}

.public-shell .document-list-title a:hover {
  color: #0284c7;
}

.public-shell .doc-list-product {
  font-size: 0.78rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.public-shell .doc-list-product a {
  color: #0369a1;
  font-weight: 750;
  text-decoration: none;
}

.public-shell .doc-category-tag {
  font-size: 0.72rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 2.5px 7px;
  border-radius: 5px;
  color: #64748b;
}

.public-shell .doc-list-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  font-size: 0.78rem;
  color: #64748b;
  font-family: var(--font-family-num);
  white-space: nowrap;
}

.public-shell .doc-list-actions {
  flex-shrink: 0;
}

.public-shell .doc-download-btn.list-btn {
  padding: 9px 18px;
}

@media (max-width: 768px) {
  .public-shell .document-list-row {
    flex-wrap: wrap;
    gap: 12px;
  }
  .public-shell .doc-list-meta {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    width: 100%;
    order: 3;
    padding-top: 10px;
    border-top: 1px dashed #f1f5f9;
  }
  .public-shell .doc-list-actions {
    width: 100%;
    order: 4;
  }
  .public-shell .doc-download-btn.list-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Quotation & Price Inquiry Request Page Styling
   ========================================================================== */
.public-shell .public-quotation-wrapper {
  background-color: #f8fafc;
  min-height: calc(100vh - 180px);
  padding-bottom: 60px;
}

.public-shell .quotation-hero-header {
  background: linear-gradient(135deg, #0d1b2e 0%, #152640 100%);
  color: #ffffff;
  padding: 32px 0 40px;
  margin-bottom: 32px;
  border-bottom: 3px solid var(--public-yellow);
}

.public-shell .quotation-hero-header .public-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.8125rem;
  color: #94a3b8;
  margin-bottom: 12px;
}

.public-shell .quotation-hero-header .public-breadcrumbs a {
  color: #cbd5e1 !important;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.public-shell .quotation-hero-header .public-breadcrumbs a:hover {
  color: var(--public-yellow) !important;
}

.public-shell .quotation-hero-header .public-breadcrumbs .bc-sep {
  color: #64748b;
  user-select: none;
}

.public-shell .quotation-hero-header .public-breadcrumbs .bc-current {
  color: var(--public-yellow);
  font-weight: 700;
}

.public-shell .hero-title-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
}

.public-shell .hero-icon-box {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(254, 204, 0, 0.15);
  border: 1.5px solid rgba(254, 204, 0, 0.35);
  color: var(--public-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.public-shell .hero-title {
  margin: 0 0 6px;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: #ffffff;
}

.public-shell .hero-desc {
  margin: 0;
  color: #94a3b8;
  font-size: 0.875rem;
  line-height: 1.6;
}

.public-shell .quotation-content-area {
  max-width: 1200px;
}

.public-shell .quotation-grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

.public-shell .quotation-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

.public-shell .card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.public-shell .card-heading {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--public-navy);
  display: flex;
  align-items: center;
  gap: 8px;
}

.public-shell .change-product-link {
  font-size: 0.8125rem;
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

.public-shell .change-product-link:hover {
  text-decoration: underline;
}

.public-shell .item-summary-block {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px dashed #e2e8f0;
  margin-bottom: 18px;
}

.public-shell .item-img-wrap {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.public-shell .item-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.public-shell .item-info-wrap {
  flex: 1;
  min-width: 0;
}

.public-shell .item-cat-brand {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 4px;
}

.public-shell .item-name {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--public-navy);
  line-height: 1.4;
}

.public-shell .item-model {
  font-size: 0.75rem;
  color: #64748b;
}

.public-shell .selected-specs-section {
  background: #f8fafc;
  border: 1px solid #edf2f7;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 18px;
}

.public-shell .specs-subheading {
  margin: 0 0 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--public-navy);
}

.public-shell .specs-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.public-shell .spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.78rem;
  color: #334155;
}

.public-shell .spec-chip.variant-chip {
  border-color: var(--public-yellow);
  background: #fffdf0;
}

.public-shell .color-dot-mini {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.public-shell .order-pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.public-shell .stepper-control {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  margin-top: 6px;
}

.public-shell .st-btn {
  width: 36px;
  height: 36px;
  border: 0;
  background: #f8fafc;
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--public-navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.public-shell .st-btn:hover {
  background: #e2e8f0;
}

.public-shell .st-input {
  width: 70px;
  height: 36px;
  border: 0;
  text-align: center;
  font-weight: 750;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--public-navy);
  outline: 0;
}

.public-shell .price-val-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 6px;
}

.public-shell .price-num {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--public-navy);
}

.public-shell .price-curr {
  font-size: 0.8125rem;
  color: #64748b;
  font-weight: 600;
}

.public-shell .price-inquiry-badge {
  display: inline-block;
  padding: 6px 12px;
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 750;
  margin-top: 6px;
}

.public-shell .estimated-total-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(135deg, #0d1b2e 0%, #152640 100%);
  color: #ffffff;
  border-radius: 12px;
  margin-bottom: 18px;
}

.public-shell .est-label {
  font-size: 0.875rem;
  color: #94a3b8;
  font-weight: 600;
}

.public-shell .est-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--public-yellow);
}

.public-shell .est-amount strong {
  font-size: 1.25rem;
  font-weight: 800;
}

.public-shell .cs-input,
.public-shell .cs-textarea {
  width: 100%;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--public-navy);
  background: #ffffff;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: 0;
  box-sizing: border-box;
}

.public-shell .cs-input:focus,
.public-shell .cs-textarea:focus {
  border-color: var(--public-navy);
  box-shadow: 0 0 0 3px rgba(13, 27, 46, 0.1);
}

.public-shell .form-group {
  margin-bottom: 16px;
}

.public-shell .field-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--public-navy);
  margin-bottom: 6px;
}

.public-shell .field-label.required::after {
  content: " *";
  color: #ef4444;
}

.public-shell .mode-switch-group {
  margin-bottom: 20px;
}

.public-shell .mode-pills-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

.public-shell .mode-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  color: #475569;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.public-shell .mode-pill.active {
  border-color: var(--public-navy);
  background: #0d1b2e;
  color: #ffffff;
}

.public-shell .btn-submit-quotation {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 12px;
  background: var(--public-yellow);
  color: #0d1b2e;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(254, 204, 0, 0.35);
  transition: all 0.2s ease;
}

.public-shell .btn-submit-quotation:hover:not(:disabled) {
  background: #e6b800;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(254, 204, 0, 0.45);
}

.public-shell .submit-disclaimer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 12px;
  line-height: 1.4;
}

/* Success Card */
.public-shell .quotation-success-card {
  max-width: 680px;
  margin: 20px auto 40px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 44px 32px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.public-shell .success-icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #f0fdf4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.public-shell .success-title {
  margin: 0 0 16px;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--public-navy);
}

.public-shell .tracking-number-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1.5px dashed #cbd5e1;
  border-radius: 10px;
  padding: 10px 20px;
  margin-bottom: 20px;
}

.public-shell .tr-label {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 600;
}

.public-shell .tr-value {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--public-navy);
}

.public-shell .success-info-text {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.7;
  max-width: 500px;
  margin: 0 auto 30px;
}

.public-shell .success-actions-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.public-shell .btn-success-panel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  background: #0d1b2e;
  color: #ffffff;
  font-weight: 750;
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.2s;
}

.public-shell .btn-success-panel:hover {
  background: #152640;
  transform: translateY(-1px);
}

.public-shell .btn-success-catalog {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  background: #f1f5f9;
  color: var(--public-navy);
  font-weight: 750;
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.2s;
}

.public-shell .btn-success-catalog:hover {
  background: #e2e8f0;
}

@media (max-width: 900px) {
  .public-shell .quotation-grid-layout {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Header Cart Count Badge & Multi-Item Cart System
   ========================================================================== */
.public-shell .header-cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--public-yellow);
  color: #0d1b2e;
  font-size: 0.72rem;
  font-weight: 800;
  font-family: var(--font-family-num);
  line-height: 1;
  margin-inline-start: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.public-shell .header-mobile-actions > a,
.public-shell .mobile-quote,
.public-shell .mobile-account {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.public-shell .header-cart-badge.mobile-badge {
  position: absolute !important;
  top: -5px !important;
  inset-inline-end: -5px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  border-radius: 9px !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  line-height: 18px !important;
  text-align: center !important;
  margin: 0 !important;
  z-index: 10 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  pointer-events: none !important;
}

.public-shell .header-cart-badge.inquiry-badge {
  background: #f59e0b !important;
  color: #ffffff !important;
}

/* Responsive Checkout Styles */
.checkout-summary-col {
  position: static;
}

@media (min-width: 960px) {
  .checkout-summary-col {
    position: sticky;
    top: 90px;
  }
}

@media (max-width: 600px) {
  .quotation-card {
    padding: 1.15rem 1rem !important;
  }
}

.public-shell .btn-clear-cart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #ef4444;
  cursor: pointer;
  transition: all 0.15s;
}

.public-shell .btn-clear-cart:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}

.public-shell .items-cart-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.public-shell .cart-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 16px;
}

.public-shell .slider-paging-title {
  font-size: 0.84rem;
  font-weight: 750;
  color: var(--public-navy);
}

.public-shell .slider-paging-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.public-shell .btn-slider-nav {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: var(--public-navy);
  cursor: pointer;
  transition: all 0.15s;
}

.public-shell .btn-slider-nav:hover:not(:disabled) {
  background: #0d1b2e;
  color: #ffffff;
  border-color: #0d1b2e;
}

.public-shell .btn-slider-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.public-shell .slider-page-indicator {
  font-size: 0.8rem;
  font-weight: 800;
  color: #475569;
  white-space: nowrap;
}

/* Active Item Card */
.public-shell .cart-active-item-card {
  padding: 18px;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  margin-bottom: 20px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
}

.public-shell .active-item-top {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.public-shell .active-item-media {
  width: 84px;
  height: 84px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.public-shell .active-item-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.public-shell .active-item-info {
  flex: 1;
  min-width: 0;
}

.public-shell .active-item-cat-brand {
  font-size: 0.75rem;
  color: #64748b;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.public-shell .active-item-name {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.4;
}

.public-shell .active-item-name a {
  color: var(--public-navy);
  text-decoration: none;
}

.public-shell .active-item-name a:hover {
  color: #2563eb;
}

.public-shell .active-item-model {
  font-size: 0.75rem;
  color: #64748b;
}

.public-shell .btn-remove-active-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 6px 10px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fff5f5;
  color: #dc2626;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.public-shell .btn-remove-active-item:hover {
  background: #fee2e2;
  border-color: #ef4444;
}

.public-shell .active-item-chips-block {
  padding: 12px 14px;
  background: #f8fafc;
  border-radius: 10px;
  margin-bottom: 16px;
}

.public-shell .chips-block-label {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 750;
  color: #475569;
}

.public-shell .cart-item-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.public-shell .cart-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.75rem;
  color: #334155;
}

.public-shell .cart-chip.variant-chip {
  background: #fffdf0;
  border-color: #fde68a;
  color: #92400e;
}

.public-shell .cart-chip.color-chip {
  background: #ffffff;
  border-color: #cbd5e1;
}

.public-shell .active-item-order-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px dashed #e2e8f0;
}

.public-shell .cart-stepper-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.public-shell .stepper-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #475569;
}

.public-shell .cart-pricing-wrap {
  display: flex;
  align-items: center;
}

.public-shell .cart-inquiry-tag {
  display: inline-block;
  padding: 6px 12px;
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 750;
}

.public-shell .cart-price-info {
  display: flex;
  align-items: center;
  gap: 18px;
}

.public-shell .unit-price-sub,
.public-shell .total-price-sub {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 0.8rem;
  color: #64748b;
}

.public-shell .total-price-sub .num {
  font-size: 1.05rem;
  font-weight: 850;
  color: var(--public-navy);
}

.public-shell .unit-price-sub .num {
  font-size: 0.88rem;
  font-weight: 750;
  color: #334155;
}

.public-shell .add-more-row {
  margin-top: auto;
  margin-bottom: 16px;
  text-align: center;
}

.public-shell .btn-add-more-products {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: 1.5px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  color: var(--public-navy);
  font-size: 0.84rem;
  font-weight: 750;
  text-decoration: none;
  transition: all 0.2s;
}

.public-shell .btn-add-more-products:hover {
  background: #ffffff;
  border-color: var(--public-navy);
  color: #2563eb;
}

.public-shell .cart-total-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #0d1b2e 0%, #152640 100%);
  color: #ffffff;
  border-radius: 14px;
  margin-bottom: 10px;
}

.public-shell .ts-label-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.public-shell .ts-main-label {
  font-size: 0.92rem;
  font-weight: 750;
  color: #ffffff;
}

.public-shell .ts-sub-label {
  font-size: 0.72rem;
  color: #94a3b8;
}

.public-shell .ts-amount-group {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--public-yellow);
}

.public-shell .ts-amount {
  font-size: 1.35rem;
  font-weight: 800;
}

.public-shell .ts-unit {
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Empty Cart State */
.public-shell .empty-cart-state {
  text-align: center;
  padding: 40px 20px 30px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  margin-bottom: 24px;
}

.public-shell .empty-cart-icon {
  margin-bottom: 14px;
}

.public-shell .empty-cart-title {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--public-navy);
}

.public-shell .empty-cart-desc {
  margin: 0 auto 20px;
  font-size: 0.84rem;
  color: #64748b;
  max-width: 460px;
  line-height: 1.6;
}

.public-shell .btn-browse-catalog {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 10px;
  background: var(--public-yellow);
  color: #0d1b2e;
  font-weight: 750;
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.2s;
}

.public-shell .btn-browse-catalog:hover {
  background: #e6b800;
  transform: translateY(-1px);
}

.public-shell .freeform-inquiry-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
}

.public-shell .ff-heading {
  margin: 0 0 4px;
  font-size: 0.875rem;
  font-weight: 750;
  color: var(--public-navy);
}

.public-shell .ff-sub {
  margin: 0 0 10px;
  font-size: 0.78rem;
  color: #64748b;
}

@media (max-width: 600px) {
  .public-shell .active-item-top {
    flex-direction: column;
  }
  .public-shell .active-item-media {
    width: 60px;
    height: 60px;
  }
  .public-shell .active-item-order-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* Verified Mobile Badge in Quotation Form */
.public-shell .verified-phone-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.public-shell .cs-input.phone-verified {
  background-color: #f8fafc;
  color: #1e293b;
  font-weight: 700;
  padding-inline-end: 125px;
}

.public-shell .phone-verified-badge {
  position: absolute;
  inset-inline-end: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 750;
}

.public-shell .field-hint-sms {
  display: block;
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 4px;
}

/* Auth Required Box for Quotation Submission */
.public-shell .auth-required-box {
  padding: 24px 20px;
  background: #f8fafc;
  border: 1.5px dashed #cbd5e1;
  border-radius: 14px;
  text-align: center;
}

.public-shell .auth-lock-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eff6ff;
  border: 1px solid #dbeafe;
}

.public-shell .auth-box-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--public-navy);
}

.public-shell .auth-box-desc {
  margin: 0 0 16px;
  font-size: 0.84rem;
  color: #64748b;
  line-height: 1.6;
}

.public-shell .cart-preserved-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  color: #065f46;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.public-shell .btn-auth-login-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 10px;
  background: var(--public-yellow);
  color: #0d1b2e;
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 14px;
}

.public-shell .btn-auth-login-cta:hover {
  background: #e6b800;
  transform: translateY(-1px);
}

.public-shell .auth-register-link-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #64748b;
}

.public-shell .auth-register-link-row a {
  color: #2563eb;
  font-weight: 750;
  text-decoration: none;
}

.public-shell .auth-register-link-row a:hover {
  text-decoration: underline;
}

.public-shell .auth-bottom-switch a:hover {
  color: #d97706;
  text-decoration: underline;
}

/* User Account Dropdown in Header */
.public-shell .header-user-dropdown-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.public-shell .header-user-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 12px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px !important;
  color: #f1f5f9 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.public-shell .header-user-btn:hover,
.public-shell .header-user-btn.active {
  background: rgba(254, 204, 0, 0.15) !important;
  border-color: rgba(254, 204, 0, 0.45) !important;
  color: var(--public-yellow) !important;
}

.public-shell .user-btn-caret {
  transition: transform 0.2s ease;
  fill: currentColor;
  margin-inline-start: 2px;
}

.public-shell .header-user-btn.active .user-btn-caret {
  transform: rotate(180deg);
}

.public-shell .header-user-backdrop {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: transparent;
}

.public-shell .header-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  width: 240px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 36px -8px rgba(13, 27, 46, 0.18), 0 0 1px 1px rgba(13, 27, 46, 0.06);
  z-index: 999;
  overflow: hidden;
  animation: userDropdownFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes userDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.public-shell .user-dropdown-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  color: #0f172a !important;
  text-decoration: none !important;
  background: #ffffff !important;
  transition: background 0.15s ease !important;
  width: 100% !important;
}

.public-shell .user-dropdown-header-row:hover {
  background: #f8fafc !important;
}

.public-shell .user-dropdown-header-row svg {
  color: #94a3b8 !important;
  transition: transform 0.15s ease !important;
}

.public-shell .user-dropdown-header-row:hover svg {
  color: #0f172a !important;
  transform: translateX(-3px);
}

.public-shell [data-culture="en"] .user-dropdown-header-row:hover svg {
  transform: translateX(3px);
}

.public-shell .user-dropdown-identity {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: start;
}

.public-shell .user-dropdown-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}

.public-shell .user-dropdown-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  width: fit-content;
}

.public-shell .user-dropdown-badge.admin {
  background: #fef3c7;
  color: #92400e;
}

.public-shell .user-dropdown-badge.user {
  background: #f1f5f9;
  color: #64748b;
}

.public-shell .user-dropdown-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 0;
}

.public-shell .user-dropdown-logout-row {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 13px 16px !important;
  background: #ffffff !important;
  border: none !important;
  color: #475569 !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-align: start !important;
  border-radius: 0 !important;
}

.public-shell .user-dropdown-logout-row:hover {
  background: #fef2f2 !important;
  color: #ef4444 !important;
}

.public-shell .user-dropdown-logout-row svg {
  color: inherit !important;
}

/* Public Auth Switcher & Card Layout */
.public-shell .auth-page-wrapper {
  padding: 48px 16px 72px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 380px);
  background: radial-gradient(circle at 50% 20%, rgba(13, 27, 46, 0.04) 0%, rgba(248, 250, 252, 1) 100%);
}

.public-shell .auth-card {
  width: 100%;
  max-width: 490px;
  background: #ffffff;
  border-radius: 22px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 45px -15px rgba(13, 27, 46, 0.09), 0 0 1px 1px rgba(13, 27, 46, 0.04);
  overflow: hidden;
  position: relative;
}

.public-shell .auth-header-strip {
  background: linear-gradient(135deg, #0d1b2e 0%, #152640 100%);
  padding: 28px 24px 20px;
  text-align: center;
  color: #ffffff;
  position: relative;
}

.public-shell .auth-header-strip::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--public-yellow), transparent);
}

.public-shell .auth-brand-logo {
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  margin-bottom: 6px;
}

.public-shell .auth-brand-tag {
  background: var(--public-yellow);
  color: #0d1b2e;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
}

.public-shell .auth-header-desc {
  color: #94a3b8;
  font-size: 0.82rem;
  margin: 0;
}

.public-shell .auth-switcher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #f1f5f9;
  padding: 5px;
  margin: 20px 22px 0;
  border-radius: 12px;
  gap: 6px;
}

.public-shell .auth-switcher-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #64748b;
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.public-shell .auth-switcher-btn.active {
  background: #ffffff;
  color: #0d1b2e;
  box-shadow: 0 2px 10px rgba(13, 27, 46, 0.08);
  font-weight: 800;
  border-bottom: 2px solid var(--public-yellow);
}

.public-shell .auth-switcher-btn:not(.active):hover {
  color: #0d1b2e;
  background: rgba(255, 255, 255, 0.7);
}

.public-shell .auth-body {
  padding: 22px 26px 30px;
}

.public-shell .auth-submit-btn {
  background: var(--public-yellow) !important;
  color: #0d1b2e !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  padding: 12px 20px !important;
  border-radius: 12px !important;
  width: 100% !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(254, 204, 0, 0.35) !important;
  transition: all 0.2s ease !important;
  cursor: pointer;
}

.public-shell .auth-submit-btn:hover {
  background: #e6b800 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(254, 204, 0, 0.45) !important;
}

.public-shell .auth-bottom-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #f1f5f9;
  font-size: 0.84rem;
  color: #64748b;
}

.public-shell .auth-bottom-switch a {
  color: #0d1b2e;
  font-weight: 800;
  text-decoration: none;
  transition: color 0.15s ease;
}

.public-shell .auth-bottom-switch a:hover {
  color: #d97706;
  text-decoration: underline;
}

/* ==========================================================================
   Category Video Player & Card Play Button
   ========================================================================== */
.public-shell .commerce-category-avatar-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.public-shell .commerce-category-avatar-wrapper.has-video .commerce-category-image {
    cursor: pointer;
}

.public-shell .category-video-play-btn {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #0D1B2E;
    color: var(--public-yellow, #FECC00);
    border: 2px solid #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s;
}

.public-shell .category-video-play-btn:hover {
    transform: scale(1.15);
    background: #152640;
    color: #ffd633;
}

.public-shell .category-video-play-btn .mud-icon-root {
    font-size: 22px;
}

.public-shell .commerce-category-title-link {
    width: 100%;
    text-decoration: none;
    color: inherit;
    display: block;
    text-align: center;
}

.public-shell .commerce-category-title-link:hover h3 {
    color: var(--public-navy);
}

/* Category Video Modal */
.category-video-modal-backdrop {
    background-color: rgba(10, 20, 35, 0.85) !important;
    backdrop-filter: blur(8px) !important;
}

.category-video-dialog {
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

.category-video-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000000;
    border-radius: 8px;
    overflow: hidden;
    outline: none;
    aspect-ratio: 16 / 9;
    max-height: 75vh;
}

.category-video-container video {
    width: 100%;
    height: auto;
    max-height: 75vh;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
}

.category-media-counter-badge {
    background: #E2E8F0;
    color: #1E293B;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.category-media-counter-text {
    color: #64748B;
    font-size: 0.85rem;
    font-weight: 600;
}

.category-media-nav-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(13, 27, 46, 0.65) !important;
    color: #ffffff !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    backdrop-filter: blur(4px);
    z-index: 10 !important;
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.category-media-nav-arrow:hover {
    background: rgba(13, 27, 46, 0.95) !important;
    color: var(--public-yellow, #FECC00) !important;
    transform: translateY(-50%) scale(1.08) !important;
}

.category-media-nav-arrow.right-arrow {
    right: 12px !important;
}

.category-media-nav-arrow.left-arrow {
    left: 12px !important;
}

.category-media-title-caption {
    background: rgba(248, 250, 252, 0.8);
    border-radius: 6px;
}

/* Official Proforma Print Styling */
@media print {
    header, footer, nav, .mud-appbar, .mud-drawer, .mud-overlay, .mud-dialog-actions, .no-print, .mud-snackbar-location-top-right {
        display: none !important;
    }

    body, .public-shell, .mud-layout, .mud-dialog-container {
        background: #ffffff !important;
        color: #000000 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .mud-dialog {
        box-shadow: none !important;
        border: none !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .mud-dialog-content {
        padding: 0 !important;
        overflow: visible !important;
    }

    @page {
        size: A4;
        margin: 1.2cm;
    }
}

/* ==========================================================================
   Product Card Favorite Heart Button & Elevation
   ========================================================================== */
.public-shell .product-card-fav-btn {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #94a3b8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}
.public-shell .product-card-fav-btn:hover {
  color: #ef4444;
  background: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
}
.public-shell .product-card-fav-btn.active {
  color: #ef4444;
  background: #ffffff;
  border-color: rgba(239, 68, 68, 0.3);
}
.public-shell .public-product-list-card .product-card-fav-btn {
  top: 8px;
  inset-inline-end: 8px;
  width: 30px;
  height: 30px;
}

/* ==========================================================================
   Header Z-Index & Interactivity Guard
   ========================================================================== */
.public-shell .commerce-header {
  z-index: 1000 !important;
}
.public-shell .commerce-navigation {
  z-index: 1050 !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   Shopping Cart & Inquiry Basket Mobile Responsiveness
   ========================================================================== */
.public-shell .commerce-cart-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2rem;
  align-items: start;
}
.public-shell .commerce-inquiry-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2rem;
  align-items: start;
}

.public-shell .cart-item-card {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  background: #fafafa;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.public-shell .cart-item-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.public-shell .cart-item-main {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-grow: 1;
  min-width: 0;
}

.public-shell .cart-item-thumb {
  flex-shrink: 0;
}
.public-shell .cart-item-thumb img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  padding: 4px;
  border: 1px solid #e2e8f0;
}
.public-shell .cart-item-thumb-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
}

.public-shell .cart-item-details {
  flex-grow: 1;
  min-width: 0;
}
.public-shell .cart-item-title {
  text-decoration: none;
  color: #0f172a;
  font-weight: 700;
  font-size: 0.98rem;
  display: block;
  margin-bottom: 0.35rem;
  line-height: 1.4;
}
.public-shell .cart-item-title:hover {
  color: #0284c7;
}

.public-shell .cart-badge-chip {
  font-size: 0.8rem;
  background: #f1f5f9;
  color: #475569;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.public-shell .cart-badge-chip.color-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.public-shell .color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.public-shell .cart-badge-chip.attr-chip {
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 500;
}
.public-shell .cart-item-note {
  margin-top: 4px;
  font-size: 0.78rem;
  color: #64748b;
  background: #f8fafc;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px dashed #cbd5e1;
}
.public-shell .cart-item-unit-price {
  margin-top: 6px;
  font-size: 0.85rem;
  color: #64748b;
}
.public-shell .cart-item-unit-price strong {
  color: #0f172a;
  font-family: var(--font-family-num);
}

.public-shell .cart-item-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}

.public-shell .cart-item-stepper-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.public-shell .cart-stepper {
  display: flex;
  align-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.public-shell .cart-stepper button {
  border: none;
  background: #f8fafc;
  padding: 6px 10px;
  cursor: pointer;
  color: #334155;
  font-weight: bold;
  font-size: 1rem;
  min-width: 32px;
  touch-action: manipulation;
  transition: background 0.15s ease;
}
.public-shell .cart-stepper button:hover {
  background: #e2e8f0;
}
.public-shell .cart-stepper input {
  width: 60px;
  border: none;
  text-align: center;
  font-weight: 700;
  font-family: var(--font-family-num);
  outline: none;
  font-size: 0.92rem;
  -moz-appearance: textfield;
}
.public-shell .cart-stepper input::-webkit-outer-spin-button,
.public-shell .cart-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.public-shell .cart-stepper-unit {
  font-size: 0.72rem;
  color: #94a3b8;
}

.public-shell .cart-item-subtotal-wrap {
  text-align: end;
  min-width: 110px;
  flex-shrink: 0;
}
.public-shell .cart-item-total {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  font-family: var(--font-family-num);
}
.public-shell .cart-total-amount {
  color: #0f172a;
}
.public-shell .cart-total-curr {
  font-size: 0.75rem;
  color: #64748b;
  margin-inline-start: 2px;
}
.public-shell .cart-item-delete-btn {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.public-shell .cart-item-delete-btn:hover {
  color: #ef4444;
  background: #fee2e2;
}

.public-shell .cart-item-delete-btn.mobile-only {
  display: none;
}
.public-shell .cart-item-delete-btn.desktop-only {
  display: inline-flex;
  margin-top: 6px;
}

/* Inquiry Basket Item Card */
.public-shell .inquiry-item-card {
  padding: 1.25rem;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  background: #fafafa;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.public-shell .inquiry-item-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.public-shell .inquiry-item-main {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.public-shell .inquiry-item-thumb {
  flex-shrink: 0;
}
.public-shell .inquiry-item-thumb img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  padding: 4px;
  border: 1px solid #e2e8f0;
}
.public-shell .inquiry-item-thumb-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
}
.public-shell .inquiry-item-details {
  flex-grow: 1;
  min-width: 0;
}
.public-shell .inquiry-item-title {
  text-decoration: none;
  color: #0f172a;
  font-weight: 700;
  font-size: 0.98rem;
  display: block;
  margin-bottom: 0.25rem;
  line-height: 1.4;
}
.public-shell .inquiry-item-title:hover {
  color: #d97706;
}
.public-shell .inquiry-meta-chip {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.82rem;
}
.public-shell .inquiry-meta-chip.package {
  background: #e0f2fe;
  color: #0369a1;
}
.public-shell .inquiry-meta-chip.cut {
  background: #fef3c7;
  color: #92400e;
}
.public-shell .inquiry-item-note {
  margin-top: 8px;
  padding: 8px;
  border-radius: 6px;
  font-size: 0.82rem;
  color: #475569;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
}
.public-shell .inquiry-item-note.technical {
  background: #fff;
  border: 1px solid #e2e8f0;
}
.public-shell .inquiry-item-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
}
.public-shell .inquiry-stepper-label {
  font-size: 0.85rem;
  color: #475569;
  font-weight: 600;
}

/* Mobile Responsiveness for Cart & Inquiry */
@media (max-width: 900px) {
  .public-shell .commerce-cart-grid,
  .public-shell .commerce-inquiry-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }
  .public-shell .quotation-right-col {
    position: static !important;
    top: auto !important;
  }
}

@media (max-width: 768px) {
  .public-shell .cart-item-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
  }
  .public-shell .cart-item-main {
    align-items: flex-start;
  }
  .public-shell .cart-item-thumb img,
  .public-shell .cart-item-thumb-placeholder {
    width: 60px;
    height: 60px;
  }
  .public-shell .cart-item-delete-btn.desktop-only {
    display: none;
  }
  .public-shell .cart-item-delete-btn.mobile-only {
    display: inline-flex;
  }
  .public-shell .cart-item-actions {
    width: 100%;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
  }
  .public-shell .cart-stepper input {
    width: 50px;
  }
  .public-shell .cart-item-subtotal-wrap {
    min-width: auto;
  }

  .public-shell .inquiry-item-card {
    padding: 12px;
  }
  .public-shell .inquiry-item-main {
    gap: 10px;
  }
  .public-shell .inquiry-item-thumb img,
  .public-shell .inquiry-item-thumb-placeholder {
    width: 60px;
    height: 60px;
  }
  .public-shell .inquiry-item-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
}








/* ==========================================================================
   2026 UI/UX audit hardening
   Shared accessibility and responsive fixes for public catalog surfaces.
   ========================================================================== */
.public-shell :where(a, button, input, select, textarea, [role="button"]):focus-visible {
    outline: 3px solid var(--public-yellow, #fbb800);
    outline-offset: 3px;
}

@media (max-width: 850px) {
    .public-shell .products-filter-sidebar:not(.is-open) {
        display: none !important;
        transform: none !important;
    }

    .public-shell .products-filter-sidebar.is-open {
        display: block !important;
        transform: none !important;
    }

    .public-shell .products-mobile-filter,
    .public-shell .products-view-switch button,
    .public-shell .products-sort-select,
    .public-shell .products-filter-title > button,
    .public-shell .products-filter-actions button,
    .public-shell .product-card-fav-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .public-shell .products-facet-option {
        min-height: 44px;
        padding-block: 8px;
    }
}

@media (max-width: 600px) {
    .public-shell .carousel-controls a,
    .public-shell .home-hero-dots button {
        min-width: 44px;
        min-height: 44px;
    }

    .public-shell .home-hero-dots {
        gap: 2px;
        padding-block: 2px;
    }

    .public-shell .home-hero-dots button {
        border-radius: 999px;
        transform: scale(.28);
        margin-inline: -15px;
    }

    .public-shell .home-hero-dots button.active {
        width: 44px;
        transform: scale(.6);
        margin-inline: -9px;
    }

    .public-shell .commerce-footer a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .public-shell .products-result-toolbar {
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-shell *,
    .public-shell *::before,
    .public-shell *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}