/* public/domains/css/domains-v2.css — every component on /domains. Consumes tokens.css only. */

/* ── Hero ── */
#section-domain-search{position:relative;overflow:clip;text-align:center;padding:clamp(24px,6vh,72px) 24px clamp(40px,6vw,72px)}
.dvd-hero{max-width:56rem;margin:0 auto;position:relative}
.dvd-hero-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(52rem 30rem at 50% -12rem,var(--brand-100),transparent 60%),radial-gradient(30rem 22rem at 10% 115%,rgba(105,72,255,.09),transparent 65%),var(--surface)}
.dvd-hero-bg::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(71,42,242,.16) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(42rem 26rem at 50% 0,#000 25%,transparent 72%);mask-image:radial-gradient(42rem 26rem at 50% 0,#000 25%,transparent 72%)}
.dvd-eyebrow{font:600 var(--text-xs)/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-600);margin:0 0 var(--sp-4)}
.dvd-h1{font-size:var(--display-1);font-weight:800;letter-spacing:var(--track-display);line-height:1.05;color:var(--ink-900);margin:0 0 var(--sp-4)} /* class-based: survives h1→h2 demotion on results */
.dvd-grad-text{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.dvd-sub{font-size:var(--text-lg);color:var(--muted-lg);max-width:36rem;margin:0 auto var(--sp-6)}

/* ── Mode switch ── */
.dvd-modes{display:inline-flex;gap:4px;background:var(--surface-alt);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px;margin-bottom:var(--sp-5)}
.dvd-mode{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:9px 18px;border-radius:var(--r-pill);font:600 var(--text-sm) var(--font);color:var(--muted);cursor:pointer;min-height:44px}
.dvd-mode.is-active{background:var(--surface);color:var(--brand-600);box-shadow:var(--shadow-1)}

/* ── Search / brief pill ── */
.dvd-bar{display:flex;align-items:center;gap:var(--sp-2);max-width:44rem;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:var(--sp-2);box-shadow:var(--shadow-2);transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.dvd-bar:focus-within{border-color:var(--brand-400);box-shadow:var(--shadow-brand),var(--ring)}
.dvd-bar:focus-within .dvd-input:focus{outline:none} /* ring lives on the shell — never remove both */
.dvd-bar-icon{width:20px;height:20px;margin-left:var(--sp-4);color:var(--muted-lg);flex:none}
.dvd-input{flex:1;min-width:0;border:0;outline:0;background:none;height:52px;font:600 17px/1 var(--font);color:var(--ink-800);padding:0 var(--sp-3)} /* ≥16px = iOS zoom guard */
.dvd-input::placeholder{color:var(--muted-lg);font-weight:400}
.dvd-bar--brief{border-radius:var(--r-xl)}
#dvdBrief{flex:1;border:0;resize:none;font:400 16px/1.45 var(--font);color:var(--ink-800);padding:10px 12px;outline:none;background:transparent}

/* ── Store context (admin shell only) ──
   The merchant's own store + the brief we read back from its project prompt. Built on the
   same tokens as everything else, so the admin's dark remap and RTL mirroring apply with
   no extra rules. max-width matches .dvd-bar so label and brief share one optical column. */
.dvd-storectx{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--sp-2);max-width:44rem;margin:0 auto var(--sp-3)}
.dvd-storectx-lb{font:500 var(--text-sm)/1 var(--font);color:var(--muted-lg)}
.dvd-storectx-one{font:600 var(--text-sm)/1 var(--font);color:var(--ink-900)}
.dvd-storectx-sel{font:600 var(--text-sm)/1.2 var(--font);color:var(--ink-900);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 28px 6px 10px;max-width:min(20rem,60vw);cursor:pointer;
  /* Native arrow varies per platform and ignores our ink tokens in dark mode — draw our own. */
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236b7280' stroke-width='1.6'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:12px}
.dvd-storectx-sel:focus-visible{border-color:var(--brand-400);box-shadow:var(--ring)}
[dir="rtl"] .dvd-storectx-sel{padding:6px 10px 6px 28px;background-position:left 8px center}

/* ── Buttons / chips ── */
.dvd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 clamp(20px,4vw,32px);border:0;border-radius:var(--r-pill);background:var(--brand-600);color:#fff;font:600 var(--text-md) var(--font);cursor:pointer;text-decoration:none;transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast),box-shadow var(--dur-base)}
.dvd-btn:hover{background:var(--brand-700);transform:translateY(-1px);box-shadow:var(--shadow-brand);color:#fff}
.dvd-btn:active{transform:none}
.dvd-btn:disabled{opacity:.6;cursor:progress;transform:none}
.dvd-btn--ai{background:var(--grad-brand)}
.dvd-btn--ghost{background:transparent;color:var(--brand-600);border:1.5px solid var(--brand-600)}
.dvd-btn--ghost:hover{background:var(--brand-600);color:#fff}
.dvd-btn--light{background:#fff;color:var(--ink-900)}
.dvd-btn--light:hover{background:var(--brand-100);color:var(--ink-900);box-shadow:none}
.dvd-btn--sm{min-height:40px;padding:0 18px;font-size:var(--text-sm)}
/* Anchor-buttons: out-specify the scoped `.dvd-scope a` link color (0,1,1) */
.dvd-scope a.dvd-btn,.dvd-scope a.dvd-cta,.dvd-scope a.dvd-btn:hover,.dvd-scope a.dvd-cta:hover{color:#fff}
.dvd-scope a.dvd-btn--ghost{color:var(--brand-600)}
.dvd-scope a.dvd-btn--ghost:hover{color:#fff}
.dvd-scope a.dvd-btn--light{color:var(--ink-900)}
.dvd-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:var(--sp-4)}
.dvd-tld,.dvd-chip{border:1px solid var(--line);background:var(--surface);color:var(--muted);font:600 var(--text-sm) var(--font);padding:8px 16px;min-height:40px;border-radius:var(--r-pill);cursor:pointer;transition:border-color var(--dur-fast),color var(--dur-fast)}
.dvd-tld:hover,.dvd-chip:hover{border-color:var(--brand-300);color:var(--brand-600)}
.dvd-hint{margin-top:var(--sp-3);font-size:var(--text-xs);color:var(--muted)}

/* ── Results ── */
.dvd-wrap{max-width:1170px;margin:0 auto;padding:0 var(--sp-5)}
.dvd-results-head{margin:var(--sp-6) 0 var(--sp-5)}
.dvd-verdict-line{font:800 var(--display-2)/1.15 var(--font);letter-spacing:var(--track-heading);color:var(--ink-900);margin:0 0 var(--sp-2);word-break:break-all}
.dvd-results-sub{font:400 var(--text-sm)/1.55 var(--font);color:var(--muted);max-width:40rem;margin:0}
.dvd-results-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--sp-5);align-items:stretch}
/* 1fr is minmax(auto,1fr): without this, a grid item's automatic minimum size is its
   min-content, so one long unbreakable string silently widens the whole track. */
.dvd-results-grid > *{min-width:0}
@media(max-width:860px){.dvd-results-grid{grid-template-columns:1fr}}
.dvd-card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--shadow-2)}
.dvd-card--verdict.is-available{border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad-brand) border-box}
.dvd-pill{display:inline-flex;align-items:center;gap:6px;font:700 var(--text-xs)/1 var(--font);letter-spacing:.05em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill)}
.dvd-pill .dvd-dot,.dvd-gcard-meta .dvd-dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.dvd-pill--ok{color:var(--ok);background:var(--ok-bg)}
.dvd-pill--taken{color:var(--muted);background:var(--surface-alt)}
.dvd-domain{font:800 clamp(1.4rem,3vw,1.9rem)/1.15 var(--font);letter-spacing:var(--track-heading);color:var(--ink-900);margin:var(--sp-3) 0 var(--sp-2);word-break:break-all}
.dvd-tldc{color:var(--brand-600)}
.dvd-price-now{font:800 2rem/1.1 var(--font);color:var(--ink-900);font-variant-numeric:tabular-nums}
.dvd-price-was{color:var(--muted);margin-right:8px}
.dvd-price-term{color:var(--muted);margin-left:8px;font-size:var(--text-sm)}
.dvd-renews{color:var(--muted);font-size:var(--text-sm);margin:6px 0 0}
.dvd-ledger{list-style:none;padding:0;margin:var(--sp-4) 0;border-top:1px solid var(--line-soft)}
.dvd-ledger li{padding:9px 0;border-bottom:1px solid var(--line-soft);color:var(--ink-800);font-size:var(--text-sm)}
.dvd-cta{display:block;text-align:center;background:var(--grad-brand);color:#fff;border-radius:var(--r-md);padding:15px 20px;font:700 var(--text-md) var(--font);text-decoration:none;box-shadow:var(--shadow-brand)}
.dvd-cta:hover{filter:brightness(1.07);color:#fff}
/* The CTA inlines the domain AND the price. This used to be nowrap+overflow:hidden+ellipsis,
   which backfired: the grid item above it is min-width:auto, so rather than the button ever
   truncating, the CARD grew to the button's min-content — a 32-char domain pushed the results
   182px past a 390px viewport. Wrap instead of truncating; an ellipsis would eat the price,
   and the price staying visible is the whole point of this page.
   Pairs with .dvd-results-grid>*{min-width:0}, which lets the track actually shrink. */
@media(max-width:560px){
  .dvd-cta{white-space:normal;overflow-wrap:anywhere}
}
.dvd-cta-note{color:var(--muted);font-size:var(--text-xs);text-align:center;margin-top:10px}
.dvd-handoff{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-3)}
.dvd-handoff .dvd-btn{align-self:flex-start}
.dvd-card--copilot{display:flex;flex-direction:column;justify-content:center;gap:var(--sp-3);background:radial-gradient(20rem 14rem at 100% 0,rgba(105,72,255,.25),transparent 65%),var(--ink-900);border-color:transparent;color:#fff}
.dvd-cc-badge{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font:700 var(--text-xs)/1 var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--brand-200);background:rgba(105,72,255,.18);padding:6px 12px;border-radius:var(--r-pill)}
.dvd-card--copilot h3{font:700 1.35rem/1.25 var(--font);margin:0;color:#fff}
.dvd-card--copilot p{font:400 var(--text-sm)/1.6 var(--font);color:#c7c5d6;margin:0}
.dvd-card--copilot .dvd-btn{align-self:flex-start}

/* ── Suggestion rows (existing class names kept: load-more JS churn minimized) ── */
.dvd-alts{margin-top:var(--sp-8)}
.dvd-alts-head{margin-bottom:var(--sp-2)}
.more-options-title{font:700 1.3rem/1.2 var(--font);color:var(--ink-900);margin:0 0 var(--sp-1)}
.domain-list{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;box-shadow:var(--shadow-1);margin-top:var(--sp-4)}
.domain-item{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line-soft);transition:background var(--dur-fast)}
.domain-item:first-child{border-top:0}
.domain-item:hover{background:var(--surface-tint)}
.domain-info{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;min-width:0}
.domain-name{font:600 1.0625rem var(--font);color:var(--ink-800);margin:0;word-break:break-all}
.save-badge{font:700 11px/1 var(--font);letter-spacing:.04em;color:var(--ok);background:var(--ok-bg);padding:4px 8px;border-radius:var(--r-pill)}
.save-badge--premium{color:var(--warn);background:var(--warn-bg)}
.domain-actions{display:flex;align-items:center;gap:var(--sp-3);white-space:nowrap}
.price-new{font:700 1.0625rem var(--font);color:var(--ink-900);font-variant-numeric:tabular-nums}
.price-unit,.price-renewal-sm{font:500 var(--text-xs) var(--font);color:var(--muted)}
.price-new--unknown{font-weight:500;color:var(--muted)}
.btn-outline-purple{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--brand-600);font:600 var(--text-sm) var(--font);text-decoration:none;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.domain-item:hover .btn-outline-purple,.btn-outline-purple:hover{border-color:var(--brand-600);background:var(--brand-600);color:#fff}
@media(max-width:560px){.domain-item{flex-wrap:wrap}.domain-actions{width:100%;justify-content:space-between}}
.dvd-loadmore-wrap{text-align:center;margin-top:var(--sp-5)}
.footer-note{margin-top:var(--sp-5);font-size:var(--text-xs);color:var(--muted)}

/* ── Skeletons (load-more + copilot) ── */
.skel-row{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line-soft)}
.skel{position:relative;overflow:hidden;background:var(--surface-alt);border-radius:6px;display:inline-block}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(71,42,242,.06),transparent)}
@media (prefers-reduced-motion:no-preference){.skel::after{animation:dvdShimmer 1.4s var(--ease-out) infinite}}
@keyframes dvdShimmer{to{transform:translateX(100%)}}
.skel-name{width:38%;height:16px}.skel-price{width:64px;height:16px;margin-left:auto}.skel-btn{width:86px;height:38px;border-radius:var(--r-sm)}
.dvd-skel .skel-name{width:70%}.dvd-skel .skel-price{width:48%;margin:10px 0 0}.dvd-skel .skel-btn{width:100%;margin-top:12px}

