/* Kabul Roma Design v7: v6 plus a product-first home and WhatsApp help. Presentation only. */
@import url("../v6/design.css");

/* Home: the legacy hero and facts stay in the DOM (v4 reads .hero to know it is home) but are not shown. */
html:root #view > .hero,html:root #view > .facts{display:none}

html:root .krd7-featured{margin-top:8px}
html:root .krd7-featured h1{margin:0;font-size:28px;line-height:1.15;letter-spacing:-.01em;color:#1d1d1f}
html:root .krd7-featured .grid{margin-top:14px}
@media (min-width:641px){html:root .krd7-featured .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:960px){html:root .krd7-featured .grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1240px){html:root .krd7-featured .grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:640px){html:root .krd7-featured h1{font-size:24px}}

/* Help strip after the grid: white grouped card, two pill links. */
html:root .krd7-help{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-block:20px 8px;padding:16px 20px;background:#fff;border-radius:24px;box-shadow:inset 0 0 0 1px rgba(60,60,67,.14)}
html:root .krd7-help p{margin:0;font-size:16px;color:#1d1d1f;flex:1 1 220px}
html:root .krd7-help-links{display:flex;flex-wrap:wrap;gap:10px}
html:root .krd7-help a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;font-size:16px;font-weight:600;text-decoration:none;background:#0066cc;color:#fff;transition:background-color .2s ease}
html:root .krd7-help a + a{background:#ececf0;color:#0056b3}
html:root .krd7-help a svg{width:20px;height:20px;flex:0 0 auto}
@media (hover:hover){html:root .krd7-help a:hover{background:#0056b3}html:root .krd7-help a + a:hover{background:#e2e2e8}}
@media (max-width:400px){html:root .krd7-help{padding:14px}html:root .krd7-help-links,html:root .krd7-help a{width:100%}html:root .krd7-help a{justify-content:center}}

/* Header WhatsApp link: one more grid cell, placed before the cart. */
html:root .krd7-wa{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 14px;border-radius:999px;background:#fff;color:#1d1d1f;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(60,60,67,.14);transition:background-color .2s ease}
html:root .krd7-wa svg{width:22px;height:22px;flex:0 0 auto;color:#128c4a}
@media (hover:hover){html:root .krd7-wa:hover{background:#ececf0}}
html:root .krd7-wa:focus-visible,html:root .krd7-help a:focus-visible{outline:3px solid #007aff;outline-offset:2px}
html:root header.top .wrap.krd7-has-wa{grid-template-columns:auto auto minmax(0,1fr) auto auto auto}
@media (max-width:1060px){
  html:root header.top .wrap.krd7-has-wa{grid-template-columns:auto minmax(0,1fr) auto auto auto;grid-template-areas:"logo . lang wa cart" "search search search search search"}
  html:root .krd7-wa{grid-area:wa}
}
@media (max-width:640px){
  html:root header.top .wrap.krd7-has-wa{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"logo . wa lang" "search search search search"}
  html:root .krd7-wa{width:44px;padding:0}
  html:root .krd7-wa .krd7-wa-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){html:root .krd7-wa,html:root .krd7-help a{transition:none}}
@media (forced-colors:active){html:root .krd7-wa,html:root .krd7-help a,html:root .krd7-help{border:1px solid CanvasText}}