/* ============================================================
   ClaudeXP — design system (owns the theme's own markup)
   Refined Islamic editorial · purple + gold on cream · Bengali-first
   ============================================================ */

:root{
  --purple:#6b21a8; --purple-deep:#4c1580; --purple-tint:#f3ecfa;
  --gold:#c9a227; --gold-soft:#e4cd7f; --gold-tint:#f7f0da;
  --cream:#faf7f0; --paper:#fff; --ink:#2b2233; --muted:#857b90;
  --line:#ece5d8; --line-2:#f0ebe0;
  --serif:"Noto Serif Bengali",serif; --sans:"Noto Sans Bengali","Hind Siliguri",sans-serif; --latin:"Cormorant Garamond",serif;
  --wrap:1180px; --radius:8px;
  --sh-sm:0 1px 2px rgba(43,34,51,.05),0 2px 8px rgba(43,34,51,.04);
  --sh-md:0 6px 24px rgba(43,34,51,.10);
  --sh-lg:0 18px 48px rgba(76,21,128,.14);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--cream);
  font-size:17.5px; line-height:1.85; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 12% -5%,rgba(107,33,168,.05),transparent 42%),radial-gradient(circle at 92% 0%,rgba(201,162,39,.07),transparent 38%);
  background-attachment:fixed;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--purple); text-decoration:none; }