/* ── Copilot stage ── */
#dvdCopilotStage{max-width:980px;margin:var(--sp-6) auto 0;text-align:left}
.dvd-status{font-size:var(--text-sm);color:var(--muted);margin:0 0 var(--sp-4);text-align:center}
.dvd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.dvd-gcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.dvd-gcard.is-in{opacity:1;transform:none}
.dvd-gcard-name{font:700 18px var(--font);color:var(--ink-900);margin:0 0 6px;word-break:break-all}
.dvd-gcard-tld{color:var(--brand-600)}
.dvd-gcard-meta{display:flex;align-items:center;gap:6px;font:600 var(--text-xs) var(--font);color:var(--ok);margin:0 0 12px}
.dvd-premium{margin-left:6px;background:var(--warn-bg);color:var(--warn);border-radius:6px;padding:2px 8px;font-size:11.5px;font-weight:700}
.dvd-gcard-cta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dvd-gcard-price{font-weight:700;color:var(--ink-900);font-variant-numeric:tabular-nums}
.dvd-gcard-price small{font-weight:500;color:var(--muted)}
.dvd-honest{margin:16px 4px 0;font-size:var(--text-xs);color:var(--muted);text-align:center}
.dvd-again{text-align:center;margin-top:18px}
.dvd-state{background:var(--surface-tint);border-radius:var(--r-lg);padding:28px;text-align:center}
.dvd-state h3{margin:0 0 8px;color:var(--ink-900);font-size:19px}
.dvd-state p{margin:0 0 16px;color:var(--muted);font-size:var(--text-sm);max-width:460px;margin-inline:auto}

