/* =====================================================================
   Maison KC — custom design layer (loaded after main.css in head-config)
   Pro beauty e-commerce polish, COD-first. Uses theme CSS variables.
   --color-button / --color-button-text are "R, G, B" triplets -> rgb().
   ===================================================================== */

/* ---------- Global type & rhythm ---------- */
body { -webkit-font-smoothing: antialiased; }

yc-section-head h2 {
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.12;
}
yc-section-head p {
  color: var(--color-gray-500);
}

/* Buttons: retail-style soft rectangles (one radius for the whole site). */
:root { --mkc-btn-radius: 6px; }
.yc-btn { border-radius: var(--mkc-btn-radius); font-weight: 600; }

/* ---------- Announcement bar ---------- */
.announcement .message {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ---------- Hero (slideshow with no image) ---------- */
yc-slider-item { position: relative; }
.hero-slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(1200px 500px at 15% 0%, rgba(255, 255, 255, 0.22), transparent 60%),
    linear-gradient(135deg, rgb(var(--color-button)) 0%, #d65f8e 45%, #f3c3d6 100%);
}
yc-slider-content .heading {
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
}
yc-slider-content .subheading {
  opacity: 0.95;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.16);
}
yc-slider-content .yc-btn {
  background: var(--color-base-white);
  color: var(--color-base-black);
  border: none;
  padding-inline: 1.6em;
}

/* ---------- Product cards ---------- */
.product-card { overflow: hidden; }

.product-card[data-style$="standard"] {
  --product-img-height: 320px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.product-card[data-style$="standard"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
}
.product-card .img-link img {
  transition: transform 0.4s ease;
}
.product-card:hover .img-link img {
  transform: scale(1.04);
}

/* Discount pill (top-start) */
.product-card .discount-badge {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 2;
  background: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  font-weight: 700;
  font-size: var(--text-xs);
  line-height: 1;
  padding: 0.5em 0.7em;
  border-radius: 4px;
  box-shadow: none;
  letter-spacing: 0.02em;
}

/* Price emphasis */
.product-card .info { gap: 0.4em; }
.product-card .info .title {
  font-weight: 600;
  font-size: var(--text-md);
}
.product-card .info .price .current {
  color: rgb(var(--color-button));
  font-weight: 700;
}
.product-card .info .price .compare-at {
  color: var(--color-gray-500);
  font-size: var(--text-sm);
}

/* Card CTA: outlined black, filled on hover (retail style). */
.product-card .info .yc-btn.secondary,
.product-card .info button.secondary {
  background: transparent;
  color: var(--color-base-black);
  border: 1.5px solid var(--color-base-black);
  border-radius: var(--mkc-btn-radius);
  font-weight: 600;
}
.product-card .info .yc-btn.secondary:hover,
.product-card .info button.secondary:hover {
  background: var(--color-base-black);
  color: #ffffff;
}

/* ---------- Reassurance (multi-column) ---------- */
.columns .column-card { text-align: center; }
.columns .column-card .column-title {
  display: block;
  font-size: var(--text-xl);
  font-weight: 700;
}
.columns .column-card .column-subtitle {
  color: var(--color-gray-500);
  margin-block-start: 0.25em;
}

/* ---------- Footer ---------- */
footer .copyright { color: var(--color-gray-500); }

/* ---------- Collection / listing spacing ---------- */
.breadcrumb { font-size: var(--text-sm); }

/* ---------- Responsive listing grids (collection, search, all collections) ----------
   Origins forces 2 columns up to 1280px and a single column up to 1024px (with
   !important): huge cards on laptops, one product per screen on tablets and phones.
   Retail standard instead: 3 columns on tablet/laptop, 2 on phones. */
@media (max-width: 1280px) {
  .items-grid:has(> :nth-child(4)) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
/* The :has() selector is repeated below so each breakpoint has the same specificity. */
@media (max-width: 1024px) {
  .items-grid,
  .items-grid:has(> :nth-child(4)) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--gap-md, 16px); }
}
@media (max-width: 768px) {
  .items-grid,
  .items-grid:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
}
/* Square images and equal-height cards whatever the column width. */
.items-grid .product-card { display: flex; flex-direction: column; height: 100%; }
.items-grid .product-card .info { flex: 1; align-content: start; }
.items-grid .product-card[data-style] .img-link { height: auto; }
.items-grid .product-card[data-style] .img-link img { height: auto; aspect-ratio: 1 / 1; }
.items-grid .product-card .info .title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  line-height: 1.3;
  min-height: 2.6em;
}
@media (max-width: 768px) {
  /* Framed listing (border + 24px padding inside the 16px page gutter) cost ~80px on phones. */
  /* "section" prefix: product-listing.css loads later with the same specificity. */
  section .product-listing { border: none; }
  section .product-listing .products-area { padding: 12px 0; }
  section .product-listing .filter-area,
  section .product-listing .collections-area { padding-inline: 0; }
  .items-grid .product-card .info { padding: 10px; }
  .items-grid .product-card .info .title { font-size: var(--text-sm); }
  /* Narrow cards: the CTA wraps on two lines instead of being cut. */
  .items-grid .product-card .info button,
  .items-grid .product-card .info .yc-btn {
    min-height: 44px;
    padding: 6px;
    font-size: var(--text-xs);
    line-height: 1.2;
    white-space: normal;
  }
}

