/* Kumsal Spor brand override — layered on top of the stock "classic" theme
   rather than recompiling its SCSS, to avoid the build/cache fragility we
   hit earlier in this environment. */

:root {
  /* Exact brand colors, pulled from kumsalspor.com's own injected theme CSS. */
  --kumsal-navy: #202a7d;
  --kumsal-navy-dark: #182061;
  --kumsal-orange: #f7941d;
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Top nav bar (logo row) */
#header .header-nav {
  background-color: #ffffff;
  border-bottom: 1px solid #eee;
}

/* Top banner strip above the logo row — navy announcement bar (via displayBanner hook) */
#header .header-banner {
  background-color: var(--kumsal-navy);
  color: #fff;
  text-align: center;
  padding: 8px 0;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#header .header-banner a { color: #fff; }

/* header-top: logo + search + account/cart share one row (matching
   kumsalspor.com), with the category menu as its own full-width row below —
   this is a template-level restructure (header.tpl), not just CSS, because
   the stock theme puts logo+menu in one row and search+account+cart in a
   separate .header-nav row above it, which doesn't match the reference site. */
/* Bootstrap's .container caps out at 1140px from the xl breakpoint up, so on
   wide monitors the header sits in a narrow boxed column with lots of side
   whitespace — not enough room for all 13 categories on one line even though
   the screen has plenty of space. Make the header's own container fluid
   (full page width, own side padding) without touching .container elsewhere
   on the site. */
#header .header-top .container {
  max-width: 100%;
  width: 100%;
  padding-left: 40px;
  padding-right: 40px;
}
#header .header-top .kumsal-header-row {
  display: flex !important;
  align-items: center;
  padding: 14px 0;
}
#header .header-top #_desktop_logo {
  padding: 0;
}
#header .header-top .kumsal-header-search {
  display: flex;
  align-items: center;
}
#header .header-top .kumsal-header-search #search_widget {
  width: 100%;
  max-width: 480px;
}
#header .header-top .kumsal-header-search #search_widget form {
  position: relative;
  display: flex;
  align-items: center;
  background: #f1f2fa;
  border-radius: 24px;
}
/* ps_searchbar's own CSS makes both <i> icons position:absolute with no
   left/right set, so they land at their flex "static position" — which,
   once we turned the form into a flex container, collapsed to the same
   spot as the input, overlapping its placeholder text. Position them
   explicitly and pad the input to leave room for both. */
#header .header-top .kumsal-header-search #search_widget .material-icons.search {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  font-size: 20px;
  color: #7a7a7a;
  pointer-events: none;
}
#header .header-top .kumsal-header-search #search_widget .material-icons.clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  font-size: 18px;
  cursor: pointer;
}
#header .header-top .kumsal-header-search #search_widget input[type="text"] {
  border: 0;
  background: transparent;
  padding: 10px 38px;
  flex: 1;
  width: 100%;
  font-size: 14px;
}
#header .header-top .kumsal-header-search #search_widget input[type="text"]:focus {
  outline: none;
}
#header .header-top .kumsal-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}
#header .header-top .kumsal-header-actions > div {
  display: flex;
  align-items: center;
}

/* Category menu row — full width, single line like the reference site */
#header .header-top .kumsal-menu-row {
  border-top: 1px solid #eee;
}
#header .header-top .kumsal-menu-row .header-top-right {
  width: 100%;
  max-width: none;
  flex: none;
}
#header #_desktop_top_menu .top-menu > li > a {
  padding: 12px 8px;
  font-size: 12.5px;
  color: #22252b;
  font-weight: 600;
}
#header #_desktop_top_menu .top-menu > li > a:hover {
  color: var(--kumsal-orange);
}

/* Category dropdown: the stock theme sizes .sub-menu to the whole menu bar's
   width (calc(100% - 30px)) and floats its items in a horizontal row, so
   every category's dropdown looks like the same generic full-width strip.
   kumsalspor.com anchors a small, left-aligned dropdown directly under the
   hovered category with items stacked vertically — this makes each dropdown
   visually distinct/specific to the item you're hovering, not one big shared
   panel. Needs `li.category` to be a positioning context so the absolutely
   positioned .sub-menu anchors to THAT item instead of the whole menu bar. */