/* ── Mobile sticky register bar ── */
.dvd-sticky-cta{display:none}
@media (max-width:640px){
  .dvd-sticky-cta{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(17,24,39,.08);padding:10px 16px calc(10px + env(safe-area-inset-bottom));z-index:10;margin:var(--sp-5) calc(-1 * var(--sp-5)) 0}
  .dvd-sticky-label{min-width:0;font-size:var(--text-sm)}
  .dvd-sticky-label strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dvd-sticky-price{color:var(--muted);font-size:var(--text-xs)}
  .dvd-bar{flex-wrap:wrap;border-radius:var(--r-xl)}
  .dvd-bar-icon{display:none}
  .dvd-input{flex-basis:100%}
  .dvd-bar .dvd-btn{flex:1}
}

/* ── Entrance motion: hint/chips ONLY — NEVER the h1 or the search form (LCP fail-hidden guard) ── */
@media (prefers-reduced-motion:no-preference){
  .dvd-hint,.dvd-chips{animation:dvdUp .4s var(--ease-out) both}
  .dvd-chips{animation-delay:.08s}
  @keyframes dvdUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ── Below-fold band system (landing state) ── */
.band{padding:var(--sp-9) var(--sp-5)}
.band + .band{padding-top:0}
.band-wrap{max-width:1080px;margin:0 auto}
.band-title{font:800 var(--display-2)/1.15 var(--font);letter-spacing:var(--track-heading);color:var(--ink-900);margin:0 0 var(--sp-2);text-align:center}
.band-title.inv{color:#fff}
.band-sub{font:400 var(--text-md)/1.6 var(--font);color:var(--muted);max-width:44rem;margin:0 auto var(--sp-6);text-align:center}
.value-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-5)}
.value-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--shadow-1)}
.value-card h3{font:700 1.1rem/1.3 var(--font);color:var(--ink-900);margin:var(--sp-4) 0 var(--sp-2)}
.value-card p{font:400 var(--text-sm)/1.6 var(--font);color:var(--muted);margin:0}
.vc-icon{width:44px;height:44px;border-radius:var(--r-md);background:var(--brand-50);color:var(--brand-600);display:flex;align-items:center;justify-content:center}
.vc-icon svg{width:20px;height:20px}
.band-dark{background:radial-gradient(26rem 18rem at 85% -4rem,rgba(105,72,255,.35),transparent 60%),var(--ink-900);border-radius:var(--r-xl);padding:var(--sp-8) var(--sp-6)}
.incl-list{list-style:none;counter-reset:how;max-width:44rem;margin:var(--sp-6) auto 0;padding:0}
.incl-list li{counter-increment:how;position:relative;padding:0 0 var(--sp-5) 64px;color:#c7c5d6;font:400 var(--text-md)/1.6 var(--font)}
.incl-list li strong{color:#fff}
.incl-list li::before{content:counter(how);position:absolute;left:0;top:-2px;width:40px;height:40px;border-radius:50%;background:rgba(105,72,255,.22);color:var(--brand-200);font:700 1rem/40px var(--font);text-align:center}
.dm-promises{list-style:none;max-width:44rem;margin:0 auto var(--sp-5);padding:0}
.dm-promises li{position:relative;padding:var(--sp-3) 0 var(--sp-3) 36px;border-bottom:1px solid var(--line-soft);color:var(--ink-800);font:400 var(--text-md)/1.55 var(--font)}
.dm-promises li::before{content:"";position:absolute;left:4px;top:calc(var(--sp-3) + 4px);width:18px;height:18px;border-radius:50%;background:var(--ok-bg);border:1.5px solid var(--ok)}
.dm-promises li::after{content:"";position:absolute;left:9px;top:calc(var(--sp-3) + 8px);width:8px;height:5px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}

/* ── FAQ ── */
.dvd-faq{max-width:44rem;margin:0 auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.dvd-faq details{border-top:1px solid var(--line-soft)}
.dvd-faq details:first-child{border-top:0}
.dvd-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);font:600 var(--text-md) var(--font);color:var(--ink-900)}
.dvd-faq summary::-webkit-details-marker{display:none}
.dvd-faq summary::after{content:"+";color:var(--brand-600);font:700 1.3rem/1 var(--font);flex:none}
.dvd-faq details[open] summary::after{content:"\2212"}
.dvd-faq details p{margin:0;padding:0 var(--sp-5) var(--sp-4);font:400 var(--text-sm)/1.65 var(--font);color:var(--muted)}
.band-cta{padding-bottom:var(--sp-9)}

/* ── Baked footer: restore the two Bootstrap base rules it silently depends on ──
   The footer markup is Bootstrap-grid-designed, and the www pages that ship it also load
   api.devaito.com/front/css/bootstrap.css. This page deliberately loads no Bootstrap, so the
   footer arrives missing both of that framework's foundations. header.css scopes its own
   `#webstatic_nav-menu-text-anim--0 *{box-sizing:border-box}`, which is why the header
   survives here and the footer does not — same fix, footer scope.

   Without border-box the columns measure content-box: .custom-col-md-5's max-width:41.6667%
   resolved to 800px of CONTENT and then added its 15+15 padding = 830px, col-md-7 = 1150px,
   830+1150 = 1980 > the 1920 row → flex-wrap dropped col-md-7 onto its own line and the whole
   footer collapsed into the left ~40% of the page. With border-box the percentages include
   the padding again (800+1120 = 1920 exactly) and the two columns sit side by side as designed. */
body.dvd-public footer,
body.dvd-public footer *,
body.dvd-public footer *::before,
body.dvd-public footer *::after{box-sizing:border-box}

/* Social icons: the footer asks for `.fab .icon-instagram`, an icomoon set declared in
   api.devaito.com/front/css/icons.css — 219KB of sheet plus a 492KB `iconfont.woff`, for four
   glyphs, on a page whose whole point is that it loads no CDN. (There is no iconfont.woff2:
   that URL answers 200 text/html, Laravel's 404 page wearing a font's name.) Font Awesome 4.7
   is already loaded here for the header and already has all four logos, so map the classes
   onto glyphs we are paying for anyway — zero extra bytes.
   Keyed on the classes, not the markup: the builder re-bakes footer.html, and if it ever emits
   different classes this simply stops applying and we are back to today's plain circles. */
body.dvd-public footer .custom-social-icons i{font-family:'FontAwesome';font-style:normal;font-weight:400;-webkit-font-smoothing:antialiased}
body.dvd-public footer .custom-social-icons .icon-facebook::before{content:"\f09a"}
body.dvd-public footer .custom-social-icons .icon-instagram::before{content:"\f16d"}
body.dvd-public footer .custom-social-icons .icon-linkedin2::before{content:"\f0e1"}
body.dvd-public footer .custom-social-icons .icon-youtube2::before{content:"\f16a"}

/* ── Baked footer: restore the grid gutter compensation ──
   footer.html's .custom-row uses the Bootstrap negative-margin gutter (-15px, and -12px
   under 320px), which only balances if its container supplies the matching padding. The
   www pages that ship this footer get that from the global site sheet; this page
   deliberately loads no Bootstrap, so .container-special-width arrived with padding:0 and
   the row hung 15px past the viewport on both sides — a horizontal scrollbar on every
   breakpoint. Pad the container rather than zeroing the row's margins: the columns still
   need the gutter between them.

   Matched on body.dvd-public + footer, NOT on the footer's id: the builder re-bakes
   footer.html on every save of the www site and increments that id as it goes
   (footer-list-social-rounded--1 became --2 mid-session on 2026-07-17). Only this page
   sets body.dvd-public, and header.html uses no .container-special-width, so the scope
   stays tight without depending on a generated name. */
body.dvd-public footer .container-special-width{padding-left:15px;padding-right:15px}
@media (max-width:320px){
  body.dvd-public footer .container-special-width{padding-left:12px;padding-right:12px}
}