/* ---------- Category SEO text (under the product grid) ---------- */
.mkc-cat-seo {
  max-width: 820px;
  margin: 40px auto 8px;
  padding-inline: 4px;
  color: var(--color-gray-700, #3f3f46);
  line-height: 1.7;
}
.mkc-cat-seo > * + * { margin-block-start: 0.7em; }
.mkc-cat-seo h2 { font-size: var(--text-xl, 1.25rem); font-weight: 700; color: var(--color-base-black); line-height: 1.3; }
.mkc-cat-seo h3 { margin-block-start: 1.2em; font-size: var(--text-md, 1rem); font-weight: 700; color: var(--color-base-black); }
.mkc-cat-seo ul { padding-inline-start: 1.3em; list-style: disc; }
.mkc-cat-seo li::marker { color: rgb(var(--color-button)); }
.mkc-cat-seo a { color: rgb(var(--color-button)); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Product description (rich text from the admin) ----------
   The base reset strips headings, lists and spacing: restore a readable hierarchy. */
.single-product .description { line-height: 1.6; }
.single-product .description > * + * { margin-block-start: 0.6em; }
.single-product .description h2,
.single-product .description h3,
.single-product .description h4 {
  margin-block-start: 1.3em;
  font-size: 1.08em; /* a step above body text, whatever the base size */
  font-weight: 700;
  line-height: 1.35;
}
.single-product .description ul,
.single-product .description ol { padding-inline-start: 1.3em; }
.single-product .description ul { list-style: disc; }
.single-product .description ol { list-style: decimal; }
.single-product .description li + li { margin-block-start: 0.3em; }
.single-product .description li::marker { color: rgb(var(--color-button)); }

/* ---------- Forms on phones ----------
   iOS Safari zooms the whole page when a field under 16px gets focus. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: 16px !important; } /* component CSS loads after this file */
}

/* =====================================================================
   PRO CART — drawer, cart page, add-to-cart.
   header-cart-drawer.css / cart.css / featured-product.css load inside the
   sections (after this file), so rules here are scoped with #ids to win.
   ===================================================================== */

/* ---------- Drawer frame ---------- */
yc-drawer#cart { --drawer-width: 440px; --mkc-pad: 20px; }
@media (max-width: 768px) {
  yc-drawer#cart { --drawer-width: 92%; }
}

yc-drawer#cart .cart-btn .total-items {
  background: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  font-weight: 700;
}

yc-drawer#cart .cart-drawer .header {
  padding: 16px var(--mkc-pad);
}
yc-drawer#cart .cart-drawer .header .title {
  font-weight: 700;
  font-size: var(--text-lg);
}
yc-drawer#cart .cart-drawer .header .mkc-count {
  color: var(--color-gray-500);
  font-weight: 500;
}

