/** Shopify CDN: Minification failed Line 332:2 Unexpected "}" **/ /* =============== */ /* ✅ Base tokens */ /* =============== */ :root{ --new-gems-bg: #ffffff; --new-gems-text: #111827; --new-gems-muted: #6b7280; --new-gems-border: #e5e7eb; --new-gems-surface: #ffffff; --new-gems-primary: #f97316; /* orange */ --new-gems-secondary: #ffcc3e; /* yellow */ --new-gems-success: #16a34a; --new-gems-success-bg: #dcfce7; --new-gems-soft: #fff7ed; --new-gems-soft-2: #ffffff; --new-gems-radius-xl: 18px; --new-gems-radius-2xl: 24px; --new-gems-shadow: 0 10px 25px rgba(17, 24, 39, 0.08); } /* Optional dark mode: add class="dark" on or */ .dark{ --new-gems-bg: #111827; --new-gems-surface: #0f172a; --new-gems-text: #ffffff; --new-gems-muted: #9ca3af; --new-gems-border: #1f2937; --new-gems-soft: rgba(249,115,22,.10); --new-gems-soft-2: rgba(15,23,42,.85); --new-gems-shadow: 0 0 0 rgba(0,0,0,0); } /* =============== */ /* ✅ Card styles */ /* =============== */ .new-gems-card{ position: relative; /* background: var(--new-gems-surface); */ /* border: 1px solid var(--new-gems-border); */ /* border-radius: var(--new-gems-radius-2xl); */ /* box-shadow: var(--new-gems-shadow); */ /* padding: 24px; */ margin-left: 2rem; margin-right: 2rem; overflow: hidden; color: var(--new-gems-text); } .spec{ background: var(--new-gems-surface); border: 1px solid var(--new-gems-border); border-radius: var(--new-gems-radius-2xl); box-shadow: var(--new-gems-shadow); padding: 24px; } .new-gems-badge{ position: absolute; top: 0; right: 0; background: var(--new-gems-secondary); color: #111827; font-weight: 800; font-size: 12px; padding: 10px 14px; border-bottom-left-radius: 14px; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 6px 14px rgba(17,24,39,0.08); z-index: 2; } .new-gems-badge__ico{ font-size: 16px; line-height: 1; } .new-gems-head{ padding-right: 80px; /* space for badge */ margin-bottom: 18px; } .new-gems-rating-row{ display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .new-gems-stars{ display: inline-flex; gap: 2px; color: var(--new-gems-secondary); font-size: 16px; } .new-gems-stars .material-icons-round{ font-size: 28px; } .new-gems-rating{ font-weight: 900; font-size: 14px; } .new-gems-reviews{ font-size: 12px; color: var(--new-gems-muted); padding-left: 10px; border-left: 1px solid rgba(107,114,128,.35); } .new-gems-title{ margin: 0 0 8px 0; font-size: 26px; line-height: 1.15; font-weight: 900; letter-spacing: -0.02em; } .new-gems-title__accent{ color: var(--new-gems-primary); font-weight: 900; } .new-gems-subtitle{ margin: 0; font-size: 14px; color: var(--new-gems-muted); line-height: 1.55; max-width: 62ch; } .new-gems-offer{ display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; border: 1px solid rgba(249,115,22,.20); background: linear-gradient(90deg, var(--new-gems-soft), var(--new-gems-soft-2)); margin: 16px 0 18px 0; } .new-gems-offer__icon{ width: 40px; height: 40px; border-radius: 999px; background: rgba(249,115,22,.12); display: flex; align-items: center; justify-content: center; color: var(--new-gems-primary); flex: 0 0 auto; } .new-gems-offer__label{ margin: 0 0 4px 0; font-size: 11px; font-weight: 900; color: var(--new-gems-primary); text-transform: uppercase; letter-spacing: .06em; } .new-gems-offer__desc{ margin: 0; font-size: 14px; font-weight: 700; color: var(--new-gems-text); opacity: .92; } .new-gems-footer{ display: flex; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid rgba(229,231,235,.7); } .new-gems-price__label{ margin: 0 0 6px 0; font-size: 12px; color: var(--new-gems-muted); font-weight: 700; } .new-gems-price__row{ display: flex; align-items: baseline; gap: 10px; } .new-gems-price__now{ font-size: 34px; font-weight: 900; letter-spacing: -0.02em; } .new-gems-price__was{ font-size: 18px; color: #9ca3af; text-decoration: line-through; text-decoration-color: #f87171; } .new-gems-save{ display: inline-block; margin-top: 6px; background: var(--new-gems-success-bg); color: var(--new-gems-success); font-size: 10px; font-weight: 900; padding: 4px 8px; border-radius: 999px; letter-spacing: .02em; } .new-gems-qty{ display: inline-flex; align-items: center; /* border: 1px solid var(--new-gems-border); */ border-radius: 12px; overflow: hidden; /* height: 40px; */ /* background: #f3f4f6b3; */ width: 17rem; } .dark .new-gems-qty{ background: rgba(31,41,55,.65); } .new-gems-qty__btn{ width: 44px; height: 40px; border: 0; background: transparent; color: var(--new-gems-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, transform .08s ease; } .new-gems-qty__btn:hover{ background: rgba(0,0,0,.04); } .dark .new-gems-qty__btn:hover{ background: rgba(255,255,255,.06); } .new-gems-qty__btn:active{ transform: scale(.98); } .new-gems-qty__count{ width: 44px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; color: var(--new-gems-text); border-left: 1px solid var(--new-gems-border); border-right: 1px solid var(--new-gems-border); user-select: none; } /* small screens */ @media (max-width: 640px){ .new-gems-footer{ flex-direction: column; align-items: flex-start; } .new-gems-head{ padding-right: 0; } .new-gems-badge{ position: static; margin-bottom: 12px; border-radius: 14px; } } .color-primary-or{ color:#f97a1f } .rudra-template-price{ font-size: 34px; margin-top: 1rem; } .set-coll-pr {padding-top:35px;} @media only screen and (max-width: 600px) { .rudra-template-price{ font-size:26px; margin-top:0; } .set-coll-pr {padding-top:0px;} } .gemstone-price-card{ border: 1px solid #f79c35;padding: 1rem;border-radius: 7px;background: #fffbf6ad; } /* ========================================= PDP — Why Choose Card (matches Tailwind look) Uses your existing classnames: .pdp-why-choose-rudraksha-cardcontent, etc. ========================================= */ .pdp-why-choose-rudraksha-cardcontent{ background: #fff; box-shadow: 0 1px 2px #1118270f; position: relative; overflow: hidden; background: var(--new-gems-surface); border: 1px solid #f1f5f9; border-radius: 24px; padding: 24px; box-shadow: var(--new-gems-shadow); margin: 1rem 2rem 2rem 1rem ; width:89% background: #fff; box-shadow: 0 1px 2px #1118270f; position: relative; overflow: hidden; background: var(--new-gems-surface); border: 1px solid #f1f5f9; border-radius: 24px; padding: 24px; box-shadow: var(--new-gems-shadow); margin: 1rem 0rem 1rem 32px; width: 91%; position: relative; background: var(--new-gems-surface); border: 1px solid var(--new-gems-border); border-radius: var(--new-gems-radius-2xl); box-shadow: var(--new-gems-shadow); } } /* Dark mode support: Add .dark on or to enable */ .dark .pdp-why-choose-rudraksha-cardcontent{ background: #0f172a; /* surface-dark-ish */ border-color: #1f2937; /* gray-800 */ box-shadow: none; } .pdp-why-choose-rudraksha-title{ display: flex; align-items: center; gap: 10px; margin: 0 0 18px 0; padding: 0 0 16px 0; border-bottom: 1px solid #f1f5f9; /* border-gray-100 */ color: #111827; /* text-gray-900 */ font-size: 18px; /* text-lg */ font-weight: 800; /* font-bold */ letter-spacing: -0.01em; } .dark .pdp-why-choose-rudraksha-title{ border-bottom-color: #1f2937; color: #ffffff; } .pdp-why-choose-rudraksha-icon{ width: 24px; height: 24px; color: #f97316; /* text-primary (orange) */ flex: 0 0 auto; } .pdp-why-choose-rudraksha-features{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* grid-cols-2 */ column-gap: 16px; /* gap-x-4 */ row-gap: 16px; /* gap-y-4 */ } /* Responsive: stack on small screens */ @media (max-width: 640px){ .pdp-why-choose-rudraksha-features{ grid-template-columns: 1fr; } } .pdp-why-choose-rudraksha-feature{ display: flex; align-items: flex-start; /* items-start */ gap: 10px; /* gap-2.5 */ color: #374151; /* text-gray-700 */ font-size: 14px; /* text-sm */ line-height: 1.25; /* leading-tight feel */ } .dark .pdp-why-choose-rudraksha-feature{ color: #d1d5db; /* gray-300 */ } .pdp-why-choose-rudraksha-check{ width: 24px; height: 24px; color: white; margin-top: 2px; flex: 0 0 auto; background: #f97316; border-radius: 50%; padding: 4px; /* shrink-0 */ } .pdp-why-choose-rudraksha-text{ display: block; line-height: 1.25; } /* Optional: subtle hover like premium UI */ .pdp-why-choose-rudraksha-cardcontent:hover{ border-color: rgba(249,115,22,.22); } .dark .pdp-why-choose-rudraksha-cardcontent:hover{ border-color: rgba(249,115,22,.28); } /* Optional: reduced motion */ @media (prefers-reduced-motion: reduce){ .pdp-why-choose-rudraksha-cardcontent{ transition: none !important; } } .smtre{ padding-top:0px; border:none; } /* ---------- Wrapper ---------- */ .pdp-buy-actions{ display: flex; flex-direction: column; gap: 12px; /* gap-3 */ margin-top:2rem } /* ---------- Shared button base ---------- */ .pdp-buy-btn{ width: 100%; border: none; outline: none; cursor: pointer; border-radius: 12px; /* rounded-xl */ font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all .25s ease; will-change: transform; user-select: none; } .pdp-buy-btn:active{ transform: scale(.98); } .pdp-buy-btn .material-icons-round{ font-size: 20px; line-height: 1; } /* ---------- BUY NOW (orange gradient) ---------- */ .pdp-buy-btn--buy{ height: 56px; /* h-14 */ font-size: 18px; /* text-lg */ color: #fff; background: linear-gradient(135deg,#f97a1f 0%, #ff8b2b 55%, #ffcc3e 100%); box-shadow: 0 10px 24px rgba(249,122,31,.30); position: relative; overflow: hidden; } .pdp-buy-btn--buy:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(249,122,31,.40); } .pdp-buy-btn--buy:active{ transform: translateY(0) scale(.98); } /* shimmer effect */ .pdp-buy-btn--buy::before{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100% ); animation: pdp-buy-shimmer 2.4s infinite; } @keyframes pdp-buy-shimmer{ 0%{ left:-120%; } 100%{ left:140%; } } /* ---------- ADD TO CART ---------- */ .pdp-buy-btn--cart{ height: 48px; /* h-12 */ background:#fff; color:#1f2937; border:2px solid #ffcc3e; text-transform: uppercase; letter-spacing: .4px; font-size: 13px; /* text-sm */ font-weight: 800; } .pdp-buy-btn--cart .material-icons-round{ color:#f97a1f; } .pdp-buy-btn--cart:hover{ background: rgba(255,204,62,.10); } /* ---------- Dark mode ---------- */ .dark .pdp-buy-btn--cart{ background:#111827; /* surface-dark */ color:#fff; border-color:#ffcc3e; } .dark .pdp-buy-btn--cart:hover{ background: rgba(255,204,62,.12); } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ .pdp-buy-btn, .pdp-buy-btn--buy::before{ transition:none !important; animation:none !important; } } /* ---------- Ba /* ---------- Base / Theme ---------- */ .gem-card{ padding: 0; box-shadow: none; margin: 0; border-radius: 0; overflow: unset; } .dark .gem-card{ background: #0b1220; border-color: rgba(148,163,184,.18); box-shadow: none; } .gem-space-7{ display:flex; flex-direction:column; gap:28px; margin-bottom:2rem; } /* ---------- Stepper ---------- */ .gem-stepper{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px; position: relative; z-index: 2; gap: 10px; } .gem-step{ display:flex; align-items:center; gap: 8px; flex: 0 0 auto; } .gem-step-label{ display:none; font-size: 12px; font-weight: 800; color:#0f172a; } .dark .gem-step-label{ color:#fff; } @media (min-width: 640px){ .gem-step-label{ display:inline; } } .gem-step-indicator{ width:32px; height:32px; border-radius: 999px; border:2px solid #e5e7eb; display:flex; align-items:center; justify-content:center; font-weight: 800; font-size: 13px; color:#111827; transition: all .25s ease; background: #fff; } .dark .gem-step-indicator{ border-color: rgba(148,163,184,.30); background: rgba(255,255,255,.03); color: #fff; } .gem-step-line{ flex: 1 1 auto; height: 2px; border-radius: 999px; background:#e5e7eb; transition: all .25s ease; } .dark .gem-step-line{ background: rgba(148,163,184,.30); } .gem-is-active .gem-step-indicator{ border-color: #f97a1f; color: #ffffff; box-shadow: 0 0 0 6px rgba(249, 122, 31, .10); background: #f97a1f; } .gem-is-active .gem-step-line{ background: linear-gradient(90deg, #f97a1f, #ffcc3e); } /* ---------- Titles ---------- */ .gem-h4{ margin:0 0 14px 0; font-size: 14px; font-weight: 900; color:#0f172a; } .dark .gem-h4{ color:#fff; } .gem-h4--sm{ font-size: 13px; font-weight: 900; margin:0; } .gem-link{ font-size: 12px; font-weight: 700; color: #f97a1f; cursor:pointer; background: none; border:none; padding:0; } .gem-link:hover{ text-decoration: underline; } /* ========================================================= NEW: Wear Type ICON GRID (matches your sample) ========================================================= */ .gem-type-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (min-width: 768px){ .gem-type-grid{ gap: 24px; } } .gem-type-item{ text-align:center; } .gem-type-radio{ display:none; } .gem-type-label{ display:block; cursor:pointer; text-align:center; user-select:none; } .gem-type-iconwrap{ width: 80px; height: 80px; margin: 0 auto 12px auto; border-radius: 20px; border: 1px solid #f1f5f9; background: #fff; display:flex; align-items:center; justify-content:center; position: relative; overflow:hidden; box-shadow: 0 2px 10px rgba(15,23,42,.05); transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease; } .dark .gem-type-iconwrap{ background: rgba(255,255,255,.04); border-color: rgba(148,163,184,.30); box-shadow: none; } .gem-type-label:hover .gem-type-iconwrap{ box-shadow: 0 10px 24px rgba(15,23,42,.10); transform: translateY(-1px); } .gem-type-ico{ font-size: 34px !important; color: #d1d5db; transition: transform .25s ease, color .25s ease, filter .25s ease; filter: drop-shadow(0 1px 0 rgba(0,0,0,.05)); } .dark .gem-type-ico{ color: rgba(148,163,184,.55); } .gem-type-label:hover .gem-type-ico{ color: #f97a1f; transform: scale(1.10); } /* bottom glow line */ .gem-type-glow{ position:absolute; left:0; bottom:0; width:100%; height:4px; background: linear-gradient(90deg, transparent, #f97a1f, transparent); opacity:0; transition: opacity .25s ease; } .gem-type-label:hover .gem-type-glow{ opacity:1; } .gem-type-name{ display:inline-block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color:#6b7280; transition: color .2s ease; } .dark .gem-type-name{ color: rgba(255,255,255,.55); } /* Selected state */ .gem-type-radio:checked + label .gem-type-iconwrap{ border-color: rgba(249,122,31,.55); box-shadow: 0 14px 30px rgba(249,122,31,.14); border-color: rgba(249, 122, 31, .55); box-shadow: 0 14px 30px rgba(249, 122, 31, .14); border-color: #ffcc3e; background: linear-gradient(135deg, #fffcf5 0%, #fff 100%); box-shadow: 0 4px 20px -5px rgba(255, 204, 62, 0.5); } .dark .gem-type-radio:checked + label .gem-type-iconwrap{ box-shadow: 0 14px 30px rgba(0,0,0,.0); } .gem-type-radio:checked + label .gem-type-ico{ color: #f97a1f; transform: scale(1.12); } .gem-type-radio:checked + label .gem-type-glow{ opacity:0; } .gem-type-radio:checked + label .gem-type-name{ color: #f97a1f; } /* ---------- Sections animation holder ---------- */ .gem-section{ padding-top: 8px; } .gem-slide{ animation: gemSlideDown .35s ease both; } @keyframes gemSlideDown{ from{ opacity:0; transform: translateY(-6px); } to{ opacity:1; transform: translateY(0); } } /* ---------- Metal chips ---------- */ .gem-grid-2{ display:grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 640px){ .gem-grid-2{ grid-template-columns: 1fr 1fr; } } .gem-metal-chip-input{ display:none; } .gem-metal-chip{ display:flex; align-items:center; justify-content:space-between; padding: 12px; border-radius: 14px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; transition: border-color .2s ease, transform .18s ease, box-shadow .2s ease; } .dark .gem-metal-chip{ background: rgba(255,255,255,.04); border-color: rgba(148,163,184,.30); } .gem-metal-chip:hover{ border-color: #d1d5db; } .dark .gem-metal-chip:hover{ border-color: rgba(148,163,184,.45); } .gem-metal-left{ display:flex; gap: 12px; align-items:center; } .gem-metal-badge{ width:40px; height:40px; border-radius: 10px; display:flex; align-items:center; justify-content:center; font-weight: 900; font-size: 12px; border: 1px solid rgba(0,0,0,.08); } .gem-metal-title{ display:block; font-size: 14px; font-weight: 900; color:#0f172a; transition: color .2s ease; } .dark .gem-metal-title{ color:#fff; } .gem-metal-sub{ display:block; font-size: 10px; font-weight: 700; color:#6b7280; margin-top: 2px; } .dark .gem-metal-sub{ color: rgba(255,255,255,.55); } .gem-chip-dot{ width:16px; height:16px; border-radius: 999px; border:2px solid #d1d5db; transition: all .22s ease; box-sizing: border-box; } .dark .gem-chip-dot{ border-color: rgba(148,163,184,.55); } .gem-metal-chip-input:checked + label.gem-metal-chip{ border-color: rgba(249,122,31,.55); box-shadow: 0 14px 28px rgba(249,122,31,.12); } .gem-metal-chip-input:checked + label .gem-chip-dot{ border-color: #f97a1f; box-shadow: inset 0 0 0 4px #f97a1f; } .gem-metal-chip-input:checked + label .gem-metal-title{ color: #f97a1f; } /* ---------- Ring size panel ---------- */ .gem-divider{ border-top:1px solid #f1f5f9; margin-top: 16px; padding-top: 16px; } .dark .gem-divider{ border-top-color: rgba(148,163,184,.18); } .gem-size-wrap{ background: #fffaf5; border: 1px solid rgba(249,122,31,.28); border-radius: 18px; padding: 18px; } .dark .gem-size-wrap{ background: rgba(255,255,255,.03); border-color: rgba(249,122,31,.25); } .gem-size-head{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 14px; } .gem-find-btn{ display:inline-flex; align-items:center; gap: 6px; border:none; background: transparent; cursor:pointer; color: #f97a1f; font-weight: 800; font-size: 13px; padding: 6px 0; } .gem-find-btn:hover{ text-decoration: underline; } .gem-form-col{ display:flex; flex-direction:column; gap: 8px; } .gem-label{ font-size: 13px; font-weight: 700; color:#6b7280; } .dark .gem-label{ color: rgba(255,255,255,.55); } .gem-select{ width:100%; appearance:none; background:#fff; border:1px solid #e5e7eb; border-radius: 14px; padding: 12px 44px 12px 14px; font-size: 13px; font-weight: 900; color:#111827; box-shadow: 0 1px 0 rgba(15,23,42,.03); outline:none; cursor:pointer; transition: border-color .2s ease, box-shadow .2s ease; } .dark .gem-select{ background: rgba(255,255,255,.04); border-color: rgba(148,163,184,.30); color:#fff; } .gem-select:focus{ border-color: rgba(249,122,31,.75); box-shadow: 0 0 0 3px rgba(249,122,31,.12); } .gem-select-wrap{ position:relative; } .gem-select-wrap::after{ content:""; position:absolute; right: 14px; top: 50%; width: 10px; height: 10px; border-right: 2px solid #9ca3af; border-bottom: 2px solid #9ca3af; transform: translateY(-60%) rotate(45deg); pointer-events:none; } .dark .gem-select-wrap::after{ border-right-color: rgba(255,255,255,.55); border-bottom-color: rgba(255,255,255,.55); } /* ---------- Utility ---------- */ .gem-hide{ display:none !important; } .metal-texture-gold-18k { background: radial-gradient(circle at 30% 30%, #fffde7, #fdd835); } .metal-texture-gold-22k { background: radial-gradient(circle at 30% 30%, #ffecb3, #ffb300); } .metal-texture-silver { background: radial-gradient(circle at 30% 30%, #f5f5f5, #bdbdbd); } .metal-texture-panch { background: radial-gradient(circle at 30% 30%, #ffe0b2, #d84315); } .gem-metal-badge{ border-radius:50%; } /* ===================== ASTRO PREFIXED CSS (as-dt-*) ===================== */ /* Optional: if your theme already loads Material Icons, keep using them. If not, replace .as-mi spans with SVGs later. */ .as-mi{font-family:inherit; line-height:1; display:inline-flex; align-items:center; justify-content:center;} .as-mi-round{font-family:inherit} /* SECTION */ .as-dt-section{ margin-bottom:64px; position:relative; border-radius:40px; overflow:hidden; background:rgba(255,237,213,.55); border:1px solid rgba(249,122,31,.20); max-width: 1200px; margin: 0 auto; } /* background gradient overlay */ .as-dt-overlay{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(255,255,255,.82), rgba(255,255,255,0)); pointer-events:none; z-index:0; } /* inner padding */ .as-dt-inner{ position:relative; z-index:1; padding:48px 24px; } /* header layout */ .as-dt-header{ max-width:1280px; margin:0 auto 40px auto; display:flex; flex-direction:column; gap:16px; justify-content:space-between; align-items:flex-end; } @media(min-width:768px){ .as-dt-header{flex-direction:row; align-items:flex-end;} } .as-dt-kicker{ display:block; font-weight:900; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#f97a1f; margin-bottom:8px; } .as-dt-title{ margin:0; font-size:32px; line-height:1.1; font-weight:900; color:#111827; } @media(min-width:768px){ .as-dt-title{font-size:40px;} } .as-dt-subtitle{ margin:10px 0 0; color:#4b5563; max-width:520px; font-size:14px; line-height:1.6; } /* nav buttons */ .as-dt-nav{ display:flex; gap:12px; } .as-dt-navbtn{ width:48px;height:48px;border-radius:999px; border:0; cursor:pointer; background:#f97a1f; color:#fff; box-shadow:0 12px 26px rgba(0,0,0,.14); transition:background .2s ease, transform .15s ease; display:flex; align-items:center; justify-content:center; } .as-dt-navbtn:hover{background:#fb923c; transform:translateY(-1px);} .as-dt-navbtn:active{transform:translateY(0);} /* Horizontal rail */ .as-dt-rail{ max-width:1280px; margin:0 auto; padding:0 4px 32px 4px; display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; } /* hide scrollbar */ .as-dt-rail::-webkit-scrollbar{height:0} .as-dt-rail{scrollbar-width:none} /* Card */ .as-dt-card{ min-width:280px; aspect-ratio:10/16; position:relative; border-radius:24px; overflow:hidden; cursor:pointer; scroll-snap-align:center; box-shadow:0 18px 34px rgba(0,0,0,.18); border:2px solid transparent; transition:transform .25s ease, border-color .25s ease; outline:none; } @media(min-width:768px){ .as-dt-card{min-width:300px;} } .as-dt-card:hover{border-color:#f97a1f; transform:translateY(-2px);} .as-dt-card:focus-visible{border-color:#f97a1f; box-shadow:0 0 0 4px rgba(249,122,31,.22), 0 18px 34px rgba(0,0,0,.18);} /* Optional glow animation for first card */ .as-dt-card--glow{ animation:as-dt-border-glow 2.4s ease-in-out infinite; } @keyframes as-dt-border-glow{ 0%,100%{box-shadow:0 18px 34px rgba(0,0,0,.18), 0 0 0 0 rgba(249,122,31,.00)} 50%{box-shadow:0 18px 34px rgba(0,0,0,.18), 0 0 0 4px rgba(249,122,31,.10)} } .as-dt-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s ease; } .as-dt-card:hover .as-dt-img{transform:scale(1.10);} .as-dt-grad{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0) 55%), linear-gradient(to bottom, rgba(0,0,0,.30), rgba(0,0,0,0) 38%); } /* Verified badge */ .as-dt-badge{ position:absolute; top:16px; left:16px; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.20); color:#fff; font-size:10px; font-weight:900; border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(10px); } .as-dt-badge-ico{font-size:12px; color:#f97a1f} /* Play button */ .as-dt-playwrap{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; opacity:.92; transition:transform .25s ease; } .as-dt-card:hover .as-dt-playwrap{transform:scale(1.10);} .as-dt-playbtn{ width:64px;height:64px;border-radius:999px; background:rgba(255,255,255,.20); border:1px solid rgba(255,255,255,.52); backdrop-filter:blur(8px); display:flex;align-items:center;justify-content:center; box-shadow:0 14px 26px rgba(0,0,0,.20); transition:background .2s ease, border-color .2s ease; } .as-dt-card:hover .as-dt-playbtn{ background:#f97a1f; border-color:#f97a1f; } .as-dt-playico{font-size:30px; color:#fff; margin-left:2px} /* Bottom meta */ .as-dt-meta{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:20px; color:#fff; } .as-dt-stars{ display:flex; gap:2px; color:#f97a1f; margin-bottom:10px; } .as-dt-stars .as-mi{font-size:16px} /* quote clamp */ .as-dt-quote{ margin:0 0 10px; font-weight:900; font-size:13px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* user row */ .as-dt-user{ display:flex; align-items:center; gap:8px; margin-top:8px; } .as-dt-userimg{ width:24px;height:24px;border-radius:999px; border:1px solid rgba(255,255,255,.90); object-fit:cover; } .as-dt-username{ font-size:12px; font-weight:700; color:rgba(229,231,235,.96); } /* initials */ .as-dt-initial{ width:24px;height:24px;border-radius:999px; border:1px solid rgba(255,255,255,.90); display:flex;align-items:center;justify-content:center; font-size:10px; font-weight:900; color:#fff; } .as-dt-initial--blue{background:#3b82f6} .as-dt-initial--green{background:#22c55e} .as-dt-initial--purple{background:#a855f7} /* Dark mode (optional class on html/body) */ .dark .as-dt-section{ background:rgba(17,24,39,.30); border-color:rgba(31,41,55,1); } .dark .as-dt-overlay{ background:linear-gradient(to bottom, rgba(17,24,39,.82), rgba(17,24,39,0)); } .dark .as-dt-title{color:#fff} .dark .as-dt-subtitle{color:rgba(156,163,175,1)} /* ---------- Wrapper ---------- */ .asr-ft-wrap{ position:relative; margin:0 0 32px 0; padding:24px; border-radius:20px; overflow:hidden; border:1px solid rgba(249,122,31,.18); background:linear-gradient(90deg,#fff6ed 0%, #ffffff 100%); } .dark .asr-ft-wrap{ background:linear-gradient(90deg,#111827 0%, #1f2937 100%); border-color:rgba(249,122,31,.25); } /* ---------- Big quote icon ---------- */ .asr-ft-quote{ position:absolute; top:0; right:0; padding:16px; opacity:.10; } .asr-ft-quote-ico{ font-size:144px; color:#f97a1f; line-height:1; } /* ---------- Inner layout ---------- */ .asr-ft-inner{ position:relative; z-index:2; display:flex; gap:24px; align-items:flex-start; } @media (max-width:768px){ .asr-ft-inner{ flex-direction:column; gap:18px; } } /* ---------- Avatar ---------- */ .asr-ft-avatar-wrap{ flex-shrink:0; } .asr-ft-avatar-ring{ width:64px; height:64px; border-radius:999px; padding:2px; background:linear-gradient(135deg,var(--primary,#f97a1f),var(--secondary,#ffcc3e)); box-shadow:0 12px 25px rgba(249,122,31,.25); } .asr-ft-avatar{ width:100%; height:100%; border-radius:999px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; color:var(--primary,#f97a1f); } .dark .asr-ft-avatar{ background:#1f2937; } /* ---------- Content ---------- */ .asr-ft-content{ flex:1 1 auto; } /* top row */ .asr-ft-top{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:10px; } .asr-ft-badge{ background:rgb(249, 122, 31); color:#fff; font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; padding:3px 8px; border-radius:6px; box-shadow:0 6px 12px rgba(249,122,31,.35); } .asr-ft-stars{ display:flex; gap:2px; color:#ffcc3e; } .asr-ft-stars .material-icons-round{ font-size:16px; } /* title */ .asr-ft-title{ margin:0 0 8px 0; font-size:20px; line-height:1.25; font-weight:800; color:#111827; } .dark .asr-ft-title{ color:#fff; } /* text */ .asr-ft-text{ margin:0 0 16px 0; font-size:14px; line-height:1.75; font-style:italic; color:#4b5563; } .dark .asr-ft-text{ color:rgba(255,255,255,.75); } /* meta row */ .asr-ft-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:14px; color:#6b7280; } .dark .asr-ft-meta{ color:rgba(255,255,255,.6); } .asr-ft-name{ font-weight:800; color:#111827; } .dark .asr-ft-name{ color:#fff; } .asr-ft-dot{ width:4px; height:4px; border-radius:999px; background:#d1d5db; } .dark .asr-ft-dot{ background:rgba(255,255,255,.35); } .asr-ft-verified{ display:flex; align-items:center; gap:4px; color:#16a34a; font-weight:600; } .asr-ft-verified-ico{ font-size:16px; } .col-yel{color:#ffcc3e} .asr-ft-time{ font-weight:500; } /* ===================== Customer Media Gallery CSS (as- prefixed) ===================== */ .as-cmg.as-mb-12{ margin-bottom:48px; } /* head row */ .as-cmg-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; } .as-cmg-title{ margin:0; font-size:20px; font-weight:800; color:#111827; display:flex; align-items:center; gap:8px; } .dark .as-cmg-title{ color:#fff; } .as-cmg-ico{ color:#f97a1f; font-size:20px; line-height:1; } /* link button */ .as-cmg-link{ border:0; background:transparent; cursor:pointer; font-size:14px; font-weight:800; color:#f97a1f; padding:0; } .as-cmg-link:hover{ text-decoration:underline; } /* grid mapping: grid-cols-3 md:6 lg:8 gap-4 */ .as-cmg-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; } @media(min-width:768px){ .as-cmg-grid{ grid-template-columns:repeat(6, minmax(0, 1fr)); } } @media(min-width:1024px){ .as-cmg-grid{ grid-template-columns:repeat(8, minmax(0, 1fr)); } } /* item mapping: aspect-square, rounded-review, overflow-hidden, relative, group, cursor-pointer, border-2 border-transparent hover:border-primary transition-all */ .as-cmg-item{ position:relative; overflow:hidden; border-radius:18px; /* "rounded-review" equivalent */ aspect-ratio:1 / 1; border:2px solid transparent; cursor:pointer; transition:border-color .2s ease, transform .2s ease; outline:none; } .as-cmg-item:hover{ border-color:#f97a1f; } .as-cmg-item:focus-visible{ border-color:#f97a1f; box-shadow:0 0 0 4px rgba(249,122,31,.22); } .as-cmg-item:active{ transform:scale(.99); } /* image */ .as-cmg-img{ width:100%; height:100%; object-fit:cover; display:block; } /* overlay mapping: bg-black/20 -> bg-black/0 on hover */ .as-cmg-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.20); transition:background .2s ease; } .as-cmg-item:hover .as-cmg-overlay{ background:rgba(0,0,0,0); } /* +count overlay mapping: inset-0 flex center bg-black/40 text-white bold text-lg */ .as-cmg-more{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.40); color:#fff; font-weight:900; font-size:18px; letter-spacing:.02em; } /* ===================== ASR Card (matches your sample card) ===================== */ .asr-card{ background:#fff; border:1px solid #f3f4f6; border-radius:18px; /* rounded-review */ padding:24px; box-shadow:0 8px 18px rgba(0,0,0,.06); transition: box-shadow .2s ease; } .dark .asr-card{ background: var(--surface-dark, #111827); border-color: rgba(255,255,255,.08); } .asr-card:hover{ box-shadow:0 14px 28px rgba(0,0,0,.10); } .asr-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; } .asr-user{ display:flex; align-items:flex-start; gap:12px; } .asr-avatar{ width:40px; height:40px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:14px; } .asr-meta{ min-width:0; } .asr-name{ margin:0; font-weight:900; font-size:14px; color:#111827; } .dark .asr-name{ color:#fff; } .asr-row{ display:flex; align-items:center; gap:10px; margin-top:4px; } .asr-stars{ display:flex; gap:1px; color:#f59e0b; /* secondary/star */ font-size:12px; line-height:1; } .asr-verified{ display:inline-flex; align-items:center; gap:4px; font-size:9px; font-weight:900; color:#16a34a; /* green-600 */ } .asr-verified-ico{ font-size:12px; font-weight:900; line-height:1; } .asr-time{ font-size:10px; color:#9ca3af; white-space:nowrap; } .asr-text{ margin:0; color:#4b5563; font-size:14px; line-height:1.7; } .dark .asr-text{ color: rgba(255,255,255,.78); } .asr-text--title{ font-weight:900; color:#111827; margin-bottom:8px; } .dark .asr-text--title{ color:#fff; } .asr-text--body{ margin-bottom:16px; } /* ✅ thumbs shown only when images exist */ .asr-media{ display:flex; gap:8px; flex-wrap:wrap; } .asr-thumb{ width:64px; height:64px; border-radius:10px; overflow:hidden; border:1px solid #f3f4f6; background:#fff; cursor:pointer; } .dark .asr-thumb{ border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.02); } .asr-thumb-img{ width:100%; height:100%; object-fit:cover; display:block; } .asr-thumb--more{ display:flex; align-items:center; justify-content:center; font-weight:900; color:#fff; background:rgba(0,0,0,.40); border-color:rgba(0,0,0,0); cursor:default; } /* Spinner element */ .spinner { animation: rotate360 1s linear infinite; } /* Rotation animation */ @keyframes rotate360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }