/* ==========================================================================
   CaseKing - product card v4 + Quick View v2 (owner's request, 2026-09-29)
   --------------------------------------------------------------------------
   Loaded LAST on index.html and blog.html. The card is styled by several
   older layers (ck-product-card.css, modern-atelier-v2.css with
   #storefront-home-view rules, ck-system.css). Every selector here starts
   with :is(#ck-card, html), which carries an id's weight, so this file wins by
   specificity and source order without touching those layers.

   What changed on the card:
   - "Пасва на твоя <phone>" sits on the photo, where the eye lands first;
   - a second real photo (when the catalogue has one) shows on hover;
   - Quick View is a round control in the photo's corner;
   - the delivery date for an order placed today sits under the price;
   - the action reads in sentence case with a bag icon and turns petrol.
   ========================================================================== */

:is(#ck-card, html) .product-card {
  border-radius: 20px !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 1px rgba(18, 62, 68, .10), 0 10px 28px rgba(11, 43, 48, .06) !important;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease !important;
}
:is(#ck-card, html) .product-card:hover,
:is(#ck-card, html) .product-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(184, 149, 90, .60), 0 22px 48px rgba(11, 43, 48, .14) !important;
}

/* --- the photo ------------------------------------------------------------ */
:is(#ck-card, html) .product-card .product-image-container { background: #FFFFFF !important; }
:is(#ck-card, html) .product-card .product-img {
  transition: transform .6s cubic-bezier(.22, .61, .36, 1), opacity .45s ease;
}
:is(#ck-card, html) .product-card:hover .product-img { transform: scale(1.035); }
:is(#ck-card, html) .product-card .product-img-alt {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #FFFFFF;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .45s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}
@media (hover: hover) {
  :is(#ck-card, html) .product-card:hover .has-alt .product-img-alt { opacity: 1; transform: none; }
}

/* Made for the chosen phone. */
:is(#ck-card, html) .product-card .product-fit-badge {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 70px);
  padding: 5px 10px 5px 7px;
  border-radius: 999px;
  background: #123E44;
  color: #F6F4EF;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 6px 16px rgba(11, 43, 48, .22);
}
:is(#ck-card, html) .product-card .product-fit-badge .ck-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #E9D5A8;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The badge says it now, so the model line below stays a plain model line. */
:is(#ck-card, html) .product-card[data-fit="yes"] .product-compat::after { content: none !important; }

/* Sale/label tag moves to the photo's lower-left corner, out of Quick View's way. */
:is(#ck-card, html) .product-card .badge-tag {
  top: auto !important;
  bottom: 12px !important;
  left: 12px !important;
  right: auto !important;
}

/* Quick View: a round control in the photo's top-right corner. */
:is(#ck-card, html) .product-card .product-quicklook {
  top: 10px;
  right: 10px;
  left: auto;
  bottom: auto;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  justify-content: center;
  border: 1px solid rgba(18, 62, 68, .14);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: #123E44;
  box-shadow: 0 6px 16px rgba(11, 43, 48, .14);
  transform: scale(.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .3s cubic-bezier(.22, .61, .36, 1), background .2s ease, color .2s ease;
}
:is(#ck-card, html) .product-card .product-quicklook span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
:is(#ck-card, html) .product-card .product-quicklook .ck-icon { width: 19px; height: 19px; color: #123E44; }
:is(#ck-card, html) .product-card:hover .product-quicklook,
:is(#ck-card, html) .product-card:focus-within .product-quicklook,
:is(#ck-card, html) .product-card .product-quicklook:focus-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
:is(#ck-card, html) .product-card .product-quicklook:hover { background: #123E44; }
:is(#ck-card, html) .product-card .product-quicklook:hover .ck-icon { color: #E9D5A8; }
:is(#ck-card, html) .product-card .product-quicklook:focus-visible { outline: 2px solid #86692F; outline-offset: 2px; }
@media (hover: none) {
  :is(#ck-card, html) .product-card .product-quicklook { opacity: 1; transform: none; pointer-events: auto; width: 40px; height: 40px; min-height: 40px; }
}

/* --- the copy ------------------------------------------------------------- */
:is(#ck-card, html) .product-card .product-info .product-name {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  color: #161A1B !important;
}
:is(#ck-card, html) .product-card .product-eta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 12px;
  color: #4A5250;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}
:is(#ck-card, html) .product-card .product-eta .ck-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #123E44;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- the action ----------------------------------------------------------- */
:is(#ck-card, html) .product-card .product-info .btn-card-buy {
  gap: 9px;
  min-height: 46px;
  padding: 0 14px !important;
  border: 1px solid #B8955A !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #E4CF9F, #C8A86E) !important;
  color: #0B2B30 !important;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: 0 8px 18px rgba(134, 105, 47, .16), inset 0 1px rgba(255, 255, 255, .35) !important;
}
:is(#ck-card, html) .product-card .product-info .btn-card-buy:hover,
:is(#ck-card, html) .product-card .product-info .btn-card-buy:focus-visible {
  border-color: #0B2B30 !important;
  background: linear-gradient(135deg, #1F5A61, #0B2B30) !important;
  color: #F6F4EF !important;
  box-shadow: 0 12px 26px rgba(11, 43, 48, .26) !important;
}
:is(#ck-card, html) .product-card .product-info .btn-card-buy.is-success {
  border-color: #123E44 !important;
  background: #123E44 !important;
  color: #E9D5A8 !important;
}
.btn-card-bag { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto; }
.btn-card-bag .ck-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:is(#ck-card, html) .product-card .btn-card-buy .btn-card-buy-icon { opacity: .7; }
:is(#ck-card, html) .product-card .btn-card-buy.is-loading .btn-card-bag { opacity: .4; }

/* Narrow cards (two per row on phones, four beside the filter rail). */
@container (max-width: 200px) {
  :is(#ck-card, html) .product-card .product-info .btn-card-buy { justify-content: center; font-size: 12.5px !important; gap: 6px; padding: 0 8px !important; white-space: nowrap; }
  :is(#ck-card, html) .product-card .btn-card-buy .btn-card-buy-icon,
  :is(#ck-card, html) .product-card .btn-card-buy .btn-card-bag { display: none; }
  :is(#ck-card, html) .product-card .btn-card-buy .btn-card-buy-label { flex: 0 1 auto; text-align: center; }
  :is(#ck-card, html) .product-card .product-eta { font-size: 12px; margin-bottom: 10px; }
  :is(#ck-card, html) .product-card .product-eta-lead { display: none; }
  :is(#ck-card, html) .product-card .product-fit-badge { font-size: 11px; }
  :is(#ck-card, html) .product-card .product-fit-long { display: none; }
}

/* reduce-motion opt-out (html.ck-calm) */
  html.ck-calm :is(#ck-card, html) .product-card, html.ck-calm :is(#ck-card, html) .product-card .product-img, html.ck-calm :is(#ck-card, html) .product-card .product-img-alt { transition: none !important; }
  html.ck-calm :is(#ck-card, html) .product-card:hover { transform: none; }


/* ==========================================================================
   Quick View v2
   ========================================================================== */
:is(#ck-card, html) .ck-ql-dialog { border-radius: 24px !important; overflow: hidden; }
:is(#ck-card, html) .ck-ql-detail { background: linear-gradient(180deg, #FFFFFF 0%, #F6F4EF 100%) !important; }
:is(#ck-card, html) .ck-ql-maker { color: #86692F !important; }
:is(#ck-card, html) .ck-ql-title {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: clamp(22px, 2vw, 28px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #0B2B30 !important;
}
.ck-ql-fit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 10px 0 0;
  padding: 8px 14px 8px 10px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.ck-ql-fit .ck-icon { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ck-ql-fit.is-fit { background: #123E44; color: #F6F4EF; }
.ck-ql-fit.is-fit .ck-icon { stroke: #E9D5A8; }
.ck-ql-fit.is-other { background: #FBF4E6; color: #5E4719; border: 1px solid rgba(184, 149, 90, .55); }
:is(#ck-card, html) .ck-ql-desc { color: #3F4745 !important; font-size: 14.5px !important; line-height: 1.6 !important; white-space: pre-line; }

/* The three promises: one quiet row instead of three boxes. */
:is(#ck-card, html) .ck-ql-assurance {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin-top: 18px !important;
}
:is(#ck-card, html) .ck-ql-assurance span {
  flex-direction: row !important;
  align-items: center;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #161A1B !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
:is(#ck-card, html) .ck-ql-assurance .ck-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 50%;
  background: #E6ECE9;
  fill: none;
  stroke: #123E44;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  box-sizing: border-box;
}
.ck-ql-eta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #123E44;
  font-size: 14px;
  font-weight: 650;
}
.ck-ql-eta .ck-icon { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: #123E44; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:is(#ck-card, html) .ck-ql-add {
  min-height: 50px;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
:is(#ck-card, html) .ck-ql-note { color: #4A5250 !important; font-size: 13px !important; }
:is(#ck-card, html) .ck-ql-note[hidden], .ck-ql-eta[hidden], .ck-ql-fit[hidden] { display: none !important; }

/* Product description: the hook line leads the copy */
:is(#ck-card, html) .ck-tab-desc-body .ck-desc-hook { font-family: "Manrope", "Inter", sans-serif !important; font-size: 18px !important; line-height: 1.45 !important; font-weight: 600 !important; color: #123E44 !important; }

/* --- a real reduction (owner, 2026-10-23) ----------------------------------
   Only a price below the lawful 30-day low gets this (pricing.js). The card
   wears a champagne ring, the percent sits on the photo in deep petrol, the
   new price leads in petrol, the old one follows struck through, and the
   saving is spelled out in euro underneath. Palette tokens only. */
:is(#ck-card, html) .product-card.is-sale {
  box-shadow: 0 0 0 1.5px rgba(184, 149, 90, .70), 0 12px 30px rgba(11, 43, 48, .08) !important;
}
:is(#ck-card, html) .product-card.is-sale:hover,
:is(#ck-card, html) .product-card.is-sale:focus-within {
  box-shadow: 0 0 0 2px #B8955A, 0 22px 48px rgba(11, 43, 48, .16) !important;
}
:is(#ck-card, html) .product-card .badge-tag.sale {
  padding: 7px 12px 6px !important;
  border: 1px solid rgba(200, 168, 110, .55);
  background: #0B2B30 !important;
  color: #C8A86E !important;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  line-height: 1;
  text-transform: none !important;
  box-shadow: 0 8px 18px rgba(11, 43, 48, .28);
  font-variant-numeric: tabular-nums;
}
:is(#ck-card, html) .product-card.is-sale .product-price-box {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 4px;
}
:is(#ck-card, html) .product-card.is-sale .product-price.current-price {
  order: 0;
  color: #0B2B30 !important;
  font-size: 20px !important;
}
:is(#ck-card, html) .product-card.is-sale .product-price.old-price {
  order: 1;
  color: #5A615F !important;
  font-size: 13.5px !important;
  text-decoration-color: rgba(11, 43, 48, .55) !important;
}
:is(#ck-card, html) .product-card .product-saving {
  order: 2;
  flex-basis: 100%;
  display: block;
  line-height: 1;
}
:is(#ck-card, html) .product-card .product-saving > span {
  display: inline-block;
  padding: 4px 8px 3px;
  border-radius: 999px;
  background: rgba(184, 149, 90, .16);
  color: #86692F;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
/* The tag now sits inside the photo frame, in its lower-left corner. */
:is(#ck-card, html) .product-card .product-image-container > .badge-tag.sale {
  position: absolute;
  top: auto !important;
  bottom: 12px !important;
  left: 12px !important;
  right: auto !important;
  z-index: 3;
}
@media (max-width: 560px) {
  :is(#ck-card, html) .product-card .badge-tag.sale { font-size: 13px !important; padding: 6px 10px 5px !important; }
  :is(#ck-card, html) .product-card.is-sale .product-price.current-price { font-size: 17px !important; }
  :is(#ck-card, html) .product-card.is-sale .product-price.old-price { font-size: 12px !important; }
  :is(#ck-card, html) .product-card .product-saving > span { font-size: 10.5px; padding: 3px 7px 2px; }
}