/* ---------- Free-shipping progress (drawer + cart page) ---------- */
.mkc-free-shipping {
  display: grid;
  gap: 0.55em;
  padding: 12px var(--mkc-pad, 20px);
  background: color-mix(in srgb, rgb(var(--color-button)) 7%, #ffffff);
}
.mkc-fs-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.35;
}
.mkc-fs-text strong { color: rgb(var(--color-button)); }
.mkc-fs-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.mkc-fs-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgb(var(--color-button)), #e58bb0);
  transition: width 0.5s ease;
}
.mkc-free-shipping[data-unlocked] { background: #e8f7ee; }
.mkc-free-shipping[data-unlocked] .mkc-fs-bar span { background: #1fc16b; }
yc-drawer#cart .cart-drawer[data-is-empty] .mkc-free-shipping { display: none; }

/* ---------- Drawer items ---------- */
yc-drawer#cart .cart-drawer yc-cart-drawer-items {
  padding: 8px var(--mkc-pad);
  gap: 0;
  overflow-y: auto;
}
yc-drawer#cart .cart-drawer .item {
  gap: 1em;
  padding-block: 1em;
}
yc-drawer#cart .cart-drawer .item .image {
  width: 84px;
  height: 84px;
  border-radius: 12px;
  background: var(--color-gray-50);
}
yc-drawer#cart .cart-drawer .item .info .heading .name {
  font-weight: 600;
  font-size: var(--text-md);
  line-height: 1.3;
}
yc-drawer#cart .cart-drawer .item .price .original {
  color: rgb(var(--color-button));
  font-weight: 700;
}
yc-drawer#cart .cart-drawer .item .price .compare-at { font-size: var(--text-xs); }
yc-drawer#cart .cart-drawer .item [data-delete] {
  color: var(--color-gray-500);
  background: transparent;
  border: none;
  border-radius: 999px;
}
yc-drawer#cart .cart-drawer .item [data-delete]:hover {
  color: var(--color-error-500);
  background: var(--color-error-50);
}

/* ---------- Quantity stepper (pill) ---------- */
yc-drawer#cart yc-quantity-control.quantity,
#main yc-quantity-control.quantity {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--color-gray-300);
  border-radius: 999px;
  background: #ffffff;
}
yc-drawer#cart yc-quantity-control.quantity .yc-btn.icon,
#main yc-quantity-control.quantity .yc-btn.icon {
  border: none;
  background: transparent;
  border-radius: 999px;
}
yc-drawer#cart yc-quantity-control.quantity .yc-btn.icon:hover,
#main yc-quantity-control.quantity .yc-btn.icon:hover { background: var(--color-gray-50); }
yc-drawer#cart yc-quantity-control.quantity .current-quantity,
#main yc-quantity-control.quantity .current-quantity {
  min-width: 2.2ch;
  text-align: center;
  font-weight: 600;
}

/* ---------- Drawer footer ---------- */
yc-drawer#cart .cart-drawer .footer {
  background: var(--header-bg-color, #ffffff);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.06);
}
yc-drawer#cart .cart-drawer .footer .totals {
  border: none;
  padding: 16px var(--mkc-pad) 2px;
  font-size: var(--text-lg);
  font-weight: 700;
}
.mkc-shipping-note {
  margin: 0;
  padding: 0 var(--mkc-pad, 20px);
  font-size: var(--text-xs);
  color: var(--color-gray-500);
}
yc-drawer#cart .cart-drawer .footer .actions {
  border: none;
  gap: 0.7em;
  padding: 14px var(--mkc-pad) 8px;
}
.mkc-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  font-size: var(--text-md);
  background: rgb(var(--color-button));
  border-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
}
.mkc-checkout:hover { filter: brightness(0.94); color: rgb(var(--color-button-text)); }
.mkc-secondary-actions {
  display: flex;
  justify-content: space-between;
  gap: 1em;
}
.mkc-link {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-base-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.mkc-link:hover { color: rgb(var(--color-button)); }
.mkc-trust {
  margin: 0;
  padding: 6px var(--mkc-pad, 20px) 16px;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-gray-500);
}

/* Short screens: keep the item list visible, drop secondary footer lines. */
@media (max-height: 640px) {
  yc-drawer#cart .mkc-shipping-note,
  yc-drawer#cart .mkc-trust { display: none; }
  yc-drawer#cart .cart-drawer .footer .actions { padding-block-end: 14px; }
}