#header #_desktop_top_menu .top-menu > li.category {
  position: relative;
}
#header #_desktop_top_menu .top-menu .sub-menu {
  width: auto !important;
  min-width: 210px;
  max-width: 300px;
  margin-left: 0 !important;
  left: 0;
  padding: 8px 0;
}
#header #_desktop_top_menu .top-menu .sub-menu ul[data-depth="1"] > li {
  float: none !important;
  margin: 0 !important;
  display: block;
}
#header #_desktop_top_menu .top-menu .sub-menu ul[data-depth="1"] > li > a {
  display: block;
  padding: 8px 18px;
  font-size: 13px;
}

/* Scrolling marquee strip, right under the announcement bar */
.kumsal-marquee {
  background: #0d1330;
  overflow: hidden;
  white-space: nowrap;
  padding: 7px 0;
}
.kumsal-marquee-track {
  display: inline-block;
  animation: kumsalMarquee 22s linear infinite;
}
.kumsal-marquee-track span {
  display: inline-block;
  padding: 0 36px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}
@keyframes kumsalMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* The stock theme (or its JS height-equalizer) pins the carousel to a fixed
   340px-tall box left over from the old placeholder slides' aspect ratio.
   Our real banner photos are taller relative to their width, so they were
   rendering at their true ~592px height but getting clipped to the top
   340px by .carousel-inner's overflow:hidden — the bottom ~40% of every
   slide (including baked-in CTA text) was invisible. Forcing auto height
   here makes the box always match the actual image's aspect ratio. */
#carousel,
#carousel .carousel-inner,
#carousel .carousel-item {
  height: auto !important;
}
#carousel .carousel-item img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
}

/* Hero slider caption overlay (used on slides without baked-in text) */
.homeslider-container .rslides li { position: relative; }
.homeslider-container .caption {
  position: absolute;
  left: 6%;
  top: 50%;
  transform: translateY(-50%);
  max-width: 480px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.homeslider-container .caption h2 {
  font-size: 40px;
  font-weight: 800;
  margin: 0 0 14px;
  line-height: 1.1;
}
.homeslider-container .caption p {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 20px;
}
.kumsal-slide-btn {
  display: inline-block;
  background: var(--kumsal-orange);
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .03em;
  padding: 13px 26px;
  border-radius: 3px;
  text-decoration: none;
}
.kumsal-slide-btn:hover { background: #d96e0f; }

/* On narrow screens the text-overlay caption (used on slides without baked-in
   text) tends to overflow the image — simplest fix is to let the photo speak
   for itself there and drop the caption, same as kumsalspor.com does. */
@media (max-width: 767px) {
  .homeslider-container .caption { display: none; }
  .homeslider-container .rslides img { width: 100%; height: 100%; object-fit: cover; }
}

/* Trust badges row under the hero banner */
.kumsal-trust-badges {
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 22px 0;
}
.kumsal-trust-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}
.kumsal-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 13px;
  color: var(--kumsal-navy);
  letter-spacing: .02em;
}
.kumsal-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f2fa;
  font-size: 16px;
}

/* Bootstrap's .img-fluid (max-width:100%; height:auto) resolves the logo's
   WIDTH first against its 190px-wide grid column, then our max-height clamps
   the resulting height independently — since these come from two unrelated
   rules, the browser doesn't re-derive a proportional width afterwards, so
   the logo renders squashed (190x55 instead of its real ~107x55 ratio).
   Forcing width:auto here makes width follow the height cap instead. */
#_desktop_logo img {
  max-height: 55px;
  width: auto;
  max-width: none;
}

/* Primary buttons -> brand orange, matching the site's CTA styling */
.btn-primary,
#header .btn-primary,
button[type="submit"].btn-primary,
.material-icons.add-to-cart,
#product-availability + .add-to-cart {
  background-color: var(--kumsal-orange) !important;
  border-color: var(--kumsal-orange) !important;
}
.btn-primary:hover {
  background-color: #d96e0f !important;
  border-color: #d96e0f !important;
}