a:hover{ color:var(--purple-deep); }
h1,h2,h3,h4,h5,h6{ font-family:var(--serif); margin:0 0 .4em; line-height:1.35; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 22px; }
.screen-reader-text{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ left:8px; top:8px; background:var(--purple); color:#fff; padding:10px 16px; border-radius:6px; z-index:100; }

/* decorative */
.cxp-khatam{ width:22px; height:22px; color:var(--gold); flex:0 0 auto; }
.divider{ display:flex; align-items:center; justify-content:center; gap:16px; color:var(--gold); margin:34px 0; }
.divider::before,.divider::after{ content:""; height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--line) 40%,var(--gold-soft)); }
.divider::after{ transform:scaleX(-1); }
.eyebrow{ font-family:var(--sans); letter-spacing:.05em; font-size:13.5px; color:var(--gold); font-weight:600; }
.chip{ display:inline-block; }
.chip a,.chip{ font-family:var(--sans); font-weight:600; font-size:12.5px; line-height:1; color:#fff; background:var(--purple); padding:7px 12px; border-radius:2px; box-shadow:0 3px 10px rgba(107,33,168,.28); }
.chip a{ color:#fff; }

.section-head{ display:flex; align-items:baseline; gap:14px; margin:6px 0 22px; }
.section-head h2{ font-family:var(--serif); font-weight:600; font-size:clamp(22px,3.4vw,30px); margin:0; letter-spacing:-.01em; }
.section-head .line{ flex:1; height:1px; background:var(--line); }
.section-head .see-all{ font-size:14px; white-space:nowrap; }

/* ---------- TOPBAR ---------- */
.topbar{ background:linear-gradient(180deg,#2a2431,#241f2b); color:#efe9de; border-bottom:1px solid rgba(201,162,39,.22); }
.topbar .wrap{ display:flex; align-items:center; justify-content:center; height:38px; }
.topbar .bism{ font-family:var(--serif); color:var(--gold-soft); font-size:13.5px; letter-spacing:.02em; }

/* ---------- HEADER ---------- */
.site-header{ position:sticky; top:0; z-index:40; background:rgba(45,38,52,.97); backdrop-filter:blur(8px);
  border-bottom:3px solid transparent; border-image:linear-gradient(90deg,var(--purple),var(--gold),var(--purple)) 1; box-shadow:var(--sh-md); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:78px; }
.brand{ flex:0 0 auto; min-width:0; }
.main-nav{ flex:1 1 auto; display:flex; justify-content:flex-end; min-width:0; }
.brand-link{ display:flex; align-items:center; gap:14px; }
.brand .cxp-mark{ width:34px; height:34px; color:var(--gold); flex:0 0 auto; }
.brand-name{ font-family:var(--latin); color:#fff; line-height:1; font-size:26px; letter-spacing:.05em; font-weight:600; text-transform:none; white-space:nowrap; }
.brand-name small{ display:block; font-family:var(--sans); font-weight:400; font-size:12.5px; letter-spacing:.01em; color:#c0b7cc; margin-top:6px; white-space:nowrap; }
.custom-logo-link img{ max-height:56px; width:auto; }

/* nav */
.main-nav .nav-menu{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:2px; }
.nav-menu li{ position:relative; }
.nav-menu > li > a{ display:flex; align-items:center; gap:6px; color:#e9e3ef; font-weight:500; font-size:17.5px; padding:11px 16px; border-radius:var(--radius); white-space:nowrap; }
.nav-menu > li > a:hover,.nav-menu > li.current-menu-item > a{ color:#fff; background:rgba(255,255,255,.06); }
.nav-menu .menu-item-has-children > a::after{ content:""; width:8px; height:8px; border-right:2px solid var(--gold-soft); border-bottom:2px solid var(--gold-soft); transform:rotate(45deg) translateY(-2px); opacity:.8; }
.nav-menu .sub-menu{ list-style:none; margin:0; padding:8px; position:absolute; top:100%; left:0; min-width:230px; background:var(--paper); border:1px solid var(--line); border-radius:8px; box-shadow:var(--sh-lg); opacity:0; visibility:hidden; transform:translateY(8px); transition:.18s ease; z-index:50; }
.nav-menu li:hover > .sub-menu,.nav-menu li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-menu .sub-menu a{ display:block; color:var(--ink); font-size:15.5px; padding:9px 12px; border-radius:5px; border-left:2px solid transparent; }
.nav-menu .sub-menu a:hover{ background:var(--purple-tint); color:var(--purple-deep); border-left-color:var(--gold); }
.nav-menu .sub-menu .menu-item-has-children > a::after{ transform:rotate(-45deg); float:right; }

.header-tools{ display:flex; align-items:center; gap:10px; }
.icon-btn{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04); color:#e9e3ef; display:grid; place-items:center; cursor:pointer; transition:.15s; }
.icon-btn:hover{ background:var(--gold); color:#241f2b; border-color:var(--gold); }
.burger{ display:none; }
.header-search{ border-top:1px solid rgba(255,255,255,.08); background:rgba(36,31,43,.98); }
.header-search .wrap{ padding-top:14px; padding-bottom:14px; }

/* ---------- LAYOUT ---------- */
.site-content{ padding-bottom:10px; }
.crumb{ font-size:13.5px; color:var(--muted); padding:20px 0 4px; }
.crumb a{ color:var(--muted); }
.crumb a:hover{ color:var(--purple); }
.crumb .sep{ margin:0 8px; color:var(--gold); }
.crumb .current{ color:var(--ink); }
.layout{ display:flex; gap:40px; align-items:flex-start; padding:14px 0 60px; }
.content-area{ flex:1 1 auto; min-width:0; }
.sidebar{ flex:0 0 322px; width:322px; }
@media(max-width:940px){ .layout{ flex-direction:column; } .sidebar{ width:100%; flex-basis:auto; } }

/* ---------- CARDS ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:22px; }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:var(--sh-sm); display:flex; flex-direction:column; transition:transform .22s,box-shadow .22s,border-color .22s; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:#e3d8c2; }
.card-thumb{ position:relative; display:block; aspect-ratio:16/10; background:var(--purple-tint); overflow:hidden; }
.card-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.card:hover .card-thumb img{ transform:scale(1.05); }
.card-thumb .chip{ position:absolute; top:12px; left:12px; }
.card-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card-title{ font-family:var(--serif); font-weight:600; font-size:18.5px; line-height:1.45; margin:0; }
.card-title a{ color:var(--ink); background-image:linear-gradient(var(--gold),var(--gold)); background-size:0 2px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .3s; padding-bottom:2px; }
.card:hover .card-title a{ background-size:100% 2px; color:var(--purple-deep); }
.card-excerpt{ color:var(--muted); font-size:14.5px; line-height:1.7; margin:0; font-weight:300; }

/* post meta */
.post-meta{ margin-top:auto; padding-top:12px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12.5px; color:var(--muted); border-top:1px dashed var(--line); }
.post-meta .pm-author{ display:flex; align-items:center; gap:6px; font-weight:600; color:var(--ink); }
.post-meta .pm-mark{ width:16px; height:16px; color:var(--gold); }
.post-meta .pm-sep{ color:var(--gold); }

/* ---------- HERO (front page) ---------- */
.hero-feature{ display:block; position:relative; border-radius:12px; overflow:hidden; background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh-md); margin-bottom:6px; }
.hero-img{ position:relative; aspect-ratio:16/7; overflow:hidden; }
.hero-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.hero-feature:hover .hero-img img{ transform:scale(1.04); }
.hero-img .chip{ position:absolute; left:16px; top:16px; }
.hero-text{ padding:22px 26px 26px; }
.hero-text h1{ font-family:var(--serif); font-weight:700; font-size:clamp(24px,3.2vw,32px); line-height:1.4; margin:8px 0 10px; color:var(--ink); }
.hero-feature:hover .hero-text h1{ color:var(--purple-deep); }
.hero-text p{ color:var(--muted); font-weight:300; margin:0 0 12px; }
.hero-text .post-meta{ border:0; padding:0; }
.see-more-wrap{ display:flex; justify-content:center; margin:34px 0 0; }

.btn-more{ display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:600; font-size:16px; color:var(--purple-deep); background:var(--paper); border:1px solid var(--purple); padding:13px 26px; border-radius:40px; cursor:pointer; box-shadow:var(--sh-sm); transition:.18s; }
.btn-more:hover{ background:var(--purple); color:#fff; box-shadow:var(--sh-md); }

/* ---------- SIDEBAR widgets ---------- */
.widget{ background:var(--paper); border:1px solid var(--line); border-radius:8px; margin-bottom:22px; box-shadow:var(--sh-sm); overflow:hidden; }
.widget-title{ font-family:var(--serif); font-weight:600; font-size:16.5px; color:#fff; background:linear-gradient(100deg,var(--purple),var(--purple-deep)); padding:13px 18px; margin:0; display:flex; align-items:center; gap:10px; position:relative; }
.widget-title::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:linear-gradient(90deg,var(--gold),transparent); }
.widget-title .cxp-khatam{ color:var(--gold-soft); }
.widget .inner{ padding:16px 18px; }
.widget ul{ list-style:none; margin:0; padding:0; }
.widget-search .inner,.widget:not([class*="widget-"]) > ul{ padding:16px 18px; }
.cat-list li,.widget li{ padding:10px 0; border-bottom:1px dashed var(--line); font-size:15px; }
.cat-list li:last-child,.widget li:last-child{ border-bottom:0; }
.widget a{ color:var(--ink); }
.widget a:hover{ color:var(--purple); }

.searchbox{ display:flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--paper); }
.searchbox input{ border:0; padding:13px 15px; flex:1; font-family:var(--sans); font-size:15px; color:var(--ink); background:transparent; }
.searchbox input:focus{ outline:none; }
.searchbox button{ border:0; background:var(--purple); color:#fff; width:52px; display:grid; place-items:center; cursor:pointer; transition:.15s; }
.searchbox button:hover{ background:var(--gold); color:#241f2b; }

.popular{ counter-reset:none; }
.popular li{ display:flex; gap:12px; padding:12px 0; border-bottom:1px dashed var(--line); }
.popular li:last-child{ border-bottom:0; }
.popular .num{ font-family:var(--latin); font-size:26px; font-weight:600; color:var(--gold-soft); line-height:1; width:26px; flex:0 0 auto; }
.popular a{ font-family:var(--serif); color:var(--ink); font-size:15px; line-height:1.5; font-weight:500; }
.popular a:hover{ color:var(--purple); }
.popular .d{ display:block; font-size:12px; color:var(--muted); margin-top:3px; font-family:var(--sans); }

/* ---------- SINGLE POST ---------- */
.single-post{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:34px 40px 30px; box-shadow:var(--sh-md); }
.post-head .chip{ margin-bottom:14px; }
.post-title{ font-family:var(--serif); font-weight:700; font-size:clamp(26px,4vw,38px); line-height:1.35; margin:8px 0 16px; letter-spacing:-.015em; color:var(--ink); }
.post-head .post-meta{ border-top:0; border-bottom:1px solid var(--line); padding:0 0 20px; margin:0; font-size:13.5px; }
.post-hero{ margin:24px 0; border-radius:10px; overflow:hidden; box-shadow:var(--sh-sm); }
.post-hero img{ width:100%; }

.post-body{ font-size:17.5px; line-height:1.95; color:#332b3d; }
.post-body p{ margin:0 0 20px; }
.post-body h2{ font-family:var(--serif); font-weight:600; font-size:25px; margin:36px 0 14px; color:var(--purple-deep); position:relative; padding-left:20px; }
.post-body h2::before{ content:"✦"; position:absolute; left:0; color:var(--gold); font-size:16px; top:6px; }
.post-body h3{ font-family:var(--serif); color:var(--purple-deep); }
.post-body a{ color:var(--purple); text-decoration:underline; text-decoration-color:var(--gold-soft); text-underline-offset:2px; }
.post-body ul{ padding-left:4px; list-style:none; }
.post-body ul li{ position:relative; padding-left:28px; margin-bottom:10px; }
.post-body ul li::before{ content:"◈"; position:absolute; left:2px; color:var(--gold); }
.post-body ol{ padding-left:24px; }
.post-body blockquote{ margin:26px 0; padding:24px 28px; background:var(--purple-tint); border-radius:10px; border-right:4px solid var(--purple); text-align:center; }
.post-body blockquote p{ font-family:var(--serif); font-size:22px; color:var(--purple-deep); margin:0 0 8px; }
.post-body blockquote cite{ font-size:13.5px; color:var(--muted); font-style:normal; }
.post-body img{ border-radius:8px; }

/* WordPress core blocks */
.post-body .alignwide{ margin-left:-40px; margin-right:-40px; max-width:calc(100% + 80px); }
.post-body .alignfull{ margin-left:-40px; margin-right:-40px; max-width:calc(100% + 80px); }
.wp-caption,.wp-block-image figcaption{ font-size:13px; color:var(--muted); text-align:center; }
.page-links{ margin:20px 0; font-weight:600; }
.page-links a,.page-links > span{ display:inline-block; padding:6px 12px; border:1px solid var(--line); border-radius:6px; margin:0 4px; }

/* PDF — native File block → reader card */
.entry-content .wp-block-file{ background:var(--paper); border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:var(--sh-sm); margin:26px 0; padding:0; display:flex; flex-direction:column; }
.entry-content .wp-block-file > a:not(.wp-block-file__button){ order:2; font-family:var(--serif); font-weight:600; color:#fff; background:linear-gradient(100deg,var(--purple),var(--purple-deep)); padding:14px 18px; display:flex; align-items:center; gap:10px; }
.entry-content .wp-block-file > a:not(.wp-block-file__button)::before{ content:"📄"; font-size:20px; }
.entry-content .wp-block-file__embed{ order:1; width:100%; height:600px; border:0; background:#f4f1ea; display:block; }
.entry-content .wp-block-file{ background:var(--paper); }
.entry-content .wp-block-file__button{ order:3; align-self:flex-start; margin:14px 18px 18px; background:var(--gold); color:#241f2b; font-family:var(--sans); font-weight:600; padding:11px 20px; border-radius:8px; border:0; box-shadow:none; text-decoration:none; }
.entry-content .wp-block-file__button:hover{ background:var(--gold-soft); color:#241f2b; }

/* responsive video */
.cxp-video{ position:relative; padding-bottom:56.25%; height:0; border-radius:10px; overflow:hidden; box-shadow:var(--sh-sm); margin:22px 0; background:#000; }
.cxp-video iframe,.cxp-video object,.cxp-video embed{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.entry-content iframe[src*="youtube"],.entry-content iframe[src*="youtu.be"],.entry-content iframe[src*="vimeo"]{ display:block; width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:10px; margin:22px 0; }
.wp-block-embed__wrapper{ position:relative; }

/* post foot */
.post-foot{ margin-top:30px; padding-top:22px; border-top:1px solid var(--line); }
.tags{ font-size:14px; margin-bottom:16px; }
.tags .tlabel{ color:var(--muted); }
.tags a{ display:inline-block; background:var(--purple-tint); color:var(--purple-deep); padding:5px 12px; border-radius:30px; font-size:13px; margin:0 4px 4px 0; }
.tags a:hover{ background:var(--purple); color:#fff; }
.cxp-copy-link{ display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:16.5px; font-weight:600; color:#fff; border:0; cursor:pointer; background:linear-gradient(100deg,var(--purple),var(--purple-deep)); padding:14px 22px; border-radius:10px; box-shadow:var(--sh-sm); transition:.18s; }
.cxp-copy-link:hover{ box-shadow:var(--sh-md); transform:translateY(-1px); color:#fff; }
.cxp-copy-link.copied{ background:linear-gradient(100deg,#1f8f4e,#157a3f); }

/* pagination */
.cxp-pagination{ margin:34px 0 0; }
.cxp-pagination .nav-links{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.cxp-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); font-weight:600; }
.cxp-pagination .page-numbers.current{ background:var(--purple); color:#fff; border-color:var(--purple); }
.cxp-pagination a.page-numbers:hover{ background:var(--purple-tint); border-color:var(--purple); }

.no-posts,.error-404{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:40px; text-align:center; box-shadow:var(--sh-sm); }
.error-404 h1{ font-family:var(--latin); font-size:72px; color:var(--gold); margin:0; }
.archive-desc{ color:var(--muted); margin:-10px 0 20px; }

/* ---------- FOOTER ---------- */
.site-footer{ background:linear-gradient(180deg,#241f2b,#1c1824); color:#c8c0d2; margin-top:20px; border-top:3px solid transparent; border-image:linear-gradient(90deg,var(--purple),var(--gold),var(--purple)) 1; }
.footer-cols{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:36px; padding:48px 0 34px; }
@media(max-width:760px){ .footer-cols{ grid-template-columns:1fr; gap:28px; } }
.footer-col h4{ font-family:var(--serif); color:#fff; font-size:18px; margin:0 0 16px; display:flex; align-items:center; gap:9px; }
.footer-col h4 .cxp-khatam{ width:18px; height:18px; }
.site-footer a{ color:#c8c0d2; }
.site-footer a:hover{ color:var(--gold-soft); }
.footer-about p{ font-size:14.5px; line-height:1.8; color:#b3aabf; }
.foot-ayah{ font-family:var(--latin); letter-spacing:.05em; color:#cfc7d6; }
.foot-list{ list-style:none; margin:0; padding:0; }
.foot-list li{ padding:8px 0; border-bottom:1px dashed rgba(255,255,255,.08); font-size:14.5px; }
.foot-list li:last-child{ border:0; }
.foot-list .d{ display:block; color:#8f869c; font-size:12.5px; }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:18px 0; font-size:13px; color:#8f869c; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.foot-credit{ font-family:var(--latin); letter-spacing:.05em; color:#cfc7d6; }

/* ---------- MOBILE DRAWER (built by theme.js) ---------- */
.cxp-overlay{ position:fixed; inset:0; background:rgba(28,24,36,.55); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:.25s; z-index:70; }
.cxp-overlay.open{ opacity:1; visibility:visible; }
.cxp-drawer{ position:fixed; top:0; right:0; height:100%; width:84%; max-width:340px; background:linear-gradient(180deg,#2d2634,#241f2b); color:#fff; transform:translateX(100%); transition:transform .28s cubic-bezier(.2,.7,.2,1); z-index:71; box-shadow:-10px 0 40px rgba(0,0,0,.4); overflow-y:auto; border-left:3px solid var(--gold); }
.cxp-drawer.open{ transform:translateX(0); }
.cxp-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid rgba(201,162,39,.25); }
.cxp-drawer-head .t{ font-family:var(--latin); letter-spacing:.06em; color:var(--gold-soft); font-size:18px; }
.cxp-drawer-close{ width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:none; color:#fff; font-size:22px; cursor:pointer; display:grid; place-items:center; }
.cxp-drawer nav a{ display:block; color:#efe9de; font-family:var(--serif); font-size:19px; padding:15px 20px; border-bottom:1px solid rgba(255,255,255,.06); }
.cxp-drawer nav a:active{ background:rgba(255,255,255,.08); }
.cxp-drawer nav .sub a{ font-family:var(--sans); font-size:16.5px; padding-left:34px; color:#c8c0d2; border:0; }

#cxp-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:99999; background:linear-gradient(90deg,var(--purple),var(--gold)); transition:width .1s; }

/* ---------- RESPONSIVE ---------- */
@media(max-width:860px){
  .main-nav{ display:none; }
  .topbar{ display:none; }
  .burger{ display:grid; }
  .site-header .wrap{ min-height:64px; gap:10px; }
  .brand-link{ gap:9px; }
  .brand .cxp-mark{ width:28px; height:28px; }
  .brand-name{ font-size:19px; letter-spacing:.02em; white-space:nowrap; }
  .icon-btn{ width:46px; height:46px; }
}
@media(max-width:600px){
  body{ font-size:17px; }
  .wrap{ padding:0 12px; }
  .layout{ gap:26px; padding:10px 0 44px; }
  .single-post{ padding:22px 16px; border-radius:10px; }
  .post-body{ font-size:18px; }
  .post-body .alignwide,.post-body .alignfull{ margin-left:-16px; margin-right:-16px; max-width:calc(100% + 32px); }
  .section-head h2{ font-size:22px; }
  .brand-name{ font-size:15px; }
  .brand-name small{ font-size:10.5px; letter-spacing:0; }
  .entry-content .wp-block-file__embed{ height:430px; }
  .card-grid{ grid-template-columns:1fr; }
}
@media(max-width:360px){ .brand-name{ font-size:13.5px; } .brand-name small{ display:none; } }