/* ---------- Drawer empty state ---------- */
yc-drawer#cart .cart-drawer .empty .icon { color: rgb(var(--color-button)); opacity: 0.85; }
yc-drawer#cart .cart-drawer .mkc-empty-cta { display: none; }
/* Message + CTA grouped and centered together (yc-empty is height:100% by default). */
yc-drawer#cart .cart-drawer[data-is-empty] .empty {
  height: auto;
  flex: 0 0 auto;
  margin-top: auto;
}
yc-drawer#cart .cart-drawer[data-is-empty] .mkc-empty-cta {
  display: inline-flex;
  align-self: center;
  margin: 1.4em auto auto;
  padding-inline: 1.8em;
}

/* ---------- Product page: add to cart ---------- */
#main .single-product .buy-button yc-product-form {
  display: flex;
  align-items: stretch;
  gap: 0.75em;
}
#main .single-product .buy-button yc-product-form button.primary {
  flex: 1;
  min-height: 52px;
  border-radius: var(--mkc-btn-radius);
  font-size: var(--text-md);
  font-weight: 700;
}
@media (max-width: 768px) {
  #main .single-product .buy-button {
    position: sticky;
    inset-block-end: 0;
    z-index: 20;
    /* Full-bleed: cancel yc-section's 16px gutter. */
    margin-inline: -16px;
    padding: 0.75em 16px calc(0.75em + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    background: var(--section-bg-color, #ffffff);
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.06);
  }
  body:has(.single-product) .whatsapp-float {
    inset-block-end: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- Cart page ---------- */
#main .cart .summary yc-summary-box .box {
  border-radius: 16px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.06);
}
#main .cart .mkc-free-shipping {
  border-radius: 12px;
  margin-block-end: 1em;
}
#main .cart #checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  font-size: var(--text-md);
  background: rgb(var(--color-button));
  border-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
}
#main .cart .mkc-trust { padding-inline: 0; }
@media (min-width: 992px) {
  #main .cart .summary {
    position: sticky;
    top: 100px;
    align-self: start;
  }
}

/* ---------- Thank-you page: WhatsApp confirmation ---------- */
.mkc-wa-confirm {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  max-width: 720px;
  margin: 0 auto 28px;
  padding: 20px;
  border: 2px solid #128c4a;
  border-radius: 12px;
  background: #f1fbf5;
  color: var(--color-base-black);
}
.mkc-wa-confirm__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #128c4a;
  color: #ffffff;
}
.mkc-wa-confirm__body { display: grid; gap: 10px; min-width: 0; }
.mkc-wa-confirm__title { margin: 0; font-size: var(--text-xl); font-weight: 800; line-height: 1.25; }
.mkc-wa-confirm__text,
.mkc-wa-confirm__note { margin: 0; font-size: var(--text-md); line-height: 1.5; }
.mkc-wa-confirm__note { font-size: var(--text-sm); color: var(--color-gray-500); }
.mkc-wa-confirm__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 50px;
  padding: 0 1.6em;
  border-radius: var(--mkc-btn-radius, 6px);
  background: #128c4a;
  color: #ffffff;
  font-size: var(--text-md);
  font-weight: 700;
  text-decoration: none;
}
.mkc-wa-confirm__btn:hover { filter: brightness(1.1); color: #ffffff; }
@media (max-width: 560px) {
  .mkc-wa-confirm { flex-direction: column; align-items: stretch; padding: 16px; }
  .mkc-wa-confirm__btn { justify-self: stretch; }
}

/* ---------- Sticky header above the page content ----------
   YouCan's sticky header sits at z-index 2, the same level as the product-card
   discount badges (and below the carousel arrows, 3): scrolled content showed
   through it. The cart and menu drawers live inside the header and inherit its
   level, so this also puts an open cart above the floating WhatsApp button (60),
   while staying under YouCan's overlays and modals (99 and more).
   "body" outranks layout-header.css, which loads after this file. */
body #youcan-section--header:has(yc-header[data-sticky]) {
  z-index: 70;
}