a { color: var(--kumsal-navy); }
a:hover { color: var(--kumsal-orange); }

/* Footer */
#footer {
  background-color: var(--kumsal-navy);
  color: #dcdfe8;
}
#footer a { color: #dcdfe8; }
#footer a:hover { color: var(--kumsal-orange); }
#footer .h3, #footer .links .title {
  color: #fff;
}

/* Category block thumbnails — light lavender circle backdrop like the reference site */
#category .category-thumbnail img,
.category-cover img {
  background-color: #e8e7fb;
  border-radius: 50%;
}

/* WhatsApp floating action button */
@keyframes kumsalWaPulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
  70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
#kumsal-wa-fab {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 999989;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  animation: kumsalWaPulse 2.4s infinite;
  text-decoration: none;
}
#kumsal-wa-fab:hover { background: #1ebe5a; animation: none; }

/* "Bedenini Bul" size-finder tool */
@keyframes ksSizePulse{0%{box-shadow:0 0 0 0 rgba(247,148,29,.55)}70%{box-shadow:0 0 0 14px rgba(247,148,29,0)}100%{box-shadow:0 0 0 0 rgba(247,148,29,0)}}
#ks-size-fab{position:fixed;right:20px;bottom:20px;z-index:999990;background:var(--kumsal-orange);color:#031c37;border:0;border-radius:999px;padding:15px 22px;display:flex;align-items:center;gap:9px;font-size:16px;font-weight:800;box-shadow:0 10px 28px rgba(0,0,0,.25);cursor:pointer;animation:ksSizePulse 2.4s infinite}
#ks-size-fab:hover{background:#d96e0f;animation:none}
#ks-size-fab .ks-size-fab-ico{font-size:20px}
#ks-size-backdrop{display:none;position:fixed;inset:0;background:rgba(3,12,32,.5);z-index:999991}
#ks-size-backdrop.open{display:block}
#ks-size-modal{display:none;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,460px);max-height:85vh;overflow-y:auto;background:#fff;border-radius:16px;padding:26px 22px;z-index:999992;box-shadow:0 20px 60px rgba(0,0,0,.3)}
#ks-size-modal.open{display:block}
#ks-size-modal h3{margin:0 0 14px;color:var(--kumsal-navy);font-size:19px;padding-right:24px}
#ks-size-modal p{margin:0 0 12px;color:#374151;font-size:14px;line-height:1.5}
.ks-size-section{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #eef0f3}
.ks-size-section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.ks-size-close{position:absolute;right:14px;top:12px;border:0;background:#f2f5f8;width:32px;height:32px;border-radius:50%;font-size:20px;color:var(--kumsal-navy);cursor:pointer}
.ks-size-row{display:flex;gap:16px;margin-bottom:12px}
.ks-size-radio{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#111827}
.ks-size-full{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:#374151;margin-bottom:10px}
.ks-size-full select{border:1px solid #d7dce2;border-radius:8px;padding:9px 10px;font-size:14px;color:#111827;background:#fff}
.ks-size-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.ks-size-inputs label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:#374151}
.ks-size-inputs input,.ks-size-inputs select{border:1px solid #d7dce2;border-radius:8px;padding:9px 10px;font-size:14px;color:#111827;background:#fff}
.ks-size-hint{font-size:12px;color:#6b7280;margin:0 0 12px}
.ks-size-calc{width:100%;background:var(--kumsal-navy);color:#fff;border:0;border-radius:10px;padding:13px 16px;font-size:15px;font-weight:700;cursor:pointer}
.ks-size-calc:hover{background:var(--kumsal-navy-dark)}
.ks-size-result{display:none;margin-top:14px;padding:14px;border-radius:10px;font-size:14px;line-height:1.5}
.ks-size-result-ok{background:#eefbf2;color:#065f32;border:1px solid #bdeccf}
.ks-size-result-warn{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}
.ks-size-badge{display:inline-block;background:var(--kumsal-navy);color:#fff;padding:2px 10px;border-radius:6px;font-size:16px}
.ks-size-note{display:block;margin-top:6px;font-size:12px;color:#6b7280}
.ks-size-wa{display:flex;align-items:center;justify-content:center;gap:8px;background:#25D366;color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:13px 16px;border-radius:10px;margin-top:4px}
.ks-size-wa:hover{background:#1ebe5a}
body.ks-size-open{overflow:hidden}
@media(max-width:767px){#ks-size-fab{right:14px;bottom:16px;padding:13px 18px;font-size:14px}}

/* Category-grid subcategory picker — a bottom sheet that slides up when a
   homepage category circle (that has subcategories) is clicked, instead of
   jumping straight to a listing page. */
#kumsal-subcat-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(3, 12, 32, .5);
  z-index: 999993;
}
#kumsal-subcat-backdrop.open {
  display: block;
}
#kumsal-subcat-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 80vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 22px 24px 28px;
  z-index: 999994;
  box-shadow: 0 -10px 40px rgba(0,0,0,.25);
  transform: translateY(0);
  margin: 0 auto;
  max-width: 720px;
}
#kumsal-subcat-title {
  margin: 0 0 18px;
  color: var(--kumsal-navy);
  font-size: 19px;
  padding-right: 30px;
}
#kumsal-subcat-close {
  position: absolute;
  right: 16px;
  top: 16px;
  border: 0;
  background: #f2f5f8;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: var(--kumsal-navy);
  cursor: pointer;
}
#kumsal-subcat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.kumsal-subcat-item {
  width: 88px;
  text-align: center;
  text-decoration: none;
  color: #111827;
}
.kumsal-subcat-img {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 14px;
  overflow: hidden;
  background: #e8e7fb;
  margin: 0 auto 8px;
}
.kumsal-subcat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kumsal-subcat-name {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  display: block;
}
#kumsal-subcat-viewall {
  display: block;
  margin-top: 20px;
  text-align: center;
  background: var(--kumsal-navy);
  color: #fff !important;
  font-weight: 700;
  padding: 12px;
  border-radius: 10px;
  text-decoration: none;
}
#kumsal-subcat-viewall:hover {
  background: var(--kumsal-navy-dark);
}
body.kumsal-subcat-open {
  overflow: hidden;
}
@media (max-width: 767px) {
  .kumsal-subcat-item, .kumsal-subcat-img { width: 72px; height: 72px; }
}

/* Static "Beden Tablosu" (size chart) reference on the product page, next
   to Add to Cart — distinct from the floating "Bedenini Bul" calculator. */
.ks-chart-fab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  background: #fff;
  border: 1.5px solid var(--kumsal-navy);
  color: var(--kumsal-navy);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
}
.ks-chart-fab:hover {
  background: var(--kumsal-navy);
  color: #fff;
}
#ks-chart-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(3, 12, 32, .5);
  z-index: 999995;
}
#ks-chart-backdrop.open { display: block; }
#ks-chart-modal {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 640px);
  max-height: 85vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  z-index: 999996;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
#ks-chart-modal.open { display: block; }
#ks-chart-modal h3 {
  margin: 0 0 10px;
  color: var(--kumsal-navy);
  font-size: 20px;
  padding-right: 30px;
}
.ks-chart-intro {
  margin: 0 0 20px;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.5;
}
#ks-chart-close {
  position: absolute;
  right: 16px;
  top: 16px;
  border: 0;
  background: #f2f5f8;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 22px;
  color: var(--kumsal-navy);
  cursor: pointer;
}
.ks-chart-section {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid #eef0f3;
}
.ks-chart-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.ks-chart-section h4 {
  margin: 0 0 10px;
  color: #111827;
  font-size: 15px;
}
.ks-chart-tablewrap {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.ks-chart-table {
  flex: 1;
  min-width: 200px;
  border-collapse: collapse;
  font-size: 12.5px;
}
.ks-chart-table th {
  background: #f1f2fa;
  color: var(--kumsal-navy);
  text-align: left;
  padding: 6px 8px;
  font-weight: 700;
}
.ks-chart-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #f2f2f2;
}
.ks-chart-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: #6b7280;
}
body.ks-chart-open { overflow: hidden; }

/* Out-of-stock products in category/search listings: faded and pushed to
   the end of the grid (kumsal-oos-last.js does the reordering) so in-stock
   items are always seen first. */
.products .js-product.kumsal-oos {
  opacity: .45;
  filter: grayscale(60%);
  transition: opacity .2s;
}
.products .js-product.kumsal-oos:hover {
  opacity: .75;
}

/* Category page header: the stock theme reserves a 220px-tall banner box
   for a category "cover" image with the title overlaid on it. None of our
   categories have a cover image set, so it was just empty white space
   under every category/subcategory title. Collapse it to fit the title. */
#category .block-category,
.block-category {
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 20px !important;
}

/* "Arena & TYR Koleksiyonları" brand-story banner (homepage) */
.kumsal-brand-story {
  max-width: 1280px;
  margin: 48px auto;
  padding: 0 15px;
}
.kumsal-brand-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  height: 260px;
  overflow: hidden;
  border-radius: 4px;
}
.kumsal-brand-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kumsal-brand-text {
  background: #f1f2fa;
  text-align: center;
  padding: 36px 24px;
}
.kumsal-brand-kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--kumsal-orange);
  margin-bottom: 8px;
}
.kumsal-brand-text h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--kumsal-navy);
  margin: 0 0 18px;
}
.kumsal-brand-cta {
  display: inline-block;
  background: var(--kumsal-navy);
  color: #fff !important;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .03em;
  padding: 12px 28px;
  border-radius: 3px;
  text-decoration: none;
  margin-bottom: 22px;
}
.kumsal-brand-cta:hover {
  background: var(--kumsal-navy-dark);
}
.kumsal-brand-text p {
  max-width: 560px;
  margin: 0 auto 10px;
  color: #444;
  font-size: 14px;
  line-height: 1.6;
}
.kumsal-brand-since {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #6b7280;
}
.kumsal-trust-inner-secondary {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}
@media (max-width: 767px) {
  .kumsal-brand-photos { height: 160px; }
}

