/* * STORE — its own storefront, SK Store style (shooting store). * * Fixed dark chrome (black header, graphite footer) + an ACCENT color * themeable per client (--st-accent, from the record; military-green * default). No external resource besides the font (Rajdhani, via Google * Fonts in the layout): the showcase is public and must be light. * * Tested at 375px (phone), 768px (tablet) and 1440px (desktop). * Motion always under prefers-reduced-motion. */ /* --------------------------------------------------------------- base */ :root{ --st-black: #171616; --st-black-2: #201f1e; --st-ink: #1d1d1f; --st-gray: #6b6b70; --st-gray-2: #9a9aa0; --st-line: #e6e6e8; --st-bg: #f4f4f2; --st-white: #ffffff; --st-promo: #d5262b; --st-ok: #2e7d32; --st-footer: #14140f; --st-radius: 10px; --st-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.05); --st-shadow-high: 0 10px 34px rgba(0,0,0,.14); } .st{ margin:0; background:var(--st-bg); color:var(--st-ink); font-family:var(--st-font); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .st *{ box-sizing:border-box; } .st img{ max-width:100%; } .st a{ color:inherit; } /* Links that are buttons: `.st a` (0,1,1) beat `.prod-card__add` (0,1,0) and the text inherited the card color -- dark on the accent. With a green accent it passed; with a graphite accent "Adicionar" vanished. Here the specificity is (0,2,1) and the button color wins. */ .st a.btn-primary,.st a.prod-card__add{ color:var(--st-accent-txt); } .st a.btn-secondary{ color:var(--st-ink); } .st a.prod-card__add--choose{ color:var(--st-accent); } .st a.prod-card__add--choose:hover{ color:var(--st-accent-txt); } .st a.prod-card__add--off{ color:#5f5f66; } .st-wrap{ max-width:1280px; margin:0 auto; padding:0 20px; width:100%; } .st-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .st-skip{ position:absolute; left:-999px; top:0; background:var(--st-accent); color:var(--st-accent-txt); padding:10px 16px; z-index:100; } .st-skip:focus{ left:8px; top:8px; } /* Display typography for titles, menu, buttons and prices. */ .st h1,.st h2,.st h3,.st-nav,.st-logo,.st-row__title,.prod-card__name, .btn-primary,.btn-secondary,.prod-card__add,.st-product__name,.st-product__by{ font-family:var(--st-display); } /* ============================================================ HEADER */ /* 1. notice bar */ .st-notice{ background:#0f0f0e; color:#cfcfcf; font-size:.82rem; } .st-notice__in{ display:flex; align-items:center; justify-content:space-between; min-height:34px; gap:16px; } .st-notice__msg{ letter-spacing:.02em; } .st-notice__contact a{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:#e7e7e7; } .st-notice__contact a:hover{ color:#fff; } .st-notice svg{ width:14px; height:14px; } /* 2. black header */ .st-top{ background:var(--st-black); color:#fff; position:sticky; top:0; z-index:40; box-shadow:0 2px 12px rgba(0,0,0,.28); } .st-top__in{ display:flex; align-items:center; gap:20px; min-height:78px; } .st-logo{ display:flex; align-items:center; text-decoration:none; flex:0 0 auto; max-width:230px; } /* The logo is the client's: fixed height, free width. The max-width holds a wide logo (federation) without squashing an almost square one. */ /* border-radius: many client logos are PNGs without transparency, on a white background (SK's is). On the black header that becomes a rectangle — with rounded corners it becomes a little plate, and on a transparent logo the radius does not show. */ .st-logo img{ height:52px; width:auto; max-width:230px; object-fit:contain; border-radius:6px; } /* Only when the client has no logo. Two lines at most, otherwise the full legal name pushes the search and the cart off the screen. */ .st-logo__txt{ font-size:1.15rem; font-weight:700; letter-spacing:.02em; color:#fff; text-transform:uppercase; line-height:1.15; max-width:230px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* central search */ .st-search{ flex:1 1 auto; display:flex; max-width:640px; margin:0 auto; } .st-search input{ flex:1 1 auto; min-width:0; font:inherit; font-size:1rem; padding:12px 16px; border:2px solid transparent; border-right:0; border-radius:8px 0 0 8px; background:#fff; color:#171616; outline:none; } .st-search input::placeholder{ color:#8a8a8f; } .st-search input:focus{ border-color:var(--st-accent); } .st-search button{ flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:0; padding:0 22px; border-radius:0 8px 8px 0; font:inherit; font-weight:600; background:var(--st-accent); color:var(--st-accent-txt); font-family:var(--st-display); text-transform:uppercase; letter-spacing:.03em; transition:filter .15s; } /* Graphite accent on the black top: a light line separates the Buscar button. */ .st-search button{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); } .st-search button:hover{ filter:brightness(1.08); } .st-search button svg{ width:20px; height:20px; } /* actions (sign in / cart) */ .st-actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; } .st-action{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#fff; padding:8px 12px; border-radius:8px; transition:background .15s; } .st-action:hover{ background:rgba(255,255,255,.09); } .st-action__ic{ display:inline-flex; } .st-action__tx{ display:flex; flex-direction:column; line-height:1.05; } .st-action__tx b{ font-size:.9rem; font-weight:600; } .st-action__tx small{ font-size:.72rem; color:#b9b9bd; } /* phone menu (hamburger) */ .st-menu-mob{ display:none; position:relative; } .st-menu-mob>summary{ list-style:none; cursor:pointer; width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:8px; } .st-menu-mob>summary::-webkit-details-marker{ display:none; } .st-menu-mob>summary:hover{ background:rgba(255,255,255,.1); } .st-burger,.st-burger::before,.st-burger::after{ display:block; width:22px; height:2px; background:#fff; position:relative; border-radius:2px; } .st-burger::before,.st-burger::after{ content:""; position:absolute; left:0; } .st-burger::before{ top:-7px; } .st-burger::after{ top:7px; } .st-menu-mob__nav{ position:absolute; left:0; top:52px; background:var(--st-black-2); border-radius:10px; min-width:250px; max-width:calc(100vw - 24px); padding:8px; box-shadow:var(--st-shadow-high); display:flex; flex-direction:column; z-index:50; /* 36 links x 44px overflow any screen: the panel scrolls inside. */ max-height:calc(100vh - 120px); overflow:auto; -webkit-overflow-scrolling:touch; } .st-menu-mob__root{ text-transform:uppercase; letter-spacing:.03em; margin-top:6px; } .st-menu-mob__child{ padding-left:26px !important; font-weight:500 !important; font-size:.92rem; color:#cfcfc7 !important; } .st-menu-mob__nav a{ padding:11px 14px; text-decoration:none; color:#eaeaea; border-radius:7px; font-family:var(--st-display); font-weight:600; } .st-menu-mob__nav a:hover{ background:rgba(255,255,255,.08); color:#fff; } /* 3. menu (accent color) */ .st-nav{ background:var(--st-accent); color:var(--st-accent-txt); position:relative; z-index:30; } .st-nav__in{ display:flex; align-items:stretch; gap:8px; min-height:48px; } .st-dept{ position:relative; flex:0 0 auto; } .st-dept>summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; height:100%; padding:0 20px; font-family:var(--st-display); font-weight:700; text-transform:uppercase; letter-spacing:.03em; } /* Darkens only on hover or with the menu open: fixed, it looked like an item "selected" together with Início. */ .st-dept>summary:hover,.st-dept[open]>summary{ background:rgba(0,0,0,.16); } .st-dept>summary::-webkit-details-marker{ display:none; } .st-dept__ic{ width:18px; height:12px; position:relative; } .st-dept__ic::before,.st-dept__ic::after,.st-dept__ic{ } .st-dept__ic{ background:linear-gradient(currentColor 0 0) 0 0/100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 5px/100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 10px/100% 2px no-repeat; } .st-dept__list{ position:absolute; left:0; top:100%; min-width:280px; margin:0; padding:8px; list-style:none; background:#fff; color:var(--st-ink); border-radius:0 0 10px 10px; box-shadow:var(--st-shadow-high); z-index:50; } .st-dept__list a{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; text-decoration:none; border-radius:7px; font-weight:500; } .st-dept__list a:hover{ background:var(--st-bg); } .st-dept__n{ font-size:.78rem; color:var(--st-gray); background:var(--st-bg); border-radius:20px; padding:1px 9px; } .st-dept__list a:hover .st-dept__n{ background:#fff; } .st-nav__links{ display:flex; align-items:stretch; list-style:none; margin:0; padding:0; gap:2px; } .st-nav__links a{ display:inline-flex; align-items:center; padding:0 16px; height:100%; text-decoration:none; font-family:var(--st-display); font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:.95rem; color:var(--st-accent-txt); position:relative; } .st-nav__links a:hover{ background:rgba(0,0,0,.14); } /* ============================================================ HERO */ .st-hero{ position:relative; overflow:hidden; background:#0e0e0d; margin-bottom:0; } .st-hero__rail{ display:flex; transition:transform .5s cubic-bezier(.22,.61,.36,1); } @media(prefers-reduced-motion:reduce){ .st-hero__rail{ transition:none; } } .st-hero__slide{ flex:0 0 100%; min-width:0; } /* 1600/360 is the store banner ratio (SK's is 1600x356, every big platform's is similar). It was 1200/380: with object-fit:cover that cut ~30% of the sides, right where the banner text usually is. Same ratio as the artwork = nothing cut. */ .st-hero__slide img{ display:block; width:100%; height:auto; aspect-ratio:1600/360; object-fit:cover; } @media(max-width:640px){ .st-hero__slide img{ aspect-ratio:16/10; } } .st-hero__target{ position:fixed; top:0; left:0; width:1px; height:1px; overflow:hidden; } .st-hero__points{ position:absolute; left:0; right:0; bottom:14px; display:flex; gap:10px; justify-content:center; } .st-hero__points a{ width:14px; height:14px; box-sizing:content-box; padding:6px; background-clip:content-box; border-radius:50%; background:rgba(255,255,255,.5); border:2px solid transparent; transition:transform .15s, background .15s; } .st-hero__points a:hover{ background:#fff; transform:scale(1.15); } .st-hero__points a:focus-visible{ outline:2px solid #fff; outline-offset:3px; } .st-hero:has(.st-hero__target:nth-of-type(1):target) .st-hero__points a:nth-child(1), .st-hero:has(.st-hero__target:nth-of-type(2):target) .st-hero__points a:nth-child(2), .st-hero:has(.st-hero__target:nth-of-type(3):target) .st-hero__points a:nth-child(3), .st-hero:has(.st-hero__target:nth-of-type(4):target) .st-hero__points a:nth-child(4), .st-hero:has(.st-hero__target:nth-of-type(5):target) .st-hero__points a:nth-child(5){ background:var(--st-accent); border-color:#fff; } .st-hero:has(.st-hero__target:nth-of-type(1):target) .st-hero__rail{ transform:translateX(0); } .st-hero:has(.st-hero__target:nth-of-type(2):target) .st-hero__rail{ transform:translateX(-100%); } .st-hero:has(.st-hero__target:nth-of-type(3):target) .st-hero__rail{ transform:translateX(-200%); } .st-hero:has(.st-hero__target:nth-of-type(4):target) .st-hero__rail{ transform:translateX(-300%); } .st-hero:has(.st-hero__target:nth-of-type(5):target) .st-hero__rail{ transform:translateX(-400%); } .st-hero:has(.st-hero__target:nth-of-type(6):target) .st-hero__rail{ transform:translateX(-500%); } .st-hero:has(.st-hero__target:nth-of-type(7):target) .st-hero__rail{ transform:translateX(-600%); } .st-hero:has(.st-hero__target:nth-of-type(8):target) .st-hero__rail{ transform:translateX(-700%); } /* Automatic hero rotation (no script), like the sponsor strip: each banner stays 6 s, the swap takes 0.6 s. Pauses with the mouse over it and stops for good when the visitor picks a dot (:target). A copy of the first slide at the end makes the return to the start invisible. Up to 8 images (the views cut the excess). */ .st-hero--multi:not(:has(.st-hero__target:target)):hover .st-hero__rail, .st-hero--multi:not(:has(.st-hero__target:target)):focus-within .st-hero__rail{ animation-play-state:paused; } @media (prefers-reduced-motion:reduce){ .st-hero__rail{ animation:none !important; } } @keyframes st-hero-2{0.00%{transform:translateX(-0%)} 45.00%{transform:translateX(-0%)} 50.00%{transform:translateX(-100%)} 95.00%{transform:translateX(-100%)} 100%{transform:translateX(-200%)}} .st-hero--multi[data-n="2"]:not(:has(.st-hero__target:target)) .st-hero__rail{ animation:st-hero-2 12s linear infinite; } @keyframes st-hero-2-p1{0.00%{background:var(--st-accent);border-color:#fff} 45.00%{background:var(--st-accent);border-color:#fff} 50.00%{background:rgba(255,255,255,.5);border-color:transparent} 95.00%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:var(--st-accent);border-color:#fff}} .st-hero--multi[data-n="2"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(1){ animation:st-hero-2-p1 12s linear infinite; } @keyframes st-hero-2-p2{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 45.00%{background:rgba(255,255,255,.5);border-color:transparent} 50.00%{background:var(--st-accent);border-color:#fff} 95.00%{background:var(--st-accent);border-color:#fff} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="2"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(2){ animation:st-hero-2-p2 12s linear infinite; } @keyframes st-hero-3{0.00%{transform:translateX(-0%)} 30.00%{transform:translateX(-0%)} 33.33%{transform:translateX(-100%)} 63.33%{transform:translateX(-100%)} 66.67%{transform:translateX(-200%)} 96.67%{transform:translateX(-200%)} 100%{transform:translateX(-300%)}} .st-hero--multi[data-n="3"]:not(:has(.st-hero__target:target)) .st-hero__rail{ animation:st-hero-3 18s linear infinite; } @keyframes st-hero-3-p1{0.00%{background:var(--st-accent);border-color:#fff} 30.00%{background:var(--st-accent);border-color:#fff} 33.33%{background:rgba(255,255,255,.5);border-color:transparent} 63.33%{background:rgba(255,255,255,.5);border-color:transparent} 66.67%{background:rgba(255,255,255,.5);border-color:transparent} 96.67%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:var(--st-accent);border-color:#fff}} .st-hero--multi[data-n="3"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(1){ animation:st-hero-3-p1 18s linear infinite; } @keyframes st-hero-3-p2{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 30.00%{background:rgba(255,255,255,.5);border-color:transparent} 33.33%{background:var(--st-accent);border-color:#fff} 63.33%{background:var(--st-accent);border-color:#fff} 66.67%{background:rgba(255,255,255,.5);border-color:transparent} 96.67%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="3"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(2){ animation:st-hero-3-p2 18s linear infinite; } @keyframes st-hero-3-p3{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 30.00%{background:rgba(255,255,255,.5);border-color:transparent} 33.33%{background:rgba(255,255,255,.5);border-color:transparent} 63.33%{background:rgba(255,255,255,.5);border-color:transparent} 66.67%{background:var(--st-accent);border-color:#fff} 96.67%{background:var(--st-accent);border-color:#fff} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="3"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(3){ animation:st-hero-3-p3 18s linear infinite; } @keyframes st-hero-4{0.00%{transform:translateX(-0%)} 22.50%{transform:translateX(-0%)} 25.00%{transform:translateX(-100%)} 47.50%{transform:translateX(-100%)} 50.00%{transform:translateX(-200%)} 72.50%{transform:translateX(-200%)} 75.00%{transform:translateX(-300%)} 97.50%{transform:translateX(-300%)} 100%{transform:translateX(-400%)}} .st-hero--multi[data-n="4"]:not(:has(.st-hero__target:target)) .st-hero__rail{ animation:st-hero-4 24s linear infinite; } @keyframes st-hero-4-p1{0.00%{background:var(--st-accent);border-color:#fff} 22.50%{background:var(--st-accent);border-color:#fff} 25.00%{background:rgba(255,255,255,.5);border-color:transparent} 47.50%{background:rgba(255,255,255,.5);border-color:transparent} 50.00%{background:rgba(255,255,255,.5);border-color:transparent} 72.50%{background:rgba(255,255,255,.5);border-color:transparent} 75.00%{background:rgba(255,255,255,.5);border-color:transparent} 97.50%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:var(--st-accent);border-color:#fff}} .st-hero--multi[data-n="4"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(1){ animation:st-hero-4-p1 24s linear infinite; } @keyframes st-hero-4-p2{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 22.50%{background:rgba(255,255,255,.5);border-color:transparent} 25.00%{background:var(--st-accent);border-color:#fff} 47.50%{background:var(--st-accent);border-color:#fff} 50.00%{background:rgba(255,255,255,.5);border-color:transparent} 72.50%{background:rgba(255,255,255,.5);border-color:transparent} 75.00%{background:rgba(255,255,255,.5);border-color:transparent} 97.50%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="4"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(2){ animation:st-hero-4-p2 24s linear infinite; } @keyframes st-hero-4-p3{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 22.50%{background:rgba(255,255,255,.5);border-color:transparent} 25.00%{background:rgba(255,255,255,.5);border-color:transparent} 47.50%{background:rgba(255,255,255,.5);border-color:transparent} 50.00%{background:var(--st-accent);border-color:#fff} 72.50%{background:var(--st-accent);border-color:#fff} 75.00%{background:rgba(255,255,255,.5);border-color:transparent} 97.50%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="4"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(3){ animation:st-hero-4-p3 24s linear infinite; } @keyframes st-hero-4-p4{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 22.50%{background:rgba(255,255,255,.5);border-color:transparent} 25.00%{background:rgba(255,255,255,.5);border-color:transparent} 47.50%{background:rgba(255,255,255,.5);border-color:transparent} 50.00%{background:rgba(255,255,255,.5);border-color:transparent} 72.50%{background:rgba(255,255,255,.5);border-color:transparent} 75.00%{background:var(--st-accent);border-color:#fff} 97.50%{background:var(--st-accent);border-color:#fff} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="4"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(4){ animation:st-hero-4-p4 24s linear infinite; } @keyframes st-hero-5{0.00%{transform:translateX(-0%)} 18.00%{transform:translateX(-0%)} 20.00%{transform:translateX(-100%)} 38.00%{transform:translateX(-100%)} 40.00%{transform:translateX(-200%)} 58.00%{transform:translateX(-200%)} 60.00%{transform:translateX(-300%)} 78.00%{transform:translateX(-300%)} 80.00%{transform:translateX(-400%)} 98.00%{transform:translateX(-400%)} 100%{transform:translateX(-500%)}} .st-hero--multi[data-n="5"]:not(:has(.st-hero__target:target)) .st-hero__rail{ animation:st-hero-5 30s linear infinite; } @keyframes st-hero-5-p1{0.00%{background:var(--st-accent);border-color:#fff} 18.00%{background:var(--st-accent);border-color:#fff} 20.00%{background:rgba(255,255,255,.5);border-color:transparent} 38.00%{background:rgba(255,255,255,.5);border-color:transparent} 40.00%{background:rgba(255,255,255,.5);border-color:transparent} 58.00%{background:rgba(255,255,255,.5);border-color:transparent} 60.00%{background:rgba(255,255,255,.5);border-color:transparent} 78.00%{background:rgba(255,255,255,.5);border-color:transparent} 80.00%{background:rgba(255,255,255,.5);border-color:transparent} 98.00%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:var(--st-accent);border-color:#fff}} .st-hero--multi[data-n="5"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(1){ animation:st-hero-5-p1 30s linear infinite; } @keyframes st-hero-5-p2{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 18.00%{background:rgba(255,255,255,.5);border-color:transparent} 20.00%{background:var(--st-accent);border-color:#fff} 38.00%{background:var(--st-accent);border-color:#fff} 40.00%{background:rgba(255,255,255,.5);border-color:transparent} 58.00%{background:rgba(255,255,255,.5);border-color:transparent} 60.00%{background:rgba(255,255,255,.5);border-color:transparent} 78.00%{background:rgba(255,255,255,.5);border-color:transparent} 80.00%{background:rgba(255,255,255,.5);border-color:transparent} 98.00%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="5"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(2){ animation:st-hero-5-p2 30s linear infinite; } @keyframes st-hero-5-p3{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 18.00%{background:rgba(255,255,255,.5);border-color:transparent} 20.00%{background:rgba(255,255,255,.5);border-color:transparent} 38.00%{background:rgba(255,255,255,.5);border-color:transparent} 40.00%{background:var(--st-accent);border-color:#fff} 58.00%{background:var(--st-accent);border-color:#fff} 60.00%{background:rgba(255,255,255,.5);border-color:transparent} 78.00%{background:rgba(255,255,255,.5);border-color:transparent} 80.00%{background:rgba(255,255,255,.5);border-color:transparent} 98.00%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="5"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(3){ animation:st-hero-5-p3 30s linear infinite; } @keyframes st-hero-5-p4{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 18.00%{background:rgba(255,255,255,.5);border-color:transparent} 20.00%{background:rgba(255,255,255,.5);border-color:transparent} 38.00%{background:rgba(255,255,255,.5);border-color:transparent} 40.00%{background:rgba(255,255,255,.5);border-color:transparent} 58.00%{background:rgba(255,255,255,.5);border-color:transparent} 60.00%{background:var(--st-accent);border-color:#fff} 78.00%{background:var(--st-accent);border-color:#fff} 80.00%{background:rgba(255,255,255,.5);border-color:transparent} 98.00%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="5"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(4){ animation:st-hero-5-p4 30s linear infinite; } @keyframes st-hero-5-p5{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 18.00%{background:rgba(255,255,255,.5);border-color:transparent} 20.00%{background:rgba(255,255,255,.5);border-color:transparent} 38.00%{background:rgba(255,255,255,.5);border-color:transparent} 40.00%{background:rgba(255,255,255,.5);border-color:transparent} 58.00%{background:rgba(255,255,255,.5);border-color:transparent} 60.00%{background:rgba(255,255,255,.5);border-color:transparent} 78.00%{background:rgba(255,255,255,.5);border-color:transparent} 80.00%{background:var(--st-accent);border-color:#fff} 98.00%{background:var(--st-accent);border-color:#fff} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="5"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(5){ animation:st-hero-5-p5 30s linear infinite; } @keyframes st-hero-6{0.00%{transform:translateX(-0%)} 15.00%{transform:translateX(-0%)} 16.67%{transform:translateX(-100%)} 31.67%{transform:translateX(-100%)} 33.33%{transform:translateX(-200%)} 48.33%{transform:translateX(-200%)} 50.00%{transform:translateX(-300%)} 65.00%{transform:translateX(-300%)} 66.67%{transform:translateX(-400%)} 81.67%{transform:translateX(-400%)} 83.33%{transform:translateX(-500%)} 98.33%{transform:translateX(-500%)} 100%{transform:translateX(-600%)}} .st-hero--multi[data-n="6"]:not(:has(.st-hero__target:target)) .st-hero__rail{ animation:st-hero-6 36s linear infinite; } @keyframes st-hero-6-p1{0.00%{background:var(--st-accent);border-color:#fff} 15.00%{background:var(--st-accent);border-color:#fff} 16.67%{background:rgba(255,255,255,.5);border-color:transparent} 31.67%{background:rgba(255,255,255,.5);border-color:transparent} 33.33%{background:rgba(255,255,255,.5);border-color:transparent} 48.33%{background:rgba(255,255,255,.5);border-color:transparent} 50.00%{background:rgba(255,255,255,.5);border-color:transparent} 65.00%{background:rgba(255,255,255,.5);border-color:transparent} 66.67%{background:rgba(255,255,255,.5);border-color:transparent} 81.67%{background:rgba(255,255,255,.5);border-color:transparent} 83.33%{background:rgba(255,255,255,.5);border-color:transparent} 98.33%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:var(--st-accent);border-color:#fff}} .st-hero--multi[data-n="6"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(1){ animation:st-hero-6-p1 36s linear infinite; } @keyframes st-hero-6-p2{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 15.00%{background:rgba(255,255,255,.5);border-color:transparent} 16.67%{background:var(--st-accent);border-color:#fff} 31.67%{background:var(--st-accent);border-color:#fff} 33.33%{background:rgba(255,255,255,.5);border-color:transparent} 48.33%{background:rgba(255,255,255,.5);border-color:transparent} 50.00%{background:rgba(255,255,255,.5);border-color:transparent} 65.00%{background:rgba(255,255,255,.5);border-color:transparent} 66.67%{background:rgba(255,255,255,.5);border-color:transparent} 81.67%{background:rgba(255,255,255,.5);border-color:transparent} 83.33%{background:rgba(255,255,255,.5);border-color:transparent} 98.33%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="6"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(2){ animation:st-hero-6-p2 36s linear infinite; } @keyframes st-hero-6-p3{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 15.00%{background:rgba(255,255,255,.5);border-color:transparent} 16.67%{background:rgba(255,255,255,.5);border-color:transparent} 31.67%{background:rgba(255,255,255,.5);border-color:transparent} 33.33%{background:var(--st-accent);border-color:#fff} 48.33%{background:var(--st-accent);border-color:#fff} 50.00%{background:rgba(255,255,255,.5);border-color:transparent} 65.00%{background:rgba(255,255,255,.5);border-color:transparent} 66.67%{background:rgba(255,255,255,.5);border-color:transparent} 81.67%{background:rgba(255,255,255,.5);border-color:transparent} 83.33%{background:rgba(255,255,255,.5);border-color:transparent} 98.33%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="6"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(3){ animation:st-hero-6-p3 36s linear infinite; } @keyframes st-hero-6-p4{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 15.00%{background:rgba(255,255,255,.5);border-color:transparent} 16.67%{background:rgba(255,255,255,.5);border-color:transparent} 31.67%{background:rgba(255,255,255,.5);border-color:transparent} 33.33%{background:rgba(255,255,255,.5);border-color:transparent} 48.33%{background:rgba(255,255,255,.5);border-color:transparent} 50.00%{background:var(--st-accent);border-color:#fff} 65.00%{background:var(--st-accent);border-color:#fff} 66.67%{background:rgba(255,255,255,.5);border-color:transparent} 81.67%{background:rgba(255,255,255,.5);border-color:transparent} 83.33%{background:rgba(255,255,255,.5);border-color:transparent} 98.33%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="6"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(4){ animation:st-hero-6-p4 36s linear infinite; } @keyframes st-hero-6-p5{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 15.00%{background:rgba(255,255,255,.5);border-color:transparent} 16.67%{background:rgba(255,255,255,.5);border-color:transparent} 31.67%{background:rgba(255,255,255,.5);border-color:transparent} 33.33%{background:rgba(255,255,255,.5);border-color:transparent} 48.33%{background:rgba(255,255,255,.5);border-color:transparent} 50.00%{background:rgba(255,255,255,.5);border-color:transparent} 65.00%{background:rgba(255,255,255,.5);border-color:transparent} 66.67%{background:var(--st-accent);border-color:#fff} 81.67%{background:var(--st-accent);border-color:#fff} 83.33%{background:rgba(255,255,255,.5);border-color:transparent} 98.33%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="6"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(5){ animation:st-hero-6-p5 36s linear infinite; } @keyframes st-hero-6-p6{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 15.00%{background:rgba(255,255,255,.5);border-color:transparent} 16.67%{background:rgba(255,255,255,.5);border-color:transparent} 31.67%{background:rgba(255,255,255,.5);border-color:transparent} 33.33%{background:rgba(255,255,255,.5);border-color:transparent} 48.33%{background:rgba(255,255,255,.5);border-color:transparent} 50.00%{background:rgba(255,255,255,.5);border-color:transparent} 65.00%{background:rgba(255,255,255,.5);border-color:transparent} 66.67%{background:rgba(255,255,255,.5);border-color:transparent} 81.67%{background:rgba(255,255,255,.5);border-color:transparent} 83.33%{background:var(--st-accent);border-color:#fff} 98.33%{background:var(--st-accent);border-color:#fff} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="6"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(6){ animation:st-hero-6-p6 36s linear infinite; } @keyframes st-hero-7{0.00%{transform:translateX(-0%)} 12.86%{transform:translateX(-0%)} 14.29%{transform:translateX(-100%)} 27.14%{transform:translateX(-100%)} 28.57%{transform:translateX(-200%)} 41.43%{transform:translateX(-200%)} 42.86%{transform:translateX(-300%)} 55.71%{transform:translateX(-300%)} 57.14%{transform:translateX(-400%)} 70.00%{transform:translateX(-400%)} 71.43%{transform:translateX(-500%)} 84.29%{transform:translateX(-500%)} 85.71%{transform:translateX(-600%)} 98.57%{transform:translateX(-600%)} 100%{transform:translateX(-700%)}} .st-hero--multi[data-n="7"]:not(:has(.st-hero__target:target)) .st-hero__rail{ animation:st-hero-7 42s linear infinite; } @keyframes st-hero-7-p1{0.00%{background:var(--st-accent);border-color:#fff} 12.86%{background:var(--st-accent);border-color:#fff} 14.29%{background:rgba(255,255,255,.5);border-color:transparent} 27.14%{background:rgba(255,255,255,.5);border-color:transparent} 28.57%{background:rgba(255,255,255,.5);border-color:transparent} 41.43%{background:rgba(255,255,255,.5);border-color:transparent} 42.86%{background:rgba(255,255,255,.5);border-color:transparent} 55.71%{background:rgba(255,255,255,.5);border-color:transparent} 57.14%{background:rgba(255,255,255,.5);border-color:transparent} 70.00%{background:rgba(255,255,255,.5);border-color:transparent} 71.43%{background:rgba(255,255,255,.5);border-color:transparent} 84.29%{background:rgba(255,255,255,.5);border-color:transparent} 85.71%{background:rgba(255,255,255,.5);border-color:transparent} 98.57%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:var(--st-accent);border-color:#fff}} .st-hero--multi[data-n="7"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(1){ animation:st-hero-7-p1 42s linear infinite; } @keyframes st-hero-7-p2{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 12.86%{background:rgba(255,255,255,.5);border-color:transparent} 14.29%{background:var(--st-accent);border-color:#fff} 27.14%{background:var(--st-accent);border-color:#fff} 28.57%{background:rgba(255,255,255,.5);border-color:transparent} 41.43%{background:rgba(255,255,255,.5);border-color:transparent} 42.86%{background:rgba(255,255,255,.5);border-color:transparent} 55.71%{background:rgba(255,255,255,.5);border-color:transparent} 57.14%{background:rgba(255,255,255,.5);border-color:transparent} 70.00%{background:rgba(255,255,255,.5);border-color:transparent} 71.43%{background:rgba(255,255,255,.5);border-color:transparent} 84.29%{background:rgba(255,255,255,.5);border-color:transparent} 85.71%{background:rgba(255,255,255,.5);border-color:transparent} 98.57%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="7"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(2){ animation:st-hero-7-p2 42s linear infinite; } @keyframes st-hero-7-p3{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 12.86%{background:rgba(255,255,255,.5);border-color:transparent} 14.29%{background:rgba(255,255,255,.5);border-color:transparent} 27.14%{background:rgba(255,255,255,.5);border-color:transparent} 28.57%{background:var(--st-accent);border-color:#fff} 41.43%{background:var(--st-accent);border-color:#fff} 42.86%{background:rgba(255,255,255,.5);border-color:transparent} 55.71%{background:rgba(255,255,255,.5);border-color:transparent} 57.14%{background:rgba(255,255,255,.5);border-color:transparent} 70.00%{background:rgba(255,255,255,.5);border-color:transparent} 71.43%{background:rgba(255,255,255,.5);border-color:transparent} 84.29%{background:rgba(255,255,255,.5);border-color:transparent} 85.71%{background:rgba(255,255,255,.5);border-color:transparent} 98.57%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="7"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(3){ animation:st-hero-7-p3 42s linear infinite; } @keyframes st-hero-7-p4{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 12.86%{background:rgba(255,255,255,.5);border-color:transparent} 14.29%{background:rgba(255,255,255,.5);border-color:transparent} 27.14%{background:rgba(255,255,255,.5);border-color:transparent} 28.57%{background:rgba(255,255,255,.5);border-color:transparent} 41.43%{background:rgba(255,255,255,.5);border-color:transparent} 42.86%{background:var(--st-accent);border-color:#fff} 55.71%{background:var(--st-accent);border-color:#fff} 57.14%{background:rgba(255,255,255,.5);border-color:transparent} 70.00%{background:rgba(255,255,255,.5);border-color:transparent} 71.43%{background:rgba(255,255,255,.5);border-color:transparent} 84.29%{background:rgba(255,255,255,.5);border-color:transparent} 85.71%{background:rgba(255,255,255,.5);border-color:transparent} 98.57%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="7"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(4){ animation:st-hero-7-p4 42s linear infinite; } @keyframes st-hero-7-p5{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 12.86%{background:rgba(255,255,255,.5);border-color:transparent} 14.29%{background:rgba(255,255,255,.5);border-color:transparent} 27.14%{background:rgba(255,255,255,.5);border-color:transparent} 28.57%{background:rgba(255,255,255,.5);border-color:transparent} 41.43%{background:rgba(255,255,255,.5);border-color:transparent} 42.86%{background:rgba(255,255,255,.5);border-color:transparent} 55.71%{background:rgba(255,255,255,.5);border-color:transparent} 57.14%{background:var(--st-accent);border-color:#fff} 70.00%{background:var(--st-accent);border-color:#fff} 71.43%{background:rgba(255,255,255,.5);border-color:transparent} 84.29%{background:rgba(255,255,255,.5);border-color:transparent} 85.71%{background:rgba(255,255,255,.5);border-color:transparent} 98.57%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="7"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(5){ animation:st-hero-7-p5 42s linear infinite; } @keyframes st-hero-7-p6{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 12.86%{background:rgba(255,255,255,.5);border-color:transparent} 14.29%{background:rgba(255,255,255,.5);border-color:transparent} 27.14%{background:rgba(255,255,255,.5);border-color:transparent} 28.57%{background:rgba(255,255,255,.5);border-color:transparent} 41.43%{background:rgba(255,255,255,.5);border-color:transparent} 42.86%{background:rgba(255,255,255,.5);border-color:transparent} 55.71%{background:rgba(255,255,255,.5);border-color:transparent} 57.14%{background:rgba(255,255,255,.5);border-color:transparent} 70.00%{background:rgba(255,255,255,.5);border-color:transparent} 71.43%{background:var(--st-accent);border-color:#fff} 84.29%{background:var(--st-accent);border-color:#fff} 85.71%{background:rgba(255,255,255,.5);border-color:transparent} 98.57%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="7"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(6){ animation:st-hero-7-p6 42s linear infinite; } @keyframes st-hero-7-p7{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 12.86%{background:rgba(255,255,255,.5);border-color:transparent} 14.29%{background:rgba(255,255,255,.5);border-color:transparent} 27.14%{background:rgba(255,255,255,.5);border-color:transparent} 28.57%{background:rgba(255,255,255,.5);border-color:transparent} 41.43%{background:rgba(255,255,255,.5);border-color:transparent} 42.86%{background:rgba(255,255,255,.5);border-color:transparent} 55.71%{background:rgba(255,255,255,.5);border-color:transparent} 57.14%{background:rgba(255,255,255,.5);border-color:transparent} 70.00%{background:rgba(255,255,255,.5);border-color:transparent} 71.43%{background:rgba(255,255,255,.5);border-color:transparent} 84.29%{background:rgba(255,255,255,.5);border-color:transparent} 85.71%{background:var(--st-accent);border-color:#fff} 98.57%{background:var(--st-accent);border-color:#fff} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="7"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(7){ animation:st-hero-7-p7 42s linear infinite; } @keyframes st-hero-8{0.00%{transform:translateX(-0%)} 11.25%{transform:translateX(-0%)} 12.50%{transform:translateX(-100%)} 23.75%{transform:translateX(-100%)} 25.00%{transform:translateX(-200%)} 36.25%{transform:translateX(-200%)} 37.50%{transform:translateX(-300%)} 48.75%{transform:translateX(-300%)} 50.00%{transform:translateX(-400%)} 61.25%{transform:translateX(-400%)} 62.50%{transform:translateX(-500%)} 73.75%{transform:translateX(-500%)} 75.00%{transform:translateX(-600%)} 86.25%{transform:translateX(-600%)} 87.50%{transform:translateX(-700%)} 98.75%{transform:translateX(-700%)} 100%{transform:translateX(-800%)}} .st-hero--multi[data-n="8"]:not(:has(.st-hero__target:target)) .st-hero__rail{ animation:st-hero-8 48s linear infinite; } @keyframes st-hero-8-p1{0.00%{background:var(--st-accent);border-color:#fff} 11.25%{background:var(--st-accent);border-color:#fff} 12.50%{background:rgba(255,255,255,.5);border-color:transparent} 23.75%{background:rgba(255,255,255,.5);border-color:transparent} 25.00%{background:rgba(255,255,255,.5);border-color:transparent} 36.25%{background:rgba(255,255,255,.5);border-color:transparent} 37.50%{background:rgba(255,255,255,.5);border-color:transparent} 48.75%{background:rgba(255,255,255,.5);border-color:transparent} 50.00%{background:rgba(255,255,255,.5);border-color:transparent} 61.25%{background:rgba(255,255,255,.5);border-color:transparent} 62.50%{background:rgba(255,255,255,.5);border-color:transparent} 73.75%{background:rgba(255,255,255,.5);border-color:transparent} 75.00%{background:rgba(255,255,255,.5);border-color:transparent} 86.25%{background:rgba(255,255,255,.5);border-color:transparent} 87.50%{background:rgba(255,255,255,.5);border-color:transparent} 98.75%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:var(--st-accent);border-color:#fff}} .st-hero--multi[data-n="8"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(1){ animation:st-hero-8-p1 48s linear infinite; } @keyframes st-hero-8-p2{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 11.25%{background:rgba(255,255,255,.5);border-color:transparent} 12.50%{background:var(--st-accent);border-color:#fff} 23.75%{background:var(--st-accent);border-color:#fff} 25.00%{background:rgba(255,255,255,.5);border-color:transparent} 36.25%{background:rgba(255,255,255,.5);border-color:transparent} 37.50%{background:rgba(255,255,255,.5);border-color:transparent} 48.75%{background:rgba(255,255,255,.5);border-color:transparent} 50.00%{background:rgba(255,255,255,.5);border-color:transparent} 61.25%{background:rgba(255,255,255,.5);border-color:transparent} 62.50%{background:rgba(255,255,255,.5);border-color:transparent} 73.75%{background:rgba(255,255,255,.5);border-color:transparent} 75.00%{background:rgba(255,255,255,.5);border-color:transparent} 86.25%{background:rgba(255,255,255,.5);border-color:transparent} 87.50%{background:rgba(255,255,255,.5);border-color:transparent} 98.75%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="8"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(2){ animation:st-hero-8-p2 48s linear infinite; } @keyframes st-hero-8-p3{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 11.25%{background:rgba(255,255,255,.5);border-color:transparent} 12.50%{background:rgba(255,255,255,.5);border-color:transparent} 23.75%{background:rgba(255,255,255,.5);border-color:transparent} 25.00%{background:var(--st-accent);border-color:#fff} 36.25%{background:var(--st-accent);border-color:#fff} 37.50%{background:rgba(255,255,255,.5);border-color:transparent} 48.75%{background:rgba(255,255,255,.5);border-color:transparent} 50.00%{background:rgba(255,255,255,.5);border-color:transparent} 61.25%{background:rgba(255,255,255,.5);border-color:transparent} 62.50%{background:rgba(255,255,255,.5);border-color:transparent} 73.75%{background:rgba(255,255,255,.5);border-color:transparent} 75.00%{background:rgba(255,255,255,.5);border-color:transparent} 86.25%{background:rgba(255,255,255,.5);border-color:transparent} 87.50%{background:rgba(255,255,255,.5);border-color:transparent} 98.75%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="8"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(3){ animation:st-hero-8-p3 48s linear infinite; } @keyframes st-hero-8-p4{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 11.25%{background:rgba(255,255,255,.5);border-color:transparent} 12.50%{background:rgba(255,255,255,.5);border-color:transparent} 23.75%{background:rgba(255,255,255,.5);border-color:transparent} 25.00%{background:rgba(255,255,255,.5);border-color:transparent} 36.25%{background:rgba(255,255,255,.5);border-color:transparent} 37.50%{background:var(--st-accent);border-color:#fff} 48.75%{background:var(--st-accent);border-color:#fff} 50.00%{background:rgba(255,255,255,.5);border-color:transparent} 61.25%{background:rgba(255,255,255,.5);border-color:transparent} 62.50%{background:rgba(255,255,255,.5);border-color:transparent} 73.75%{background:rgba(255,255,255,.5);border-color:transparent} 75.00%{background:rgba(255,255,255,.5);border-color:transparent} 86.25%{background:rgba(255,255,255,.5);border-color:transparent} 87.50%{background:rgba(255,255,255,.5);border-color:transparent} 98.75%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="8"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(4){ animation:st-hero-8-p4 48s linear infinite; } @keyframes st-hero-8-p5{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 11.25%{background:rgba(255,255,255,.5);border-color:transparent} 12.50%{background:rgba(255,255,255,.5);border-color:transparent} 23.75%{background:rgba(255,255,255,.5);border-color:transparent} 25.00%{background:rgba(255,255,255,.5);border-color:transparent} 36.25%{background:rgba(255,255,255,.5);border-color:transparent} 37.50%{background:rgba(255,255,255,.5);border-color:transparent} 48.75%{background:rgba(255,255,255,.5);border-color:transparent} 50.00%{background:var(--st-accent);border-color:#fff} 61.25%{background:var(--st-accent);border-color:#fff} 62.50%{background:rgba(255,255,255,.5);border-color:transparent} 73.75%{background:rgba(255,255,255,.5);border-color:transparent} 75.00%{background:rgba(255,255,255,.5);border-color:transparent} 86.25%{background:rgba(255,255,255,.5);border-color:transparent} 87.50%{background:rgba(255,255,255,.5);border-color:transparent} 98.75%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="8"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(5){ animation:st-hero-8-p5 48s linear infinite; } @keyframes st-hero-8-p6{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 11.25%{background:rgba(255,255,255,.5);border-color:transparent} 12.50%{background:rgba(255,255,255,.5);border-color:transparent} 23.75%{background:rgba(255,255,255,.5);border-color:transparent} 25.00%{background:rgba(255,255,255,.5);border-color:transparent} 36.25%{background:rgba(255,255,255,.5);border-color:transparent} 37.50%{background:rgba(255,255,255,.5);border-color:transparent} 48.75%{background:rgba(255,255,255,.5);border-color:transparent} 50.00%{background:rgba(255,255,255,.5);border-color:transparent} 61.25%{background:rgba(255,255,255,.5);border-color:transparent} 62.50%{background:var(--st-accent);border-color:#fff} 73.75%{background:var(--st-accent);border-color:#fff} 75.00%{background:rgba(255,255,255,.5);border-color:transparent} 86.25%{background:rgba(255,255,255,.5);border-color:transparent} 87.50%{background:rgba(255,255,255,.5);border-color:transparent} 98.75%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="8"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(6){ animation:st-hero-8-p6 48s linear infinite; } @keyframes st-hero-8-p7{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 11.25%{background:rgba(255,255,255,.5);border-color:transparent} 12.50%{background:rgba(255,255,255,.5);border-color:transparent} 23.75%{background:rgba(255,255,255,.5);border-color:transparent} 25.00%{background:rgba(255,255,255,.5);border-color:transparent} 36.25%{background:rgba(255,255,255,.5);border-color:transparent} 37.50%{background:rgba(255,255,255,.5);border-color:transparent} 48.75%{background:rgba(255,255,255,.5);border-color:transparent} 50.00%{background:rgba(255,255,255,.5);border-color:transparent} 61.25%{background:rgba(255,255,255,.5);border-color:transparent} 62.50%{background:rgba(255,255,255,.5);border-color:transparent} 73.75%{background:rgba(255,255,255,.5);border-color:transparent} 75.00%{background:var(--st-accent);border-color:#fff} 86.25%{background:var(--st-accent);border-color:#fff} 87.50%{background:rgba(255,255,255,.5);border-color:transparent} 98.75%{background:rgba(255,255,255,.5);border-color:transparent} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="8"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(7){ animation:st-hero-8-p7 48s linear infinite; } @keyframes st-hero-8-p8{0.00%{background:rgba(255,255,255,.5);border-color:transparent} 11.25%{background:rgba(255,255,255,.5);border-color:transparent} 12.50%{background:rgba(255,255,255,.5);border-color:transparent} 23.75%{background:rgba(255,255,255,.5);border-color:transparent} 25.00%{background:rgba(255,255,255,.5);border-color:transparent} 36.25%{background:rgba(255,255,255,.5);border-color:transparent} 37.50%{background:rgba(255,255,255,.5);border-color:transparent} 48.75%{background:rgba(255,255,255,.5);border-color:transparent} 50.00%{background:rgba(255,255,255,.5);border-color:transparent} 61.25%{background:rgba(255,255,255,.5);border-color:transparent} 62.50%{background:rgba(255,255,255,.5);border-color:transparent} 73.75%{background:rgba(255,255,255,.5);border-color:transparent} 75.00%{background:rgba(255,255,255,.5);border-color:transparent} 86.25%{background:rgba(255,255,255,.5);border-color:transparent} 87.50%{background:var(--st-accent);border-color:#fff} 98.75%{background:var(--st-accent);border-color:#fff} 100%{background:rgba(255,255,255,.5);border-color:transparent}} .st-hero--multi[data-n="8"]:not(:has(.st-hero__target:target)) .st-hero__points a:nth-child(8){ animation:st-hero-8-p8 48s linear infinite; } /* department hero (mosaic, when there is no banner) */ .st-mosaic{ background:var(--st-black); } .st-mosaic__grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:12px; padding:20px; } .st-mosaic__tile{ position:relative; overflow:hidden; border-radius:12px; text-decoration:none; background:#26261f; display:block; } .st-mosaic__tile--large{ grid-column:span 2; grid-row:span 2; } .st-mosaic__tile img{ width:100%; height:100%; object-fit:cover; opacity:.62; transition:transform .4s, opacity .3s; } .st-mosaic__tile:hover img{ transform:scale(1.05); opacity:.75; } .st-mosaic__lbl{ position:absolute; left:16px; bottom:14px; color:#fff; display:flex; flex-direction:column; text-shadow:0 2px 10px rgba(0,0,0,.6); } .st-mosaic__lbl b{ font-family:var(--st-display); font-size:1.3rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; } .st-mosaic__lbl small{ font-size:.8rem; color:var(--st-accent); font-weight:600; } .st-mosaic__tile--large .st-mosaic__lbl b{ font-size:1.9rem; } /* ============================================================ BADGES */ .st-badges{ background:var(--st-black); } .st-badges__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; padding:0; } .st-badge{ display:flex; align-items:center; gap:14px; padding:20px 18px; color:#fff; } .st-badge__ic{ color:var(--st-accent-on-dark, var(--st-accent)); flex:0 0 auto; display:inline-flex; } .st-badge__tx{ display:flex; flex-direction:column; } .st-badge__tx b{ font-family:var(--st-display); font-size:1.05rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; } .st-badge__tx small{ font-size:.82rem; color:#b7b7bb; } /* ============================================================ ROW */ .st-row{ padding:36px 0 8px; } .st-row__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; border-bottom:2px solid var(--st-line); padding-bottom:12px; } .st-row__title{ margin:0; font-size:1.5rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; position:relative; padding-bottom:12px; } .st-row__title::after{ content:""; position:absolute; left:0; bottom:-14px; width:60px; height:3px; background:var(--st-accent); } .st-row__view{ display:inline-flex; align-items:center; gap:4px; text-decoration:none; font-family:var(--st-display); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:.9rem; color:var(--st-ink); white-space:nowrap; } .st-row__view:hover{ color:var(--st-accent); } .st-row__view svg{ transition:transform .15s; } .st-row__view:hover svg{ transform:translateX(3px); } .st-row__rail{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } /* ============================================================ CARD */ .prod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; } .prod-card{ background:#fff; border:1px solid var(--st-line); border-radius:var(--st-radius); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s, border-color .2s; } .prod-card:hover{ box-shadow:var(--st-shadow-high); transform:translateY(-3px); border-color:#dcdcdf; } .prod-card__img{ position:relative; display:block; background:#fff; } .prod-card__img img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; padding:14px; background:#fff; } .prod-card__badge{ position:absolute; top:10px; left:10px; font-family:var(--st-display); font-size:.75rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:4px 9px; border-radius:6px; color:#fff; z-index:2; } .prod-card__badge--promo{ background:var(--st-promo); } .prod-card__badge--shipping{ background:var(--st-ok); top:auto; bottom:10px; left:10px; } .prod-card__soldout{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.62); font-family:var(--st-display); font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--st-black); } .prod-card__body{ padding:12px 14px 16px; display:flex; flex-direction:column; gap:6px; flex:1; } .prod-card__brand{ color:var(--st-gray) !important; margin:0; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--st-gray-2); font-weight:600; } .prod-card__name{ margin:0; font-size:1.02rem; line-height:1.22; font-weight:600; } .prod-card__name a{ color:var(--st-ink); text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.5em; } .prod-card__name a:hover{ color:var(--st-accent); } .prod-card__price{ margin:2px 0 0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:auto; } .prod-card__of{ text-decoration:line-through; color:var(--st-gray); font-size:.9rem; } .prod-card__by{ font-family:var(--st-display); font-weight:700; font-size:1.4rem; color:var(--st-black); letter-spacing:.01em; } .prod-card__add,.btn-primary,.btn-secondary{ display:inline-flex; align-items:center; justify-content:center; gap:8px; text-align:center; text-decoration:none; cursor:pointer; font-family:var(--st-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; border:0; font-size:.95rem; padding:11px 16px; border-radius:8px; transition:filter .15s, background .15s, transform .1s; } .prod-card__add{ background:var(--st-accent); color:var(--st-accent-txt); margin-top:8px; } .prod-card__add:hover{ filter:brightness(1.08); } .prod-card__add:active{ transform:translateY(1px); } .prod-card__add--off{ background:#e6e6e8; color:#5f5f66; cursor:not-allowed; } .prod-card__add--choose{ background:#fff; color:var(--st-accent); border:2px solid var(--st-accent); } .prod-card__add--choose:hover{ background:var(--st-accent); color:var(--st-accent-txt); filter:none; } #delivery-notice.is-alert{ background:#fdf3e3; border-left:3px solid #c77800; padding:8px 10px; color:#5a3a00; border-radius:6px; } .cart-shipping__note--alert{ background:#fdf3e3; border-left:3px solid #c77800; padding:8px 10px; color:#5a3a00; border-radius:6px; } /* "no carrinho": the card of an item already in the cart becomes - N + */ .prod-card__step{ display:flex; align-items:stretch; margin-top:8px; min-height:44px; border:2px solid var(--st-accent); border-radius:10px; background:#fff; overflow:hidden; } .prod-card__step__b{ flex:0 0 44px; display:flex; align-items:center; justify-content:center; border:0; background:var(--st-accent); color:var(--st-accent-txt); font-size:1.25rem; font-weight:700; cursor:pointer; padding:0; transition:filter .15s; } .prod-card__step__b:hover{ filter:brightness(1.08); } .prod-card__step__b:active{ transform:translateY(1px); } .prod-card__step__b.is-ceiling{ background:#e2e4dc; color:#8a8f80; cursor:not-allowed; } .prod-card__step__b:focus-visible{ outline:3px solid #2f6fed; outline-offset:-3px; } .prod-card__step__n{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:5px; font-size:.82rem; color:var(--st-accent); font-family:var(--st-display); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; padding:0 4px; } .prod-card__step__n b{ font-size:1.05rem; } .prod-card.is-no-cart{ border-color:var(--st-accent); } /* the hidden attribute loses to the buttons' display:flex; here it wins */ .prod-card__add[hidden],.prod-card__step[hidden]{ display:none !important; } @keyframes st-bounce{ 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} } .st-cart-top__n.is-skip,.prod-card__step__n b.is-skip{ animation:st-bounce .35s ease-out; display:inline-block; } .st-mini__rm{ flex:0 0 28px; height:28px; border:0; border-radius:50%; background:transparent; color:var(--st-gray); font-size:1.15rem; line-height:1; cursor:pointer; margin-left:2px; } .st-mini__rm:hover{ background:#f1f1f3; color:#a11; } @media (prefers-reduced-motion:reduce){ .st-cart-top__n.is-skip,.prod-card__step__n b.is-skip{ animation:none; } } .st-product__already{ display:block; margin:0; font-size:.9rem; color:var(--st-accent); } /* block: as flex, each text run became its own wrapping column on phones */ .st-product__already svg{ display:inline-block; vertical-align:-2px; margin-right:6px; } .st-product__already a{ white-space:nowrap; } .st-product__already a{ color:inherit; } @media (max-width:480px){ .prod-card__step__n{ font-size:.74rem; } } .btn-primary{ background:var(--st-accent); color:var(--st-accent-txt); } .btn-primary:hover{ filter:brightness(1.08); } .btn-secondary{ background:#fff; color:var(--st-ink); border:1.5px solid var(--st-line); } .btn-secondary:hover{ border-color:var(--st-gray-2); } /* ============================================================ BREADCRUMB */ .st-trail{ background:#fff; border-bottom:1px solid var(--st-line); } .st-trail ol{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:12px 0; font-size:.86rem; color:var(--st-gray); } .st-trail li:not(:last-child)::after{ content:"›"; margin-left:6px; color:var(--st-gray-2); } .st-trail a{ text-decoration:none; color:var(--st-gray); } .st-trail a:hover{ color:var(--st-accent); } .st-trail [aria-current]{ color:var(--st-ink); font-weight:600; } /* ============================================================ GRID (shop) */ .st-grid{ display:grid; grid-template-columns:250px 1fr; gap:28px; padding-top:24px; padding-bottom:56px; align-items:start; } .st-filters__box{ background:#fff; border:1px solid var(--st-line); border-radius:var(--st-radius); overflow:hidden; } .st-filters__box>summary{ list-style:none; cursor:pointer; padding:14px 16px; font-family:var(--st-display); font-weight:700; text-transform:uppercase; letter-spacing:.03em; background:var(--st-black); color:#fff; } .st-filters__box>summary::-webkit-details-marker{ display:none; } .st-filters__list{ list-style:none; margin:0; padding:6px; } .st-filters__list a{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; text-decoration:none; border-radius:7px; color:var(--st-ink); font-size:.94rem; } .st-filters__list a:hover{ background:var(--st-bg); } .st-filters__list a.is-current{ background:var(--st-accent); color:var(--st-accent-txt); font-weight:600; } .st-filters__n{ font-size:.76rem; color:var(--st-gray); } /* Tree: department in bold, children indented and smaller. */ .st-filters__list a.st-filters__root{ font-weight:700; text-transform:uppercase; font-size:.84rem; letter-spacing:.02em; margin-top:4px; } .st-filters__children{ list-style:none; margin:0 0 4px; padding:0 0 0 10px; border-left:2px solid var(--st-line); margin-left:12px; } .st-filters__children a{ padding:7px 10px; font-size:.9rem; } .st-filters__list a.is-current .st-filters__n{ color:inherit; opacity:.8; } /* --- facets (brand, caliber, firearm type, availability, price) ----- Same box as the category list, with a checkbox instead of a link: brand and caliber combine, category does not. */ .st-filters__form{ display:flex; flex-direction:column; gap:14px; } .st-filters__options{ list-style:none; margin:0; padding:6px; max-height:288px; overflow:auto; } .st-filters__options label{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:7px; cursor:pointer; font-size:.94rem; color:var(--st-ink); } .st-filters__options label:hover{ background:var(--st-bg); } .st-filters__options input{ accent-color:var(--st-accent); width:16px; height:16px; flex:0 0 auto; margin:0; } /* The name pushes the count to the right, as in the category list. */ .st-filters__options label>span:first-of-type{ flex:1 1 auto; } .st-filters__price{ display:flex; align-items:center; gap:8px; padding:12px; } .st-filters__price label{ flex:1 1 0; min-width:0; } .st-filters__price input{ width:100%; font:inherit; font-size:.92rem; padding:9px 10px; border:1px solid var(--st-line); border-radius:8px; background:#fff; } .st-filters__price input:focus-visible{ outline:2px solid var(--st-accent); outline-offset:1px; } .st-filters__actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .st-filters__more{ border-top:1px solid var(--st-line); } .st-filters__more>summary{ list-style:none; cursor:pointer; padding:9px 12px; font-size:.86rem; color:var(--st-accent); font-weight:600; } .st-filters__more>summary::-webkit-details-marker{ display:none; } .st-filters__more[open]>summary{ color:var(--st-gray); } .st-filters__actions .btn-primary{ flex:1 1 auto; justify-content:center; } .st-filters__clear{ font-size:.85rem; color:var(--st-gray); } /* --- chips for what is filtered -------------------------------------- */ .st-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:-4px 0 16px; } .st-chip--clear{ border-style:dashed; color:var(--st-gray); } .st-chip{ display:inline-flex; align-items:center; gap:7px; padding:9px 13px; min-height:38px; border:1px solid var(--st-line); border-radius:999px; background:#fff; font-size:.83rem; color:var(--st-ink); text-decoration:none; } .st-chip:hover{ border-color:var(--st-accent); } .st-chip__x{ font-size:1rem; line-height:1; color:var(--st-gray); } .st-chip:hover .st-chip__x{ color:var(--st-accent); } /* --- sorting ----------------------------------------------------------- */ .st-sort{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .st-order__lbl{ font-size:.82rem; color:var(--st-gray); } .st-sort ul{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0; } .st-sort a{ display:inline-block; padding:9px 14px; border-radius:999px; text-decoration:none; font-size:.84rem; color:var(--st-ink); border:1px solid var(--st-line); background:#fff; } .st-sort a:hover{ border-color:var(--st-accent); } .st-sort a.is-current{ background:var(--st-accent); color:var(--st-accent-txt); border-color:var(--st-accent); font-weight:600; } /* --- the whole column collapses on phones ----------------------------- Without this the grid would start two screens below the header: there are five facet boxes before the first product. On desktop the button does not exist and the body always shows. */ .st-filters__chk{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .st-filters__mob-open{ display:none; } .st-filters__body{ display:flex; flex-direction:column; gap:14px; } @media(max-width:900px){ .st-filters__mob-open{ display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; padding:12px 16px; border-radius:var(--st-radius); background:var(--st-black); color:#fff; font-family:var(--st-display); font-weight:700; text-transform:uppercase; letter-spacing:.03em; } .st-filters__chk:focus-visible ~ .st-filters__mob-open{ outline:2px solid var(--st-accent); outline-offset:2px; } .st-filters__mob-tx--close{ display:none; } .st-filters__chk:checked ~ .st-filters__mob-open .st-filters__mob-tx--open{ display:none; } .st-filters__chk:checked ~ .st-filters__mob-open .st-filters__mob-tx--close{ display:inline; } .st-filters__body{ display:none; margin-top:14px; } .st-filters__chk:checked ~ .st-filters__body{ display:flex; } /* The "Filtrar" button sticks to the bottom of the screen while the panel is open: it used to be three screens of scrolling away. */ .st-filters__actions{ position:sticky; bottom:0; background:var(--st-bg); padding:10px 0; margin-top:-4px; z-index:5; } .st-filters__badge{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--st-accent); color:var(--st-accent-txt); font-size:.75rem; } .st-sort{ width:100%; } } .st-grid__head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; } .st-grid__head h1{ margin:0; font-size:1.8rem; text-transform:uppercase; letter-spacing:.01em; } .st-grid__cont{ margin:0; color:var(--st-gray); font-size:.9rem; } .st-search-pg{ display:flex; margin-bottom:18px; max-width:520px; } .st-search-pg input{ flex:1; min-width:0; font:inherit; padding:11px 14px; border:1.5px solid var(--st-line); border-right:0; border-radius:8px 0 0 8px; } .st-search-pg input:focus{ outline:none; border-color:var(--st-accent); } .st-search-pg button{ border:0; background:var(--st-accent); color:var(--st-accent-txt); font-family:var(--st-display); font-weight:700; text-transform:uppercase; padding:0 20px; border-radius:0 8px 8px 0; cursor:pointer; } .st-empty{ background:#fff; border:1px dashed var(--st-line); border-radius:var(--st-radius); padding:40px 24px; text-align:center; color:var(--st-gray); } .st-empty b{ color:var(--st-ink); font-size:1.1rem; } .st-empty a{ color:var(--st-accent); } /* compat: string generated by the cart JS */ .store-empty{ background:#fff; border:1px dashed var(--st-line); border-radius:var(--st-radius); padding:40px 24px; text-align:center; color:var(--st-gray); } .store-empty a{ color:var(--st-accent); } /* pagination */ .store-pagination{ display:flex; gap:14px; align-items:center; justify-content:center; padding:34px 0 0; } .store-pagination a{ text-decoration:none; font-family:var(--st-display); font-weight:700; text-transform:uppercase; letter-spacing:.03em; display:inline-flex; align-items:center; height:40px; padding:0 18px; border:1px solid var(--st-line); border-radius:8px; color:var(--st-ink); background:#fff; } .store-pagination a:hover{ border-color:var(--st-accent); color:var(--st-accent); } .store-pagination__position{ color:var(--st-gray); font-size:.9rem; } /* ============================================================ PRODUCT */ .st-product{ padding-top:26px; padding-bottom:20px; } .st-product__top{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; } /* Grid items do not shrink below their content (min-width:auto): on a phone the gallery/buttons pushed both columns past the screen and the browser widened the whole page, cropping the right edge. */ .st-product__top > *{ min-width:0; } .st-product__photo{ position:relative; margin:0; background:#fff; border:1px solid var(--st-line); border-radius:14px; overflow:hidden; } .st-product__photo img{ display:block; width:100%; aspect-ratio:1/1; object-fit:contain; padding:24px; } .st-product__gallery{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; } .st-product__gallery img{ width:84px; height:84px; object-fit:contain; background:#fff; border:1px solid var(--st-line); border-radius:8px; padding:6px; } .st-product__brand{ margin:0 0 6px; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--st-gray-2); font-weight:600; } .st-product__name{ margin:0 0 8px; font-size:2rem; line-height:1.12; } .st-product__sku{ margin:0 0 16px; color:var(--st-gray); font-size:.85rem; } .st-product__price{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:16px 0; border-top:1px solid var(--st-line); border-bottom:1px solid var(--st-line); } .st-product__of{ text-decoration:line-through; color:var(--st-gray); font-size:1.05rem; } .st-product__off{ background:var(--st-promo); color:#fff; font-family:var(--st-display); font-weight:700; font-size:.85rem; padding:2px 8px; border-radius:6px; } .st-product__by{ font-size:2.4rem; font-weight:700; color:var(--st-black); } .st-product__shipping{ color:var(--st-ok); font-weight:600; margin:12px 0 0; } .st-product__stock{ display:flex; align-items:center; gap:8px; margin:16px 0; font-weight:600; } .st-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; } .st-product__stock--ok{ color:var(--st-ok); } .st-product__stock--ok .st-dot{ background:var(--st-ok); } .st-product__stock--off{ color:var(--st-promo); } .st-product__stock--off .st-dot{ background:var(--st-promo); } .st-product__add{ display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; max-width:420px; padding:16px 24px; font-size:1.1rem; font-family:var(--st-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:var(--st-accent); color:var(--st-accent-txt); border:0; border-radius:10px; text-decoration:none; cursor:pointer; transition:filter .15s, transform .1s; } .st-product__add:hover{ filter:brightness(1.08); } .st-product__add:active{ transform:translateY(1px); } .st-product__add--off{ background:#e6e6e8; color:#9a9aa0; cursor:not-allowed; } .st-product__guarantees{ list-style:none; margin:22px 0 0; padding:18px 0 0; border-top:1px solid var(--st-line); display:flex; flex-direction:column; gap:8px; color:var(--st-gray); font-size:.9rem; } .st-product__guarantees li{ padding-left:24px; position:relative; } .st-product__guarantees li::before{ content:"✓"; position:absolute; left:0; color:var(--st-accent); font-weight:700; } .st-product__description{ margin-top:40px; background:#fff; border:1px solid var(--st-line); border-radius:14px; padding:26px 28px; } .st-product__description h2{ margin:0 0 14px; font-size:1.3rem; text-transform:uppercase; letter-spacing:.02em; position:relative; padding-bottom:12px; } .st-product__description h2::after{ content:""; position:absolute; left:0; bottom:0; width:50px; height:3px; background:var(--st-accent); } .st-product__description div{ line-height:1.7; color:#3a3a3d; } /* ============================================================ CART */ .st-cart{ padding-top:24px; padding-bottom:56px; } .cart-table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--st-line); border-radius:var(--st-radius); overflow:hidden; } .cart-table th,.cart-table td{ padding:14px; border-bottom:1px solid var(--st-line); text-align:left; vertical-align:middle; } .cart-table thead th{ font-family:var(--st-display); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--st-gray); background:var(--st-bg); } .cart-table tbody tr:last-child td{ border-bottom:0; } .cart-table .c-img img{ width:66px; height:66px; border-radius:8px; object-fit:contain; background:#fff; border:1px solid var(--st-line); } .cart-table .c-name a{ text-decoration:none; color:var(--st-ink); font-weight:600; } .cart-table .c-name a:hover{ color:var(--st-accent); } .cart-table .c-price,.cart-table .c-sub{ font-family:var(--st-display); font-weight:600; white-space:nowrap; } .cart-table tr.is-off{ opacity:.5; } .c-notice{ display:block; color:var(--st-promo); font-size:.78rem; } .c-notice--stock{ color:#8a5a00; } /* Quantity: one joined control (− 1 +), the same look as the product page. The three loose inline boxes sat on the text baseline -- the number box ended up 1-2px lower than the buttons -- and Chrome kept room for the hidden number spinner, which pulled the digit off-center. */ #cart-root[aria-busy=true]{ opacity:.6; pointer-events:none; transition:opacity .15s; } /* updating: table stays, dimmed */ .c-qty{ white-space:nowrap; } .c-qty__box{ display:inline-flex; align-items:stretch; height:42px; border:1.5px solid var(--st-line); border-radius:10px; overflow:hidden; background:#fff; vertical-align:middle; } .c-qty__box button{ width:40px; border:0; background:#fff; cursor:pointer; font-size:1.15rem; line-height:1; color:var(--st-ink); display:flex; align-items:center; justify-content:center; padding:0; } .c-qty__box button:hover{ background:var(--st-gray-light, #f2f2f0); color:var(--st-accent); } .c-qty__box button.is-limit,.c-qty__box button.is-limit:hover{ color:#b3b6ad; background:#fff; cursor:not-allowed; } .c-qty__n{ width:52px; height:100%; margin:0; padding:0; border:0; border-left:1.5px solid var(--st-line); border-right:1.5px solid var(--st-line); border-radius:0; text-align:center; font:inherit; font-weight:600; line-height:1; background:#fff; -moz-appearance:textfield; appearance:textfield; } .c-qty__n::-webkit-outer-spin-button,.c-qty__n::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } .c-qty__n:focus-visible{ outline:2px solid var(--st-accent); outline-offset:-2px; } .c-qty__box:focus-within{ border-color:var(--st-accent); } .c-rem button{ background:none; border:0; color:var(--st-gray); cursor:pointer; text-decoration:underline; font-family:inherit; font-size:.85rem; padding:10px 8px; min-height:40px; } .c-rem button:hover{ color:var(--st-promo); } .cart-footer{ margin-top:22px; display:grid; grid-template-columns:1fr 380px; gap:24px; align-items:start; } .cart-footer__left{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; } .cart-total{ font-family:var(--st-display); font-size:1.5rem; } .cart-total strong{ color:var(--st-black); } .cart-actions{ display:flex; gap:12px; justify-content:flex-end; flex-wrap:wrap; } .c-notice-general{ color:var(--st-promo); font-size:.85rem; } /* ============================================================ CHECKOUT */ .st-checkout{ padding-top:24px; padding-bottom:56px; } .st-steps{ list-style:none; display:flex; gap:10px; padding:0; margin:0 0 24px; flex-wrap:wrap; } .st-steps li{ font-family:var(--st-display); font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:.85rem; padding:8px 16px; border-radius:999px; background:#fff; border:1px solid var(--st-line); color:var(--st-gray); } .st-steps li.is-current{ background:var(--st-accent); color:var(--st-accent-txt); border-color:transparent; } .st-checkout__grid{ display:grid; grid-template-columns:1fr 380px; gap:28px; align-items:start; } .st-checkout__form{ background:#fff; border:1px solid var(--st-line); border-radius:14px; padding:26px 28px; } .st-checkout__form h1{ margin:0 0 6px; font-size:1.5rem; text-transform:uppercase; } .st-checkout__help{ margin:0 0 20px; color:var(--st-gray); font-size:.92rem; } .st-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; } .st-field label{ font-family:var(--st-display); font-weight:600; font-size:.9rem; } .st-field input,.st-field textarea{ font:inherit; padding:11px 13px; border:1.5px solid var(--st-line); border-radius:8px; background:#fff; } /* Fields fill their column and may shrink: an input's natural width (~20 characters, ~207px) kept the Validade/CVV pair from fitting a phone and pushed the checkout off-screen. */ .st-field{ min-width:0; } .st-field input,.st-field textarea,.st-field select{ width:100%; min-width:0; box-sizing:border-box; } .st-field input:focus,.st-field textarea:focus{ outline:none; border-color:var(--st-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--st-accent) 22%, transparent); } .st-field-pair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; } /* rows already spaced by .st-field's margin */ .st-field-address{ display:grid; grid-template-columns:minmax(0,1fr) 130px; gap:0 14px; } .st-checkout__error{ background:#fdecec; border:1px solid #f3c2c2; color:#a11; padding:12px 14px; border-radius:8px; margin:6px 0 14px; } .st-checkout__send{ width:100%; padding:15px; font-size:1.05rem; margin-top:6px; } .st-checkout__send:disabled{ opacity:.6; cursor:progress; } .st-checkout__note{ margin:14px 0 0; font-size:.82rem; color:var(--st-gray); line-height:1.5; } .st-summary{ background:#fff; border:1px solid var(--st-line); border-radius:14px; padding:22px 24px; position:sticky; top:96px; } .st-summary h2{ margin:0 0 16px; font-size:1.2rem; text-transform:uppercase; } .st-summary__list{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:12px; } .st-summary__list li{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:baseline; font-size:.9rem; } .st-summary__q{ color:var(--st-gray); font-weight:600; } .st-summary__n{ overflow:hidden; text-overflow:ellipsis; } .st-summary__v{ font-family:var(--st-display); font-weight:600; white-space:nowrap; } .st-summary__line{ display:flex; justify-content:space-between; padding:8px 0; color:var(--st-gray); font-size:.92rem; border-top:1px solid var(--st-line); } .st-summary__total{ display:flex; justify-content:space-between; align-items:baseline; padding:14px 0 0; margin-top:6px; border-top:2px solid var(--st-black); font-family:var(--st-display); font-size:1.4rem; font-weight:700; } .st-confirmation{ background:#fff; border:1px solid var(--st-line); border-radius:16px; padding:44px 32px; text-align:center; max-width:640px; margin:10px auto; } .st-confirmation__ic{ color:var(--st-ok); margin-bottom:10px; } .st-confirmation h1{ margin:0 0 10px; font-size:1.8rem; text-transform:uppercase; } .st-confirmation>p{ color:var(--st-gray); } .st-confirmation__items{ text-align:left; max-width:420px; margin:22px auto; } .st-confirmation .st-summary__total{ max-width:420px; margin:0 auto 22px; } .st-confirmation__notice{ color:#a15; font-size:.86rem; } .st-confirmation__delivery,.st-confirmation__follow{ color:var(--st-text-2); font-size:.92rem; margin:6px 0; } .st-confirmation .btn-primary{ margin-top:8px; } /* ============================================================ SIGNUP */ .st-signup{ padding-top:24px; padding-bottom:56px; } .st-signup__in{ max-width:720px; margin:0 auto; } .reg-form{ background:#fff; padding:26px 28px; border-radius:14px; border:1px solid var(--st-line); display:flex; flex-direction:column; gap:16px; } .reg-line label{ display:flex; flex-direction:column; gap:6px; font-family:var(--st-display); font-weight:600; font-size:.92rem; } .reg-line input{ font:inherit; font-weight:400; padding:11px 13px; border:1.5px solid var(--st-line); border-radius:8px; } .reg-line input:focus{ outline:none; border-color:var(--st-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--st-accent) 22%, transparent); } .reg-line--pair{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .reg-line--address{ display:grid; grid-template-columns:1fr 130px; gap:16px; } .reg-address{ margin:0; min-width:0; border:1px solid var(--st-line); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:16px; } .reg-address legend{ font-family:var(--st-display); font-weight:700; padding:0 8px; text-transform:uppercase; } .reg-error{ color:var(--st-promo); font-size:.8rem; font-weight:400; } .reg-error-general{ background:#fdecec; border:1px solid #f3c2c2; color:#a11; padding:12px 14px; border-radius:8px; } .reg-notice{ background:#fff; padding:32px; border-radius:14px; border:1px solid var(--st-line); max-width:640px; margin:10px auto; } .reg-notice--ok{ border-color:#bfe3c8; background:#f4fbf5; } .reg-notice h1{ margin:0 0 12px; text-transform:uppercase; } .reg-form .btn-primary{ align-self:flex-start; padding:13px 32px; } .store-header{ margin-bottom:16px; } .store-header h1{ margin:0; font-size:1.8rem; text-transform:uppercase; } .store-header__sub{ margin:6px 0 0; color:var(--st-gray); } /* ============================================================ FOOTER */ .st-footer{ background:var(--st-footer); color:#cfcfc7; margin-top:48px; } .st-footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px; padding:44px 20px; } .st-footer__brand{ margin-bottom:16px; } .st-footer__brand img{ height:48px; width:auto; max-width:200px; object-fit:contain; border-radius:6px; } .st-footer__brand strong{ font-family:var(--st-display); font-size:1.4rem; color:#fff; text-transform:uppercase; } .st-footer__col h3{ font-family:var(--st-display); font-size:1rem; text-transform:uppercase; letter-spacing:.04em; color:#fff; margin:0 0 14px; } .st-footer__contact{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:.9rem; } .st-footer__contact li{ display:flex; align-items:flex-start; gap:10px; } .st-footer__contact svg{ width:16px; height:16px; flex:0 0 auto; margin-top:2px; color:var(--st-accent-on-dark, var(--st-accent)); } .st-footer__contact a{ color:#cfcfc7; text-decoration:none; } .st-footer__contact a:hover{ color:#fff; } .st-footer__links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:.9rem; } .st-footer__links a{ color:#cfcfc7; text-decoration:none; } .st-footer__links a:hover{ color:var(--st-accent-on-dark, var(--st-accent)); } .st-footer__time{ margin:0 0 18px; font-size:.9rem; } /* Square button with the icon inside. 40px per side is the comfortable minimum for a finger -- they were text links with 6px of padding, too small a target on phones. */ .st-footer__social{ display:flex; flex-wrap:wrap; gap:10px; } .st-footer__social a{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; text-decoration:none; color:#cfcfc7; border:1px solid rgba(255,255,255,.18); border-radius:9px; transition:color .18s, border-color .18s, background-color .18s; } .st-footer__social a:hover, .st-footer__social a:focus-visible{ border-color:var(--st-accent); color:var(--st-accent); background:rgba(255,255,255,.05); } .st-footer__social .ico{ width:20px; height:20px; } .st-footer__base{ border-top:1px solid rgba(255,255,255,.1); } .st-footer__base-in{ display:flex; align-items:center; justify-content:space-between; gap:14px 22px; padding:16px 20px; font-size:.82rem; color:#9c9c95; flex-wrap:wrap; } /* The copyright shrinks and wraps before pushing the "Desenvolvido por" badge out of the bar; the badge always stays at the right end. */ .st-footer__base-in > p:first-child{ flex:1 1 320px; min-width:0; margin:0; } .st-footer__base-in > .st-footer__secure{ flex:0 0 auto; margin:0; } .st-footer__base-in > .sh-sig{ flex:0 0 auto; margin-left:auto; } @media (max-width:700px){ .st-footer__base-in > .sh-sig{ margin-left:0; } } .st-footer__base-in p{ margin:0; } /* ---- "Receba nossas ofertas" strip -------------------------------------- A full strip in the accent color, between the body and the dark footer. Condensed display title on the left, form on the right; from 900px down it stacks and the form takes the full width. */ .st-bulletin{ background:var(--st-accent); color:var(--st-accent-txt); } .st-bulletin__in{ display:flex; align-items:center; justify-content:space-between; gap:24px 40px; padding:26px 20px; flex-wrap:wrap; } .st-bulletin__title{ margin:0; font-family:Rajdhani,system-ui,sans-serif; font-style:italic; font-weight:700; font-size:clamp(1.15rem,2.2vw,1.6rem); line-height:1.15; letter-spacing:.02em; text-transform:uppercase; max-width:22ch; } .st-bulletin__form{ display:flex; align-items:stretch; gap:10px; flex:1 1 460px; flex-wrap:wrap; } .st-bulletin__field{ flex:1 1 190px; min-width:0; padding:13px 15px; border:1px solid rgba(0,0,0,.14); border-radius:5px; background:#fff; color:#171616; font-size:.95rem; font-family:inherit; } .st-bulletin__field::placeholder{ color:#8b8b93; } /* Focus cannot depend on the accent color: the field IS on the accent. A dark ring works on any of the seven accents of the template bar. */ .st-bulletin__field:focus-visible{ outline:3px solid rgba(0,0,0,.55); outline-offset:2px; border-color:transparent; } .st-bulletin__btn{ flex:0 0 auto; padding:13px 30px; border:0; border-radius:5px; background:var(--st-accent-txt); color:var(--st-accent); cursor:pointer; font-family:inherit; font-size:.95rem; font-weight:700; letter-spacing:.02em; transition:filter .18s ease, transform .18s ease; } /* The band IS the accent: the button takes the accent's own contrast color (near-black on a light accent, white on a dark one), so it never melts in. */ .st-bulletin__btn:hover{ filter:brightness(.92); transform:translateY(-1px); } .st-bulletin__btn:focus-visible{ outline:3px solid rgba(0,0,0,.55); outline-offset:2px; } @media (max-width:900px){ .st-bulletin__in{ flex-direction:column; align-items:stretch; gap:16px; } .st-bulletin__title{ max-width:none; } .st-bulletin__form{ flex:1 1 auto; } } /* On phones the three controls stack: a field squeezed into a row becomes a 60px box where you cannot read what you typed. */ @media (max-width:560px){ .st-bulletin__field, .st-bulletin__btn{ flex:1 1 100%; } } /* ---- Shooting House signature (same as the site, store scale) ---------- Sits in the third column of the base bar, after the copyright and the secure-purchase badge; on narrow screens the bar already wraps. */ .sh-sig{ display:inline-flex; align-items:center; gap:10px; padding:7px 12px 7px 13px; line-height:1; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(255,255,255,.04); text-decoration:none; transition:border-color .18s ease, background-color .18s ease, transform .18s ease; } .sh-sig:hover{ border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.09); transform:translateY(-1px); text-decoration:none; } .sh-sig__lbl{ font-size:.64rem; letter-spacing:.10em; text-transform:uppercase; color:#7f7f79; white-space:nowrap; } .sh-sig:hover .sh-sig__lbl{ color:#b7b7b0; } .sh-sig__brand{ display:inline-flex; align-items:center; gap:8px; } .sh-sig__badge{ display:block; flex:none; border-radius:9px; } .sh-sig:hover .sh-sig__badge{ filter:brightness(1.14); } .sh-sig__name{ font-size:.88rem; color:#d6d6d0; white-space:nowrap; } .sh-sig__name b{ font-weight:700; color:#fff; } .sh-sig:hover .sh-sig__name{ color:#fff; } @media (max-width:560px){ .sh-sig__lbl{ display:none; } } .st-footer__secure{ display:inline-flex; align-items:center; gap:8px; } .st-footer__secure svg{ width:14px; height:14px; color:var(--st-accent-on-dark, var(--st-accent)); } /* ============================================================ RESPONSIVE */ @media(max-width:1024px){ .st-mosaic__grid{ grid-template-columns:repeat(3,1fr); } .st-row__rail{ grid-template-columns:repeat(3,1fr); } .st-product__top{ gap:28px; } } @media(max-width:900px){ /* No sticky on phones: two lines (logo/icons + search) pinned to the top ate ~125px of a 667 viewport. */ .st-top{ position:static; } .st-top__in{ flex-wrap:wrap; min-height:0; padding:12px 0; gap:12px; } .st-menu-mob{ display:block; order:1; } .st-logo{ order:2; margin-right:auto; max-width:46vw; } .st-logo img{ height:42px; max-width:46vw; } .st-logo__txt{ font-size:.95rem; max-width:46vw; } .st-actions{ order:3; } .st-action__tx{ display:none; } .st-search{ order:4; flex-basis:100%; max-width:none; } .st-nav{ display:none; } /* on phones navigation lives in the hamburger menu */ .st-grid{ grid-template-columns:minmax(0,1fr); } /* plain 1fr grew to its content: /busca scrolled sideways at 320px */ .st-filters__body > .st-filters__box:first-child .st-filters__list{ max-height:45vh; overflow-y:auto; overscroll-behavior:contain; } /* the open category tree hid the real filters 1700px down */ /* sort chips: one scrollable row instead of 2-3 wrapped rows above the products */ .st-sort ul{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px; } .st-sort ul::-webkit-scrollbar{ display:none; } .st-sort li{ flex:0 0 auto; } .st-sort a{ white-space:nowrap; } .st-filters__box{ margin-bottom:4px; } .st-checkout__grid{ grid-template-columns:minmax(0,1fr); } /* minmax: plain 1fr will not shrink below its content */ .st-summary{ position:static; order:-1; } .st-product__top{ grid-template-columns:1fr; } .st-footer__grid{ grid-template-columns:1fr 1fr; gap:26px; } .st-badges__grid{ grid-template-columns:1fr 1fr; } .st-badge{ border-bottom:1px solid rgba(255,255,255,.08); } } @media(max-width:640px){ /* Sides only: "padding:0 14px" here comes after .st-product/.st-grid/ .st-cart/... and zeroed their top padding on phones -- every page title sat on the breadcrumb line. */ .st-wrap{ padding-left:14px; padding-right:14px; } /* The home row scrolls horizontally (snap): five rows in a two-column grid were twenty lines of cards before the footer. The listing grid stays in two columns -- there the visitor wants to see everything. */ .st-row__rail{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding-bottom:8px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .st-row__rail .prod-card{ flex:0 0 68vw; scroll-snap-align:start; } .prod-grid{ grid-template-columns:repeat(2,1fr); gap:12px; } .st-mosaic__grid{ grid-template-columns:1fr 1fr; grid-auto-rows:120px; padding:12px; gap:8px; } .st-mosaic__tile--large{ grid-column:span 2; grid-row:span 1; } .st-product__name{ font-size:1.5rem; } .st-product__by{ font-size:2rem; } .prod-card__by{ font-size:1.2rem; } .prod-card__name{ font-size:.92rem; } .reg-line--pair,.reg-line--address,.st-field-pair,.st-field-address{ grid-template-columns:minmax(0,1fr); } .reg-form{ padding:20px 16px; } .reg-address{ padding:14px 12px; } .st-footer__grid{ grid-template-columns:1fr; } .st-notice__msg{ display:none; } .st-notice__in{ justify-content:center; } /* Cart as cards on phones: the 5-column table overflowed the screen (Subtotal/Remover cut off). Each row becomes a stacked card, with a label before Preço/Subtotal via ::before. */ .cart-table thead{ display:none; } .cart-table,.cart-table tbody,.cart-table tr,.cart-table td{ display:block; width:100%; } .cart-table tr{ position:relative; border:1px solid var(--st-line); border-radius:var(--st-radius); margin-bottom:12px; padding:10px 12px 12px; } .cart-table td{ border-bottom:0; padding:4px 0; } .cart-table .c-img{ display:block; } .cart-table .c-img img{ width:80px; height:80px; } .cart-table .c-name{ padding-right:70px; font-size:1rem; } .cart-table .c-price::before{ content:"Preço: "; color:var(--st-gray); font-family:var(--st-font); font-weight:400; } .cart-table .c-sub::before{ content:"Subtotal: "; color:var(--st-gray); font-family:var(--st-font); font-weight:400; } /* "Remover" in the top RIGHT corner of the card; the row must be the positioning reference, otherwise it lands on top of the thumbnail. */ .cart-table tr{ position:relative; } .cart-table .c-rem{ position:absolute; top:6px; right:8px; left:auto; padding:0; width:auto; } .cart-table .c-name{ padding-right:0; } /* "Remover" sits beside the thumbnail, not the name */ .cart-table{ border:0; border-radius:0; background:none; overflow:visible; } .cart-table tr{ background:#fff; } .cart-table tbody tr:last-child{ margin-bottom:0; } .st-row__title{ font-size:1.25rem; } .st-grid__head h1{ font-size:1.35rem; } } @media(min-width:641px){ .cart-table .c-img{ width:94px; } } @media (min-width:641px) and (max-width:900px){ .cart-table th,.cart-table td{ padding:12px 8px; } .cart-table .c-img{ width:82px; } .cart-table .c-rem{ width:1%; white-space:nowrap; } } /* 66px thumb + padding; was auto-sized to 124px */ @media(max-width:400px){ .st-row__rail,.prod-grid{ grid-template-columns:1fr 1fr; } } /* ============================================================ PREVIEW Store template/color switcher bar (dev). Fixed to the bottom of the window, dark, independent of the store theme. Gone in production (gated in Blade). */ /* The bar is fixed to the bottom: without this space it covered the last line of the footer (the "Desenvolvido por" badge). */ body:has(.preview-store){ padding-bottom:64px; } .preview-store{ position:fixed; left:0; right:0; bottom:0; z-index:200; background:#0f0f0e; color:#e8e8ea; border-top:2px solid var(--st-accent); box-shadow:0 -8px 24px rgba(0,0,0,.35); font-size:.85rem; } .preview-store__in{ max-width:1280px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; } .preview-store__group{ display:flex; align-items:center; gap:10px; min-width:0; } .preview-store__lbl{ font-family:var(--st-display); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; color:#9a9aa0; flex:0 0 auto; } .preview-store__list{ display:flex; gap:6px; list-style:none; margin:0; padding:0; flex-wrap:wrap; } .preview-store__list a{ display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:#d5d5d8; background:#26261f; border:1px solid #333; border-radius:8px; padding:6px 11px; transition:.15s; } .preview-store__list a:hover{ border-color:var(--st-accent); color:#fff; } .preview-store__list a.active{ background:var(--st-accent); color:var(--st-accent-txt); border-color:var(--st-accent); } .preview-store__list b{ font-family:var(--st-display); } .preview-store__note{ color:#9a9aa0; font-size:.78rem; } .preview-store__colors{ display:flex; gap:7px; list-style:none; margin:0; padding:0; } .preview-store__colors a{ display:block; border-radius:50%; } .preview-store__colors i{ display:block; width:22px; height:22px; border-radius:50%; border:2px solid transparent; } .preview-store__colors a:hover i{ border-color:#fff; } .preview-store__colors a.active i{ border-color:#fff; box-shadow:0 0 0 2px var(--st-accent); } .preview-store__clear{ color:#9a9aa0; text-decoration:underline; font-size:.78rem; } .preview-store__brand{ margin-left:auto; color:#8a8a8f; font-size:.76rem; } @media(max-width:640px){ .preview-store__brand{ display:none; } } /* ================================================================== * HOME TEMPLATES 2 and 3 — an isolated addition. * * Every rule is prefixed/scoped by .m2 or .m3 (the template's home * wrapper), so as NOT to affect Template 1, the shell or other pages. * Only each template's HOME uses these classes. Accent color via * --st-accent (honours ?cor=). Zero external dependencies. * ================================================================== */ /* ========================= TEMPLATE 2 — Vitrine Pro ================= */ /* Cards slightly rounder and more "showcase". */ .m2 .prod-card{ border-radius:14px; } /* Gradient category panels (Template 2's signature). */ .m2-promos{ padding:36px 0 8px; } .m2-promos__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .m2-promo{ position:relative; overflow:hidden; border-radius:16px; min-height:190px; display:flex; align-items:center; text-decoration:none; color:#fff; padding:24px 26px; isolation:isolate; background:linear-gradient(120deg, var(--st-accent), color-mix(in srgb, var(--st-accent) 45%, #0c0c0b)); box-shadow:var(--st-shadow); transition:transform .2s, box-shadow .2s; } .m2-promo:hover{ transform:translateY(-3px); box-shadow:var(--st-shadow-high); } /* .st a{color:inherit} (0,0,1,1) beats a 1-class rule; the .m2 scope (0,0,2,0) guarantees the panel's white text on the gradient. */ .m2 .m2-promo{ color:#fff; } /* different shades per panel, keeping the accent color as the base */ .m2-promo--2{ background:linear-gradient(120deg, color-mix(in srgb, var(--st-accent) 80%, #1d4ed8), color-mix(in srgb, var(--st-accent) 40%, #0c0c0b)); } .m2-promo--3{ background:linear-gradient(120deg, color-mix(in srgb, var(--st-accent) 80%, #7c3aed), color-mix(in srgb, var(--st-accent) 40%, #0c0c0b)); } .m2-promo__tx{ position:relative; z-index:2; display:flex; flex-direction:column; gap:6px; max-width:62%; } .m2-promo__lbl{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; opacity:.85; } .m2-promo__name{ font-family:var(--st-display); font-size:1.65rem; font-weight:700; line-height:1.1; text-transform:uppercase; letter-spacing:.01em; } .m2-promo__cta{ display:inline-flex; align-items:center; gap:5px; margin-top:8px; align-self:flex-start; font-family:var(--st-display); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:.85rem; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); padding:8px 14px; border-radius:8px; } .m2-promo:hover .m2-promo__cta{ background:rgba(255,255,255,.26); } .m2-promo__img{ position:absolute; right:-6px; bottom:-6px; width:46%; max-height:150px; object-fit:contain; filter:drop-shadow(0 8px 18px rgba(0,0,0,.35)); z-index:1; } @media(max-width:900px){ .m2-promos__grid{ grid-template-columns:1fr 1fr; } } @media(max-width:560px){ .m2-promos__grid{ grid-template-columns:1fr; } .m2-promo{ min-height:150px; } } /* ========================= TEMPLATE 3 — Marketop =================== */ /* Clean cards (no border), with the brand in the accent color at the top. */ .m3 .prod-card{ border:0; box-shadow:0 1px 2px rgba(0,0,0,.05); } .m3 .prod-card:hover{ box-shadow:var(--st-shadow-high); } .m3 .prod-card__brand{ color:var(--st-accent); letter-spacing:.05em; } /* HERO = category mosaic (light tiles). */ .m3-hero{ padding:24px 0 8px; } .m3-hero__grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:158px; gap:14px; } .m3-cat{ position:relative; overflow:hidden; border-radius:14px; background:#eef2f7; text-decoration:none; color:var(--st-ink); display:flex; flex-direction:column; padding:18px 18px 0; transition:box-shadow .2s, transform .2s; } .m3-cat:hover{ box-shadow:var(--st-shadow-high); transform:translateY(-2px); } .m3-cat--large{ grid-column:span 2; grid-row:span 2; background:#e7edf5; padding:26px 26px 0; } .m3-cat__tx{ position:relative; z-index:2; } .m3-cat__name{ font-family:var(--st-display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; font-size:1.1rem; line-height:1.1; display:block; } .m3-cat--large .m3-cat__name{ font-size:1.7rem; } .m3-cat__cta{ display:inline-flex; align-items:center; gap:4px; margin-top:6px; color:var(--st-accent); font-family:var(--st-display); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:.78rem; } .m3-cat__img{ position:absolute; right:8px; bottom:8px; width:64%; max-height:70%; object-fit:contain; z-index:1; filter:drop-shadow(0 6px 14px rgba(0,0,0,.14)); } .m3-cat--large .m3-cat__img{ width:72%; } @media(max-width:900px){ .m3-hero__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; } .m3-cat--large{ grid-column:span 2; grid-row:span 1; } } @media(max-width:560px){ .m3-hero__grid{ grid-template-columns:1fr 1fr; grid-auto-rows:130px; gap:10px; } } /* Wide call-to-action band. */ .m3-band{ padding:14px 0; } .m3-band__in{ display:flex; align-items:center; gap:24px; border-radius:16px; overflow:hidden; padding:30px 34px; background:linear-gradient(110deg, var(--st-accent), color-mix(in srgb, var(--st-accent) 45%, #0c0c0b)); color:#fff; } .m3-band__tx{ display:flex; flex-direction:column; gap:8px; flex:1 1 auto; } .m3-band__lbl{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; opacity:.85; } .m3-band__title{ font-family:var(--st-display); font-size:1.8rem; font-weight:700; line-height:1.1; text-transform:uppercase; } /* .m3 scope (0,0,2,0) to beat .st a{color:inherit}: dark text on the white button. */ .m3 a.m3-band__btn{ align-self:flex-start; margin-top:8px; background:#fff; color:var(--st-ink); } /* (0,2,1): beats .st a.btn-primary's white text */ .m3 .m3-band__btn:hover{ filter:none; background:#f1f1f1; } .m3-band__img{ width:180px; max-height:130px; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 8px 18px rgba(0,0,0,.3)); } @media(max-width:640px){ .m3-band__img{ display:none; } .m3-band__title{ font-size:1.4rem; } } /* Three short lists with thumbnails. */ .m3-lists{ padding:28px 0 8px; } .m3-lists__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .m3-list{ background:#fff; border:1px solid var(--st-line); border-radius:var(--st-radius); padding:18px 18px 14px; } .m3-list__title{ margin:0 0 12px; font-size:1.15rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; padding-bottom:10px; border-bottom:2px solid var(--st-line); position:relative; } .m3-list__title::after{ content:""; position:absolute; left:0; bottom:-2px; width:46px; height:2px; background:var(--st-accent); } .m3-list__ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; } .m3-mini{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--st-line); } .m3-mini:last-child{ border-bottom:0; } .m3-mini__img{ flex:0 0 auto; display:block; width:64px; height:64px; border:1px solid var(--st-line); border-radius:8px; background:#fff; padding:5px; } .m3-mini__img img{ width:100%; height:100%; object-fit:contain; } .m3-mini__tx{ display:flex; flex-direction:column; gap:3px; min-width:0; } .m3-mini__name{ text-decoration:none; color:var(--st-ink); font-weight:600; font-size:.92rem; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .m3-mini__name:hover{ color:var(--st-accent); } .m3-mini__price{ display:flex; align-items:baseline; gap:7px; } .m3-mini__price s{ color:var(--st-gray); font-size:.8rem; } .m3-mini__price b{ font-family:var(--st-display); font-weight:700; color:var(--st-black); } .m3 .m3-list__view{ color:var(--st-accent); } .m3-list__view{ display:inline-flex; align-items:center; gap:4px; margin-top:12px; text-decoration:none; color:var(--st-accent); font-family:var(--st-display); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:.85rem; } @media(max-width:900px){ .m3-lists__grid{ grid-template-columns:1fr; } } /* ---------------------------------------------------------------- GALLERY Photo swap WITHOUT JavaScript: one hidden radio per image, one label per thumbnail. The checked radio reveals its board on the showcase and marks its thumbnail. The per-position rules are written by product.blade.php for exactly the number of photos the page has: a fixed list here stopped at eight, and a product with 29 photos could not show the ninth on. The radios sit off-screen instead of display:none because display:none takes them out of keyboard navigation, and then the arrows would stop moving between photos. */ .st-gallery__radio{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; } .st-gallery__showcase{ position:relative; background:#fff; border:1px solid var(--st-line); border-radius:14px; overflow:hidden; } .st-gallery__board{ display:none; margin:0; } .st-gallery__board img{ display:block; width:100%; aspect-ratio:1/1; object-fit:contain; padding:24px; } .st-gallery__thumbs{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; } .st-gallery__mini{ display:block; cursor:pointer; border:1px solid var(--st-line); border-radius:8px; padding:6px; background:#fff; transition:border-color .15s, box-shadow .15s; } .st-gallery__mini img{ display:block; width:84px; height:84px; object-fit:contain; } .st-gallery__mini:hover{ border-color:var(--st-accent, #1257f0); } /* Hover zoom (desktop with a mouse; store.js adds .is-zoom and moves the origin with the cursor; --zoom is 1.6x-2.5x depending on the photo's size). Touch screens never get it: a tap opens nothing extra. */ @media (hover:hover) and (pointer:fine){ .st-zoomable{ cursor:zoom-in; } .st-zoomable img{ transition:transform .2s ease-out; will-change:transform; } .st-zoomable.is-zoom img{ transform:scale(var(--zoom, 2)); transition:transform .08s linear; } } /* Visible focus: keyboard users need to see where they are. Since the radio is invisible, the ring goes on the matching thumbnail. */ .st-gallery__radio:focus-visible ~ .st-gallery__thumbs .st-gallery__mini{ outline:none; } /* Responsive gallery. These must come AFTER the base gallery rules above -- placed in the early 640px block they lost the cascade and never applied. The photo had a fixed 600px height (the img height attribute, since only width/aspect-ratio were set), so on tablets it was a tall white box. */ @media (min-width:901px){ .st-product__photo img, .st-gallery__board img{ height:auto; } } @media (max-width:900px){ /* one swipeable row of thumbnails, photo capped, so name/price/buy stay near the top */ .st-gallery__thumbs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; padding-bottom:6px; } .st-gallery__mini{ flex:0 0 auto; } .st-gallery__board img, .st-product__photo img{ height:min(62vw,480px); } } @media (max-width:640px){ .st-gallery__thumbs{ gap:8px; } .st-gallery__mini{ padding:4px; } .st-gallery__mini img{ width:56px; height:56px; } } /* "Comprar agora" -- a secondary action next to "Adicionar ao carrinho". Outline instead of solid: two full bars side by side compete with each other and the visitor does not know which is the normal path. */ .st-product__now{ display:inline-flex; align-items:center; justify-content:center; width:100%; max-width:420px; margin-top:10px; padding:14px 24px; font-size:1rem; font-family:var(--st-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:transparent; color:var(--st-accent); border:2px solid var(--st-accent); border-radius:10px; text-decoration:none; cursor:pointer; transition:background .15s, color .15s, transform .1s; } .st-product__now:hover{ background:var(--st-accent); color:var(--st-accent-txt); } .st-product__now:active{ transform:translateY(1px); } /* The card label never wraps: on two lines the button gets fatter and the product grid loses alignment between rows. */ .prod-card__add{ white-space:nowrap; } /* ------------------------------------------------------------- DELIVERY Shipping options on checkout. They only appear once the ZIP code has eight digits -- before that there is nothing to show, and an empty block suggesting something is missing hurts more than it helps. */ .st-delivery{ border:1px solid var(--st-line); border-radius:10px; padding:14px 16px; margin:4px 0 14px; } .st-delivery legend{ padding:0 6px; font-family:var(--st-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.85rem; } .st-delivery__option{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:10px; padding:10px 4px; border-top:1px solid var(--st-line); cursor:pointer; } .st-delivery__option:first-of-type{ border-top:0; } .st-delivery__name{ font-weight:600; } .st-delivery__name small{ display:block; font-weight:400; opacity:.7; } .st-delivery__deadline{ font-size:.86rem; opacity:.75; white-space:nowrap; } .st-delivery__value{ font-weight:700; white-space:nowrap; } .st-delivery__notice{ margin:10px 0 0; font-size:.86rem; opacity:.8; } @media (max-width:520px){ .st-delivery__option{ grid-template-columns:auto 1fr auto; } .st-delivery__deadline{ grid-column:2; } } /* ------------------------------------------------------ SHIPPING CALCULATOR A box on the product page. No script: it is a GET form that reloads the page with ?cep=, and the response leaves the cache because of the query. */ .st-shippingbox{ margin:18px 0; padding:16px; border:1px solid var(--st-line); border-radius:12px; background:#fff; max-width:420px; } .st-shippingbox__form label{ display:block; font-family:var(--st-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.82rem; margin-bottom:8px; } .st-shippingbox__line{ display:flex; gap:8px; } .st-shippingbox__line input{ flex:1 1 auto; min-width:0; padding:11px 12px; border:1px solid var(--st-line); border-radius:8px; font-size:1rem; } .st-shippingbox__line .btn-secondary{ flex:0 0 auto; padding:11px 18px; } @media (max-width:360px){ /* next to "Calcular" the CEP field had ~80px of text space: "00000-000" did not fit */ .cart-shipping__line,.st-shippingbox__line{ flex-wrap:wrap; } .cart-shipping__line input,.st-shippingbox__line input,.cart-shipping__line .btn-secondary,.st-shippingbox__line .btn-secondary{ flex:1 1 100%; } } .st-shippingbox__help{ display:inline-block; margin-top:8px; font-size:.82rem; opacity:.75; } .st-shippingbox__options{ list-style:none; margin:14px 0 0; padding:0; } .st-shippingbox__options li{ display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:baseline; padding:9px 0; border-top:1px solid var(--st-line); } .st-shippingbox__name{ font-weight:600; } .st-shippingbox__deadline{ font-size:.85rem; opacity:.75; white-space:nowrap; } .st-shippingbox__value{ font-weight:700; white-space:nowrap; } .st-shippingbox__note{ margin:10px 0 0; font-size:.82rem; opacity:.75; } .st-shippingbox__note--error{ opacity:1; } /* ------------------------------------------------------------- DOOR The sign-in screen: a single field. The signup classes work, but they were designed for a wide form -- here the card is narrow and centered, otherwise a lone CPF floats in a full-page block. */ /* Door (sign in): the form card + a side with what the account offers. */ .st-signup__in.st-door{ max-width:980px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:28px; align-items:start; } .st-door__main{ min-width:0; } .st-door .store-header{ max-width:none; } .st-door__side{ background:#fff; border:1px solid var(--st-line); border-radius:14px; padding:24px 26px; margin-top:8px; } .st-door__side-title{ font-family:var(--st-display); text-transform:uppercase; font-size:1.05rem; letter-spacing:.03em; margin:0 0 14px; } .st-door__benefits{ list-style:none; margin:0; padding:0; display:grid; gap:14px; } .st-door__benefits li{ display:flex; gap:12px; align-items:flex-start; } .st-door__benefits svg{ flex:0 0 22px; color:var(--st-accent); margin-top:2px; } .st-door__benefits b{ display:block; font-size:.95rem; } .st-door__benefits small{ display:block; color:var(--st-gray); font-size:.84rem; line-height:1.4; } .st-door__cta{ margin-top:20px; padding-top:18px; border-top:1px solid var(--st-line); } .st-door__cta p{ margin:0 0 10px; } .st-door__cta .btn-secondary{ width:100%; box-sizing:border-box; } .st-door__noaccount{ font-size:.86rem; color:var(--st-gray); margin:10px 0 0 !important; } .st-door__noaccount a{ color:var(--st-accent); text-decoration:underline; } @media (max-width:820px){ .st-signup__in.st-door{ grid-template-columns:1fr; } .st-door__side{ margin-top:0; } } .st-door__form{ max-width:none; } .reg-notice--door{ padding:12px 16px; margin:0 0 14px; border-left:3px solid var(--st-accent); background:#fff; border-radius:8px; max-width:none; } .st-door__form .reg-line input{ width:100%; box-sizing:border-box; font-size:1.05rem; letter-spacing:.02em; } .st-door__note{ margin:2px 0 0; font-size:.82rem; opacity:.7; } .st-signup .store-header{ max-width:560px; } /* ------------------------------------------------ SHIPPING IN THE CART The cart only SHOWS how much it costs; choosing the service belongs to checkout, which is where the amount enters the order. That is why this is a list here, not a radio. */ .cart-shipping{ margin:16px 0; padding:14px 16px; border:1px solid var(--st-line); border-radius:10px; background:#fff; max-width:440px; } .cart-shipping > label{ display:block; font-family:var(--st-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.8rem; margin-bottom:8px; } .cart-shipping__line{ display:flex; gap:8px; } .cart-shipping__line input{ flex:1 1 auto; min-width:0; padding:10px 12px; border:1px solid var(--st-line); border-radius:8px; font:inherit; } .cart-shipping__list{ list-style:none; margin:12px 0 0; padding:0; } .cart-shipping__list li{ display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:baseline; padding:8px 0; border-top:1px solid var(--st-line); } /* The deadline is the 2nd SPAN (the radio comes first): nth-child(2) hit the service name instead, so the name was small and faded and the deadline bold. */ .cart-shipping__list label > span:nth-of-type(2){ font-size:.84rem; opacity:.72; white-space:nowrap; } .cart-shipping__note{ margin:8px 0 0; font-size:.82rem; opacity:.75; } /* The shipping option in the cart is selectable: the visitor decides there and checkout opens with the choice already made. */ .cart-shipping__list li{ padding:0; display:block; } /* one child (the label): the old 3-column grid left two empty gaps */ .cart-shipping__list label{ display:grid; grid-template-columns:auto 1fr auto auto; gap:10px; align-items:baseline; padding:9px 2px; cursor:pointer; } .cart-shipping__list input[type=radio]{ margin:0; align-self:center; } /* Cart sums: subtotal, shipping and total -- like any store's cart. Shipping only becomes a number after the visitor calculates it. */ .cart-sums{ margin-left:auto; min-width:260px; } .cart-sums p{ display:flex; justify-content:space-between; gap:24px; margin:6px 0; } .cart-sums .cart-total{ margin-top:10px; padding-top:10px; border-top:1px solid var(--st-line); font-size:1.15rem; } /* Cart summary card: ZIP code, delivery options, sums and the button, all in a single block on the right -- the standard store cart pattern. The shipping box used to float alone in the middle of empty space and the total sat stranded below it. */ .cart-summary{ background:#fff; border:1px solid var(--st-line); border-radius:14px; padding:20px; position:sticky; top:16px; } .cart-summary h2{ margin:0 0 14px; font-family:var(--st-display); font-size:1.1rem; text-transform:uppercase; letter-spacing:.04em; } .cart-summary .cart-shipping{ margin:0 0 14px; padding:0; border:0; border-radius:0; background:none; max-width:none; } .cart-summary .cart-sums{ margin:0; min-width:0; } .cart-summary__go{ display:block; width:100%; margin-top:16px; text-align:center; } @media (max-width:900px){ /* minmax(0,1fr): plain 1fr will not shrink below the content's minimum width, and the CEP line (field + "Calcular") pushed the summary to 380px on a 375px phone -- cut at the right edge. */ .cart-footer{ grid-template-columns:minmax(0,1fr); } .cart-footer > *{ min-width:0; } .cart-summary .cart-shipping__line input{ min-width:0; flex:1 1 auto; width:auto; } .cart-summary{ position:static; } .cart-footer__left{ order:2; } } /* Quantity selector on the product page. The number input keeps working without script -- the buttons are a convenience. */ .st-qty-form{ display:flex; flex-direction:column; gap:12px; max-width:420px; } .st-qty{ display:inline-flex; align-items:stretch; border:1.5px solid var(--st-line); border-radius:10px; overflow:hidden; width:max-content; } .st-qty__b{ width:46px; border:0; background:#fff; font-size:1.3rem; line-height:1; cursor:pointer; color:var(--st-black); } .st-qty__b.is-limit{ color:#b3b6ad; cursor:not-allowed; } .st-qty__notice{ display:block; color:#8a5a00; font-size:.82rem; margin:6px 0 0; min-height:1em; } /* A single unit: there is no quantity to choose; the input stays in the form. */ .st-qty[data-max="1"]{ display:none; } .st-qty__b:hover{ background:var(--st-gray-light, #f2f2f0); } .st-qty__n{ width:64px; border:0; border-left:1.5px solid var(--st-line); border-right:1.5px solid var(--st-line); text-align:center; font:inherit; font-weight:700; padding:12px 0; -moz-appearance:textfield; } .st-qty__n::-webkit-outer-spin-button,.st-qty__n::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } .st-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ------------------------------------------------------ SPONSORS Same list as the site, its own markup (see the partial's comment). A row that wraps: without pagination there is no state, and without state there is no script. Grey logo that gains color on hover -- colored brands in a row compete with the product itself. */ .st-spons{ background:#fff; border-top:1px solid var(--st-line); padding:26px 0 18px; } /* COLORED logo. It used to be grey with color on hover, so as not to compete with the product; but a firearm maker's brand is half a selling point -- Beretta and Taurus in grey become a smudge, and the strip loses its reason to exist. */ .st-spons__item img{ display:block; height:54px; width:auto; max-width:150px; object-fit:contain; } /* A still row: it is what appears with few brands, and also what is left when the visitor asks for less motion. */ .st-spons__list{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 34px; list-style:none; margin:0; padding:0; } /* --- sliding strip -------------------------------------------------- The showcase clips, the rail moves. The list is printed twice and the animation travels -50%: at the end, the copy is exactly where the first one started, so the loop has no seam. min-width:100% keeps the rail stretched when the brands do not fill the screen; nowrap stops the row from wrapping inside the showcase. */ .st-spons__showcase.is-slide{ overflow:hidden; } .st-spons__showcase.is-slide .st-spons__list{ flex-wrap:nowrap; justify-content:flex-start; min-width:100%; width:max-content; gap:0; animation:st-spons-scroll var(--st-spons-dur, 80s) linear infinite; } /* Fixed width per brand, not the image width: the logos are lazy and until they load they have zero width, which shrank the whole rail and made the strip jump when the last one arrived. A fixed slot also keeps the spacing regular, which on a moving rail is what gets noticed. */ .st-spons__showcase.is-slide .st-spons__item{ flex:0 0 168px; display:flex; align-items:center; justify-content:center; } @media (max-width:640px){ .st-spons__showcase.is-slide .st-spons__item{ flex-basis:120px; } } @keyframes st-spons-scroll{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } } /* Pause 1: mouse or keyboard over the strip. Without it the brand runs off from under the cursor right at the moment of the click. */ .st-spons__showcase.is-slide:hover .st-spons__list, .st-spons__showcase.is-slide:focus-within .st-spons__list{ animation-play-state:paused; } /* Pause 2: the button. A hidden checkbox -- but hidden in a way that still takes focus (no display:none, which takes it off the keyboard). */ .st-spons__chk{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .st-spons__chk:checked ~ .st-spons__showcase .st-spons__list{ animation-play-state:paused; } /* The button does not show. It exists because WCAG 2.2.2 requires a way to pause automatic motion, but on screen it got in the way -- and for mouse users it is useless, since hovering over the strip already pauses. Same solution as "skip to content": hidden by clip (never display:none, which would take it off the keyboard) and revealed when focus reaches it. Keyboard and screen reader users find it; mouse users never see it. */ .st-spons__ctrl{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .st-spons__chk:focus ~ .st-spons__ctrl{ position:static; width:auto; height:auto; margin:10px 0 0; overflow:visible; clip:auto; white-space:normal; display:flex; justify-content:flex-end; } .st-spons__button{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-size:.78rem; color:#6b7280; padding:5px 9px; border-radius:6px; border:1px solid transparent; user-select:none; } .st-spons__button:hover{ color:var(--st-black); background:#f3f4f6; } .st-spons__chk:focus ~ .st-spons__ctrl .st-spons__button{ outline:2px solid var(--st-accent); outline-offset:2px; background:#f3f4f6; color:var(--st-black); } /* Two little squares = pause; becomes a triangle = play. */ .st-spons__ic{ width:9px; height:11px; background:currentColor; flex:0 0 auto; clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%); } .st-spons__chk:checked ~ .st-spons__ctrl .st-spons__ic{ clip-path:polygon(0 0,100% 50%,0 100%); } .st-spons__tx-follow{ display:none; } .st-spons__chk:checked ~ .st-spons__ctrl .st-spons__tx-pause{ display:none; } .st-spons__chk:checked ~ .st-spons__ctrl .st-spons__tx-follow{ display:inline; } /* Pause 3: whoever asked the system for less motion sees no motion at all. The strip goes back to being the wrapping row, and the button goes away too -- there is nothing to pause. */ @media (prefers-reduced-motion:reduce){ .st-spons__showcase.is-slide{ overflow:visible; } .st-spons__showcase.is-slide .st-spons__list{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; } .st-spons__showcase.is-slide .st-spons__item[aria-hidden="true"]{ display:none; } .st-spons__ctrl{ display:none; } } @media (max-width:640px){ .st-spons__list{ gap:12px 22px; } .st-spons__item img{ height:40px; max-width:110px; } } /* --------------------------------------------------------- VARIATIONS Configurable product: one hidden radio per variation, the CSS reveals the checked one. Same mechanism as the gallery, and for the same reason -- the product page is indexable and loads no script for this. The per-position rules (option N checked -> panel N shown) are written by product.blade.php for exactly the number of options the page has: a fixed list here stopped at twelve, and the 13th color of a lure showed neither price nor buy button. */ .st-var{ margin:18px 0; } .st-var__radio{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; } .st-var__label{ margin:0 0 8px; font-weight:600; } .st-var__eco{ display:none; font-weight:400; opacity:.8; } .st-var__options{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; } .st-var__option{ display:inline-block; padding:9px 16px; border:1.5px solid var(--st-line); border-radius:999px; cursor:pointer; font-size:.95rem; transition:border-color .15s, box-shadow .15s, background .15s; } .st-var__option:hover{ border-color:var(--st-accent); } .st-var__panel{ display:none; } /* A variation with an image block, as in the big stores. The photo disappears when the record has no image per color: the name remains, still clickable and readable. */ .st-var__option{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px; border-radius:10px; min-width:74px; } .st-var__option img{ width:56px; height:56px; object-fit:contain; background:#fff; border-radius:6px; } .st-var__option span{ font-size:.82rem; line-height:1.2; text-align:center; } .st-var__options--text .st-var__option{ min-width:48px; padding:9px 14px; border-radius:8px; } .st-var__options--text .st-var__option span{ font-size:.9rem; font-weight:600; } /* Sold out: cannot be chosen (disabled radio). Same size as the others -- a text label made every chip a different width -- greyed and crossed by a thin diagonal, the convention shoppers already read as "no stock". */ .st-var__option--off{ position:relative; overflow:hidden; cursor:not-allowed; color:#b3b7bf; background:#f6f7f9; border-color:#e7e9ed; } .st-var__option--off:hover{ border-color:#e7e9ed; } .st-var__option--off::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top right, transparent calc(50% - .75px), #cfd3da calc(50% - .75px), #cfd3da calc(50% + .75px), transparent calc(50% + .75px)); } .st-var__option--off img{ opacity:.35; filter:grayscale(1); } /* "Cor (paleta)": a dot in the color's real tone beside the name. The white ring keeps it visible on the selected chip's accent background. */ .st-var__option:has(.st-var__swatch){ flex-direction:row; gap:8px; } .st-var__swatch{ width:18px; height:18px; border-radius:50%; flex:none; box-shadow:0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.15); } .st-var__option--off .st-var__swatch{ opacity:.35; } .st-var__options--text .st-var__option{ min-width:56px; height:44px; padding:0 8px; justify-content:center; } /* "48T"/"64C" grew past 52px and broke the columns */ .st-var__hint{ margin:-6px 0 16px; font-size:.88rem; color:var(--st-muted, #6b7280); } .st-var__hint a{ color:var(--st-accent); font-weight:600; } /* Kit composition on the product page. */ .st-kit{ margin:20px 0; padding:16px 18px; border:1px solid var(--st-line); border-radius:12px; background:#fff; } .st-kit__title{ margin:0 0 10px; font-family:var(--st-display); font-size:.95rem; text-transform:uppercase; letter-spacing:.04em; } .st-kit__list{ list-style:none; margin:0; padding:0; } .st-kit__list li{ display:flex; gap:10px; padding:7px 0; border-top:1px solid var(--st-line); } .st-kit__list li:first-child{ border-top:0; } .st-kit__qty{ font-weight:700; min-width:28px; } /* ------------------------------------------------------- SPECIFICATIONS Same card as the description -- white background, border, radius 14 and an uppercase title with the accent rule. The first version had none of that and floated on the page, looking like a pasted spreadsheet. A rule between lines instead of zebra stripes: the sheet has an odd number of items, and with alternating backgrounds the last line sat alone with half a painted stripe next to it. A thin line has no such problem and weighs less in a list of 15 pairs. The rule is border-TOP, not bottom, and is dropped on the first two: that way the border never dangles below the last pair (which may be alone in a column), and the first line meets the title cleanly. */ .st-product__sheet{ margin-top:40px; background:#fff; border:1px solid var(--st-line); border-radius:14px; padding:26px 28px; } .st-product__sheet h2{ margin:0 0 18px; font-size:1.3rem; text-transform:uppercase; letter-spacing:.02em; position:relative; padding-bottom:12px; } .st-product__sheet h2::after{ content:""; position:absolute; left:0; bottom:0; width:50px; height:3px; background:var(--st-accent); } .st-sheet{ margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px; } .st-sheet__par{ display:flex; align-items:baseline; gap:14px; padding:10px 0; border-top:1px solid var(--st-line); } .st-sheet__par:nth-child(-n+2){ border-top:0; } /* A narrow, fixed label: at 44% of the column, the value sat half a screen away from what it answers. */ .st-sheet dt{ /* 168px is the width of "COMPRIMENTO DO CANO", the longest label on the sheet -- below that it wraps onto two lines and misaligns the column. */ flex:0 0 168px; color:#6b7280; font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; line-height:1.5; } .st-sheet dd{ margin:0; font-weight:600; color:#1f2228; font-size:.95rem; } @media(max-width:860px){ .st-sheet{ grid-template-columns:1fr; column-gap:0; } /* In a single column, only the first one must have no rule. */ .st-sheet__par:nth-child(-n+2){ border-top:1px solid var(--st-line); } .st-sheet__par:first-child{ border-top:0; } .st-sheet dt{ flex-basis:130px; } } @media(max-width:420px){ .st-sheet__par{ flex-direction:column; gap:2px; padding:9px 0; } .st-sheet dt{ flex-basis:auto; } } /* ============================================================ HEADER: ACCOUNT AND CART */ .st-action--account.is-logged .st-action__tx b{ max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .st-cart-top{ position:relative; } .st-cart-top__n{ position:absolute; top:-7px; right:-9px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--st-accent); color:var(--st-accent-txt); font-size:.7rem; font-weight:700; line-height:18px; text-align:center; font-family:var(--st-font); box-shadow:0 0 0 2px var(--st-black); } .st-action__ic{ position:relative; } /* mini-cart: a panel hanging from the header cart */ .st-mini{ position:absolute; right:0; top:calc(100% + 8px); width:360px; max-width:calc(100vw - 24px); background:#fff; color:var(--st-ink); border:1px solid var(--st-line); border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.22); padding:14px; z-index:60; text-align:left; } .st-mini::before{ content:""; position:absolute; top:-8px; right:26px; border:8px solid transparent; border-top:0; border-bottom-color:#fff; } /* an invisible bridge over the gap between the icon and the panel: without it the mouse "left" the cart on the way and the panel closed/opened (flickered). */ .st-mini::after{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; } .st-mini__empty{ margin:6px 2px; color:var(--st-gray); font-size:.92rem; } .st-mini__list{ list-style:none; margin:0; padding:0; max-height:300px; overflow:auto; } .st-mini__item{ display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid var(--st-line); } .st-mini__item img{ width:48px; height:48px; max-width:none; object-fit:contain; border-radius:6px; background:#f4f6f8; } .st-mini__item > a:first-child{ flex:0 0 48px; display:block; } @media (max-width:640px){ .st-mini__rm{ flex-basis:40px; height:40px; } } .st-mini__item.is-off{ opacity:.55; } .st-mini__name{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; } .st-mini__name a{ color:var(--st-ink); text-decoration:none; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .st-mini__name small{ color:var(--st-gray); font-size:.78rem; } .st-mini__item b{ font-size:.9rem; white-space:nowrap; } .st-mini__sum{ display:flex; justify-content:space-between; margin:12px 2px 10px; font-size:.95rem; } .st-mini__actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .st-mini__actions a{ text-align:center; justify-content:center; padding:10px 8px; font-size:.86rem; } /* "adicionado ao carrinho" toast */ .st-toast{ position:fixed; left:50%; bottom:22px; transform:translate(-50%, 20px); opacity:0; pointer-events:none; background:var(--st-black); color:#fff; padding:12px 18px; border-radius:10px; font-size:.92rem; box-shadow:0 12px 30px rgba(0,0,0,.28); z-index:80; transition:opacity .2s, transform .2s; width:max-content; max-width:calc(100vw - 32px); /* width: with left:50% it shrank to half the screen */ } .st-toast.is-live{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; } .st-toast__ok{ color:var(--st-accent); font-weight:700; } .st-toast__i{ display:inline-flex; width:18px; height:18px; border-radius:50%; background:#f0b429; color:#1b1b1b; font-weight:700; font-size:.75rem; align-items:center; justify-content:center; font-family:Georgia,serif; font-style:italic; vertical-align:-3px; } .st-toast [data-toast-action]{ font-weight:700; } .st-toast a{ color:#fff; text-decoration:underline; margin-left:8px; } /* ============================================================ CUSTOMER AREA */ .st-account{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:28px; padding:24px 0 56px; align-items:start; } .st-account__menu{ background:#fff; border:1px solid var(--st-line); border-radius:14px; padding:18px 14px; position:sticky; top:96px; } .st-account__hello{ margin:0 0 12px; padding:0 8px; color:var(--st-gray); font-size:.9rem; } .st-account__hello b{ color:var(--st-ink); } .st-account__menu ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; } .st-account__menu a, .st-account__logout button{ display:flex; align-items:center; width:100%; text-align:left; padding:10px 12px; border-radius:8px; text-decoration:none; color:var(--st-ink); font:inherit; font-size:.94rem; background:none; border:0; cursor:pointer; } .st-account__menu a:hover, .st-account__logout button:hover{ background:var(--st-bg); } .st-account__menu a.is-current{ background:var(--st-accent); color:var(--st-accent-txt); font-weight:600; } .st-account__logout{ margin-top:8px; border-top:1px solid var(--st-line); padding-top:8px; } .st-account__logout button{ color:var(--st-gray); } .st-account__title{ margin:0 0 18px; font-size:1.6rem; text-transform:uppercase; letter-spacing:.02em; } .st-account__sub{ margin:28px 0 12px; font-size:1.1rem; text-transform:uppercase; letter-spacing:.02em; } .st-account__empty{ background:#fff; border:1px dashed var(--st-line); border-radius:12px; padding:22px; color:var(--st-gray); } .st-account__ok{ background:#eef6e6; border:1px solid #cfe3b8; color:#2f5a12; padding:10px 14px; border-radius:8px; margin:0 0 14px; } .st-account__link{ font-weight:600; } .st-account__notice{ margin:0; max-width:none; } .reg-help{ display:block; margin-top:4px; color:var(--st-gray); font-size:.8rem; } .reg-form input:disabled{ background:#f4f6f8; color:#6b7280; } .st-account__cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .st-account__card{ display:flex; flex-direction:column; gap:6px; background:#fff; border:1px solid var(--st-line); border-radius:12px; padding:16px; text-decoration:none; color:var(--st-ink); transition:border-color .15s, transform .15s; } .st-account__card:hover{ border-color:var(--st-accent); transform:translateY(-1px); } .st-account__card b{ font-family:var(--st-display); text-transform:uppercase; letter-spacing:.02em; font-size:1rem; } .st-account__card span{ color:var(--st-gray); font-size:.88rem; line-height:1.45; } /* order list */ .st-orders{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; } .st-order{ display:grid; grid-template-columns:170px minmax(0,1fr) 190px; gap:20px; background:#fff; border:1px solid var(--st-line); border-radius:12px; padding:18px; color:var(--st-ink); } .st-order__product{ display:flex; flex-direction:column; gap:10px; } .st-order__product img{ width:72px; height:72px; object-fit:contain; border-radius:8px; background:#f4f6f8; } .st-order__name{ color:var(--st-ink); font-weight:600; text-decoration:none; line-height:1.35; } .st-order__name:hover{ text-decoration:underline; } .st-order__product small{ display:block; margin-top:4px; color:var(--st-gray); font-size:.82rem; } .st-order__progress{ border-left:1px solid var(--st-line); border-right:1px solid var(--st-line); padding:0 20px; display:flex; flex-direction:column; justify-content:center; } .st-order__tracking{ margin:12px 0 0; text-align:center; font-size:.82rem; color:var(--st-gray); } .st-order__summary{ display:flex; flex-direction:column; gap:6px; } .st-order__summary p{ display:flex; justify-content:space-between; gap:8px; margin:0; font-size:.9rem; } .st-order__summary span{ color:var(--st-gray); } .st-order__summary .btn-primary, .st-order__summary .btn-secondary{ margin-top:6px; width:100%; justify-content:center; text-align:center; } .st-order__summary button{ cursor:pointer; border:0; } .st-order__summary .btn-primary, .st-order__summary .btn-secondary{ white-space:nowrap; padding-left:12px; padding-right:12px; font-size:.86rem; } /* Timeline: dots on a line, done = accent, cancelled = red, ahead = gray. */ .st-timeline{ list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; counter-reset:none; } .st-timeline__step{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:0 4px; text-align:center; font-size:.76rem; line-height:1.3; color:var(--st-gray); } .st-timeline__step::before{ content:""; position:absolute; top:55px; right:50%; width:100%; height:3px; background:var(--st-line); z-index:0; } .st-timeline__step:first-child::before{ display:none; } .st-timeline__step--done::before, .st-timeline__step--current::before, .st-timeline__step--cancelled::before{ background:var(--st-accent); } .st-timeline__step--cancelled::before{ background:#c62828; } .st-timeline__dot{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#fff; border:3px solid var(--st-line); color:#fff; } .st-timeline__step--done .st-timeline__dot{ background:var(--st-accent); border-color:var(--st-accent); color:var(--st-accent-txt); } .st-timeline__step--current .st-timeline__dot{ border-color:var(--st-accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--st-accent) 22%, transparent); } .st-timeline__step--cancelled .st-timeline__dot{ background:#c62828; border-color:#c62828; } .st-timeline__step--done, .st-timeline__step--current{ color:var(--st-ink); font-weight:600; } .st-timeline__step--cancelled{ color:#9b1c1c; font-weight:700; } .st-timeline__date{ font-size:.72rem; line-height:17px; height:34px; font-weight:400; color:var(--st-gray); font-variant-numeric:tabular-nums; } .st-order-head .st-timeline{ margin:16px 0 4px; max-width:520px; } .st-order-sums__again{ width:100%; margin-top:14px; justify-content:center; cursor:pointer; font:inherit; border:0; } /* Medium widths: the summary drops below, actions side by side. */ @media (max-width:1100px) and (min-width:769px){ .st-order{ grid-template-columns:150px minmax(0,1fr); } .st-order__progress{ border-right:0; padding-right:0; } .st-order__summary{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 18px; border-top:1px solid var(--st-line); padding-top:14px; } .st-order__summary .btn-primary, .st-order__summary .btn-secondary{ width:auto; margin:0; } .st-order__summary .btn-secondary{ margin-left:auto; } } /* Security / help strip at the top of the order screens. */ .st-account__alert{ display:flex; gap:12px; align-items:flex-start; background:#fff4ec; border:1px solid #f6d5bd; color:#7a3a10; border-radius:10px; padding:12px 16px; margin:0 0 18px; font-size:.9rem; line-height:1.45; } .st-account__alert svg{ flex:0 0 auto; margin-top:1px; color:#c2410c; } .st-account__alert p{ margin:0; } .st-account__alert a{ color:inherit; font-weight:700; } .st-account__menu a, .st-account__logout button{ gap:10px; } .st-account__ico{ flex:0 0 auto; opacity:.85; } .st-status{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; } .st-status--pending{ background:#fff4d6; color:#8a5a00; } .st-status--progress{ background:#e6f0fb; color:#1d4e89; } .st-status--sent{ background:#e6f4ea; color:#1e6b3a; } .st-status--done{ background:#e9eaec; color:#3a3f47; } .st-status--cancelled{ background:#fde8e8; color:#9b1c1c; } /* order detail */ .st-order-head{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; background:#fff; border:1px solid var(--st-line); border-radius:12px; padding:18px; } .st-order-head__data{ margin:0 0 8px; color:var(--st-gray); font-size:.9rem; } .st-order-head__text{ margin:10px 0 0; font-size:.92rem; } .st-tracking{ display:flex; flex-direction:column; gap:6px; min-width:220px; } .st-tracking code{ font-size:1.05rem; letter-spacing:.06em; background:var(--st-bg); padding:6px 10px; border-radius:6px; } .st-tracking small{ color:var(--st-gray); } .st-order-items{ list-style:none; margin:0; padding:0; background:#fff; border:1px solid var(--st-line); border-radius:12px; } .st-order-items li{ display:flex; align-items:center; gap:14px; padding:12px 16px; border-top:1px solid var(--st-line); } .st-order-items li:first-child{ border-top:0; } .st-order-items img{ width:64px; height:64px; object-fit:contain; border-radius:8px; background:#f4f6f8; } .st-order-items__name{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; } .st-order-items__name a{ color:var(--st-ink); text-decoration:none; font-weight:600; } .st-order-items__name small{ color:var(--st-gray); } .st-order-sums{ margin:14px 0 0; margin-left:auto; max-width:320px; } .st-order-sums p{ display:flex; justify-content:space-between; margin:6px 0; } .st-order-sums__total{ border-top:1px solid var(--st-line); padding-top:8px; font-size:1.1rem; } .st-order-delivery__mode{ margin:0 0 8px; color:var(--st-text-2); } .st-order-delivery{ background:#fff; border:1px solid var(--st-line); border-radius:12px; padding:14px 16px; line-height:1.6; } .st-checkout__logged{ margin:0 0 14px; padding:10px 14px; background:#eef6e6; border:1px solid #cfe3b8; border-radius:8px; font-size:.92rem; } @media(max-width:900px){ /* minmax(0,1fr), not 1fr: a 1fr track has a content minimum, and a long e-mail (which does not wrap) stretched the column to 568px on a 375 phone -- the whole page got horizontal scrolling. */ .st-account{ grid-template-columns:minmax(0,1fr); gap:16px; } .st-account__core{ min-width:0; } .st-account__card span, .st-order, .st-order-items__name a{ overflow-wrap:anywhere; } .st-account__menu{ position:static; padding:10px; } .st-account__hello{ margin-bottom:8px; } .st-account__menu ul{ flex-direction:row; overflow:auto; gap:6px; -webkit-overflow-scrolling:touch; } /* 44px high: the comfortable minimum for a finger (the tabs measured 37px). */ .st-account__menu a, .st-account__logout button{ white-space:nowrap; padding:12px 14px; font-size:.9rem; min-height:44px; display:flex; align-items:center; } .st-account__logout{ margin:0; border:0; padding:0; } .st-account__cards{ grid-template-columns:1fr; } .st-order{ grid-template-columns:minmax(0,1fr); gap:14px; padding:14px; } .st-order__product{ flex-direction:row; align-items:center; } .st-order__progress{ border:0; border-top:1px solid var(--st-line); border-bottom:1px solid var(--st-line); padding:14px 0; } .st-timeline__step{ font-size:.72rem; } .st-order__total{ grid-column:2; text-align:right; } .st-status{ grid-column:1 / -1; justify-self:start; } .st-mini{ right:-8px; } .st-mini__actions{ grid-template-columns:1fr; } } /* ============================================================ UX REVIEW */ .st-product__pay{ margin:6px 0 0; font-size:.86rem; color:var(--st-gray); } .st-product__legal{ margin:14px 0 0; padding:10px 14px; border-left:4px solid #b45309; background:#fff7ed; color:#5a3a12; font-size:.88rem; line-height:1.5; border-radius:0 8px 8px 0; } .st-field.is-error input, .st-field.is-error textarea{ border-color:#c0392b; box-shadow:0 0 0 2px rgba(192,57,43,.15); } .st-field.is-error label{ color:#c0392b; } @media(max-width:640px){ .st-gallery__board img, .st-product__photo img{ max-height:62vw; aspect-ratio:auto; padding:14px; } } .store-pagination{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:24px; } .store-pagination__nums{ display:flex; gap:4px; list-style:none; margin:0; padding:0; } .store-pagination__nums a, .store-pagination__nums span{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 8px; border-radius:8px; text-decoration:none; color:var(--st-ink); border:1px solid var(--st-line); background:#fff; } .store-pagination__nums a:hover{ border-color:var(--st-accent); } .store-pagination__nums span[aria-current]{ background:var(--st-accent); color:var(--st-accent-txt); border-color:var(--st-accent); font-weight:700; } .store-pagination__gap{ display:inline-flex; align-items:center; padding:0 4px; color:var(--st-gray); } /* 404 inside the store */ .st-404{ text-align:center; padding:48px 16px 64px; max-width:640px; margin:0 auto; } .st-404__code{ font-size:5rem; font-weight:800; line-height:1; color:var(--st-line); margin:0 0 8px; } .st-404__title{ font-size:1.6rem; margin:0 0 10px; } .st-404__text{ color:var(--st-text-2); margin:0 0 22px; } .st-404__actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:22px; } .st-404__actions .btn-primary{ border:1.5px solid transparent; } /* same height as the bordered secondary buttons */ @media (max-width:640px){ .st-404__actions{ flex-direction:column; align-items:stretch; max-width:320px; margin-left:auto; margin-right:auto; } } .st-404__search{ display:flex; gap:8px; max-width:420px; margin:0 auto; } .st-404__search input{ flex:1; min-width:0; font-size:16px; min-height:44px; padding:0 12px; border:1px solid var(--st-line); border-radius:8px; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ---- checkout: payment ---- */ .st-payment{ border:1px solid var(--st-line); border-radius:10px; padding:14px 16px; margin:4px 0 6px; } /* A
defaults to min-width:min-content and refuses to shrink: the card fields made the checkout 539px wide on a 375px phone. */ .st fieldset{ min-width:0; } .st-payment legend{ padding:0 6px; font-family:var(--st-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.85rem; } .st-payment__option{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:10px 4px; border-top:1px solid var(--st-line); cursor:pointer; } .st-payment__option:first-of-type{ border-top:0; } .st-payment__name{ font-weight:600; } .st-payment__name small{ display:block; font-weight:400; opacity:.7; } .st-payment__flags{ display:flex; gap:4px; } .st-payment__flags i{ font-style:normal; font-size:.62rem; font-weight:700; letter-spacing:.03em; border:1px solid var(--st-line); border-radius:4px; padding:2px 5px; opacity:.8; } .st-card{ margin:0 0 10px 30px; padding:12px 14px; background:var(--st-bg); border-radius:8px; } .st-card[hidden]{ display:none !important; } .st-card__sandbox{ margin:0 0 12px; font-size:.8rem; line-height:1.45; background:#fff8e1; border:1px solid #f3dc9a; color:#6b4f00; padding:8px 10px; border-radius:6px; } .st-card__sandbox code{ font-weight:700; } .st-field--card{ position:relative; } .st-card__flag{ position:absolute; right:10px; bottom:9px; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border:1px solid var(--st-line); border-radius:4px; padding:2px 6px; background:#fff; } .st-field-pair--card{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr); } .st-card__secure{ margin:6px 0 0; font-size:.76rem; color:var(--st-gray); } .st-confirmation__paid{ font-weight:600; margin:-6px 0 10px; } @media (max-width:600px){ /* four nested insets left the card number field 160px wide at 320px */ .st-checkout__form{ padding:20px 14px; } .st-payment{ padding:12px 8px; } .st-card{ padding:12px 10px; } .st-field-pair--card label{ white-space:nowrap; } } @media (max-width:600px){ .st-card{ margin-left:0; } .st-field-pair--card{ grid-template-columns:repeat(2,minmax(0,1fr)); } .st-payment__flags{ display:none; } }