/** Shopify CDN: Minification failed Line 286:0 Expected "}" to go with "{" **/ /* ============================================================ Silver Play — Client Correction Overrides Maintained by Digital Ishtihaar. Loaded after silverplay.css so these rules take precedence. Each rule notes its point #. ============================================================ */ /* #2 — Remove the "Today's Silver Rate" box on every collection page (belt-and-suspenders alongside the template setting). */ .sp-silver-rate { display: none !important; } /* #19 — Journal / article body text should be justified (was left-aligned) */ .sp-article-body { text-align: justify; } .sp-article-body p { text-align: justify; } /* #13 — Minor left margin gap on the collection left column (sidebar sat too close to the edge) */ @media (min-width: 769px) { .sp-coll-sidebar { padding-left: 0.75rem; } } /* #27 — Stone Guide "Shop Pendants" gold buttons had gold-on-gold text (label only appeared on hover). Force dark, legible text at all times. */ .sp-page-content a[style*="c9a84c"], .sp-page-content a[style*="C9A84C"], .sp-page-content a[style*="c9a84c"]:hover, .sp-page-content a[style*="C9A84C"]:hover { color: #1c1208 !important; border-bottom: 0 !important; } /* ---------- MOBILE FIXES (≤ 767px) ---------- */ @media (max-width: 767px) { /* Product page text (type, title, price, overview) was flush against and clipped by the left edge. Override the section's padding-left/right:0. */ .sp-product-page .sp-product-info { padding: 1.25rem 1.25rem 0 !important; } /* Announcement bar text was flush to the left edge — give it side padding. (left/right longhands only, so the bar's top/bottom padding is untouched) */ .sp-announce { padding-left: 1.25rem; padding-right: 1.25rem; } /* Mobile CTA: use the same inline Buy Now / Add to Bag row as desktop instead of a floating bar (which covered the footer). */ .sp-mobile-cta { display: none !important; } .sp-product-info .sp-cta-row.is-desktop-only { display: flex !important; } /* #3 Featured random — hide extra pool cards until JS reveals a random subset */ .sp-talismans .sp-products-grid[data-feat-random] .sp-product-card.sp-feat-extra{display:none;} /* Stone Guide cards — darken card text for legibility on the cream label */ span[style*="font-family:Georgia,serif;font-size:1.05rem;display:block;"]{color:#2c1a0e !important;} span[style*="text-transform:uppercase;color:#c9a84c;margin-top:0.25rem;"]{color:#8b6914 !important;} /* #27 — Stone Guide "Shop " gold CTA buttons: force dark, legible label (theme rule was overriding the inline dark colour to gold) */ a[style*="background:#c9a84c"][style*="text-transform:uppercase"]{color:#1a0d00 !important;} /* #27b — Stone Guide gold "Shop Pendants" buttons: force fully legible dark label even if a gradient/clip text effect is applied by the base theme */ a[style*="background:#c9a84c"][style*="text-transform:uppercase"]{ color:#1a0d00 !important; -webkit-text-fill-color:#1a0d00 !important; background-image:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; text-indent:0 !important; font-size:0.8rem !important; } /* #27c — Stone Guide INDEX cards (/pages/stone-guide): the stone NAME and the "READ THE GUIDE →" label sat as light tan text on the cream (#fbf6e9) card, making them effectively unreadable. Root cause: snippets/sp-stone-colors.liquid is injected inline in AFTER sp-corrections.css and uses ID-scoped, !important rules — `#main-content span { color: !important }` and `#main-content a { color: !important }` — which beat the plain attribute-selector overrides above on both specificity AND source order. These cards are with two inline-styled s and a hardcoded cream background, so sp-dark.css does NOT darken them either. Fix: raise specificity above `#main-content span/a` by scoping through the card link's href, so the heritage-dark name (#2c1a0e) and readable dark-gold label (#8b6914) win regardless of the snippet. */ #main-content a[href^="/pages/stone-guide-"]{ color:#2c1a0e !important; -webkit-text-fill-color:#2c1a0e !important; } #main-content a[href^="/pages/stone-guide-"] span[style*="font-family:Georgia,serif;font-size:1.05rem;display:block;"]{ color:#2c1a0e !important; -webkit-text-fill-color:#2c1a0e !important; } #main-content a[href^="/pages/stone-guide-"] span[style*="text-transform:uppercase;color:#c9a84c;margin-top:0.25rem;"]{ color:#8b6914 !important; -webkit-text-fill-color:#8b6914 !important; } #main-content a[href^="/pages/stone-guide-"]:hover{ color:#2c1a0e !important; } /* ── Remove hero "SCROLL" scroll-down indicator/cue everywhere ── */ .hero__scroll, .hero__scroll-label, .hero__scroll-line, .sp-hero5__scroll, .sp-hero5__scroll-line, [class*="hero__scroll"], [class*="hero5__scroll"]{ display:none !important; } /* ── Hover-to-see-2nd-image on product tiles ──────────────────────── Show a product's SECOND image on card hover, fading back to the first on mouse-out. Only rendered when the product has >1 image (the section liquid conditionally outputs the --hover ), so single-image products are unaffected. Scoped to the specific card classes so no other images change. NOTE: The MAIN collection grid (.sp-coll-card, section sp-collection-main) already has this effect built into silverplay.css and is intentionally not duplicated here. These rules cover the other product-tile grids: • .sp-product-card → "Featured Products / Talismans" (sp-talismans) • .sp-search-card → Search results products (sp-search) */ /* Featured Products / Talismans cards. .sp-product-card__img-wrap is already position:relative; aspect-ratio:3/4; overflow:hidden in silverplay.css, so we absolutely-stack the two imgs. */ .sp-product-card__img-wrap .sp-product-card__img--primary, .sp-product-card__img-wrap .sp-product-card__img--hover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .sp-product-card__img-wrap .sp-product-card__img--hover{ opacity:0; transition:opacity .4s ease; } .sp-product-card:hover .sp-product-card__img--hover{ opacity:1; } /* Search results product cards. .sp-search-card__img wrapper is aspect-ratio:1; overflow:hidden but NOT position:relative in silverplay.css, so establish the stacking context here. */ .sp-search-card__img{ position:relative; } .sp-search-card__img .sp-search-card__img-el--primary, .sp-search-card__img .sp-search-card__img-el--hover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .sp-search-card__img .sp-search-card__img-el--hover{ opacity:0; transition:opacity .4s ease; } .sp-search-card:hover .sp-search-card__img-el--hover{ opacity:1; } /* ── Search SUGGESTIONS product price legibility (Digital Ishtihaar) ── The predictive-search dropdown price (.sp-search-prod__price) rendered as dark goldenrod #B8860B at 10px on the dark drop background — too faint and too small to read, worse on mobile. Brighten to a legible warm gold and enlarge. No truncation existed; this is purely contrast + size. */ .sp-search-drop .sp-search-prod__price, .sp-search-prod__price{ color:#EBCE7C !important; font-size:13px !important; font-weight:600 !important; letter-spacing:.01em !important; } @media (max-width:767px){ .sp-search-drop .sp-search-prod__price, .sp-search-prod__price{ font-size:14px !important; } } /* ── PDP gallery: never crop the hero image (Digital Ishtihaar) ── The hero frame (.sp-product-gallery__main) is a 1:1 overflow:hidden box and the image used object-fit:cover + a hover transform:scale(), so non-square images (e.g. the "PENDANT SIZE" chart) were cut top/bottom and hover-zoom cropped further. Show the FULL image (contain) and remove the hover zoom-crop. Square product photos are unaffected; the magnify button still opens the full lightbox for zooming. */ .sp-product-gallery__main .sp-product-gallery__hero-img, .sp-product-gallery__main img{ object-fit:contain !important; } .sp-product-gallery__main:hover .sp-product-gallery__hero-img{ transform:none !important; } /* ── Brand Story "Fit all in frame" → side-by-side horizontal row (Digital Ishtihaar) ── The Brand Story section's "Fit all in frame" media layout stacked multiple videos/photos VERTICALLY (flex-direction:column via the section's inline