/* Newsletter signup banner (footer) — the stock block was a plain navy bar;
   the reference site uses a full-width photo banner with the form overlaid
   on a dark gradient. */
#footer > .container > .row:first-child {
  position: relative;
  background: linear-gradient(90deg, rgba(13,19,48,.88), rgba(13,19,48,.65)), url('../img/newsletter-bg.jpg') center 25% / cover no-repeat;
  padding: 36px 28px;
  margin: 0 -15px 24px;
  border-radius: 4px;
}
#footer > .container > .row:first-child .block_newsletter {
  background: transparent !important;
}
#footer > .container > .row:first-child #block-newsletter-label {
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}
#footer > .container > .row:first-child .input-wrapper input[type="email"] {
  border: 0;
  border-radius: 3px;
  padding: 11px 14px;
}

/* Footer social icons (Facebook/Instagram) — stock theme gives them a
   near-white-on-white tile (#f6f6f6 bg, light icon), so they read as faded
   or invisible against the dark footer / new photo banner. */
#footer .block-social li {
  background-color: #fff !important;
  border-radius: 50%;
  opacity: 1 !important;
}
#footer .block-social li:hover {
  background-color: var(--kumsal-orange) !important;
}

/* Price / discount badges */
.product-price.has-discount,
.price {
  color: var(--kumsal-navy);
}
.discount-percentage, .product-flag.discount-percentage {
  background-color: #111827;
  color: #fff;
}

