/* OCTAY OUTDOOR V3.3 – genuine mobile layout improvements, above V3.2 overrides. */
:root { --octay-navy:#10314e; --octay-accent:#ec632b; --octay-mint:#139b54; }
html,body { max-width:100%; }
body { overflow-x:clip; }
[hidden] { display:none !important; }
/* Desktop gets the complete promotional artwork; mobile gets typography large enough to read. */
.octay-banner-mobile { display:none; }
.octay-promo-banner .container { max-width:1280px; }
.octay-promo-banner img.octay-banner-desktop { height:auto; }
/* A compact catalog masthead; remove the giant circular cover-art effect. */
.octay-page-banner { padding:34px 0 31px; background:linear-gradient(120deg,#f2f9fd,#fff8f1); }
.octay-page-banner .page-banner-layout { grid-template-columns:minmax(0,1fr) 118px; gap:26px; align-items:center; }
.octay-page-banner h1 { max-width:790px; font-size:clamp(34px,4vw,54px); margin:13px 0 10px; letter-spacing:-.045em; }
.octay-page-banner p { line-height:1.65; max-width:580px; margin:0; }
.octay-catalog-emblem { width:118px; height:118px; justify-self:end; }
.octay-catalog-emblem img { display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;border:5px solid white;box-shadow:0 8px 24px rgba(12,43,68,.13); }
/* Every product has a clear direct-WhatsApp action and a generous + target. */
.product-card { display:flex; flex-direction:column; min-width:0; }
.product-body { display:flex; flex:1; flex-direction:column; }
.product-name { overflow-wrap:anywhere; }
.product-footer { margin-top:auto; padding-top:13px; }
.product-quick-consult { min-height:44px; line-height:1.25; text-align:center; width:100%; font-size:12px; border-radius:10px; gap:4px; }
.add-button { width:44px; height:44px; min-width:44px; flex-shrink:0; font-size:25px; }
.product-quick-consult:focus-visible, .add-button:focus-visible { outline:3px solid #f39a54;outline-offset:2px; }
/* Contact buttons never cover the open cart, and respect safe areas. */
.floating-whatsapp { right:calc(18px + env(safe-area-inset-right,0px)); bottom:calc(20px + env(safe-area-inset-bottom,0px)); min-height:56px; }
.cart-is-open .floating-whatsapp { display:none !important; }
.toast { bottom:calc(88px + env(safe-area-inset-bottom,0px)); }
.cart-drawer { padding-bottom:max(18px, env(safe-area-inset-bottom)); }
/* Header at desktop/tablet sizes. */
.site-header .brand-name { max-width:240px; }
.site-header .nav-inner { gap:18px; }
.site-header .brand { min-width:0; }
.header-actions { flex-shrink:0; }
/* More compact vertical rhythm on phones, while keeping editorial sections readable. */
@media (max-width:950px) {
 .octay-page-banner .page-banner-layout { grid-template-columns:minmax(0,1fr) 90px;gap:18px; }
 .octay-catalog-emblem { width:90px;height:90px; }
 .octay-hero { padding-block:43px 50px; }
 .section { padding-block:56px; }
 .octay-story { padding-block:52px; }
 .octay-contact { padding-block:56px; }
}
@media (max-width:650px) {
 html { scroll-padding-top:76px; }
 .container { width:calc(100% - 32px); }
 .top-strip { height:28px; }
 .top-strip .strip-inner>span:first-child { font-size:9px; line-height:1; letter-spacing:.01em; }
 .site-header .nav-inner { height:68px;gap:7px; }
 .site-header .brand { gap:8px; flex:1 1 auto; min-width:0; }
 .site-header .brand-symbol.brand-logo { width:40px;height:40px; min-width:40px; padding:3px; }
 .site-header .brand-name { min-width:0; max-width:100%; font-size:clamp(15px,4.45vw,19px); white-space:nowrap;letter-spacing:-.05em; }
 .site-header .brand-name small { display:none; }
 .site-header .header-actions { gap:5px; }
 .site-header .selection-button { min-width:44px; min-height:44px; padding:8px; border-radius:12px; gap:4px; }
 .site-header .selection-button svg { width:19px; height:19px; }
 .site-header .cart-count { min-width:19px; width:19px; height:19px; font-size:10px; }
 .site-header .mobile-menu-btn { width:44px;min-width:44px;height:44px; padding:8px; }
 .site-header .mobile-nav a { font-size:14px; min-height:47px; }
 .octay-promo-banner { padding:12px 0 4px; }
 .octay-promo-banner .octay-banner-desktop { display:none; }
 .octay-promo-banner .octay-banner-mobile {
   display:flex;align-items:center;gap:13px;padding:15px 14px;
   background:linear-gradient(110deg,#10314e 0%,#174e71 60%,#346b82 100%);
   border-radius:18px;border:1px solid #2b5d75;box-shadow:0 9px 25px #102f4a20;
   color:white;min-height:108px;
 }
 .octay-banner-mobile img { display:block;width:73px;height:73px;min-width:73px;object-fit:cover;border:3px solid white;border-radius:50%; }
 .octay-banner-mobile div { display:flex;flex-direction:column;gap:4px;min-width:0; }
 .octay-banner-mobile div>span { font-size:9px;letter-spacing:.16em;font-weight:800;color:#ffd5b9; }
 .octay-banner-mobile strong { font-size:clamp(17px,5.25vw,23px);line-height:1.12;font-family:'Outfit',sans-serif;letter-spacing:-.02em; }
 .octay-banner-mobile small { font-size:10px;line-height:1.35;color:#d8edf6; }
 .octay-hero { padding:29px 0 42px; }
 .octay-hero-layout { gap:22px; }
 .octay-hero-copy .hero-chip { font-size:9px;line-height:1.3;padding:8px 12px;letter-spacing:.06em; }
 .octay-hero-copy h1 { font-size:clamp(35px,10.5vw,49px);line-height:1.08;margin:17px 0 13px; }
 .octay-hero-copy>p { font-size:14px;line-height:1.65; }
 .octay-hero-actions { margin:20px 0 14px; gap:9px; }
 .octay-hero-actions .btn { min-height:49px;font-size:14px; }
 .octay-hero-notes { gap:6px; }
 .octay-hero-notes span { font-size:10px;padding:7px 9px; }
 .octay-hero-visual { max-width:480px; }
 .octay-hero-visual img { height:205px;object-fit:cover; }
 .octay-hero-label { margin-top:-5px; }
 .octay-hero-label strong { font-size:18px; }
 .octay-benefits { padding:17px 0; }
 .octay-benefit-grid { gap:15px; }
 .octay-benefit-grid>div { grid-template-columns:38px 1fr;gap:10px; }
 .octay-benefit-icon { width:35px;height:35px;font-size:12px; }
 .octay-benefit-grid strong { font-size:16px;margin:0; }
 .octay-benefit-grid p { font-size:11px; }
 .section { padding-block:44px; }
 .section-intro { gap:10px;margin-bottom:20px; }
 .section-intro h2 { font-size:clamp(29px,8.5vw,38px); margin-top:10px;line-height:1.12; }
 .section-intro>p { font-size:12px;line-height:1.55; }
 .category-grid { gap:10px; }
 .category-card { min-height:155px;padding:12px;border-radius:14px; }
 .category-card>img { height:105px;max-width:65%;top:12px;right:3px; }
 .category-card h3 { font-size:19px; }
 .category-card div>span { font-size:9px; }
 .product-media { height:clamp(140px,43vw,190px); }
 .product-body { padding:12px; }
 .product-name { font-size:15px; line-height:1.3; min-height:42px; }
 .product-price { font-size:17px;white-space:nowrap; }
 .product-category { font-size:9px;line-height:1.3; }
 .product-footer { gap:4px; }
 .product-badge { max-width:calc(100% - 20px); }
 .product-quick-consult { font-size:11px; padding:8px 4px; margin-top:10px; min-height:44px; }
 .product-quick-consult span { display:none; }
 .add-button { min-width:44px; width:44px;height:44px; }
 .octay-story { padding-block:43px; }
 .octay-story h2 { font-size:36px;margin:16px 0; }
 .octay-story p { line-height:1.65; }
 .octay-story-visual img { height:132px;width:132px; }
 .octay-story-visual div { margin-top:12px; }
 .step { padding:20px; }
 .step h3 { font-size:22px; }
 .faq-item { padding-inline:15px; }
 .faq-item summary { min-height:57px; display:flex;align-items:center; padding-block:12px; font-size:16px;line-height:1.35; }
 .octay-page-banner { padding:20px 0 20px; }
 .octay-page-banner .page-banner-layout { display:block; }
 .octay-page-banner .octay-catalog-emblem { display:none; }
 .octay-page-banner .eyebrow { font-size:9px; }
 .octay-page-banner h1 { font-size:clamp(29px,8.5vw,39px); margin:10px 0;line-height:1.12; }
 .octay-page-banner p { font-size:12px; line-height:1.55; }
 .catalog-area.section { padding-top:18px; }
 .catalog-controls { gap:9px; }
 .catalog-controls .search-input { min-width:100%; }
 .catalog-controls .search-input input { min-height:45px;font-size:14px; }
 .catalog-controls .select-shell { min-height:44px; }
 .catalog-category-tabs { margin-top:13px; }
 .catalog-category-tabs a { min-height:42px; display:inline-flex;align-items:center; }
 .results-bar { margin-bottom:15px; }
 .detail-primary-image { height:min(94vw,390px); }
 .detail-actions .btn { min-height:50px;white-space:normal; }
 .cart-drawer { width:100vw;max-width:100vw;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px)); }
 .drawer-head h2 { font-size:24px; }
 .cart-bottom { max-height:min(73dvh,580px); }
 .cart-qty button, .cart-remove, .icon-button { min-width:38px;min-height:38px; }
 .floating-whatsapp { width:53px;height:53px;min-height:53px;padding:0;right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:60; }
 .floating-whatsapp svg { width:25px;height:25px; }
 .floating-whatsapp:after { display:none; }
 .public-mode main { padding-bottom:0; }
 .admin-header-row { gap:9px; }
 .admin-nav { gap:8px; }
 .admin-nav a, .admin-nav button { min-height:39px; }
 .table-scroll { max-width:100%; }
}
@media(max-width:359px) {
 .site-header .brand-name { font-size:15px; }
 .octay-banner-mobile img { width:60px;height:60px;min-width:60px; }
 .octay-banner-mobile { gap:9px;padding:12px 10px; }
 .octay-banner-mobile strong { font-size:17px; }
 .product-body { padding:9px; }
 .product-name { font-size:14px; }
 .product-price { font-size:15px; }
}
@media(hover:none) {
 .btn:hover,.product-card:hover,.category-card:hover,.floating-whatsapp:hover { transform:none; }
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(max-width:650px) {
 .catalog-category-tabs { margin-left:0 !important; margin-right:0 !important; padding-inline:0 !important; width:100%; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
 .catalog-controls .select-shell { padding-inline:8px; min-width:0; flex:1 1 calc(50% - 5px); }
 .catalog-controls .select-shell span { font-size:9px; white-space:nowrap; }
 .catalog-controls .select-shell select { min-width:0; max-width:100%;flex:1 1 0;font-size:11px;text-overflow:ellipsis; }
}
@media(max-width:650px) {
 .login-section { display:grid;grid-template-columns:minmax(0,1fr);padding:30px 15px; }
 .login-card { box-sizing:border-box; min-width:0; max-width:100%;width:100%;padding:24px 20px; }
 .login-card h1 { overflow-wrap:anywhere; }
}

/* Final brand polish for desktop and mobile promo links. */
.octay-promo-link { display:block; border-radius:20px; }
.octay-promo-link:hover { filter:saturate(1.05); }
.octay-promo-link:focus-visible { outline:3px solid #f39a54;outline-offset:3px; }
@media(min-width:951px) {
 .site-header .brand-name { max-width:255px; }
 .site-header .brand-name small { max-width:none;white-space:nowrap;overflow:visible;text-overflow:clip;letter-spacing:.12em; }
 .octay-hero { padding-top:64px; }
}