/* EL's Comfort custom additions — kept separate from the template's style.css so
   template updates don't clobber these. Loaded after style.css/responsive.css. */

/* Wishlist heart: filled/accent colour once a product is saved */
.wishlist-enquiry-link.in-wishlist i {
  color: #ff4135;
}

/* Header wishlist icon — mirrors .shop-cart's badge styling */
.main-header .menu-right-content li.wishlist-nav {
  font-weight: 400;
  font-size: 24px;
}
.main-header .menu-right-content li.wishlist-nav a {
  position: relative;
  padding-right: 14px;
}
.main-header .menu-right-content li.wishlist-nav a span {
  position: absolute;
  top: -13px;
  right: 0px;
  width: 19px;
  height: 19px;
  line-height: 19px;
  background: #2e2e2e;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}

/* Currency toggle — replaces the old dead USD/UK/URO dropdown */
.currency-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 20px;
}
.currency-toggle button {
  border: none;
  background: transparent;
  color: #cfc8bd;
  font-size: 13px;
  font-weight: 600;
  padding: 2px 8px;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.2s ease;
}
.currency-toggle button.active {
  background: #c8a96b;
  color: #222;
}
.currency-toggle button:not(.active):hover {
  color: #fff;
}

/* Wishlist page empty state (mirrors the cart page's empty state) */
.wishlist-empty {
  text-align: center;
  padding: 80px 20px;
}
.wishlist-empty p {
  margin-bottom: 20px;
  font-size: 16px;
  color: #848484;
}

/* Track-order status timeline */
.track-order-steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 480px;
  margin: 0 auto;
}
.track-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 0 auto;
}
.track-step-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #eef0f3;
  border: 2px solid #d7dbe0;
}
.track-step-label {
  margin-top: 8px;
  font-size: 12px;
  color: #848484;
  white-space: nowrap;
}
.track-step-done .track-step-dot,
.track-step-active .track-step-dot {
  background: #c8a96b;
  border-color: #c8a96b;
}
.track-step-done .track-step-label,
.track-step-active .track-step-label {
  color: #222;
  font-weight: 600;
}
.track-step-line {
  flex: 1 1 auto;
  height: 2px;
  background: #d7dbe0;
  margin-top: 8px;
}

/* ============================================================================
   Uniform product photo sizing.
   The template's own CSS only ever set `width: 100%` on product images, with
   no height or object-fit -- so a portrait photo, a square one, and a
   landscape one would each produce a different-shaped card, making the grid
   look uneven. Every rule below fixes a box to a set shape and uses
   object-fit: cover so ANY uploaded photo (whatever its real dimensions) gets
   scaled + centre-cropped to fill it consistently, never stretched.
   ============================================================================ */

/* Shop / home / wishlist / related-products cards */
.shop-block-one .inner-box .image-box img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* Homepage "Top Category" circles */
.category-block-one .image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Product detail page: main gallery photo */
.product-details-content .product-image .image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

/* Product detail page: small gallery pager thumbnails */
.product-details-content .thumb-box li figure img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* Cart, checkout summary, and track-order line-item thumbnails. The template
   only ever sized this box for cart.html's exact markup nesting -- track-order.html
   uses simpler markup, so without an explicit size here its thumbnails would
   render at whatever size the source photo happens to be. */
.prod-thumb {
  display: inline-block;
  width: 70px;
  height: 70px;
  border-radius: 6px;
  overflow: hidden;
}
.prod-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Friendly "couldn't find that order" / error card for track-order.html */
.track-order-message {
  text-align: center;
  background: #fff6f0;
  border: 1px solid #ffe1d1;
  border-radius: 16px;
  padding: 32px 24px;
  margin-top: 20px;
  animation: track-order-pop 0.25s ease;
}
.track-order-message-icon {
  width: 56px;
  height: 56px;
  line-height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #ffe9dd;
  color: #ff4135;
  font-size: 24px;
}
.track-order-message h5 {
  margin: 0 0 6px;
  font-size: 17px;
  color: #222;
}
.track-order-message p {
  margin: 0;
  color: #848484;
  font-size: 14px;
}
@keyframes track-order-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Shipping & Returns policy page */
.policy-block {
  max-width: 820px;
  margin: 0 auto 60px;
}
.policy-block:last-child {
  margin-bottom: 0;
}
.policy-icon {
  display: inline-block;
  font-size: 40px;
  color: #c8a96b;
  margin-bottom: 14px;
}
.policy-copy h4 {
  margin: 28px 0 10px;
  font-size: 18px;
  color: #222;
}
.policy-copy p {
  color: #848484;
  line-height: 1.8;
  margin-bottom: 16px;
}
.policy-list {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.policy-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 14px;
  color: #848484;
  line-height: 1.8;
}
.policy-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c8a96b;
}
.policy-list strong {
  color: #222;
}
.policy-highlight {
  background: #fff6f0;
  border: 1px solid #ffe1d1;
  border-radius: 10px;
  padding: 16px 20px;
  color: #222 !important;
}

/* Homepage hero banner: force large, high-quality product photos instead of
   whatever size the source upload happens to be (the template's stock art had
   no sizing rules at all, so real product photos rendered at shop-thumbnail
   scale). object-fit:cover crops to fill the box cleanly regardless of the
   source photo's own aspect ratio. Dimensions match the template's original
   3-slide layout. */