/* Responsive storefront completion, October 2026. */
.kumsal-category-grid h2 { text-align:center; color:var(--kumsal-navy); }
.kumsal-category-grid > div:not(.kumsal-shop-intro) { justify-content:center !important; }
.kumsal-category-grid .kumsal-cat-circle { flex:0 0 95px; }
#header .header-top #search_widget { float:none; min-width:0; }
#header .header-top #search_widget input { min-width:0; }
#_mobile_logo img { width:auto; max-width:140px; max-height:38px; }
#header .header-nav .top-logo { padding-top:8px; }
#carousel { width:100%; margin-bottom:0; }
#carousel .carousel-inner { width:100%; }
#carousel .carousel-item { min-width:0; }
#carousel .carousel-item figure { margin:0; }
.kumsal-brand-photos > img { min-width:0; }
#footer .footer-container { box-shadow:none; }
#footer .footer-container > .container > .row { display:flex; flex-wrap:wrap; }
@media (max-width:767px) {
  #header .header-top { padding:8px 0 0; }
  #header .header-top .container { padding-left:16px; padding-right:16px; }
  #header .header-top .kumsal-header-row { padding:0 0 10px; margin:0; }
  #header .header-top .kumsal-header-search { padding:0; width:100%; }
  #header .header-top .kumsal-header-search #search_widget { display:block; max-width:none; }
  #header .header-top .kumsal-menu-row { margin:0; border:0; }
  #header .header-top .kumsal-menu-row .header-top-right { padding:0; }
  #index #wrapper { padding-top:0; }
  #index #wrapper > .container { padding:0; width:100%; }
  #index #content-wrapper { padding:0; }
  #index #wrapper > .container > .row { margin:0; }
  #carousel .direction { font-size:24px; }
  .kumsal-category-grid { margin:28px auto !important; padding:0 16px !important; }
  .kumsal-category-grid h2 { font-size:20px !important; margin-bottom:22px !important; }
  .kumsal-category-grid > div:not(.kumsal-shop-intro) { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 8px !important; }
  .kumsal-category-grid .kumsal-cat-circle { width:100% !important; min-width:0; }
  .kumsal-category-grid .kumsal-cat-circle > div:first-child { width:76px !important; height:76px !important; }
  .kumsal-trust-inner { gap:16px; }
  .kumsal-trust-item { font-size:11px; }
  .kumsal-brand-story { margin:28px auto; }
  .kumsal-brand-photos { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #footer .footer-container > .container > .row > div { width:100%; flex:0 0 100%; }
  #footer > .container > .row:first-child { padding:24px 16px; margin:0 0 20px; }
  #ks-size-fab { padding:11px 14px; font-size:12px; right:12px; bottom:12px; }
  #kumsal-wa-fab { width:46px; height:46px; left:12px; bottom:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .kumsal-marquee-track, #ks-size-fab, #kumsal-wa-fab { animation:none; }
}
@media (max-width:767px) {
  #index .products.row { margin-left:0; margin-right:0; }
  #index #carousel { margin-left:0 !important; margin-right:0 !important; }
}
@media (max-width:767px) {
  #index #carousel { left:0 !important; margin-left:0 !important; margin-right:0 !important; }
}
#header .header-nav .top-logo img { width:130px; max-width:130px; max-height:none; height:auto; }
#header .header-nav .top-logo h1 { margin:0; }
#header .header-nav .top-logo { padding-top:0; }
.kumsal-help-links ul { margin-bottom:20px; }
.kumsal-help-links li { margin-bottom:8px; }

/* Complete the intro and keep custom footer navigation accessible on mobile. */
.kumsal-shop-intro {max-width:760px;margin:0 auto 38px;text-align:center;}
.kumsal-shop-intro h2 {font-size:28px;line-height:1.3;margin-bottom:14px;}
.kumsal-shop-intro p {font-size:15px;line-height:1.8;color:#596174;}
#footer #footer_sub_menu_kumsal_categories,#footer #footer_sub_menu_kumsal_stores {display:block;}
#footer .wrapper:has(#footer_sub_menu_kumsal_categories) > .title,#footer .wrapper:has(#footer_sub_menu_kumsal_stores) > .title {display:none;}
#footer .wrapper:has(#footer_sub_menu_kumsal_categories) > p.h3,#footer .wrapper:has(#footer_sub_menu_kumsal_stores) > p.h3 {display:block!important;}
@media(max-width:767px){
.kumsal-shop-intro {margin-bottom:28px;}
.kumsal-shop-intro h2 {font-size:24px!important;}
#footer #footer_sub_menu_kumsal_categories {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 16px;}
}

/* Homepage visual completion: consistent cards, spacing and collection links. */
#index .featured-products {max-width:1200px;margin:54px auto!important;padding:0 20px;}
#index .featured-products .products-section-title {font-size:25px;line-height:1.4;letter-spacing:.03em;color:var(--kumsal-navy);text-align:center;margin:0 0 28px;}
#index .featured-products .products {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;}
#index .featured-products[data-type="onsale"] .products {grid-template-columns:repeat(3,minmax(0,1fr));max-width:940px;margin:0 auto;}
#index .featured-products .products > .product {width:auto;max-width:none;padding:0;float:none;margin:0;}
#index .product-miniature {width:100%;margin:0;}
#index .product-miniature .thumbnail-container {width:100%;height:auto;border:1px solid #e8eaf0;border-radius:12px;overflow:hidden;box-shadow:none;background:#fff;}
#index .product-miniature .product-thumbnail {display:block;width:100%;height:auto;aspect-ratio:1;background:#fff;}
#index .product-miniature .product-thumbnail img {width:100%;height:100%;object-fit:contain;}
#index .product-miniature .product-description {width:100%;height:auto;min-height:106px;padding:14px 10px;background:#fff;}
#index .product-miniature .product-title {height:38px;line-height:19px;margin:0 0 10px;font-size:12px;}
#index .product-miniature .product-price-and-shipping {padding-bottom:8px;min-height:32px;}
#index .featured-products .all-product-link {float:none!important;display:table;margin:26px auto 0;padding:10px 22px;border:1px solid #dce0eb;border-radius:30px;color:var(--kumsal-navy);font-size:13px;}
.kumsal-brand-story {max-width:1200px;margin:54px auto;padding:0 20px;}
.kumsal-brand-photos {height:330px;gap:16px;border-radius:0;}
.kumsal-collection-card {position:relative;display:block;overflow:hidden;border-radius:12px;color:white!important;}
.kumsal-collection-card:after {content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(8,20,42,.84));}
.kumsal-collection-card img {transition:transform .35s ease;}
.kumsal-collection-card:hover img {transform:scale(1.04);}
.kumsal-collection-card > span {position:absolute;z-index:1;left:22px;right:18px;bottom:24px;}
.kumsal-collection-card small,.kumsal-collection-card strong,.kumsal-collection-card b {display:block;}
.kumsal-collection-card small {font-size:10px;letter-spacing:.1em;margin-bottom:8px;color:#ffd59e;}
.kumsal-collection-card strong {font-size:23px;line-height:1.25;margin-bottom:12px;}
.kumsal-collection-card b {font-size:12px;font-weight:500;}
.kumsal-brand-text {margin-top:20px;border-radius:12px;padding:38px 24px;}
.kumsal-brand-actions {display:flex;justify-content:center;gap:12px;flex-wrap:wrap;}
.kumsal-brand-cta {border-radius:30px;}
.kumsal-brand-cta-secondary {background:white;color:var(--kumsal-navy)!important;border:1px solid var(--kumsal-navy);}
.kumsal-brand-cta-secondary:hover {background:#e4e7f3;}
.kumsal-collection-card:focus-visible,.kumsal-cat-circle:focus-visible,.kumsal-brand-cta:focus-visible {outline:3px solid var(--kumsal-orange);outline-offset:3px;}
@media(max-width:991px){#index .featured-products .products {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}.kumsal-collection-card strong {font-size:19px;}}
@media(max-width:767px){
#index .featured-products {margin:34px auto!important;padding:0 16px;}
#index .featured-products .products-section-title {font-size:20px;margin-bottom:22px;}
#index .featured-products[data-type="onsale"] .products {grid-template-columns:repeat(2,minmax(0,1fr));}
#index .featured-products[data-type="onsale"] .products > .product:last-child {grid-column:1/-1;width:calc(50% - 8px);justify-self:center;}
#index .product-miniature .product-description {min-height:108px;padding:12px 6px;}
#index .product-miniature .product-price-and-shipping {font-size:13px;}
.kumsal-brand-story {padding:0 16px;margin:34px auto;}
.kumsal-brand-photos {height:auto;grid-template-columns:1fr;gap:14px;}
.kumsal-collection-card {height:240px;}
.kumsal-collection-card strong {font-size:24px;}
.kumsal-collection-card > span {left:22px;bottom:22px;}
.kumsal-brand-text {padding:30px 18px;}
}
@media(prefers-reduced-motion:reduce){.kumsal-collection-card img {transition:none;}}