/* DIVSA OS — Samagri store. * * Extracted verbatim from TAP_Samagri_Store::css(), which returned this as a * single-quoted PHP string with no interpolation and inlined all 43 KB of it * into the HTML of every page that touched a store surface — the homepage * included, where six store elements were paying for the product page, the * cart, the address form and the reviews. * * As a file it leaves the document entirely and is cached once for the whole * site. Nothing here was rewritten: splitting it by surface would have meant * deciding which of 500 hand-written rules each surface needs, and the tail of * the original mixes rail and pagination rules in with cart and review ones. * * The brand-token and layout half stays inline in layout_css(), which is * genuinely dynamic and must follow the operator's Layout Studio settings. * * Everything here is expressed in DIVSA design tokens with literal fallbacks, * so the store inherits Layout Studio, the Brand Customizer and dark mode for * free. Nothing below may hardcode a brand colour: an earlier version set #fff * on cards, which read as a white slab on a dark background. */ .tap-sam .tap-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} /* Every colour the store paints resolves from a Brand Customiser token. Nothing below this block may hardcode a brand colour: the tenant here runs a terracotta brand, so a literal purple or a "safe" grey would read as a foreign component dropped into the page. --sam-on-accent exists because a button needs a foreground that stays legible when the accent changes; --sam-star and --sam-save exist so a rating and a saving are not borrowing the semantic success colour, which is what made "★ 4.9" and "33% off" render in the same green as a payment-succeeded message. */ .tap-sam{--sam-line:var(--tap-line);--sam-card:var(--tap-card); --sam-ink:var(--tap-ink);--sam-muted:var(--tap-muted); --sam-accent:var(--tap-purple);--sam-radius:var(--tap-radius,18px); --sam-radius-sm:var(--tap-radius-sm,10px); /* Store actions use the primary purple token, so their foreground must follow the matching primary-contrast token rather than the orange CTA contrast token. Both remain controlled by DIVSA Brand & Theme. */ --sam-on-accent:var(--tap-primary-text,var(--tap-cta-text,#fff)); --sam-accent-soft:var(--tap-purple-pale); --sam-btn-radius:var(--tap-btn-radius,999px); --sam-star:var(--tap-star,#FF7900); /* Darkened because white sits on it. --tap-ok is #42D674, a light success green that reads well as a dot or a pale chip; as a solid background for white 11px bold text it measures 1.89:1, against the 4.5:1 a discount badge needs. axe-core flagged all ten badges on the homepage. Mixing toward black keeps it the brand's green, and derived from the token, rather than swapping in a literal. 55% lands at about 5.6:1. */ --sam-save:color-mix(in srgb, var(--tap-save,var(--tap-ok)) 55%, #000); --sam-hot:var(--tap-marigold); color:var(--sam-ink); font-size:16px;line-height:1.6; -webkit-text-size-adjust:100%;min-width:0;max-width:100%;overflow-x:visible} .tap-sam *,.tap-sam *::before,.tap-sam *::after{box-sizing:border-box} .tap-sam img{max-width:100%} /* Store controls explicitly own their typography and brand appearance. */ .tap-sam .tap-sam-btn,.tap-sam .tap-sam-subbtn,.tap-sam .tap-sam-update, .tap-sam .tap-sam-step,.tap-sam .tap-sam-rail-toggle,.tap-sam .tap-sam-rail-nav, .tap-sam .tap-info-chip,.tap-sam .tap-sam-search button{ font-family:inherit;letter-spacing:normal;text-transform:none;text-shadow:none} .tap-sam .tap-sam-btn{background:var(--sam-accent);color:var(--sam-on-accent);border:0} .tap-sam .tap-sam-subbtn{background:transparent;color:var(--sam-accent); border:1px solid var(--sam-accent)} .tap-sam .tap-sam-search button{background:var(--sam-accent);color:var(--sam-on-accent);border:0} .tap-sam .tap-sam-update,.tap-sam .tap-sam-step{background:transparent;color:inherit} .tap-sam .tap-sam-update{border:1px solid var(--sam-line)} /* ---- catalogue ---- */ .tap-sam-store{margin:0 0 28px} .tap-sam-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px} .tap-sam-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px; border-radius:var(--tap-radius-full,999px);border:1px solid var(--sam-line); text-decoration:none;font-size:14px;font-weight:600;color:inherit;background:var(--sam-card)} .tap-sam-chip.is-on{background:var(--sam-accent);border-color:var(--sam-accent);color:var(--sam-on-accent)} .tap-sam-grid{list-style:none;margin:0;padding:0;display:grid;min-width:0} /* v7.31.3 — `> a:not(.tap-sam-cta)`, not `a`. The card now carries a CTA anchor as a sibling, and a bare descendant selector styled it as a second bordered card box. */ /* v7.31.9 — one visual card shell. The product link and CTA remain separate siblings for valid HTML, but they now read as one component. Previously the border/background lived only on the upper , which made "View details" look like an unrelated purple slab below the card. */ .tap-sam-card{display:flex;flex-direction:column;min-width:0;overflow:hidden; border:1px solid var(--sam-line);border-radius:var(--sam-card-radius,var(--tap-radius-sm,16px)); background:var(--sam-card);transition:box-shadow .2s ease,transform .2s ease} .tap-sam-card:hover,.tap-sam-card:focus-within{box-shadow:var(--tap-shadow-sm,0 2px 8px rgba(30,10,46,.06));transform:translateY(-2px)} .tap-sam-card > a:not(.tap-sam-cta){display:flex;flex-direction:column;flex:1 1 auto;min-width:0; text-decoration:none;color:inherit;border:0;border-radius:0;background:transparent;overflow:hidden} .tap-sam-card > a:not(.tap-sam-cta):hover,.tap-sam-card > a:not(.tap-sam-cta):focus-visible{box-shadow:none;transform:none} /* The CTA is visually inside the card shell. Keep it a sibling of the product link so there is never a nested anchor. */ .tap-sam .tap-sam-cta{display:flex;align-items:center;justify-content:center; /* Aligned to the design system: --ds-radius-md is the one control corner. The store keeps its own colour tokens; only the geometry is shared, so an "Add to Cart" and a "View Pooja" are the same size and shape. v30.21.31 (TAP-BTN-001): that was the intent, but the height came from --ds-control-h, which is the page-level control height — the size the hero CTA uses. Measured with offsetHeight, "View Pooja" and the Resume action are 44px while this one stood at 48, so a card-level action was drawn at hero scale. 44px is the card action height, and it is also the touch floor, so this cannot drift under it. */ min-height:44px;margin:10px 12px 12px;padding:0 16px; border:0;border-radius:var(--sam-btn-radius,var(--ds-radius-md,14px)); background:var(--sam-accent);color:var(--sam-on-accent); font-family:inherit;font-size:14px;font-weight:700;line-height:1.2;text-align:center; letter-spacing:normal;text-transform:none;text-shadow:none;text-decoration:none;transition:filter .2s ease} .tap-sam .tap-sam-cta:hover,.tap-sam .tap-sam-cta:focus-visible{filter:brightness(.94);color:var(--sam-on-accent)} .tap-sam-cta-clone{pointer-events:none} .tap-sam-chip,.tap-sam-cta,.tap-sam-card > a,.tap-sam-card > a *:not(del):not(s){text-decoration:none} /* One square media system for every product surface — rail, catalogue, related, bought-together. Product photography arrives at whatever ratio the supplier shot it, so a shared box is the only thing that makes a grid of them look deliberate. object-fit is `contain`, not `cover`. Cover would crop, and on this catalogue that means slicing the ends off a mala or the tip off a yantra; the padding a contained image leaves is the lesser cost and is what the large marketplaces do for mixed-source catalogue imagery. Neither value stretches — `fill` is the one that would. */ .tap-sam-art{position:relative;display:block;aspect-ratio:var(--sam-card-ratio,1/1); background:var(--tap-bg);overflow:hidden} .tap-sam-art img{width:100%;height:100%;object-fit:contain;display:block;padding:6px} .tap-sam-off{position:absolute;inset-block-start:8px;inset-inline-start:8px; background:var(--sam-save);color:var(--sam-on-accent);font-size:11px;font-weight:700; letter-spacing:.02em;padding:4px 8px;border-radius:var(--tap-radius-full,999px)} .tap-sam-off.is-inline{position:static;display:inline-block;margin-inline-start:8px;vertical-align:middle} .tap-sam-name{padding:12px 12px 4px;font-size:14px;line-height:1.4;font-weight:600; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .tap-sam-price{display:block;padding:0 12px 14px;margin-top:auto} .tap-sam-now{font-weight:700;font-size:15px} .tap-sam-price del{font-weight:400;color:var(--sam-muted);margin-inline-start:6px;font-size:13px} .tap-sam-empty{padding:32px 16px;text-align:center;color:var(--sam-muted)} /* ---- product page ---- */ .tap-sam-pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 32px; align-items:start;margin:0 0 32px} .tap-sam-crumbs{grid-column:1/-1;font-size:13px;color:var(--sam-muted); display:flex;flex-wrap:wrap;gap:6px;align-items:center} .tap-sam-crumbs a{color:inherit;text-decoration:none;border-bottom:1px solid transparent} .tap-sam-crumbs a:hover{border-bottom-color:currentColor} .tap-sam-pdp-media img{width:100%;height:auto;display:block; border-radius:var(--sam-radius);border:1px solid var(--sam-line)} .tap-sam-noimg{display:block;aspect-ratio:1/1;border-radius:var(--sam-radius); background:var(--tap-bg);border:1px solid var(--sam-line)} /* min-width:0 is not decoration: a grid item defaults to min-content width, so one long unbroken product name blows the track out and pushes the whole page into a horizontal scroll on a phone. */ .tap-sam-pdp-buy{min-width:0} .tap-sam-pdp-title{margin:0 0 12px;font-size:clamp(21px,4.5vw,30px);line-height:1.25; overflow-wrap:anywhere; font-weight:700;letter-spacing:-.01em;color:var(--sam-ink)} .tap-sam-pdp-price{margin:0 0 14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px} .tap-sam-pdp-price .tap-sam-now{font-size:26px;font-weight:700;line-height:1.2} .tap-sam-pdp-price del{font-size:16px;font-weight:400;color:var(--sam-muted)} /* The short summary is a highlighted card, matching the one the Puja detail page puts under its title. Same role, same treatment. */ .tap-sam-pdp-lede{margin:0 0 18px;padding:13px 15px;font-size:14.5px;line-height:1.6; color:var(--sam-ink);background:var(--sam-accent-soft); border:1px solid color-mix(in srgb,var(--sam-accent) 18%,transparent); border-radius:var(--sam-radius-sm)} /* ---- Benefits / Process / Reviews tab strip ---- Class names come from the app bundle (.tap-info-chip / .tap-info-panel) so this reads as the same component as the Puja page. Those rules are scoped to .tap-root, which a native product page is not, so the matching declarations are repeated here rather than inherited. */ .tap-sam-infotabs{padding:20px 0 4px;border-top:1px solid var(--sam-line)} /* .tap-sam-pdp-details is a grid, so every section inside it is a grid item and inherits min-width:auto — the automatic minimum size, which is min-content. The pill row is four non-wrapping chips, so its min-content is the sum of all four (396px on a 343px column), and that sized the whole track: the panel, the process list and its body text were all laid out 53px wider than the page and then silently cut off by the overflow:clip on .tap-sam. No scrollbar, no console warning — just truncated sentences. min-width:0 lets the track shrink to the column; max-width:100% stops any future section doing the same thing. */ .tap-sam-pdp-details>*{min-width:0;max-width:100%} .tap-sam .tap-info-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none; padding:2px 2px 12px;margin:0;min-width:0;max-width:100%} .tap-sam .tap-info-panels,.tap-sam .tap-info-panel{min-width:0;max-width:100%} .tap-sam .tap-info-chips::-webkit-scrollbar{display:none} .tap-sam .tap-info-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px; min-height:44px;padding:0 16px;border-radius:var(--tap-radius-full,999px); border:1.5px solid var(--sam-line);background:var(--sam-card);color:var(--sam-muted); font:inherit;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer; transition:background .18s ease,color .18s ease,border-color .18s ease} .tap-sam .tap-info-chip:hover{border-color:color-mix(in srgb,var(--sam-accent) 40%,transparent)} .tap-sam .tap-info-chip.is-on{background:var(--sam-accent);border-color:var(--sam-accent); color:var(--sam-on-accent);font-weight:800} .tap-sam .tap-info-chip:focus-visible{outline:3px solid color-mix(in srgb,var(--sam-accent) 40%,transparent);outline-offset:2px} .tap-sam .tap-info-panel[hidden]{display:none} .tap-sam .tap-info-panel:focus-visible{outline:2px solid color-mix(in srgb,var(--sam-accent) 34%,transparent);outline-offset:4px;border-radius:10px} .tap-sam-infotabs .tap-sam-pdp-body{grid-column:auto;margin-top:0;padding-top:0;border-top:0} /* numbered process list, as on the Puja page */ .tap-sam-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px} .tap-sam-steps li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start} .tap-sam-step-n{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px; border-radius:999px;border:1.5px solid color-mix(in srgb,var(--sam-accent) 35%,transparent); color:var(--sam-accent);font-weight:800;font-size:14px} .tap-sam-step-b{display:grid;gap:2px;min-width:0} .tap-sam-step-b strong{font-size:15px;line-height:1.35} .tap-sam-step-b span{font-size:14px;line-height:1.6;color:var(--sam-muted)} .tap-sam-rev{text-align:center;padding:6px 0 2px} .tap-sam-rev-score{font-size:44px;font-weight:800;line-height:1.1} .tap-sam-rev-stars{color:var(--sam-star);font-size:22px;letter-spacing:2px} .tap-sam-rev-note{margin:6px 0 10px;font-size:14px;color:var(--sam-muted)} .tap-sam-rev-link{font-size:14px;font-weight:700;color:var(--sam-accent)} .tap-sam-add{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 18px} .tap-sam-stepper{display:inline-flex;align-items:center;border:1px solid var(--sam-line); border-radius:var(--tap-radius-full,999px);background:var(--sam-card);overflow:hidden} .tap-sam-step{width:44px;min-height:48px;border:0;background:transparent;cursor:pointer; font-size:20px;line-height:1;color:var(--sam-ink);font-family:inherit} .tap-sam-step:hover{background:var(--sam-accent-soft)} .tap-sam-stepper input{width:48px;min-height:48px;text-align:center;font-size:16px; font-family:inherit;font-weight:600;border:0;background:transparent;color:inherit;padding:0; -moz-appearance:textfield} .tap-sam-stepper input::-webkit-outer-spin-button, .tap-sam-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .tap-sam-btn{min-height:48px;padding:0 26px;border:0;cursor:pointer;font-family:inherit; border-radius:var(--sam-btn-radius);background:var(--sam-accent);color:var(--sam-on-accent); font-weight:700;font-size:15px;line-height:1;transition:filter .2s ease} .tap-sam-btn:hover{filter:brightness(1.08)} .tap-sam-oos{padding:12px 16px;border-radius:var(--sam-radius-sm);font-size:14px; background:var(--tap-warn-bg,#fff4e7);color:var(--tap-warn-fg,#854f0b);margin:0 0 16px} .tap-sam-backlink a{color:var(--sam-accent);font-weight:600} .tap-sam-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .tap-sam-facts li{font-size:13px;color:var(--sam-muted);background:var(--tap-bg); border:1px solid var(--sam-line);border-radius:var(--tap-radius-full,999px);padding:6px 12px} /* The body copy is author-written HTML. Without these rules it inherits the theme, which is what made the product page read as unstyled text. */ .tap-sam-pdp-body{grid-column:1/-1;margin-top:8px;padding-top:24px; border-top:1px solid var(--sam-line);max-width:68ch} .tap-sam-pdp-body h2{margin:0 0 14px;font-size:20px;line-height:1.3;font-weight:700} .tap-sam-pdp-body h3,.tap-sam-pdp-body h4{margin:24px 0 8px;font-size:16px;line-height:1.35;font-weight:700} .tap-sam-pdp-body p{margin:0 0 14px;font-size:15px;line-height:1.7;color:var(--sam-muted)} .tap-sam-pdp-body ul,.tap-sam-pdp-body ol{margin:0 0 16px;padding-inline-start:22px} .tap-sam-pdp-body li{margin:0 0 8px;font-size:15px;line-height:1.7;color:var(--sam-muted)} .tap-sam-pdp-body strong,.tap-sam-pdp-body b{color:var(--sam-ink);font-weight:700} .tap-sam-pdp-body a{color:var(--sam-accent)} .tap-sam-pdp-body img{height:auto;border-radius:var(--sam-radius-sm)} .tap-sam-pdp-body table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 16px} .tap-sam-pdp-body th,.tap-sam-pdp-body td{padding:8px 10px;border:1px solid var(--sam-line);text-align:start} .tap-sam-pdp-body > *:last-child{margin-bottom:0} /* ---- cart ---- Capped and centred. The columns were 1.6fr/1fr of whatever the theme gave them, so on a 1366px page the summary stretched to ~600px and the four checkout fields sat in a column twice as wide as they needed, with the order list marooned on the far left. A checkout reads better narrow: the max-width holds the two columns at a comfortable measure and the whole thing is centred rather than pinned to the edges. */ .tap-sam-cart{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr); gap:20px 28px;align-items:start;margin:0 auto 32px;max-width:var(--sam-cart-maxw,1060px)} /* A single centred panel (payment resume / post-payment completion) has no second column to balance against, so it gets its own narrow measure. */ .tap-sam-cart.is-single{grid-template-columns:minmax(0,1fr);max-width:620px} .tap-sam-complete{display:grid;gap:12px} .tap-sam-complete h2{margin:0;font-size:clamp(20px,4vw,26px);line-height:1.25} .tap-sam-complete h3{margin:6px 0 0;font-size:15px} .tap-sam-complete>p{margin:0;font-size:14px;color:var(--sam-muted)} .tap-sam-cart-head{grid-column:1/-1;margin:0} .tap-sam-cart-head h2{margin:0 0 4px;font-size:clamp(20px,4vw,26px);line-height:1.25;font-weight:700} .tap-sam-cart-head p{margin:0;font-size:14px;color:var(--sam-muted)} .tap-sam-flash{grid-column:1/-1;margin:0;padding:12px 16px;font-size:14px; border-radius:var(--sam-radius-sm);background:var(--tap-warn-bg,#fff4e7);color:var(--tap-warn-fg,#854f0b)} .tap-sam-flash.is-ok{background:var(--tap-ok-pale,#e8f8ee);color:var(--tap-ok-ink)} .tap-sam-panel{background:var(--sam-card);border:1px solid var(--sam-line); border-radius:var(--sam-radius);padding:16px} .tap-sam-cart-list{list-style:none;margin:0;padding:0} .tap-sam-cart-item{display:grid;grid-template-columns:72px minmax(0,1fr) auto; gap:12px 14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--sam-line)} .tap-sam-cart-item:first-child{padding-top:0} .tap-sam-cart-item:last-child{border-bottom:0;padding-bottom:0} .tap-sam-ci-art img{width:72px;height:72px;object-fit:cover;display:block; border-radius:var(--sam-radius-sm);border:1px solid var(--sam-line)} .tap-sam-ci-art{display:block;width:72px;height:72px;border-radius:var(--sam-radius-sm); background:var(--tap-bg)} .tap-sam-ci-body{min-width:0} .tap-sam-ci-name{display:block;font-weight:600;font-size:15px;line-height:1.4;margin:0 0 2px} .tap-sam-ci-unit{display:block;font-size:13px;color:var(--sam-muted)} .tap-sam-ci-err{display:block;font-size:13px;margin-top:4px;color:var(--tap-err,#B42318)} .tap-sam-ci-total{font-weight:700;font-size:15px;text-align:end;white-space:nowrap} .tap-sam-ci-controls{grid-column:2/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px} .tap-sam-ci-remove{border:0;background:transparent;padding:8px 0;cursor:pointer;font-family:inherit; font-size:13px;color:var(--sam-muted);text-decoration:underline;min-height:44px} .tap-sam-ci-remove:hover{color:var(--tap-err,#B42318)} .tap-sam-update{margin-top:16px;min-height:44px;padding:0 18px;cursor:pointer;font-family:inherit; font-size:14px;font-weight:600;border-radius:var(--sam-btn-radius); border:1px solid var(--sam-line);background:transparent;color:inherit} /* ---- address form ---- */ .tap-sam-addr{border:0;margin:0 0 18px;padding:0;min-width:0} .tap-sam-addr legend{padding:0;margin:0 0 4px;font-size:16px;font-weight:700} .tap-sam-addr-note{margin:0 0 14px;font-size:13px;color:var(--sam-muted)} .tap-sam-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .tap-sam-f{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0} .tap-sam-f.is-wide{grid-column:1/-1} .tap-sam-f label{font-size:13px;font-weight:600;color:var(--sam-muted)} .tap-sam-f .req{color:var(--tap-err,#B42318)} .tap-sam-f input{width:100%;min-height:48px;padding:10px 14px;font-family:inherit; /* 16px is load-bearing: iOS Safari zooms the whole page on focus below it. */ font-size:16px;line-height:1.4;color:inherit;background:var(--sam-card); border:1px solid var(--sam-line);border-radius:var(--sam-radius-sm)} .tap-sam-f input:focus-visible{outline:2px solid var(--sam-accent);outline-offset:1px;border-color:var(--sam-accent)} .tap-sam-f input::placeholder{color:var(--sam-muted);opacity:.7} /* ---- summary ---- */ .tap-sam-summary{position:sticky;top:16px} .tap-sam-summary h3{margin:0 0 12px;font-size:16px;font-weight:700} .tap-sam-row{display:flex;justify-content:space-between;gap:12px;font-size:14px; color:var(--sam-muted);margin:0 0 8px} .tap-sam-total{display:flex;justify-content:space-between;gap:12px;align-items:baseline; margin:12px 0 16px;padding-top:12px;border-top:1px solid var(--sam-line);font-size:15px} .tap-sam-total strong{font-size:20px;font-weight:700} /* The primary checkout CTA. Full width in its column at every size — a pay button that hugs its label reads as secondary, and on a phone it left a dead strip beside the most important control on the page. All four states are declared, because a button that looks identical while it is working is how people double-charge themselves. */ .tap-sam-pay{width:100%;display:flex;align-items:center;justify-content:center; gap:8px;margin-top:4px;padding-inline:20px;text-align:center; font-size:16px;font-weight:800;letter-spacing:.01em; box-shadow:0 6px 18px color-mix(in srgb,var(--sam-accent) 26%,transparent); transition:filter .18s ease,box-shadow .18s ease,transform .06s ease} .tap-sam-pay:hover{filter:brightness(1.06)} .tap-sam-pay:active{transform:translateY(1px);box-shadow:0 3px 10px color-mix(in srgb,var(--sam-accent) 24%,transparent)} .tap-sam-pay:focus-visible{outline:3px solid color-mix(in srgb,var(--sam-accent) 45%,transparent);outline-offset:2px} .tap-sam-pay[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none;filter:none} .tap-sam-pay[aria-busy="true"]{cursor:progress;opacity:.9} .tap-sam-pay[aria-busy="true"]::before{content:"";width:15px;height:15px;flex:0 0 15px; border:2px solid color-mix(in srgb,var(--sam-on-accent) 45%,transparent); border-top-color:var(--sam-on-accent);border-radius:50%; animation:tap-sam-spin .7s linear infinite} @keyframes tap-sam-spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){ .tap-sam-pay[aria-busy="true"]::before{animation-duration:2s} .tap-sam-pay:active{transform:none} } .tap-sam-note{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--sam-muted);text-align:center} /* v30.21.6 (TAP-TOUCH-002): measured 22.4px in the cart — every other control on that screen is 44. The padding buys the hit area and the negative margins give it back to the layout, so the gap above and below the link is exactly what it was. */ .tap-sam-continue{display:inline-block;margin-block:3px -11px;padding-block:11px; font-size:14px;font-weight:600; color:var(--sam-accent)} /* ---- Phase 2 native purchase flow ---- */ .tap-sam-variant-field{flex:1 1 100%;display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600} .tap-sam-variant-field select,.tap-sam-flow-step input,.tap-sam-flow-step select,.tap-sam-flow-step textarea, .tap-sam-auth input{width:100%;min-height:48px;padding:10px 13px;border:1px solid var(--sam-line); border-radius:var(--sam-radius-sm);background:var(--sam-card);color:inherit;font:inherit;font-size:16px} .tap-sam-pdp-actions{display:flex;flex:1 1 auto;gap:10px;flex-wrap:wrap} .tap-sam-subbtn{min-height:46px;padding:0 18px;border:1px solid var(--sam-accent);border-radius:var(--sam-btn-radius); background:transparent;color:var(--sam-accent);font:inherit;font-size:14px;font-weight:700;cursor:pointer} .tap-sam-ci-variant{display:block;font-size:12px;line-height:1.4;color:var(--sam-muted);margin:1px 0 2px} .tap-sam-flow-step,.tap-sam-auth{margin:0 0 16px;padding:14px 0;border-bottom:1px solid var(--sam-line)} .tap-sam-flow-step h3,.tap-sam-auth h3{margin:0 0 10px;font-size:16px} .tap-sam-auth p{margin:0 0 10px;font-size:13px;color:var(--sam-muted)} .tap-sam-auth.is-authenticated{padding:12px;border:1px solid var(--tap-ok);border-radius:var(--sam-radius-sm);background:var(--tap-ok-pale,#e8f8ee)} .tap-sam-auth.is-authenticated p{margin:0;color:var(--tap-ok-ink)} .tap-sam-auth-fields{display:grid;gap:10px} .tap-sam-otp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px} .tap-sam-compact-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px} .tap-sam-field{display:flex;flex-direction:column;gap:6px;min-inline-size:0} .tap-sam-field__label{font-size:13px;font-weight:600;color:var(--tap-ink,#241233)} .tap-sam-field input{inline-size:100%;box-sizing:border-box} .tap-sam-address-row{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:10px} .tap-sam-address-row textarea{resize:vertical;min-height:62px} .tap-sam-prep-group{display:grid;gap:8px;margin:0 0 14px} .tap-sam-prep-group>strong{font-size:13px} .tap-sam-choice,.tap-sam-address-choice{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;margin:0 0 8px; border:1px solid var(--sam-line);border-radius:var(--sam-radius-sm);cursor:pointer;background:var(--sam-card)} .tap-sam-choice input,.tap-sam-address-choice input{width:auto;min-height:0;margin-top:4px;accent-color:var(--sam-accent)} .tap-sam-choice span,.tap-sam-address-choice span{flex:1;min-width:0;font-size:14px} .tap-sam-choice b{font-size:13px;white-space:nowrap;color:var(--sam-accent)} .tap-sam-address-choice span{display:flex;flex-direction:column} .tap-sam-address-choice small{font-size:12px;line-height:1.45;color:var(--sam-muted);margin-top:2px} .tap-sam-inline-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--sam-muted)} .tap-sam-inline-check input{width:auto;min-height:0} .tap-sam-flow-error{margin:0 0 14px;padding:12px;border-radius:var(--sam-radius-sm);background:var(--tap-warn-bg,#fff4e7); color:var(--tap-warn-fg,#854f0b);font-size:13px} .tap-sam-row small{display:block;font-size:11px;color:var(--sam-muted);margin-top:2px} .tap-sam-pay-choice{margin:0 0 14px;padding:12px;border:1px solid var(--sam-line); border-radius:var(--sam-radius-sm);background:var(--tap-bg);display:grid;gap:8px} .tap-sam-pay-choice h3{margin:0 0 2px;font-size:14px;line-height:1.35} .tap-sam-choice-btn{width:100%;min-height:50px;padding:9px 12px;display:flex;align-items:center; justify-content:space-between;gap:12px;text-align:start;border:1px solid var(--sam-line); border-radius:var(--sam-radius-sm);background:var(--sam-card);color:inherit;font:inherit;cursor:pointer} .tap-sam-choice-btn:hover,.tap-sam-choice-btn:focus-visible{border-color:var(--sam-accent);outline:none} .tap-sam-choice-btn b{font-size:14px} .tap-sam-choice-btn small{font-size:12px;line-height:1.4;color:var(--sam-muted);text-align:end} .tap-sam-payment-resume{grid-column:1/-1;justify-self:center;width:100%;max-width:620px;margin:28px auto;padding:22px;background:var(--sam-card); border:1px solid var(--sam-line);border-radius:var(--sam-radius);text-align:center} .tap-sam-payment-resume h2{margin:0 0 8px;font-size:clamp(20px,4vw,26px);line-height:1.25} .tap-sam-payment-resume p{margin:0 0 16px;color:var(--sam-muted);font-size:14px} .tap-sam-payment-resume .tap-sam-flow-error{margin-bottom:12px;text-align:start} /* ---- Phase 3 discovery, premium PDP and verified reviews ---- */ .tap-sam-discovery{display:grid;gap:10px;margin:0 0 18px} .tap-sam-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px} .tap-sam-search input,.tap-sam-refine select{width:100%;min-height:44px;border:1px solid var(--sam-line);border-radius:var(--sam-radius-sm);background:var(--sam-card);color:inherit;font:inherit;font-size:15px;padding:8px 12px} .tap-sam-search input:focus-visible,.tap-sam-refine select:focus-visible{outline:none;border-color:var(--sam-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--sam-accent) 22%,transparent)} .tap-sam-search button{min-height:44px;border:0;border-radius:var(--sam-btn-radius);padding:0 18px;background:var(--sam-accent);color:var(--sam-on-accent);font:inherit;font-weight:700;cursor:pointer} .tap-sam-refine{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.tap-sam-refine label{min-width:130px;flex:0 1 190px}.tap-sam-clear{font-size:13px;font-weight:700;color:var(--sam-accent);padding:8px} /* The in-store rail is nested inside .tap-sam-store, which already sits in the page container; it must not add a second inset of its own. */ .tap-sam-store > .tap-sam-railwrap{margin-inline:0;padding-inline:0;max-width:none} .tap-sam-merch{display:grid;gap:18px;margin:0 0 22px;min-width:0}.tap-sam-merch-rail{min-width:0;max-width:100%;overflow:hidden}.tap-sam-merch-rail h2{margin:0 0 10px;font-size:18px;color:var(--sam-ink)}.tap-sam-merch-scroll{display:flex;gap:9px;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:2px 2px 7px;scroll-snap-type:x proximity;scrollbar-width:thin}.tap-sam-merch-scroll a{display:flex;flex:0 0 auto;align-items:center;gap:7px;min-height:44px;padding:9px 13px;border:1px solid var(--sam-line);border-radius:999px;background:var(--sam-card);color:var(--sam-ink);text-decoration:none;scroll-snap-align:start}.tap-sam-merch-scroll a span{color:var(--sam-accent)}.tap-sam-merch-scroll a strong{font-size:13px} .tap-sam-empty{display:grid;gap:4px}.tap-sam-empty span{font-size:14px;color:var(--sam-muted)} .tap-sam-badges,.tap-sam-pdp-badges{display:flex;gap:6px;flex-wrap:wrap}.tap-sam-badges{position:absolute;inset-block-start:8px;inset-inline-end:8px;z-index:2;justify-content:flex-end} .tap-sam-badge{display:inline-flex;align-items:center;min-height:24px;padding:2px 8px;border:1px solid var(--sam-line);border-radius:999px;background:color-mix(in srgb,var(--sam-card) 92%,transparent);font-size:10px;font-weight:800;color:var(--sam-ink);backdrop-filter:blur(6px)} .tap-sam-badge.is-hot{background:var(--sam-hot);border-color:transparent;color:#241300} .tap-sam-rating{padding:0 12px 4px;font-size:12px;font-weight:700;color:var(--sam-star)}.tap-sam-rating small{color:var(--sam-muted);font-weight:500} .tap-sam-price .tap-sam-now small{font-size:11px;color:var(--sam-muted);font-weight:600} .tap-sam-gallery{min-width:0}.tap-sam-gallery-main{overflow:hidden;border:1px solid var(--sam-line);border-radius:var(--sam-radius);background:var(--tap-bg);aspect-ratio:var(--sam-gallery-ratio,4/3)} .tap-sam-gallery-main img{width:100%;height:100%;object-fit:contain;border:0;border-radius:0;background:var(--sam-card);transition:transform .25s ease} .tap-sam-gallery[data-zoom="1"] .tap-sam-gallery-main:hover img{transform:scale(1.03)} .tap-sam-thumbs{display:flex;gap:8px;overflow:auto;padding:9px 1px 1px;scrollbar-width:thin}.tap-sam-thumb{width:62px;height:62px;flex:0 0 62px;padding:0;border:1px solid var(--sam-line);border-radius:10px;overflow:hidden;background:var(--sam-card);cursor:pointer}.tap-sam-thumb.is-on{outline:2px solid var(--sam-accent);outline-offset:1px}.tap-sam-thumb img{width:100%;height:100%;object-fit:cover;display:block} .tap-sam-pdp-badges{margin:0 0 8px}.tap-sam-pdp-rating{display:inline-flex;gap:6px;align-items:center;margin:-4px 0 8px;color:var(--sam-star);font-size:13px;font-weight:800;text-decoration:none}.tap-sam-pdp-rating span{font-weight:500;color:var(--sam-muted)} .tap-sam-trust{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tap-sam-trust li{border:1px solid var(--sam-line);border-radius:var(--sam-radius-sm);padding:8px 10px;font-size:13px;font-weight:700;background:var(--sam-card)}.tap-sam-trust small{display:block;color:var(--sam-muted);font-size:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:600} .tap-sam-delivery-note{display:grid;gap:2px;margin-top:14px;padding:12px;border:1px solid var(--sam-line);border-radius:var(--sam-radius-sm);background:var(--tap-bg)}.tap-sam-delivery-note strong{font-size:13px}.tap-sam-delivery-note span,.tap-sam-sku{font-size:12px;color:var(--sam-muted)}.tap-sam-sku{margin:8px 0 0}.tap-sam-pin-row{display:flex;gap:8px;margin-top:7px}.tap-sam-pin-row input{min-width:0;flex:1;border:1px solid var(--sam-line);border-radius:10px;padding:9px 10px;background:var(--sam-card);color:inherit;font:inherit;font-size:16px}.tap-sam-pin-row button{border:0;border-radius:10px;padding:8px 13px;background:var(--sam-accent);color:#fff;font-weight:800;cursor:pointer}.tap-sam-pin-row button[disabled]{opacity:.6;cursor:wait}.tap-sam-pin-result{margin:5px 0 0;font-size:12px;font-weight:700}.tap-sam-pin-result.is-ok{color:var(--tap-success,#42D674)}.tap-sam-pin-result.is-no{color:var(--tap-danger,#6109BE)} .tap-sam-pdp-details{grid-column:1/-1;min-width:0;display:grid;gap:0}.tap-sam-info,.tap-sam-reviews,.tap-sam-related{padding:24px 0;border-top:1px solid var(--sam-line);max-width:var(--sam-reading-maxw,76ch)}.tap-sam-info h2,.tap-sam-reviews h2,.tap-sam-related h2{margin:0 0 12px;font-size:20px}.tap-sam-info p{font-size:15px;line-height:1.7;color:var(--sam-muted)} .tap-sam-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:0 0 14px}.tap-sam-section-head h2,.tap-sam-section-head p{margin:0}.tap-sam-section-head p{font-size:13px;color:var(--sam-muted)}.tap-sam-section-head a{font-size:13px;font-weight:700;color:var(--sam-accent)} .tap-sam-faq-list{display:grid;gap:8px}.tap-sam-faq-list details{border:1px solid var(--sam-line);border-radius:var(--sam-radius-sm);background:var(--sam-card);padding:0 13px}.tap-sam-faq-list summary{cursor:pointer;font-weight:700;padding:12px 0}.tap-sam-faq-list p{margin:0;padding:0 0 13px;color:var(--sam-muted);line-height:1.65} .tap-sam-review-list{display:grid;gap:10px}.tap-sam-review{padding:13px;border:1px solid var(--sam-line);border-radius:var(--sam-radius-sm);background:var(--sam-card)}.tap-sam-review>div{display:flex;justify-content:space-between;gap:8px;font-size:12px}.tap-sam-review>div strong{color:var(--sam-star);letter-spacing:.04em}.tap-sam-review>div span,.tap-sam-review small{color:var(--sam-muted)}.tap-sam-review p{margin:8px 0;font-size:14px;line-height:1.6} .tap-sam-review-form{margin-top:16px;padding:14px;border:1px dashed var(--sam-line);border-radius:var(--sam-radius-sm);display:grid;gap:10px}.tap-sam-review-form h3{margin:0;font-size:15px}.tap-sam-review-form textarea{width:100%;min-height:90px;border:1px solid var(--sam-line);border-radius:var(--sam-radius-sm);padding:10px 12px;background:var(--sam-card);color:inherit;font:inherit;font-size:16px}.tap-sam-review-stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}.tap-sam-review-stars input{position:absolute;opacity:0;pointer-events:none}.tap-sam-review-stars span[aria-hidden]{font-size:25px;color:var(--sam-line);cursor:pointer}.tap-sam-review-stars label:hover span[aria-hidden],.tap-sam-review-stars label:hover~label span[aria-hidden],.tap-sam-review-stars input:checked~span[aria-hidden],.tap-sam-review-stars label:has(input:checked)~label span[aria-hidden]{color:var(--sam-star)}.tap-sam-review-status{margin:0;font-size:12px;color:var(--sam-muted)} .tap-sam-related{max-width:none}.tap-sam-kit ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}.tap-sam-kit li{display:flex;justify-content:space-between;gap:16px;padding:11px 12px;border:1px solid var(--sam-line);border-radius:var(--sam-radius-sm);background:var(--sam-card)}.tap-sam-cross .tap-sam-section-head p{margin:4px 0 0;color:var(--sam-muted);font-size:13px}.tap-sam-cross-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.tap-sam-cross-card{display:grid;gap:8px;color:var(--sam-ink);text-decoration:none;border:1px solid var(--sam-line);border-radius:var(--sam-radius-md);padding:10px;background:var(--sam-card)}.tap-sam-cross-img{display:block;position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:calc(var(--sam-radius-md) - 5px);background-color:var(--sam-soft)}.tap-sam-cross-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.tap-sam-cross-card span:last-child{font-size:12px;color:var(--sam-purple);font-weight:700} .tap-sam-sticky-buy{display:none;position:fixed;z-index:var(--tap-layer-sticky);inset-inline:10px;bottom:var(--tap-fixed-gap);margin:auto;max-width:var(--sam-sticky-maxw,620px);padding:8px 10px 8px 14px;border:1px solid var(--sam-line);border-radius:18px;background:color-mix(in srgb,var(--sam-card) 94%,transparent);box-shadow:0 10px 34px rgba(30,10,46,.16);backdrop-filter:blur(12px);align-items:center;justify-content:space-between;gap:12px}.tap-sam-sticky-buy>span{font-size:16px;font-weight:800}.tap-sam-sticky-buy .tap-sam-btn{min-height:44px} /* ---- merchandising rail (layout="rail") ---- The rail is a scroll container, not a transformed track: swipe, trackpad, keyboard and momentum scrolling then come from the platform and script only owns the timed advance. */ .tap-sam-railwrap{--sam-rail-gap:var(--sam-grid-gap,14px);margin:0 0 28px;min-width:0;max-width:100%} .tap-sam-rail{min-width:0;max-width:100%;padding-block:2px; overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;scroll-behavior:smooth; -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain; scrollbar-width:none} .tap-sam-rail::-webkit-scrollbar{display:none} .tap-sam-rail:focus-visible{outline:2px solid var(--sam-accent);outline-offset:3px;border-radius:var(--sam-radius-sm)} .tap-sam-rail-track{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap; gap:var(--sam-rail-gap);width:max-content;max-width:none} .tap-sam-rail-track>li{flex:0 0 var(--sam-rail-item,240px);min-width:0;scroll-snap-align:start} /* Container units size a card off the rail, not the max-content track — measuring against the track would be circular. The fractional counts are deliberate: a partly visible next card is the affordance that tells a touch user the rail scrolls, and it is more reliable than an arrow. */ @supports (container-type:inline-size){ .tap-sam-rail{container-type:inline-size} .tap-sam-rail-track>li{flex-basis:calc( (100cqi - (var(--sam-rail-visible,3) - 1) * var(--sam-rail-gap)) / var(--sam-rail-visible,3))} } .tap-sam-rail-head{align-items:center} .tap-sam-rail-tools{display:flex;align-items:center;gap:6px;margin-inline-start:auto} /* 44px, not the 36 that reads better in a header: layout_css() forces .tap-sam button to --sam-target-min anyway, so a smaller value here would only be true until Layout Studio loaded. */ /* Scope the complete control appearance under the store surface. */ .tap-sam .tap-sam-rail-toggle,.tap-sam .tap-sam-rail-nav{min-height:44px;border:1px solid var(--sam-line); background:var(--sam-card);color:var(--sam-muted);border-radius:var(--tap-radius-full,999px); box-shadow:none;font:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:0 14px;line-height:1; letter-spacing:normal;text-transform:none;text-shadow:none} .tap-sam .tap-sam-rail-nav{width:44px;min-width:44px;padding:0;font-size:19px;color:var(--sam-ink)} .tap-sam .tap-sam-rail-toggle:hover,.tap-sam .tap-sam-rail-nav:hover{background:var(--sam-card);border-color:var(--sam-accent);color:var(--sam-accent)} .tap-sam-rail-nav[disabled]{opacity:.4;cursor:default} .tap-sam .tap-sam-rail-cta{font-size:13px;font-weight:700;color:var(--sam-accent);margin-inline-start:6px;text-decoration:none} /* Arrows are a pointer affordance. On touch the swipe and the peeking card do that job, and two more 36px targets only crowd the header. */ @media (hover:none){.tap-sam-rail-nav{display:none}} .tap-sam-railwrap.is-static .tap-sam-rail{scroll-snap-type:none} @media (max-width:900px){ .tap-sam-pdp{grid-template-columns:1fr;gap:18px} .tap-sam-cart{grid-template-columns:1fr} .tap-sam-summary{position:static} } .tap-sam-purpose-chips{display:flex;flex-wrap:wrap;gap:5px;margin:5px 0 2px}.tap-sam-purpose-chips>span{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border:1px solid var(--sam-line);border-radius:999px;font-size:11px;line-height:1.2;color:var(--sam-muted);background:var(--sam-card)} .tap-sam-purpose-chips.is-pdp{margin:4px 0 10px}.tap-sam-purpose-chips.is-pdp>span{font-size:12px;min-height:28px;padding-inline:10px} /* v30.31.22: .tap-sam-card-add was the
that posted a product straight into the cart from the grid. The card CTA is a link to the product page now, so the wrapper and its width workaround are gone. */ .tap-sam-badge.is-trust{font-weight:800} .tap-sam-pagination{display:flex;justify-content:center;margin:24px 0 4px}.tap-sam-pagination ul{list-style:none;display:flex;gap:6px;padding:0;margin:0;align-items:center}.tap-sam-pagination a,.tap-sam-pagination span{display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid var(--sam-line);border-radius:10px;text-decoration:none;background:var(--sam-card)}.tap-sam-pagination .current{font-weight:800;border-color:var(--sam-accent);color:var(--sam-accent)} .tap-sam-prep-preview{margin:12px 0;padding:12px;border:1px solid var(--sam-line);border-radius:var(--sam-radius-sm);background:var(--sam-card)}.tap-sam-prep-preview>strong{display:block;font-size:14px;margin-bottom:8px}.tap-sam-prep-preview>div{display:flex;flex-wrap:wrap;gap:7px}.tap-sam-prep-preview>div>span{padding:6px 9px;border:1px solid var(--sam-line);border-radius:999px;font-size:12px}.tap-sam-prep-preview small{display:block;margin-top:8px;color:var(--sam-muted);line-height:1.45} @media (max-width:520px){ .tap-sam-fields{grid-template-columns:1fr} /* Was repeat(2,...) - two columns on the SMALLEST screens, which is backwards. Measured at 390px each field was 157px and the WhatsApp placeholder needs exactly 133px against 133px available, so it truncated. One field per row here. */ .tap-sam-compact-row{grid-template-columns:1fr} .tap-sam-address-row{grid-template-columns:minmax(0,1fr) 82px} .tap-sam-cart-item{grid-template-columns:60px minmax(0,1fr);row-gap:10px} .tap-sam-ci-art,.tap-sam-ci-art img{width:60px;height:60px} .tap-sam-ci-total{grid-column:2;text-align:start} .tap-sam-ci-controls{grid-column:1/-1} .tap-sam-add{gap:10px} .tap-sam-btn{flex:1 1 auto} .tap-sam-refine{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.tap-sam-refine label{min-width:0}.tap-sam-refine select{padding:7px;font-size:12px}.tap-sam-clear{grid-column:1/-1} .tap-sam-trust{grid-template-columns:repeat(2,minmax(0,1fr))} .tap-sam-cross-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .tap-sam-sticky-buy{display:flex} .tap-sam-pdp-details{padding-bottom:82px} } /* Rail density by width. Fractional so the next card always peeks. */ @media (max-width:640px){.tap-sam-rail{--sam-rail-visible:2.15}} @media (min-width:641px) and (max-width:900px){.tap-sam-rail{--sam-rail-visible:3.25}} @media (max-width:400px){.tap-sam-rail{--sam-rail-visible:1.85} .tap-sam-rail-toggle{padding:0 10px}} @media (prefers-reduced-motion:reduce){ .tap-sam-card a{transition:none} .tap-sam-card a:hover{transform:none} /* Someone who asked for less motion keeps a rail they drive themselves: the scroller and its snap points are the whole interaction, so only the timed advance is dropped (in JS) and the smooth scroll behaviour is turned off here. The clones exist to hide the loop seam; with no autoplay they are duplicate products, so they go. ?ta-motion=1 forces motion back on for QA on a machine that pins the OS setting to "reduce". */ .tap-sam-railwrap:not([data-motion="force"]) .tap-sam-rail{scroll-behavior:auto} .tap-sam-railwrap:not([data-motion="force"]) .tap-sam-rail-track>[data-sam-clone]{display:none} .tap-sam-railwrap:not([data-motion="force"]) .tap-sam-rail-toggle{display:none} } /* ========================================================================== v30.11.0 (TAP-RAIL-001) — rails start at the left, and say they scroll. ========================================================================== */ /* A rail with one card centred it, so the card sat 487px right of the heading it belongs to and read as a layout fault rather than a short shelf. A rail is a left-to-right shelf at every count. */ .tap-root .tap-hscroll-snap, .tap-home-root .tap-hscroll-snap, .tap-home-root .tap-fcard-rail, .tap-sam .tap-sam-rail-track, .tap-service-junction .tap-service-junction__grid{ justify-content:flex-start; justify-items:start; } /* The store rail scrolls, but nothing on screen said so: no arrows, the marquee off, and the last visible card cut at whatever pixel the rail happened to end on. A fade over the trailing edge is the cheapest honest signal — it only appears while there is more to reach, because the mask is painted on the scroll container and the container is only wider than its content when it can scroll. mask, not a gradient overlay: an overlay would need a solid colour and the footer, the home surface and the store page are three different grounds. */ .tap-sam-rail{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent 100%); mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent 100%); } /* Once the shelf is scrolled to the end there is nothing left to hint at, and a fade over the final card would just look like a rendering fault. */ .tap-sam-rail:not(:hover){ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent 100%); mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent 100%); } @media (max-width:767.98px){ .tap-sam-rail{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent 100%); mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent 100%); } } /* Keyboard focus must never be dimmed by the mask. */ .tap-sam-rail:focus-visible{ -webkit-mask-image:none; mask-image:none; outline:3px solid var(--tap-primary); outline-offset:2px; } /* ========================================================================== v30.19.0 — The struck price was not struck. TAP-PRICE-001 `.tap-sam-card > a *{text-decoration:none}` is there to stop the browser underlining every span inside a card that is wrapped in a link. The universal selector caught as well, so "₹1,199 ₹1,500" rendered as two plain prices side by side with nothing saying which one is the discount — on the store, the home rail, related products and bought-together alike. line-through is not decoration on ; it is the element's meaning. The reset is narrowed to leave it alone, and the strike is restated so a tenant's own `a *` reset cannot take it away again either. ========================================================================== */ .tap-sam del, .tap-sam-card del, .tap-sam-price del, .tap-sam-pdp-price del{ text-decoration-line:line-through; text-decoration-thickness:from-font; /* The strike belongs to the old price, not to the space before it. */ text-decoration-color:color-mix(in srgb,currentColor 72%,transparent); text-decoration-skip-ink:none; } /* Phone: the store rail follows the same edge-to-edge contract as the other home rails (see tap-home-experience.css). It lives here because this file loads after that one and owns .tap-sam-rail's geometry. */ @media (max-width:767.98px){ .tap-sam-rail{ margin-inline:calc(-1 * var(--tap-shell-gutter,12px)); inline-size:calc(100% + (2 * var(--tap-shell-gutter,12px))); max-inline-size:none; padding-inline:var(--tap-shell-gutter,12px); scroll-padding-inline:var(--tap-shell-gutter,12px); } } /* ========================================================================== v30.31.22 — TA Store product card The card carried service-catalogue proportions: a square photo taking roughly two thirds of its height, three purpose pills that wrapped to a different number of lines on every product, and a CTA stretched to the full card width. The rules below rebalance it towards the things that sell a product — name, purpose, price — without touching a single colour token or the card shell itself. Every selector is prefixed .tap-sam, so none of it can reach the puja, chadhava or healing catalogues, which keep their own card system. ========================================================================== */ /* A soft resting shadow with a real lift on hover, instead of a flat hairline that made the grid read as a table. */ .tap-sam .tap-sam-card{box-shadow:0 1px 2px rgba(20,10,40,.04)} .tap-sam .tap-sam-card:hover, .tap-sam .tap-sam-card:focus-within{box-shadow:0 8px 20px rgba(20,10,40,.09)} /* Name: one step up, in a reserved two-line box, so a one-line name and a two-line name still leave the price on the same baseline. */ .tap-sam .tap-sam-name{padding:12px 14px 0;font-size:15px;font-weight:700; line-height:1.35;min-height:calc(2 * 1.35em)} /* v30.31.35: the catalogue card does not render purpose pills any more, so every rule that existed to squeeze them onto one line went with them. The product page keeps its own set, where there is room to read the phrase. */ .tap-sam .tap-sam-rating{padding:8px 14px 0;font-size:12px} /* Price: the offer price is the loudest thing under the photo and the MRP is a quiet reference beside it, sharing one baseline instead of stacking. */ .tap-sam .tap-sam-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px; padding:10px 14px 0;margin-top:auto} .tap-sam .tap-sam-now{font-size:18px;font-weight:800;letter-spacing:-.01em} .tap-sam .tap-sam-price del{margin:0;font-size:13px;font-weight:400;opacity:.75} /* The action sits at card-action height and hugs its own label, aligned to the text column above it — a product card is not a landing page. */ .tap-sam .tap-sam-cta{align-self:flex-start;width:auto;min-height:44px; margin:14px;padding:0 22px} .tap-sam .tap-sam-related .tap-sam-card .tap-sam-cta{margin:12px} /* The homepage shelf carries a site rule, `body.home .tap-home-samagri .tap-sam-card > a{flex:1 1 0}`, written when the card's only direct was the product link and the CTA was a