.banner-carousel .content-inner .image-box img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: auto;
}
.banner-carousel .content-inner .image-box.image-2 img {
  max-width: 520px;
  aspect-ratio: 520 / 666;
}
.banner-carousel .content-inner .image-box.imgae-3 img {
  max-width: 868px;
  aspect-ratio: 868 / 655;
}
.banner-carousel .content-inner .image-box.image-1 img {
  max-width: 620px;
  aspect-ratio: 620 / 790;
}

/* --- EL's Comfort brand logo (July 2026 rebrand) ---
   The new logo PNGs in assets/images/ (logo.png, small-logo.png, logo-2.png,
   footer-logo.png, footer-logo-2.png) are exported at 2x (396x80) for retina
   sharpness. The template has no size constraints on logo <img>s, so display
   size is pinned here. Black variants sit on white backgrounds, white variants
   on dark (mobile menu, .main-footer.light). */
.main-header .logo-box img,
.sticky-header .logo-box img {
  height: 40px;
  width: auto;
}
.mobile-menu .nav-logo img {
  height: 36px;
  width: auto;
}
.main-footer .footer-logo img {
  height: 36px;
  width: auto;
}

/* ============================================================================
   EL's Comfort Corporate Identity (July 2026) — brand palette alignment.
   Champagne Gold #C8A96B, Soft Charcoal #333, Crisp White #FFF.
   The template's coral accent has been remapped to Champagne Gold in color.css;
   the rules below cover the pieces color.css doesn't, and keep functional
   colours (Sold Out = red) intact for clarity.
   ============================================================================ */
:root {
  --elc-gold: #c8a96b;
  --elc-gold-deep: #a17a2e; /* darker gold that stays legible as text on white */
  --elc-charcoal: #333333;
  --elc-white: #ffffff;
}

/* --- Request 2: colour the previously-white header top bar ("CI/task bar") ---
   Soft Charcoal reads premium and gives strong contrast against the white main
   header and gold logo below. Text/icons flip to light; gold is the hover accent. */
.main-header .header-top {
  background: var(--elc-charcoal);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.main-header .header-top .info li,
.main-header .header-top .info li a,
.main-header .header-top .language .lang-btn,
.main-header .header-top .language .lang-btn .txt {
  color: #ece7df;
}
.main-header .header-top .info li i,
.main-header .header-top .language .lang-btn .arrow {
  color: var(--elc-gold);
}
.main-header .header-top .social-links li a {
  color: #ece7df;
}
.main-header .header-top .social-links li a:hover,
.main-header .header-top .info li a:hover {
  color: var(--elc-gold);
}
.main-header .header-top .social-links:before {
  background: rgba(255, 255, 255, 0.18);
}
.main-header .header-top .language .lang-dropdown {
  background: #2a2a2a;
}

/* --- Request 6: WhatsApp icons in the recognisable WhatsApp green --- */
.fa-whatsapp,
i.fa-whatsapp,
span.fa-whatsapp {
  color: #25d366 !important;
}
/* On the solid charcoal "WhatsApp Us" button the green icon still pops and
   stays recognisable next to the white label. */
.theme-btn-two .fa-whatsapp {
  color: #25d366 !important;
}

/* --- Keep the "Sold Out" badge RED (functional), independent of the gold
   remap in color.css. A gold "Sold Out" would be ambiguous. --- */
.shop-block-one .inner-box .image-box .category.red-bg,
.shop-block-one .inner-box .image-box .category.red-bg:before,
.shop-block-one .inner-box .image-box .category.red-bg:after {
  background: #e0483b;
}

/* --- Request 7: "Sale" badge — champagne gold with charcoal text, distinct
   from red (Sold Out) and teal (New). Mirrors the template's .category badge. --- */
.shop-block-one .inner-box .image-box .category.sale-bg,
.shop-block-one .inner-box .image-box .category.sale-bg:before,
.shop-block-one .inner-box .image-box .category.sale-bg:after {
  background: var(--elc-gold);
}
.shop-block-one .inner-box .image-box .category.sale-bg {
  color: #222;
}

/* Two badges stacked (e.g. New + Sale) shouldn't overlap. */
.shop-block-one .inner-box .image-box .category + .category {
  margin-top: 34px;
}

/* --- Request 7: sale price display on cards and the product page.
   Original price struck through in muted grey; sale price bold in a deep,
   legible gold so the discount reads clearly without shouting. --- */
.price .old-price {
  color: #9a9a9a;
  text-decoration: line-through;
  font-weight: 400;
  margin-right: 8px;
}
.price .sale-price {
  color: var(--elc-gold-deep);
  font-weight: 700;
}
#pd-price .old-price { font-size: 0.7em; }

/* --- Contrast fix: on hover the gold overlay fills these buttons, so switch
   the label to charcoal for readability (white-on-gold is too faint). --- */
.theme-btn-two:hover,
.cta-section .cta-inner .theme-btn-one:hover {
  color: #222 !important;
}
/* The search-popup submit is a solid gold fill — dark label reads better. */
.search-popup .search-form fieldset input[type="submit"] {
  color: #222;
}

/* --- Request 7: Specials page intro note on shop.html --- */
.shop-special-note {
  background: #faf6ee;
  border: 1px solid #ecdfc4;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 26px;
  color: #6b5a34;
  font-weight: 500;
}