/******************************************************************
  Theme Name: Cake
  Description: Cake e-commerce tamplate
  Author: Colorib
  Author URI: https://www.colorib.com//
  Version: 1.0
  Created: Colorib
******************************************************************/
/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Banner Section
6.  Product Section
7.  Intagram Section
8.  Latest Section
9.  Contact
10.  Footer Style
-------------------------------------------------------------------*/
/*----------------------------------------*/
/* Template default CSS
/*----------------------------------------*/

.playfair-display-normal {
  font-family: 'Lato', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

html,
body {
  height: 100%;
  font-family: var(--cc-font-body, 'Lato'), sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Horizontal-overflow guard.
   body: hidden→clip (hidden = old-Safari fallback).
   html: ONLY `clip` (never `hidden`). `clip` does NOT create a scroll
   container, so it does NOT re-break AOS scroll detection (that
   regression was from overflow-x:HIDDEN on html). We need it on html
   because position:fixed off-canvas panels (cart drawer) are NOT
   clipped by body overflow — only the root can contain them. */
body {
  overflow-x: hidden;
  overflow-x: clip;
}
html {
  overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: #111111;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
}

h1 {
  font-size: 70px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

p {
  font-size: 15px;
  font-family: 'Lato', sans-serif;
  color: #111111;
  font-weight: 400;
  line-height: 26px;
  margin: 0 0 15px 0;
}

img {
  max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
  outline: none;
}

a:hover,
a:focus {
  text-decoration: none;
  outline: none;
  color: #ffffff;
}

ul,
ol {
  padding: 0;
  margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/
.section-title {
  margin-bottom: 35px;
}
.section-title span {
  color: var(--cc-primary, #781717);
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 4px;
  display: block;
  margin-bottom: 10px;
}
.section-title h2 {
  font-size: 36px;
  color: var(--cc-dark, #2c1515);
  line-height: 1.3;
  font-weight: 600;
  font-style: normal;
  font-family: var(--cc-font-home-section, var(--cc-font-heading, 'Playfair Display')), serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.set-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

.spad {
  padding-top: 100px;
  padding-bottom: 100px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
  color: #fff;
}

/* buttons */
.primary-btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 14px 30px;
  color: #ffffff;
  background: var(--cc-primary, #781717);
  letter-spacing: 2px;
}
.primary-btn:hover {
  cursor: pointer;
}

.site-btn {
  font-size: 14px;
  color: #ffffff;
  background: #111111;
  font-weight: 600;
  border: none;
  text-transform: uppercase;
  display: inline-block;
  letter-spacing: 2px;
  padding: 14px 30px;
}

/* Preloder */
#preloder {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999999;
  background: #fdf8f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* Logo pulse */
#preloder .cc-preload-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  animation: cc-preload-pulse 1.6s ease-in-out infinite;
  margin-bottom: 22px;
}
@keyframes cc-preload-pulse {
  0%,100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(.92); opacity: .75; }
}

/* Thin brand spinner ring */
#preloder .cc-preload-ring {
  width: 36px;
  height: 36px;
  border: 3px solid #f0d8d0;
  border-top-color: #781717;
  border-radius: 50%;
  animation: cc-spin .75s linear infinite;
  margin-bottom: 24px;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }

/* Quote */
#preloder .cc-preload-quote {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  font-style: italic;
  color: #b07070;
  text-align: center;
  max-width: 260px;
  line-height: 1.6;
  letter-spacing: .01em;
}
#preloder .cc-preload-brand {
  margin-top: 8px;
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #c47a85;
}

/* Legacy .loader kept so JS teardown still works */
.loader { display: none; }

@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}
@-webkit-keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
  50% {
    -webkit-transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }
  100% {
    -webkit-transform: rotate(360deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}
.spacial-controls {
  position: fixed;
  width: 111px;
  height: 91px;
  top: 0;
  right: 0;
  z-index: 999;
}

.spacial-controls .search-switch {
  display: block;
  height: 100%;
  padding-top: 30px;
  background: #323232;
  text-align: center;
  cursor: pointer;
}

.search-model {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #000;
  z-index: 99999;
}

.search-model-form {
  padding: 0 15px;
}

.search-model-form input {
  width: 500px;
  font-size: 40px;
  border: none;
  border-bottom: 2px solid #333;
  background: 0 0;
  color: #999;
}

.search-close-switch {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #333;
  color: #fff;
  text-align: center;
  border-radius: 50%;
  font-size: 28px;
  line-height: 28px;
  top: 30px;
  cursor: pointer;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
      transform: rotate(45deg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/*---------------------
  Header
-----------------------*/
.header {
  background: #ffffff;
  border-bottom: none;
  /* No drop shadow: it bled into the gap below the logo bar and read
     as a smudged band above the hero. style.css's copy of this rule
     still sets the shadow; this file loads later and wins. */
  box-shadow: none;
  position: relative;
}

.header__top {
  position: relative;
  padding: 19px 0;
}

/* Oval pill — wraps ONLY the nav tabs, logo and icons sit outside */
.header__top .container > .row {
  margin: 0;
  align-items: center;
  flex-wrap: nowrap;
}
/* Flexible header columns: logo fixed, nav expands to fill, search+cart auto */
.header__top .row > .col-lg-2:first-child {
  flex: 0 0 160px !important;
  width: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
}
.header__top .row > .col-lg-8 {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: visible;
}
.header__top .row > .col-lg-2:last-child {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding-left: 8px;
  white-space: nowrap;
}

.header__menu {
  background: var(--cc-card-bg, #fff5f5);
  border: 1.8px solid var(--cc-accent, #c47a85);
  border-radius: 50px;
  padding: 0 4px;
  display: inline-block;
  width: 100%;
}

.header__top__left {
  float: left;
}
.header__top__left ul li {
  font-size: 14px;
  color: #111111;
  list-style: none;
  display: inline-block;
  margin-right: 30px;
  position: relative;
  padding: 2px 0;
  cursor: pointer;
}
.header__top__left ul li a {
  color: #111111;
}
.header__top__left ul li:hover ul {
  top: 24px;
  opacity: 1;
  visibility: visible;
}
.header__top__left ul li ul {
  background: #111111;
  display: inline-block;
  padding: 2px 0;
  position: absolute;
  left: 0;
  top: 44px;
  opacity: 0;
  visibility: hidden;
  z-index: 3;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}
.header__top__left ul li ul li {
  list-style: none;
  font-size: 13px;
  color: #ffffff;
  padding: 2px 15px;
  cursor: pointer;
}
.header__top__left ul li ul li:after {
  display: none;
}
.header__top__left ul li:after {
  position: absolute;
  right: -19px;
  top: 1px;
  content: "|";
  color: #bbbbbb;
}
.header__top__left ul li:last-child {
  margin-right: 0;
}
.header__top__left ul li:last-child:after {
  display: none;
}
.header__top__left ul li span {
  color: #888888;
}

.header__logo {
  position: absolute;
  top: calc(50% + 8px);
  transform: translateY(-50%);
  z-index: 10;
  left: 4px;
}

.header__logo a {
  display: inline-block;
}

.header__logo img {
  width: auto !important;
  max-width: none !important;
  height: 118px !important; /* logo size change the pixel here for zoom in or out the logo size via CSS */
  object-fit: contain;
}

.header__order-btn {
  display: inline-block;
  border: 2px solid var(--cc-accent, #c47a85);
  color: var(--cc-accent, #c47a85);
  padding: 7px 18px;
  border-radius: 25px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: all 0.22s;
  white-space: nowrap;
}
.header__order-btn:hover {
  background: var(--cc-accent, #c47a85);
  color: #fff !important;
}

.header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 4px;
}

/* ── Header Locations Button ── */
.hdr-locations-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  border: 2px solid var(--cc-accent, #c47a85);
  border-radius: 30px;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--cc-accent, #c47a85);
  text-decoration: none;
  background: none;
  transition: all .2s;
  white-space: nowrap;
  margin-right: 10px;
  letter-spacing: .3px;
}
.hdr-locations-btn i { font-size: 13px; color: var(--cc-accent, #c47a85); }
.hdr-locations-btn:hover,
.hdr-locations-btn.active {
  background: var(--cc-accent, #c47a85);
  border-color: var(--cc-accent, #c47a85);
  color: #fff;
}
.hdr-locations-btn:hover i,
.hdr-locations-btn.active i { color: #fff; }

/* ── Header Search Widget ── */
.hdr-search {
  display: flex;
  align-items: center;
  position: relative;
}
/* Pill trigger button — matches Order Now style */
.hdr-search__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 2px solid var(--cc-accent, #c47a85);
  color: var(--cc-accent, #c47a85);
  padding: 7px 18px;
  border-radius: 30px;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.22s, color 0.22s;
  flex-shrink: 0;
  z-index: 2;
}
.hdr-search__pill:hover,
.hdr-search--open .hdr-search__pill {
  background: var(--cc-accent, #c47a85);
  color: #fff;
}
.hdr-search__box {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 280px;
  background: #fff;
  border: 2px solid var(--cc-accent, #c47a85);
  border-radius: 25px;
  padding: 0;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 9998;
}
.hdr-search--open .hdr-search__box {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.hdr-search__input {
  width: 100%;
  border: none;
  border-radius: 25px;
  padding: 9px 18px;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  color: #3d1e0f;
  outline: none;
  background: #fff;
}
.hdr-search__input::placeholder { color: #bbb; }

/* Suggestions dropdown */
.hdr-search__suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #f0ddd8;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(120,23,23,0.12);
  overflow: hidden;
  display: none;
  z-index: 9999;
}
.hdr-search__suggestions.is-open { display: block; }
.hdr-sugg-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  text-decoration: none;
  color: #3d1e0f;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  transition: background 0.15s;
  cursor: pointer;
}
.hdr-sugg-item:hover { background: #fdf0ed; color: var(--cc-primary, #781717); }
.hdr-sugg-item__img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f5ede5;
}
.hdr-sugg-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #fde8ed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--cc-accent, #c47a85);
  flex-shrink: 0;
}
.hdr-sugg-item__info { display: flex; flex-direction: column; min-width: 0; }
.hdr-sugg-item__name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-sugg-item__meta { font-size: 11px; color: #999; margin-top: 1px; }
.hdr-sugg-empty { padding: 14px; text-align: center; color: #bbb; font-size: 13px; font-family: 'Lato', sans-serif; }


.header__top__left {
  display: none;
}

.header__top__right {
  display: none;
}

.header__top__inner {
  height: auto;
  padding: 25px 0;
}

.offcanvas__option ul li {
  font-size: 14px;
  color: #111111;
  list-style: none;
  display: inline-block;
  margin-right: 30px;
  position: relative;
  padding: 2px 0;
  cursor: pointer;
}
.offcanvas__option ul li a {
  color: #111111;
}
.offcanvas__option ul li:hover ul {
  top: 24px;
  opacity: 1;
  visibility: visible;
}
.offcanvas__option ul li ul {
  background: #111111;
  display: inline-block;
  padding: 2px 0;
  position: absolute;
  left: 0;
  top: 44px;
  opacity: 0;
  visibility: hidden;
  z-index: 3;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}
.offcanvas__option ul li ul li {
  list-style: none;
  font-size: 13px;
  color: #ffffff;
  padding: 2px 15px;
  cursor: pointer;
}
.offcanvas__option ul li ul li:after {
  display: none;
}
.offcanvas__option ul li:after {
  position: absolute;
  right: -19px;
  top: 1px;
  content: "|";
  color: #bbbbbb;
}
.offcanvas__option ul li:last-child {
  margin-right: 0;
}
.offcanvas__option ul li:last-child:after {
  display: none;
}
.offcanvas__option ul li span {
  color: #888888;
}

.offcanvas__logo {
  margin-bottom: 40px;
}
.offcanvas__logo a {
  display: inline-block;
}

.offcanvas__cart {
  margin-bottom: 30px;
}

.offcanvas__cart__links {
  display: inline-block;
  margin-right: 20px;
}
.offcanvas__cart__links a {
  display: inline-block;
  margin-right: 30px;
  position: relative;
}
.offcanvas__cart__links a:after {
  position: absolute;
  right: -18px;
  top: 0px;
  content: "|";
  font-size: 16px;
  color: #bababa;
}
.offcanvas__cart__links a:last-child {
  margin-right: 0;
}
.offcanvas__cart__links a:last-child:after {
  display: none;
}

.offcanvas__cart__item {
  display: inline-block;
}
.offcanvas__cart__item a {
  position: relative;
  display: inline-block;
  margin-right: 6px;
}
.offcanvas__cart__item a span {
  font-size: 15px;
  color: #111111;
  font-weight: 600;
  position: absolute;
  left: 7px;
  top: 4px;
}
.offcanvas__cart__item .cart__price {
  display: inline-block;
  color: #888888;
  font-size: 15px;
  font-weight: 600;
  position: relative;
  top: 4px;
}
.offcanvas__cart__item .cart__price span {
  color: #111111;
}

.header__top__right {
  float: right;
}

.header__top__right__cart {
  display: inline-block;
}
.header__top__right__cart a {
  position: relative;
  display: inline-block;
  margin-right: 6px;
}
.header__top__right__cart a span {
  font-size: 15px;
  color: #111111;
  font-weight: 600;
  position: absolute;
  left: 7px;
  top: 4px;
}
.header__top__right__cart .cart__price {
  display: inline-block;
  color: #888888;
  font-size: 15px;
  font-weight: 600;
  position: relative;
  top: 4px;
}
.header__top__right__cart .cart__price span {
  color: #111111;
}

.header__menu {
  text-align: center;
}
.header__menu ul {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: nowrap;
  padding: 0;
  margin: 0;
  width: 100%;
  gap: 0;
}
.header__menu ul li {
  list-style: none;
  display: flex;
  align-items: center;
  position: relative;
  margin-right: 0;
}
.header__menu ul li.active > a {
  color: #c0392b;
  background: transparent;
}
.header__menu ul li.active > a::after {
  display: none;
}
.header__menu ul li:hover > a {
  color: var(--cc-accent, #c47a85);
  background: transparent;
}
.header__menu ul li:hover .dropdown {
  top: 56px;
  opacity: 1;
  visibility: visible;
}
.header__menu ul li:last-child {
  margin-right: 0;
}
.header__menu ul li .dropdown {
  display: block;
  position: absolute;
  left: 0;
  top: 72px;
  width: 160px;
  background: #ffffff;
  border: 1px solid #f0e8e8;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  text-align: left;
  padding: 8px 0;
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}
.header__menu ul li .dropdown li {
  display: block;
  margin-right: 0;
}
.header__menu ul li .dropdown li a {
  font-size: 14px;
  color: #333333;
  font-weight: 500;
  padding: 8px 18px;
  text-transform: capitalize;
  background: transparent;
  white-space: nowrap;
}
.header__menu ul li .dropdown li a:hover {
  color: var(--cc-primary, #781717);
  background: var(--cc-card-bg, #fff5f5);
}
.header__menu ul li .dropdown li a::after {
  display: none;
}
.header__menu ul li .dropdown--catalogue {
  width: 380px;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 10px;
}
.header__menu ul li .dropdown--catalogue li a {
  background: #f9f4f4;
  border-radius: 6px;
  padding: 9px 14px;
  color: #2a2a2a;
  font-size: 13.5px;
  font-family: 'Lato', sans-serif;
  font-weight: 600;
  letter-spacing: 0.4px;
  transition: all 0.2s;
}
.header__menu ul li .dropdown--catalogue li a:hover {
  background: var(--cc-accent, #c47a85);
  color: #ffffff;
  letter-spacing: 0.8px;
}
.header__menu ul li a {
  font-size: clamp(12px, 1.05vw, 15px);
  color: #2a2a2a;
  display: block;
  font-weight: 600;
  font-family: 'Lato', sans-serif;
  padding: 12px clamp(8px, 1.2vw, 16px);
  letter-spacing: 0.3px;
  background: transparent;
  -webkit-transition: all, 0.25s;
  -o-transition: all, 0.25s;
  transition: all, 0.25s;
  white-space: nowrap;
}

.offcanvas-menu-wrapper {
  display: none;
}

.canvas__open {
  display: none;
}

/*---------------------
  Hero
-----------------------*/
.hero__item {
  height: 700px; /* Hero slide height */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  justify-items: center;
}

.hero__text {
  text-align: center;
  background: #ffffff; /* Hero content box background */
  padding: 65px 70px 70px;
  position: relative;
}
.hero__text:after {
  position: absolute;
  left: 15px;
  top: 15px;
  height: calc(100% - 30px);
  width: calc(100% - 30px);
  border: 1px dashed #f08632;
  content: "";
  opacity: 0.3;
}
.hero__text h2 {
  font-size: 46px;
  color: #111111;
  line-height: 60px;
  font-weight: 700;
  font-style: italic;
  font-family: var(--cc-font-hero-heading, var(--cc-font-heading, 'Playfair Display')), serif;
  margin-bottom: 18px;
  position: relative;
  top: 100px;
  opacity: 0;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}
.hero__text .primary-btn {
  position: relative;
  top: 100px;
  opacity: 0;
  -webkit-transition: all, 0.6s;
  -o-transition: all, 0.6s;
  transition: all, 0.6s;
}

.hero__slider.owl-carousel .owl-item.active .hero__text h2 {
  top: 0;
  opacity: 1;
}
.hero__slider.owl-carousel .owl-item.active .hero__text .primary-btn {
  top: 0;
  opacity: 1;
  z-index: 99;
  position: relative;
}
.hero__slider.owl-carousel .owl-nav button {
  height: 50px;
  width: 50px;
  background: rgba(17, 17, 17, 0.5);
  border-radius: 50%;
  color: #ffffff;
  font-size: 26px;
  line-height: 50px;
  text-align: center;
  position: absolute;
  left: 30px;
  top: 50%;
  margin-top: -15px;
}
.hero__slider.owl-carousel .owl-nav button.owl-next {
  left: auto;
  right: 30px;
}

/*---------------------
  Categories
-----------------------*/
.categories__slider {
  padding: 0 15px;
}
.categories__slider.owl-carousel .owl-stage-outer {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--cc-primary, #781717); /* Divider under category slider */
}
.categories__slider.owl-carousel .owl-nav button {
  font-size: 36px;
  color: #888888;
  position: absolute;
  left: -60px;
  top: 35%;
}
.categories__slider.owl-carousel .owl-nav button.owl-next {
  left: auto;
  right: -60px;
}

.categories__item {
  text-align: center;
  border-radius: 50%;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
  height: 194px;
  width: 194px;
  padding-top: 25px;
  position: relative;
  border: 1px solid var(--cc-primary, #781717); /* Category circle outline color */
}
.categories__item:after {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -48px;
  width: 15px;
  height: 15px;
  border: 1px solid var(--cc-primary, #781717);
  border-color: transparent var(--cc-primary, #781717) var(--cc-primary, #781717) transparent;
  content: "";
  -webkit-transform: rotate(-135deg);
      -ms-transform: rotate(-135deg);
          transform: rotate(-135deg);
  opacity: 0;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}
.categories__item:hover {
  background: var(--cc-primary, #781717);
}
.categories__item:hover:after {
  opacity: 1;
}
.categories__item:hover span {
  color: #ffffff;
}
.categories__item:hover h5 {
  color: #ffffff;
}

.categories__item__icon span {
  color: var(--cc-primary, #781717);
  -webkit-transition: all, 0.2s;
  -o-transition: all, 0.2s;
  transition: all, 0.2s;
}
.categories__item__icon h5 {
  color: #111111;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 4px;
  -webkit-transition: all, 0.2s;
  -o-transition: all, 0.2s;
  transition: all, 0.2s;
}

.categories_item_link {
  display: block;
  height: 100%;
}

.theme-color {
  color: var(--cc-primary, #781717);
}

/*---------------------
  Class
-----------------------*/
.class {
  background: rgba(240, 135, 50, 0.1);
  position: relative;
  padding-bottom: 0;
}

.class__form {
  height: 620px;
}
.class__form form input {
  height: 50px;
  width: 100%;
  padding-left: 20px;
  font-size: 15px;
  color: #444444;
  background: #ffffff;
  border: none;
  margin-bottom: 20px;
}
.class__form form input::-webkit-input-placeholder {
  color: #444444;
}
.class__form form input::-moz-placeholder {
  color: #444444;
}
.class__form form input:-ms-input-placeholder {
  color: #444444;
}
.class__form form input::-ms-input-placeholder {
  color: #444444;
}
.class__form form input::placeholder {
  color: #444444;
}
.class__form form .nice-select {
  float: none;
  border-radius: 0;
  border: none;
  padding-left: 20px;
  margin-bottom: 20px;
  height: 50px;
  line-height: 50px;
}
.class__form form .nice-select span {
  font-size: 15px;
  color: #444444;
}
.class__form form .nice-select .list {
  margin-top: 0;
  border-radius: 0;
  width: 100%;
}
.class__form form .nice-select:after {
  border-bottom: 1.5px solid #111;
  border-right: 1.5px solid #111;
  height: 9px;
  right: 25px;
  width: 9px;
}
.class__form form button {
  letter-spacing: 2px;
  width: 100%;
}

.class__video {
  height: 720px;
  width: 47%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  right: 0;
  top: -50px;
}
.class__video .play-btn {
  display: inline-block;
  width: 70px;
  height: 70px;
  background: #f08632;
  font-size: 24px;
  color: #ffffff;
  line-height: 70px;
  text-align: center;
  border-radius: 50%;
}

/*---------------------
  Team
-----------------------*/
.team {
  padding-bottom: 70px;
}

.team__btn {
  text-align: right;
}
.team__btn .primary-btn {
  border: 2px solid #b7b7b7;
  background: transparent;
  color: #111111;
}

.team__item {
  height: 360px;
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}
.team__item:hover .team__item__text {
  opacity: 1;
  bottom: 0;
  visibility: visible;
}

.team__item__text {
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 30px 0;
  position: absolute;
  left: 0;
  bottom: -500px;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}
.team__item__text h6 {
  color: #111111;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.team__item__text span {
  color: #111111;
  font-size: 14px;
  display: block;
  margin-bottom: 12px;
}

.team__item__social a {
  display: inline-block;
  color: #111111;
  font-size: 16px;
  margin-right: 14px;
}

/*---------------------
  Testimonial
-----------------------*/
.testimonial {
  background: #fdf3ea;
  padding-top: 90px;
  padding-bottom: 70px;
}

.testimonial__slider .col-lg-6 {
  max-width: 100%;
}
.testimonial__slider.owl-carousel .owl-dots {
  text-align: center;
  padding-top: 35px;
}
.testimonial__slider.owl-carousel .owl-dots button {
  height: 10px;
  width: 10px;
  background: rgba(17, 17, 17, 0.1);
  border-radius: 50%;
  margin-right: 10px;
}
.testimonial__slider.owl-carousel .owl-dots button.active {
  background: rgba(17, 17, 17, 0.5);
}
.testimonial__slider.owl-carousel .owl-dots button:last-child {
  margin-right: 0;
}

.testimonial__item {
  background: #ffffff;
  padding: 40px 45px 35px 50px;
  position: relative;
}
.testimonial__item .rating {
  position: absolute;
  right: 50px;
  top: 60px;
}
.testimonial__item .rating span {
  font-size: 14px;
  color: #f0c656;
  margin-right: -5px;
  display: inline-block;
}
.testimonial__item p {
  color: #111111;
  font-style: italic;
  margin-bottom: 0;
}

.testimonial__author {
  overflow: hidden;
  margin-bottom: 24px;
}

.testimonial__author__pic {
  float: left;
  margin-right: 26px;
}
.testimonial__author__pic img {
  height: 70px;
  width: 70px;
  border-radius: 50%;
}

.testimonial__author__text {
  overflow: hidden;
  padding-top: 12px;
}
.testimonial__author__text h5 {
  color: #111111;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.testimonial__author__text span {
  color: #444444;
  font-size: 14px;
}

/*---------------------
  Instagram
-----------------------*/
.instagram__text {
  padding-top: 90px;
}
.instagram__text .section-title {
  margin-bottom: 55px;
}
.instagram__text h5 {
  font-size: 20px;
  color: #444444;
  position: relative;
  z-index: 1;
}
.instagram__text h5:after {
  position: absolute;
  left: 0;
  top: -34px;
  background: url(../img/instagram/cake-piece.png) no-repeat;
  height: 139px;
  width: 114px;
  content: "";
}
.instagram__text h5 i {
  color: #111111;
  font-size: 36px;
  position: relative;
  top: 6px;
  margin-right: 8px;
}

.instagram__pic {
  margin-bottom: 30px;
  transition: transform .2s; /* Animation */
}
.instagram__pic:hover {
  transform: scale(1.2);
  z-index: 99;
  position: relative;
}

.instagram__pic.middle__pic {
  padding-top: 30px;
  margin-bottom: 0;
}
.instagram__pic img {
  min-width: 100%;
}

/*---------------------
  Map
-----------------------*/
.map {
  position: relative;
  height: 300px;
}
.map .container {
  position: relative;
  z-index: 5;
  top: 20px;
}

.map__iframe {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.map__iframe iframe {
  width: 100%;
}

.map__inner {
  text-align: center;
  background: #ffffff;
  -webkit-box-shadow: 0 0 10px rgba(223, 223, 224, 0.7);
          box-shadow: 0 0 10px rgba(223, 223, 224, 0.7);
  padding: 30px 25px 25px;
  position: relative;
}
.map__inner:after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 20px;
  width: 20px;
  background: #ffffff;
  content: "";
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  margin: 0 auto;
}
.map__inner h6 {
  color: #111111;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.map__inner ul li {
  list-style: none;
  font-size: 14px;
  color: #444444;
  margin-bottom: 10px;
}

/*---------------------
  Product
-----------------------*/
.product {
  padding-top: 50px;
}

.product__item {
  margin-bottom: 70px;
}
.product__item:hover .product__item__pic .product__label span {
  background: var(--cc-primary, #781717);
  color: #ffffff;
}
.product__item:hover .product__item__text .product__item__price {
  opacity: 1;
  visibility: visible;
}
/* .product__item:hover .product__item__text .cart_add {
  opacity: 1;
  visibility: visible;
  bottom: -4px;
} */

.product__item__pic {
  height: 270px; /* Product card image height */
  position: relative;
  background-position: center;
  display: block; /* Allow anchors with this class to size properly */
}
.product__item__pic .product__label {
  position: absolute;
  left: 0;
  bottom: -15px;
  text-align: center;
  width: 100%;
}
.product__item__pic .product__label span {
  display: inline-block;
  font-size: 14px;
  color: #111111;
  background: #ffffff;
  padding: 6px 10px 4px;
  border-radius: 2px;
  -webkit-box-shadow: 0 0 10px rgba(223, 223, 224, 0.7);
          box-shadow: 0 0 10px rgba(223, 223, 224, 0.7);
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}

.product__item__text {
  padding-top: 14px;
  padding-bottom: 12px;
  text-align: center;
  position: relative;
}
.product__item__text h6 {
  margin-bottom: 4px;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product__item__text h6 a {
  color: #111111;
  font-weight: 600;
  text-transform: uppercase;
}
.product__item__text .product__item__price {
  color: var(--cc-primary, #781717);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 10px;
  display: block;
}
.product__item__text .cart_add {
  position: static;
  width: 100%;
  padding: 0 8px;
}
.product__item__text .cart_add a {
  color: #111111;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  border-bottom: 2px solid var(--cc-primary, #781717);
  padding-bottom: 3px;
}

/*---------------------
  Footer
-----------------------*/
.footer {
  padding-top: 70px;
}
.cc-footer-styled {
  background: var(--cc-footer-bg, #71bcb3) !important;
  background-image: none !important;
  border-top: 3px solid var(--cc-accent, #c47a85);
}
.cc-footer-styled .footer__widget h5,
.cc-footer-styled .footer__widget h6,
.cc-footer-styled .footer__logo h5,
.cc-footer-styled .footer__newslatter h5,
.cc-footer-styled .footer__newslatter h6 { color: var(--cc-dark, #2c1515); }
.cc-footer-styled .footer__widget ul li { color: #555; }
.cc-footer-styled .footer__about p,
.cc-footer-styled .footer__newslatter p { color: #666; }
.cc-footer-styled .footer__about .footer__social a { color: var(--cc-accent, #c47a85); background: rgba(196,122,133,0.12); }
.cc-footer-styled .footer__contact ul li a { color: var(--cc-dark, #2c1515); }
.cc-footer-styled .footer__widget:after { background: rgba(44,21,21,0.12); }
.cc-footer-styled .footer__about:after { background: rgba(44,21,21,0.12); }
.footer-company-name {
  font-size: 14px;
  color: var(--cc-copyright-text, #ffffff);
  margin: 0;
}

.footer__widget {
  position: relative;
  margin-bottom: 30px;
}
.footer__widget:after {
  position: absolute;
  right: 25px;
  top: 0;
  width: 1px;
  height: 165px;
  background: rgba(255, 255, 255, 0.1);
  content: "";
}
.footer__widget h5 {
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 15px;
}
.footer__widget h6 {
  color: #ffffff;
  font-weight: 500;
  margin-bottom: 22px;
}
.footer__widget ul li {
  list-style: none;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 36px;
}

.footer__about {
  text-align: center;
  position: relative;
  margin-bottom: 30px;
}
.footer__about:after {
  position: absolute;
  right: -35px;
  top: 0;
  width: 1px;
  height: 165px;
  background: rgba(255, 255, 255, 0.1);
  content: "";
}
.footer__about .footer__logo {
  margin-bottom: 32px;
}
.footer__about .footer__logo a {
  display: inline-block;
}

.footer__logo h5 {
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 15px;
}
.footer__about p {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 26px;
  margin-bottom: 25px;
}
.footer__about .footer__social a {
  display: inline-block;
  color: #ffffff;
  background: rgba(225, 225, 225, 0.1);
  height: 45px;
  width: 45px;
  border-radius: 50%;
  line-height: 45px;
  text-align: center;
  margin-right: 6px;
}
.footer__about .footer__social a:last-child {
  margin-right: 0;
}

.footer__newslatter {
  padding-left: 50px;
  margin-bottom: 30px;
}
.footer__newslatter h5 {
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 15px;
}
.footer__newslatter h6 {
  color: #ffffff;
  font-weight: 500;
  margin-bottom: 22px;
}
.footer__newslatter p {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 26px;
  margin-bottom: 10px;
}

.footer__contact ul {
  display: flex;
  margin-top: 10px;
}

.footer__contact ul li {
  list-style: none;
  display: inline-block;
}

.footer__contact ul li:first-child {
  margin-right: 10px;
}
.footer__contact ul li a {
  font-size: 14px;
  color: #ffffff;
}
.footer__newslatter form {
  position: relative;
}
.footer__newslatter form input {
  height: 50px;
  width: 100%;
  padding-left: 22px;
  background: rgba(253, 243, 234, 0.2);
  border: none;
  color: #ffffff;
  font-size: 14px;
}
.footer__newslatter form input::-webkit-input-placeholder {
  color: #ffffff;
}
.footer__newslatter form input::-moz-placeholder {
  color: #ffffff;
}
.footer__newslatter form input:-ms-input-placeholder {
  color: #ffffff;
}
.footer__newslatter form input::-ms-input-placeholder {
  color: #ffffff;
}
.footer__newslatter form input::placeholder {
  color: #ffffff;
}
.footer__newslatter form button {
  font-size: 20px;
  color: #f08632;
  background: transparent;
  border: none;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  padding: 0 20px;
}

.footer p {
  color: #ffffff;
}
.footer .copyright .footer-company-name {
  color: var(--cc-copyright-text, #ffffff);
}

.copyright {
  background: var(--cc-copyright-bg, #96e0e0);
  padding: 18px 0 14px;
  margin-top: 40px;
}

.copyright__text {
  margin-bottom: 0;
  font-size: 14px;
  color: var(--cc-dark, #2c1515);
}
.copyright__text i {
  color: var(--cc-dark, #2c1515);
}
.copyright__text a {
  color: var(--cc-dark, #2c1515);
}

.copyright__widget {
  text-align: right;
}
.copyright__widget ul li {
  list-style: none;
  display: inline-block;
  margin-right: 30px;
  position: relative;
}
.copyright__widget ul li:after {
  position: absolute;
  right: -18px;
  top: 0;
  content: "|";
  color: #ffffff;
}
.copyright__widget ul li:last-child {
  margin-right: 0;
}
.copyright__widget ul li:last-child:after {
  display: none;
}
.copyright__widget ul li a {
  font-size: 14px;
  color: #ffffff;
}

/*---------------------
  Breadcrumb
-----------------------*/
.breadcrumb-option {
  padding-top: 14px;
  padding-bottom: 14px;
}

.breadcrumb__text h2 {
  font-size: 36px;
  color: var(--cc-fclr-heading, #3a1a1a);
  font-weight: 700;
  font-style: italic;
  font-family: 'Lato', sans-serif;
}

.breadcrumb__links {
  text-align: right;
  padding-top: 0;
}
.breadcrumb__links a {
  font-size: 14px;
  color: #111111;
  margin-right: 22px;
  display: inline-block;
  position: relative;
}
.breadcrumb__links a:after {
  position: absolute;
  right: -14px;
  top: 0;
  content: "|";
  color: #bbb;
}
.breadcrumb__links span {
  font-size: 14px;
  color: #aaa;
  display: inline-block;
}

/*---------------------
  About
-----------------------*/
.about__text p {
  margin-bottom: 0;
}

.about__bar .about__bar__item {
  margin-bottom: 40px;
}
.about__bar .about__bar__item p {
  color: #444444;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  margin-bottom: 10px;
}
.about__bar .about__bar__item .barfiller {
  width: 100%;
  height: 12px;
  background: #e1e1e1;
  border: none;
  position: relative;
  margin-bottom: 20px;
  -webkit-box-shadow: none;
          box-shadow: none;
  -moz-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5);
}
.about__bar .about__bar__item .barfiller .tip {
  margin-top: -36px;
  padding: 0;
  font-size: 16px;
  color: var(--cc-primary, #781717);
  font-weight: 600;
  background: none;
}
.about__bar .about__bar__item .barfiller .tip:after {
  display: none;
}

.about__video {
  height: 500px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 90px;
}
.about__video .play-btn {
  display: inline-block;
  width: 70px;
  height: 70px;
  background: #f08632;
  font-size: 24px;
  color: #ffffff;
  line-height: 70px;
  text-align: center;
  border-radius: 50%;
}

/*---------------------
  Shop
-----------------------*/
.shop {
  padding-top: 80px;
}

.shop__option {
  margin-bottom: 50px;
}

.shop__option__search form {
  background: var(--cc-shop-search-bg, #FFFFFF);
  border: 1.8px solid var(--cc-accent, #c47a85);
  border-radius: 50px;
  height: 52px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: visible;
  transition: box-shadow 0.25s;
}
/* Clip only the form background/border to pill shape, not the dropdown */
.shop__option__search form::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50px;
  pointer-events: none;
}
.shop__option__search form:focus-within {
  box-shadow: 0 4px 16px rgba(196, 122, 133, 0.18);
}
.shop__option__search form .nice-select {
  float: none;
  flex-shrink: 0;
  border: none;
  border-right: 1.5px solid var(--cc-accent, #c47a85);
  background: transparent;
  width: 200px;
  height: 100%;
  line-height: 50px;
  padding-left: 24px;
  padding-right: 40px;
  border-radius: 50px 0 0 50px;
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 600;
  color: #2a2a2a;
  letter-spacing: 0.4px;
}
.shop__option__search form .nice-select .list {
  margin-top: 2px;
  border-radius: 12px;
  width: 100%;
  border: 1.5px solid var(--cc-accent, #c47a85);
  box-shadow: 0 8px 24px rgba(196, 122, 133, 0.15);
  z-index: 9999;
  position: absolute;
  background: #fff;
}
.shop__option__search form .nice-select .option {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 600;
  color: #2a2a2a;
  letter-spacing: 0.4px;
}
.shop__option__search form .nice-select .option:hover,
.shop__option__search form .nice-select .option.selected {
  background: #fce8e8;
  color: var(--cc-accent, #c47a85);
}
.shop__option__search form .nice-select:before {
  display: none;
}
.shop__option__search form .nice-select:after {
  border-bottom: 1.5px solid var(--cc-accent, #c47a85);
  border-right: 1.5px solid var(--cc-accent, #c47a85);
  height: 7px;
  margin-top: -5px;
  width: 7px;
  right: 18px;
}
.shop__option__search form .nice-select span {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 600;
  color: #2a2a2a;
}
.shop__option__search form input {
  flex: 1;
  height: 100%;
  border: none;
  background: transparent;
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 500;
  color: #2a2a2a;
  padding-left: 22px;
  letter-spacing: 0.3px;
}
.shop__option__search form input::-webkit-input-placeholder { color: #b08890; }
.shop__option__search form input::-moz-placeholder          { color: #b08890; }
.shop__option__search form input:-ms-input-placeholder      { color: #b08890; }
.shop__option__search form input::placeholder               { color: #b08890; }
.shop__option__search form button {
  flex-shrink: 0;
  color: #fff;
  font-size: 15px;
  border: none;
  background: var(--cc-accent, #c47a85);
  height: 100%;
  padding: 0 22px;
  border-radius: 0 50px 50px 0;
  cursor: pointer;
  transition: background 0.22s;
}
.shop__option__search form button:hover {
  background: #a85e6e;
}

.shop__option__right {
  text-align: right;
}
.shop__option__right .nice-select {
  border: none;
  background: #f5f5f5;
  display: inline-block;
  width: 205px;
  height: 46px;
  line-height: 46px;
  padding-left: 30px;
  border-radius: 0;
  float: none;
  margin-right: 18px;
}
.shop__option__right .nice-select .list {
  margin-top: 0;
  border-radius: 0;
  width: 100%;
}
.shop__option__right .nice-select:after {
  border-bottom: 1px solid #888;
  border-right: 1px solid #888;
  height: 7px;
  margin-top: -5px;
  width: 7px;
  right: 26px;
}
.shop__option__right .nice-select span {
  font-size: 16px;
  color: #000000;
}
.shop__option__right a {
  display: inline-block;
  font-size: 18px;
  color: #000000;
  margin-left: 8px;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}
.shop__option__right a:hover {
  color: #888888;
}

.shop__pagination a {
  display: inline-block;
  color: #000000;
  font-size: 18px;
  font-weight: 600;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  line-height: 40px;
  text-align: center;
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}
.shop__pagination a span {
  font-size: 18px;
  font-weight: 600;
  position: relative;
  top: 2px;
}
.shop__pagination a:hover {
  background: #000000;
  color: #ffffff;
}

.shop__last__text {
  margin-bottom: 0;
  color: #000000;
  text-align: right;
}

/*---------------------
  Product Details
-----------------------*/
.product-details {
  padding-top: 90px;
  padding-bottom: 0;
}

.product__details__big__img {
  width: calc(84% - 20px);
  float: left;
  margin-right: 20px;
}
.product__details__big__img img {
  min-width: 100%;
}

.product__details__thumb {
  height: 440px;
  float: left;
  width: 16%;
  overflow: hidden;
}
.product__details__thumb .pt__item {
  margin-bottom: 10px;
  cursor: pointer;
}
.product__details__thumb .pt__item img {
  min-width: 100%;
}

.product__details__text .product__label {
  display: inline-block;
  font-size: 14px;
  color: #ffffff;
  background: #111111;
  padding: 6px 10px 4px;
  border-radius: 4px;
}
.product__details__text h4 {
  color: #111111;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 25px;
  margin-bottom: 22px;
}
.product__details__text h5 {
  color: #444444;
  font-size: 20px;
  font-weight: 600;
  border-bottom: 1px solid #e1e1e1;
  padding-bottom: 25px;
  margin-bottom: 20px;
}
.product__details__text p {
  color: #444444;
  margin-bottom: 18px;
}
.product__details__text ul {
  margin-bottom: 30px;
}
.product__details__text ul li {
  list-style: none;
  font-size: 16px;
  color: #888888;
  line-height: 28px;
}
.product__details__text ul li span {
  font-weight: 500;
  color: #111111;
}

.product__details__option {
  overflow: hidden;
}
.product__details__option .quantity {
  overflow: hidden;
  float: left;
  margin-right: 20px;
}
.product__details__option .pro-qty {
  height: 50px;
  width: 140px;
  border: 1px solid #e1e1e1;
  padding: 0 20px;
}
.product__details__option .pro-qty .qtybtn {
  font-size: 16px;
  float: left;
  height: 100%;
  line-height: 48px;
  cursor: pointer;
  font-weight: 600;
}
.product__details__option .pro-qty .qtybtn.dec {
  color: #888888;
}
.product__details__option .pro-qty .qtybtn.inc {
  color: #111111;
}
.product__details__option .pro-qty input {
  border: none;
  height: 100%;
  width: 82px;
  font-size: 16px;
  font-weight: 600;
  color: #111111;
  float: left;
  text-align: center;
}
.product__details__option a {
  float: left;
}
.product__details__option a.heart__btn {
  font-size: 20px;
  border: 1px solid #e1e1e1;
  display: inline-block;
  color: #f08632;
  padding: 14px;
  line-height: 16px;
}
.product__details__option .primary-btn {
  margin-right: 20px;
}

.product__details__tab {
  padding-top: 85px;
}
.product__details__tab .nav-tabs {
  border-bottom: 1px solid #e1e1e1;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.product__details__tab .nav-tabs .nav-item {
  margin-right: 45px;
  position: relative;
}
.product__details__tab .nav-tabs .nav-item:after {
  position: absolute;
  right: -25px;
  top: 0;
  content: "|";
  color: #444444;
}
.product__details__tab .nav-tabs .nav-item:last-child {
  margin-right: 0;
}
.product__details__tab .nav-tabs .nav-item:last-child:after {
  display: none;
}
.product__details__tab .nav-tabs .nav-item .nav-link {
  font-size: 16px;
  color: #444444;
  padding: 0;
  border: none;
  padding-bottom: 12px;
  border-bottom: 2px solid transparent;
}
.product__details__tab .nav-tabs .nav-item .nav-link.active {
  color: #111111;
  border-bottom: 1px solid #111111;
}
.product__details__tab .tab-content p {
  color: #444444;
  line-height: 30px;
  text-align: center;
  padding-top: 44px;
  margin-bottom: 0;
}

/*---------------------
  Related Products
-----------------------*/
.related-products {
  padding-top: 80px;
  padding-bottom: 40px;
}

.related__products__slider.owl-carousel .col-lg-3 {
  max-width: 100%;
}
.related__products__slider.owl-carousel .owl-nav button {
  font-size: 30px;
  color: #888888;
  position: absolute;
  left: -44px;
  top: 28%;
}
.related__products__slider.owl-carousel .owl-nav button.owl-next {
  left: auto;
  right: -44px;
}

/*---------------------
  Shopping Cart
-----------------------*/
.shopping__cart__table {
  margin-bottom: 30px;
}
.shopping__cart__table table {
  width: 100%;
}
.shopping__cart__table table thead {
  border-bottom: 1px solid #f2f2f2;
}
.shopping__cart__table table thead tr th {
  color: #111111;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  padding-bottom: 25px;
}
.shopping__cart__table table tbody tr {
  border-bottom: 1px solid #f2f2f2;
}
.shopping__cart__table table tbody tr td {
  padding-bottom: 30px;
  padding-top: 30px;
}
.shopping__cart__table table tbody tr td.product__cart__item {
  width: 400px;
}
.shopping__cart__table table tbody tr td.product__cart__item .product__cart__item__pic {
  float: left;
  margin-right: 30px;
}
.shopping__cart__table table tbody tr td.product__cart__item .product__cart__item__text {
  overflow: hidden;
  padding-top: 21px;
}
.shopping__cart__table table tbody tr td.product__cart__item .product__cart__item__text h6 {
  color: #111111;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.shopping__cart__table table tbody tr td.product__cart__item .product__cart__item__text h5 {
  color: #111111;
  font-weight: 600;
  font-size: 16px;
}
.shopping__cart__table table tbody tr td.quantity__item {
  width: 175px;
}
.shopping__cart__table table tbody tr td.quantity__item .quantity .pro-qty {
  width: 90px;
}
.shopping__cart__table table tbody tr td.quantity__item .quantity .pro-qty input {
  width: 65px;
  border: none;
  text-align: center;
  color: #111111;
  font-size: 16px;
  font-weight: 500;
}
.shopping__cart__table table tbody tr td.quantity__item .quantity .pro-qty .qtybtn {
  font-size: 16px;
  color: #888888;
  width: 10px;
  cursor: pointer;
  font-weight: 500;
}
.shopping__cart__table table tbody tr td.cart__price {
  color: #111111;
  font-size: 16px;
  font-weight: 600;
  width: 140px;
}
.shopping__cart__table table tbody tr td.cart__close span {
  font-size: 18px;
  display: inline-block;
  color: #111111;
  height: 40px;
  width: 40px;
  background: #f2f2f2;
  border-radius: 50%;
  line-height: 38px;
  text-align: center;
}

.continue__btn.update__btn {
  text-align: right;
}
.continue__btn.update__btn a {
  color: #ffffff;
  background: #111111;
  border-color: #111111;
}
.continue__btn.update__btn a i {
  margin-right: 5px;
}
.continue__btn a {
  color: #111111;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid #e1e1e1;
  padding: 14px 35px;
  display: inline-block;
}

.cart__discount {
  margin-bottom: 60px;
}
.cart__discount h6 {
  color: #111111;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 35px;
}
.cart__discount form {
  position: relative;
}
.cart__discount form input {
  font-size: 14px;
  color: #444444;
  height: 50px;
  width: 100%;
  border: 1px solid #e1e1e1;
  padding-left: 20px;
}
.cart__discount form input::-webkit-input-placeholder {
  color: #444444;
}
.cart__discount form input::-moz-placeholder {
  color: #444444;
}
.cart__discount form input:-ms-input-placeholder {
  color: #444444;
}
.cart__discount form input::-ms-input-placeholder {
  color: #444444;
}
.cart__discount form input::placeholder {
  color: #444444;
}
.cart__discount form button {
  font-size: 14px;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: #111111;
  padding: 0 30px;
  border: none;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
}

.cart__total {
  background: #fdf3ea;
  padding: 35px 40px 40px;
}
.cart__total h6 {
  color: #111111;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-weight: 600;
}
.cart__total ul {
  margin-bottom: 25px;
}
.cart__total ul li {
  list-style: none;
  font-size: 16px;
  color: #444444;
  font-weight: 500;
  line-height: 40px;
  overflow: hidden;
}
.cart__total ul li span {
  font-weight: 600;
  color: #e26b0c;
  float: right;
}
.cart__total .primary-btn {
  display: block;
  background: var(--cc-primary, #781717);
  color: #ffffff;
  padding: 12px 10px;
  text-align: center;
  letter-spacing: 2px;
}

/*---------------------
  Checkout
-----------------------*/
.coupon__code {
  color: #444444;
  font-size: 14px;
  border-top: 2px solid #111111;
  background: #f5f5f5;
  padding: 23px 30px 18px;
  margin-bottom: 50px;
}
.coupon__code span {
  color: #f08632;
}
.coupon__code a {
  color: #444444;
}

.checkout__title {
  color: #111111;
  font-weight: 600;
  text-transform: uppercase;
  border-bottom: 1px solid #e1e1e1;
  padding-bottom: 25px;
  margin-bottom: 30px;
}

.checkout__input {
  margin-bottom: 6px;
}
.checkout__input p {
  color: #444444;
  font-weight: 500;
  margin-bottom: 12px;
}
.checkout__input p span {
  color: #f08632;
}
.checkout__input input {
  height: 50px;
  width: 100%;
  border: 1px solid #e1e1e1;
  font-size: 14px;
  color: #666666;
  padding-left: 20px;
  margin-bottom: 20px;
}
.checkout__input input::-webkit-input-placeholder {
  color: #666666;
}
.checkout__input input::-moz-placeholder {
  color: #666666;
}
.checkout__input input:-ms-input-placeholder {
  color: #666666;
}
.checkout__input input::-ms-input-placeholder {
  color: #666666;
}
.checkout__input input::placeholder {
  color: #666666;
}

.checkout__input__checkbox label {
  font-size: 14px;
  color: #444444;
  position: relative;
  padding-left: 30px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 16px;
  display: block;
}
.checkout__input__checkbox label input {
  position: absolute;
  visibility: hidden;
}
.checkout__input__checkbox label input:checked ~ .checkmark {
  border-color: #f08632;
}
.checkout__input__checkbox label input:checked ~ .checkmark:after {
  opacity: 1;
}
.checkout__input__checkbox label .checkmark {
  position: absolute;
  left: 0;
  top: 3px;
  height: 14px;
  width: 14px;
  border: 1.5px solid #888888;
  content: "";
  border-radius: 2px;
}
.checkout__input__checkbox label .checkmark:after {
  position: absolute;
  left: 1px;
  top: -3px;
  width: 14px;
  height: 7px;
  border: solid #f08632;
  border-width: 1.5px 1.5px 0px 0px;
  -webkit-transform: rotate(127deg);
  -ms-transform: rotate(127deg);
  transform: rotate(127deg);
  content: "";
  opacity: 0;
}
.checkout__input__checkbox p {
  color: #666666;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 22px;
}

.checkout__order {
  background: #fdf3ea;
  padding: 30px;
}
.checkout__order .order__title {
  color: #111111;
  font-weight: 600;
  text-transform: uppercase;
  border-bottom: 1px solid #d7d7d7;
  padding-bottom: 25px;
  margin-bottom: 30px;
}
.checkout__order p {
  color: #444444;
  font-size: 16px;
}
.checkout__order .site-btn {
  width: 100%;
  margin-top: 8px;
  letter-spacing: 0;
}

.checkout__order__products {
  font-size: 16px;
  color: #111111;
  overflow: hidden;
  margin-bottom: 18px;
  font-weight: 600;
}
.checkout__order__products span {
  float: right;
}

.checkout__total__products {
  margin-bottom: 20px;
}
.checkout__total__products li {
  font-size: 16px;
  color: #444444;
  list-style: none;
  line-height: 26px;
  overflow: hidden;
  margin-bottom: 15px;
  font-weight: 500;
}
.checkout__total__products li:last-child {
  margin-bottom: 0;
}
.checkout__total__products li samp {
   font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 600;
}
.checkout__total__products li span {
  color: #111111;
  float: right;
  font-weight: 600;
}

.checkout__total__all {
  border-top: 1px solid #d7d7d7;
  border-bottom: 1px solid #d7d7d7;
  padding: 15px 0;
  margin-bottom: 26px;
}
.checkout__total__all li {
  list-style: none;
  font-size: 16px;
  color: #111111;
  line-height: 40px;
  font-weight: 600;
  overflow: hidden;
}
.checkout__total__all li span {
  color: #f08632;
  float: right;
}

/*---------------------
  Wishlist
-----------------------*/
.wishlist__cart__table table {
  width: 100%;
}
.wishlist__cart__table table thead {
  border-bottom: 1px solid #f2f2f2;
}
.wishlist__cart__table table thead tr th {
  color: #111111;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  padding-bottom: 25px;
}
.wishlist__cart__table table tbody tr {
  border-bottom: 1px solid #f2f2f2;
}
.wishlist__cart__table table tbody tr:last-child {
  border-bottom: none;
}
.wishlist__cart__table table tbody tr:last-child td {
  padding-bottom: 0;
}
.wishlist__cart__table table tbody tr td {
  padding-bottom: 30px;
  padding-top: 30px;
}
.wishlist__cart__table table tbody tr td.product__cart__item {
  width: 540px;
}
.wishlist__cart__table table tbody tr td.product__cart__item .product__cart__item__pic {
  float: left;
  margin-right: 30px;
}
.wishlist__cart__table table tbody tr td.product__cart__item .product__cart__item__text {
  overflow: hidden;
  padding-top: 35px;
}
.wishlist__cart__table table tbody tr td.product__cart__item .product__cart__item__text h6 {
  color: #111111;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.wishlist__cart__table table tbody tr td.cart__price {
  color: #111111;
  font-size: 16px;
  font-weight: 600;
  width: 180px;
}
.wishlist__cart__table table tbody tr td.cart__stock {
  font-size: 16px;
  color: #444444;
  width: 150px;
}
.wishlist__cart__table table tbody tr td.cart__btn {
  width: 190px;
}
.wishlist__cart__table table tbody tr td.cart__btn .primary-btn {
  background: #111111;
  color: #ffffff;
}
.wishlist__cart__table table tbody tr td.cart__close {
  text-align: right;
}
.wishlist__cart__table table tbody tr td.cart__close span {
  font-size: 18px;
  display: inline-block;
  color: #111111;
  height: 40px;
  width: 40px;
  background: #f2f2f2;
  border-radius: 50%;
  line-height: 38px;
  text-align: center;
}

/*---------------------
  Class
-----------------------*/
.class__item {
  margin-bottom: 55px;
}
.class__item:hover .class__item__pic .label {
  background: #f08632;
}
.class__item:hover .class__item__text h5 a {
  text-decoration: underline;
}

.class__item__pic {
  height: 240px;
  position: relative;
}
.class__item__pic .label {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background: #111111;
  padding: 4px 15px 2px;
  border-radius: 4px;
  display: inline-block;
  position: absolute;
  left: 30px;
  bottom: 10px;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}

.class__item__text {
  padding: 25px 14px 0 30px;
}
.class__item__text h5 {
  margin-bottom: 10px;
}
.class__item__text h5 a {
  font-size: 20px;
  color: #111111;
  font-weight: 600;
  text-transform: uppercase;
}
.class__item__text span {
  font-size: 14px;
  color: #888888;
  display: block;
  margin-bottom: 14px;
}
.class__item__text p {
  color: #444444;
  line-height: 30px;
}
.class__item__text .read_more {
  font-size: 16px;
  color: #f08632;
  font-weight: 600;
}

.class__sidebar {
  background: #fdf3ea;
  padding: 30px;
}
.class__sidebar h5 {
  font-size: 20px;
  color: #111111;
  line-height: 28px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 25px;
}
.class__sidebar form input {
  height: 50px;
  width: 100%;
  padding-left: 20px;
  font-size: 15px;
  color: #444444;
  background: #ffffff;
  border: none;
  margin-bottom: 20px;
}
.class__sidebar form input::-webkit-input-placeholder {
  color: #444444;
}
.class__sidebar form input::-moz-placeholder {
  color: #444444;
}
.class__sidebar form input:-ms-input-placeholder {
  color: #444444;
}
.class__sidebar form input::-ms-input-placeholder {
  color: #444444;
}
.class__sidebar form input::placeholder {
  color: #444444;
}
.class__sidebar form .nice-select {
  float: none;
  border-radius: 0;
  border: none;
  padding-left: 20px;
  margin-bottom: 20px;
  height: 50px;
  line-height: 50px;
}
.class__sidebar form .nice-select span {
  font-size: 15px;
  color: #444444;
}
.class__sidebar form .nice-select .list {
  margin-top: 0;
  border-radius: 0;
  width: 100%;
}
.class__sidebar form .nice-select:after {
  border-bottom: 1.5px solid #111;
  border-right: 1.5px solid #111;
  height: 9px;
  right: 25px;
  width: 9px;
}
.class__sidebar form button {
  letter-spacing: 2px;
  width: 100%;
}

/*---------------------
    Blog
-----------------------*/
.blog {
  overflow: hidden;
}

.blog__item {
  margin-bottom: 70px;
}

.blog__item__pic {
  height: 385px;
  position: relative;
}
.blog__item__pic .blog__pic__inner {
  background: #ffffff;
  position: absolute;
  left: 0;
  bottom: -15px;
  width: calc(100% - 40px);
  padding: 30px 0 0;
}
.blog__item__pic .blog__pic__inner .label {
  font-size: 14px;
  color: #ffffff;
  font-weight: 600;
  background: #f08632;
  display: inline-block;
  padding: 4px 15px 2px;
}
.blog__item__pic .blog__pic__inner ul {
  display: inline-block;
  margin-left: 25px;
}
.blog__item__pic .blog__pic__inner ul li {
  list-style: none;
  font-size: 12px;
  color: #888888;
  display: inline-block;
  margin-right: 20px;
  position: relative;
}
.blog__item__pic .blog__pic__inner ul li span {
  color: #111111;
}
.blog__item__pic .blog__pic__inner ul li:after {
  position: absolute;
  right: -14px;
  top: 0;
  content: "|";
}
.blog__item__pic .blog__pic__inner ul li:last-child {
  margin-right: 0;
}
.blog__item__pic .blog__pic__inner ul li:last-child:after {
  display: none;
}

.blog__item__text {
  padding-top: 42px;
}
.blog__item__text h2 {
   font-family: 'Lato', sans-serif;
  color: #111111;
  font-style: italic;
  margin-bottom: 20px;
  font-size: 48px;
}
.blog__item__text p {
  color: #444444;
  margin-bottom: 26px;
}
.blog__item__text a {
  color: #111111;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 2px solid #f08632;
}

/*---------------------
  Blog Sidebar
-----------------------*/
.blog__sidebar__search {
  margin-bottom: 65px;
}
.blog__sidebar__search form {
  position: relative;
}
.blog__sidebar__search form input {
  height: 50px;
  width: 100%;
  font-size: 14px;
  color: #444444;
  padding-left: 20px;
  border: 1px solid #e1e1e1;
}
.blog__sidebar__search form input::-webkit-input-placeholder {
  color: #444444;
}
.blog__sidebar__search form input::-moz-placeholder {
  color: #444444;
}
.blog__sidebar__search form input:-ms-input-placeholder {
  color: #444444;
}
.blog__sidebar__search form input::-ms-input-placeholder {
  color: #444444;
}
.blog__sidebar__search form input::placeholder {
  color: #444444;
}
.blog__sidebar__search form button {
  font-size: 18px;
  color: #111111;
  border: none;
  background: transparent;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  padding: 0 18px;
}

.blog__sidebar__item {
  margin-bottom: 65px;
}
.blog__sidebar__item:last-child {
  margin-bottom: 0;
}
.blog__sidebar__item h5 {
  font-size: 20px;
  color: #111111;
  font-weight: 600;
  text-transform: uppercase;
  padding-left: 20px;
  position: relative;
  margin-bottom: 35px;
}
.blog__sidebar__item h5:before {
  position: absolute;
  left: 0;
  top: 5px;
  height: 14px;
  width: 10px;
  background: rgba(226, 108, 12, 0.3);
  content: "";
}
.blog__sidebar__item .blog__sidebar__social a {
  display: inline-block;
  font-size: 16px;
  color: #111111;
  height: 46px;
  width: 46px;
  border-radius: 50%;
  background: #f2f2f2;
  line-height: 46px;
  text-align: center;
  margin-right: 6px;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}
.blog__sidebar__item .blog__sidebar__social a:hover {
  background: #111111;
  color: #ffffff;
}
.blog__sidebar__item .blog__sidebar__social a:last-child {
  margin-right: 0;
}
.blog__sidebar__item .blog__sidebar__item__categories ul li {
  list-style: none;
  line-height: 36px;
  overflow: hidden;
}
.blog__sidebar__item .blog__sidebar__item__categories ul li:hover a {
  text-decoration: line-through;
}
.blog__sidebar__item .blog__sidebar__item__categories ul li:hover a span {
  color: #f08632;
}
.blog__sidebar__item .blog__sidebar__item__categories ul li a {
  font-size: 16px;
  color: #444444;
}
.blog__sidebar__item .blog__sidebar__item__categories ul li a span {
  float: right;
}
.blog__sidebar__item p {
  margin-bottom: 25px;
}
.blog__sidebar__item form input {
  height: 50px;
  width: 100%;
  font-size: 14px;
  color: #444444;
  padding-left: 20px;
  border: 1px solid #e1e1e1;
  margin-bottom: 20px;
}
.blog__sidebar__item form input::-webkit-input-placeholder {
  color: #444444;
}
.blog__sidebar__item form input::-moz-placeholder {
  color: #444444;
}
.blog__sidebar__item form input:-ms-input-placeholder {
  color: #444444;
}
.blog__sidebar__item form input::-ms-input-placeholder {
  color: #444444;
}
.blog__sidebar__item form input::placeholder {
  color: #444444;
}
.blog__sidebar__item form label {
  font-size: 14px;
  color: #444444;
  position: relative;
  padding-left: 30px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 22px;
  display: block;
}
.blog__sidebar__item form label input {
  position: absolute;
  visibility: hidden;
}
.blog__sidebar__item form label input:checked ~ .checkmark {
  border-color: #f08632;
}
.blog__sidebar__item form label input:checked ~ .checkmark:after {
  opacity: 1;
}
.blog__sidebar__item form label .checkmark {
  position: absolute;
  left: 0;
  top: 3px;
  height: 14px;
  width: 14px;
  border: 1.5px solid #888888;
  content: "";
  border-radius: 2px;
}
.blog__sidebar__item form label .checkmark:after {
  position: absolute;
  left: 1px;
  top: -3px;
  width: 14px;
  height: 7px;
  border: solid #f08632;
  border-width: 1.5px 1.5px 0px 0px;
  -webkit-transform: rotate(127deg);
  -ms-transform: rotate(127deg);
  transform: rotate(127deg);
  content: "";
  opacity: 0;
}

.blog__sidebar__recent .blog__sidebar__recent__item:last-child {
  margin-bottom: 0;
}

.blog__sidebar__recent__item {
  display: block;
  overflow: hidden;
  margin-bottom: 20px;
}

.blog__sidebar__recent__item__pic {
  float: left;
  margin-right: 25px;
}

.blog__sidebar__recent__item__text {
  overflow: hidden;
}
.blog__sidebar__recent__item__text h4 {
  font-size: 20px;
  color: #111111;
  line-height: 26px;
  font-style: italic;
   font-family: 'Lato', sans-serif;
  margin-bottom: 8px;
}
.blog__sidebar__recent__item__text span {
  font-size: 12px;
  color: #888888;
}

/*---------------------
  Blog Hero
-----------------------*/
.blog-hero {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 640px;
}

.blog__hero__text {
  background: #ffffff;
  text-align: center;
  padding: 50px 20px 45px;
}
.blog__hero__text .label {
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
  background: #111111;
  display: inline-block;
  padding: 4px 15px;
}
.blog__hero__text h2 {
  font-size: 46px;
   font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-style: italic;
  color: #111111;
  margin: 20px 0;
}
.blog__hero__text ul li {
  list-style: none;
  font-size: 12px;
  color: #888888;
  display: inline-block;
  margin-right: 20px;
  position: relative;
}
.blog__hero__text ul li:after {
  position: absolute;
  right: -14px;
  top: 0;
  content: "|";
}
.blog__hero__text ul li span {
  color: #111111;
}
.blog__hero__text ul li:last-child {
  margin-right: 0;
}
.blog__hero__text ul li:last-child:after {
  display: none;
}

/*---------------------
  Blog Details
-----------------------*/
.blog-details {
  padding-top: 70px;
  padding-bottom: 90px;
}

.blog__details__content {
  position: relative;
}

.blog__details__share {
  width: 46px;
  position: absolute;
  left: -70px;
  top: 0;
}
.blog__details__share a {
  font-size: 16px;
  color: #ffffff;
  height: 46px;
  width: 46px;
  border-radius: 50%;
  line-height: 46px;
  text-align: center;
  display: block;
  margin-bottom: 10px;
}
.blog__details__share a.facebook {
  background: #3263af;
}
.blog__details__share a.twitter {
  background: #40c4ff;
}
.blog__details__share a.youtube {
  background: #ff0000;
}
.blog__details__share a.instagram {
  background: -webkit-gradient(linear, left top, right top, from(#af00e1), to(#ff9e35));
  background: -o-linear-gradient(left, #af00e1, #ff9e35);
  background: linear-gradient(to right, #af00e1, #ff9e35);
}

.blog__details__text p {
  color: #444444;
  margin-bottom: 30px;
}
.blog__details__text p:last-child {
  margin-bottom: 0;
}

.blog__details__recipe {
  padding: 25px 70px 20px;
  overflow: hidden;
  background: #f5f5f5;
  margin-top: 40px;
  margin-bottom: 50px;
}

.blog__details__recipe__item {
  width: 33.33%;
  float: left;
}
.blog__details__recipe__item h6 {
  color: #111111;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.blog__details__recipe__item h6 img {
  margin-right: 8px;
}
.blog__details__recipe__item span {
  font-size: 14px;
  color: #888888;
}

.blog__details__recipe__details {
  margin-bottom: 38px;
}

.blog__details__ingredients h6 {
  color: #111111;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}
.blog__details__ingredients ul li {
  list-style: none;
  font-size: 16px;
  color: #444444;
  line-height: 30px;
  letter-spacing: 1px;
  padding-left: 40px;
  position: relative;
}
.blog__details__ingredients ul li span {
  font-weight: 600;
  position: absolute;
  left: 0;
  top: -5px;
}

.blog__details__direction {
  margin-bottom: 40px;
}
.blog__details__direction h6 {
  color: #111111;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}
.blog__details__direction ul li {
  list-style: none;
  font-size: 16px;
  color: #444444;
  line-height: 30px;
  letter-spacing: 1px;
  padding-left: 40px;
  position: relative;
}
.blog__details__direction ul li span {
  position: absolute;
  left: 0;
  top: 0;
}

.blog__details__print {
  margin-bottom: 40px;
}
.blog__details__print .primary-btn {
  background: transparent;
  border: 1px solid #f08632;
  color: #111111;
}
.blog__details__print .primary-btn i {
  font-size: 18px;
}

.blog__details__tags {
  padding-top: 30px;
  border-top: 1px solid #e8eff4;
  margin-top: 40px;
  margin-bottom: 60px;
}
.blog__details__tags span {
  font-size: 16px;
  color: #111111;
  font-weight: 600;
  display: inline-block;
  margin-right: 25px;
}
.blog__details__tags a {
  font-size: 14px;
  color: #444444;
  background: #f2f2f2;
  display: inline-block;
  padding: 7px 15px 5px;
  margin-right: 10px;
}
.blog__details__tags a:last-child {
  margin-right: 0;
}

.blog__details__btns {
  margin-bottom: 40px;
}

.blog__details__btns__item {
  margin-bottom: 20px;
}
.blog__details__btns__item.blog__details__btns__item--next {
  text-align: right;
}
.blog__details__btns__item.blog__details__btns__item--next a span {
  margin-right: 0;
  margin-left: 5px;
}
.blog__details__btns__item a {
  font-size: 16px;
  color: #111111;
  font-weight: 600;
  text-transform: uppercase;
}
.blog__details__btns__item a span {
  font-size: 24px;
  color: #444444;
  position: relative;
  top: 4px;
  margin-right: 5px;
}

.blog__details__author {
  position: relative;
  background: #fdf3ea;
  overflow: hidden;
  padding: 50px;
  margin-bottom: 85px;
}

.blog__details__author__pic {
  float: left;
  margin-right: 30px;
}
.blog__details__author__pic img {
  height: 90px;
  width: 90px;
  border-radius: 50%;
}

.blog__details__author__text {
  overflow: hidden;
}
.blog__details__author__text h6 {
  color: #111111;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 25px;
}
.blog__details__author__text .blog__details__author__social {
  position: absolute;
  right: 50px;
  top: 45px;
}
.blog__details__author__text .blog__details__author__social a {
  font-size: 16px;
  color: #111111;
  display: inline-block;
  margin-right: 16px;
}
.blog__details__author__text .blog__details__author__social a:last-child {
  margin-right: 0;
}
.blog__details__author__text p {
  margin-bottom: 0;
  line-height: 24px;
  color: #444444;
}

.blog__details__comment {
  position: relative;
}
.blog__details__comment h5 {
  font-size: 20px;
  color: #111111;
  font-weight: 600;
  text-transform: uppercase;
  padding-left: 20px;
  position: relative;
  margin-bottom: 45px;
}
.blog__details__comment h5:before {
  position: absolute;
  left: 0;
  top: 5px;
  height: 14px;
  width: 10px;
  background: rgba(226, 108, 12, 0.3);
  content: "";
}
.blog__details__comment .primary-btn {
  background: rgba(226, 108, 12, 0.2);
  color: #111111;
  position: absolute;
  right: 0;
  top: -12px;
}

.blog__details__comment__item {
  overflow: hidden;
  margin-bottom: 45px;
}
.blog__details__comment__item:last-child {
  margin-bottom: 0;
}

.blog__details__comment__item--reply {
  padding-left: 50px;
}

.blog__details__comment__item__pic {
  float: left;
  margin-right: 30px;
}
.blog__details__comment__item__pic img {
  height: 90px;
  width: 90px;
  border-radius: 50%;
}

.blog__details__comment__item__text {
  position: relative;
  overflow: hidden;
}
.blog__details__comment__item__text h6 {
  font-size: 16px;
  color: #111111;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.blog__details__comment__item__text span {
  font-size: 14px;
  color: #888888;
  display: block;
  margin-bottom: 14px;
}
.blog__details__comment__item__text p {
  color: #444444;
  margin-bottom: 0;
}
.blog__details__comment__item__text .blog__details__comment__btns {
  position: absolute;
  right: 0;
  top: 20px;
}
.blog__details__comment__item__text .blog__details__comment__btns a {
  font-size: 14px;
  color: #111111;
  text-transform: uppercase;
  font-weight: 600;
  margin-right: 24px;
  position: relative;
}
.blog__details__comment__item__text .blog__details__comment__btns a:after {
  position: absolute;
  right: -16px;
  top: -2px;
  content: "|";
  color: #888888;
  font-weight: 500;
}
.blog__details__comment__item__text .blog__details__comment__btns a:last-child {
  margin-right: 0;
}
.blog__details__comment__item__text .blog__details__comment__btns a:last-child:after {
  display: none;
}

/*---------------------
  Contact
-----------------------*/
.contact .map {
  height: 400px;
  margin-bottom: 70px;
}

.contact__address {
  padding-bottom: 40px;
  border-bottom: 1px solid #e8eff4;
  margin-bottom: 70px;
}

.contact__address__item {
  margin-bottom: 30px;
}
.contact__address__item h6 {
  color: #111111;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 25px;
}
.contact__address__item ul li {
  list-style: none;
  margin-bottom: 20px;
  overflow: hidden;
}
.contact__address__item ul li:last-child {
  margin-bottom: 0;
}
.contact__address__item ul li span {
  font-size: 24px;
  color: #111111;
  margin-right: 25px;
  float: left;
}
.contact__address__item ul li p {
  font-size: 14px;
  color: #444444;
  line-height: 26px;
  margin-bottom: 0;
  overflow: hidden;
}

.contact__text h3 {
  color: #111111;
  font-weight: 700;
  font-style: italic;
   font-family: 'Lato', sans-serif;
  margin-bottom: 20px;
}
.contact__text ul {
  margin-bottom: 35px;
}
.contact__text ul li {
  list-style: none;
  font-size: 16px;
  color: #444444;
  line-height: 36px;
}

.contact__form form input {
  width: 100%;
  height: 50px;
  border: 1px solid #e1e1e1;
  background: #fafafa;
  font-size: 14px;
  color: #111111;
  padding-left: 20px;
  margin-bottom: 30px;
}
.contact__form form input:last-child {
  color: #111111;
}
.contact__form form textarea {
  width: 100%;
  height: 140px;
  border: 1px solid #e1e1e1;
  background: #fafafa;
  font-size: 14px;
  color: #111111;
  padding-left: 20px;
  padding-top: 12px;
  margin-bottom: 24px;
  resize: none;
}
.contact__form form textarea:last-child {
  color: #111111;
}

/*--------------------------------- Responsive Media Quaries -----------------------------*/
@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}
/* Medium Device = 1200px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .categories__slider.owl-carousel .owl-nav button {
    left: 0;
  }

  .categories__slider.owl-carousel .owl-nav button.owl-next {
    right: 0;
  }

  .instagram__text {
    padding-top: 40px;
  }

  .shop__option__search form .nice-select {
    width: 180px;
  }

  .related__products__slider.owl-carousel .owl-nav button {
    left: -15px;
  }

  .related__products__slider.owl-carousel .owl-nav button {
    font-size: 30px;
    color: #888888;
    position: absolute;
    left: -15px;
    top: 28%;
  }

  .related__products__slider.owl-carousel .owl-nav button.owl-next {
    right: -15px;
  }

  .footer__widget:after {
    right: 0px;
  }

  .shopping__cart__table table tbody tr td.product__cart__item .product__cart__item__text {
    padding-top: 10px;
  }

  .wishlist__cart__table table tbody tr td.cart__btn .primary-btn {
    padding: 14px 20px;
  }

  .blog__details__recipe {
    padding: 25px 40px 20px;
  }
}
/* Tablet Device = 768px */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__menu ul li a {
    padding: 20px 28px 18px;
  }

  .header__top__left ul li {
    margin-right: 20px;
  }

  .header__top__left ul li:after {
    right: -13px;
  }

  .hero__slider.owl-carousel .owl-nav button {
    left: 0;
  }

  .hero__slider.owl-carousel .owl-nav button.owl-next {
    right: 0;
  }

  .categories__slider.owl-carousel .owl-nav button {
    left: -20px;
  }

  .categories__slider.owl-carousel .owl-nav button.owl-next {
    right: -20px;
  }

  .class {
    padding-bottom: 100px;
  }

  .class__form {
    height: auto;
    margin-bottom: 50px;
  }

  .class__video {
    width: 100%;
    position: relative;
    right: 0;
    top: 0;
  }

  .testimonial__item .rating {
    position: relative;
    right: 0;
    top: 0;
    margin-bottom: 20px;
  }

  .testimonial__item {
    padding: 40px 35px 35px 35px;
  }

  .instagram__text {
    padding-top: 0;
    margin-bottom: 100px;
  }

  .footer__newslatter {
    padding-left: 0;
  }

  .copyright__text {
    margin-bottom: 15px;
    text-align: center;
  }

  .copyright__widget {
    text-align: center;
  }

  .footer__widget:after {
    display: none;
  }

  .footer__about:after {
    display: none;
  }

  .shop__option__search form .nice-select {
    width: 160px;
  }

  .shop__option__right .nice-select {
    margin-right: 5px;
  }

  .related__products__slider.owl-carousel .owl-nav button {
    left: -20px;
  }

  .related__products__slider.owl-carousel .owl-nav button.owl-next {
    right: -20px;
  }

  .product__details__text {
    padding-top: 40px;
  }

  .cart__discount {
    padding-top: 40px;
  }

  .class__sidebar {
    margin-top: 40px;
  }

  .blog__sidebar {
    padding-top: 50px;
  }

  .blog__details__share {
    width: auto;
    position: relative;
    left: 0;
    top: 0;
    margin-bottom: 40px;
  }

  .blog__details__share a {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 6px;
  }
  .blog__details__share a:last-child {
    margin-right: 0;
  }

  .blog__details__ingredients {
    margin-bottom: 25px;
  }

  .contact__text {
    margin-bottom: 40px;
  }

  .blog__details__ingredients__pic img {
    min-width: 100%;
  }
}
/* Wide Mobile = 480px */
@media only screen and (max-width: 767px) {
  .canvas__open {
    display: block;
    font-size: 22px;
    color: #111111;
    height: 35px;
    width: 35px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #111111;
    border-radius: 2px;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 34px;
  }

  .offcanvas-menu-overlay {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    content: "";
    z-index: 98;
    -webkit-transition: all, 0.5s;
    -o-transition: all, 0.5s;
    transition: all, 0.5s;
    visibility: hidden;
  }

  .offcanvas-menu-overlay.active {
    visibility: visible;
  }

  /* Drawer slides from the RIGHT — the hamburger sits at the right
     edge of the header, so a left-side shutter felt unnatural.
     left:auto neutralizes the template's left-based rules in
     style.css (this file loads later and wins). */
  .offcanvas-menu-wrapper {
    position: fixed;
    left: auto;
    right: -300px;
    width: 300px;
    height: 100%;
    background: #ffffff;
    padding: 50px 20px 30px 30px;
    display: block;
    z-index: 99;
    overflow-y: auto;
    -webkit-transition: all, 0.5s;
    -o-transition: all, 0.5s;
    transition: all, 0.5s;
    opacity: 0;
  }

  .offcanvas-menu-wrapper.active {
    opacity: 1;
    left: auto;
    right: 0;
  }

  .offcanvas__menu {
    display: none;
  }

  .slicknav_btn {
    display: none;
  }

  .slicknav_menu {
    background: transparent;
    padding: 0;
    margin-bottom: 30px;
  }

  .slicknav_nav ul {
    margin: 0;
  }

  .slicknav_nav .slicknav_row,
.slicknav_nav a {
    padding: 7px 0;
    margin: 0;
    color: #111111;
    font-weight: 600;
  }

  .slicknav_nav .slicknav_arrow {
    color: #111111;
  }

  .slicknav_nav .slicknav_row:hover {
    border-radius: 0;
    background: transparent;
    color: #111111;
  }

  .slicknav_nav a:hover {
    border-radius: 0;
    background: transparent;
    color: #111111;
  }

  .slicknav_nav {
    display: block !important;
  }


  .categories__slider.owl-carousel .owl-nav button {
    left: 0;
  }

  .categories__slider.owl-carousel .owl-nav button.owl-next {
    right: 0;
  }

  .class {
    padding-bottom: 100px;
  }

  .class__form {
    height: auto;
    margin-bottom: 50px;
  }

  .class__video {
    width: 100%;
    position: relative;
    right: 0;
    top: 0;
  }

  .instagram__text {
    padding-top: 0;
    margin-bottom: 100px;
    padding: 0 15px;
  }

  .instagram__pic.middle__pic {
    padding-top: 0;
    margin-bottom: 30px;
  }

  .footer__widget:after {
    display: none;
  }

  .footer__about:after {
    display: none;
  }

  .footer__newslatter {
    padding-left: 0;
  }

  .footer__about {
    text-align: left;
  }

  .copyright__text {
    margin-bottom: 15px;
    text-align: center;
  }

  .copyright__widget {
    text-align: center;
  }

  .categories__slider.owl-carousel.owl-loaded.owl-drag {
    padding: 0 15px;
  }

  .shop__option__search form {
    margin-bottom: 30px;
  }

  .shop__option__right {
    text-align: center;
  }

  .related__products__slider.owl-carousel .owl-nav {
    width: 100%;
    text-align: center;
  }

  .related__products__slider.owl-carousel .owl-nav button {
    position: relative;
    left: 0;
    bottom: 0;
  }

  .shopping__cart__table {
    overflow-x: auto;
  }

  .related__products__slider.owl-carousel .owl-nav button.owl-next {
    left: 5px;
  }

  .shopping__cart__table table tbody tr td.product__cart__item .product__cart__item__pic {
    float: none;
    margin-right: 0;
  }

  .shopping__cart__table table tbody tr td.product__cart__item {
    width: auto;
  }

  .shopping__cart__table table tbody tr td.quantity__item {
    width: auto;
  }

  .shopping__cart__table table tbody tr td.cart__price {
    width: auto;
  }

  .wishlist__cart__table {
    overflow-x: auto;
  }

  .wishlist__cart__table table tbody tr td.product__cart__item .product__cart__item__pic {
    float: none;
    margin-right: 0;
  }

  .wishlist__cart__table table tbody tr td.product__cart__item {
    width: auto;
  }

  .wishlist__cart__table table tbody tr td.quantity__item {
    width: auto;
  }

  .wishlist__cart__table table tbody tr td.cart__price {
    width: auto;
  }

  .cart__discount {
    padding-top: 40px;
  }

  .continue__btn a {
    padding: 14px 20px;
  }

  .checkout__order {
    margin-top: 20px;
  }

  .class__sidebar {
    margin-top: 20px;
  }

  .blog__sidebar {
    padding-top: 30px;
  }

  .blog__details__recipe {
    padding: 25px 20px 20px;
  }

  .blog__details__ingredients {
    margin-bottom: 25px;
  }

  .blog__details__ingredients__pic img {
    min-width: 100%;
  }

  .blog__details__author__text .blog__details__author__social {
    position: relative;
    right: 0;
    top: 0;
    margin-bottom: 15px;
  }

  .blog__details__author {
    padding: 40px 30px;
  }

  .blog__details__comment__item--reply {
    padding-left: 0;
  }

  .contact__text {
    margin-bottom: 40px;
  }

  .about__text {
    margin-bottom: 40px;
  }

  .hero__slider.owl-carousel .owl-nav button {
    left: 0;
  }

  .hero__slider.owl-carousel .owl-nav button.owl-next {
    right: 0;
  }

  .product__details__tab .nav-tabs .nav-item {
    margin-right: 20px;
  }

  .product__details__tab .nav-tabs .nav-item:after {
    right: -12px;
  }

  .blog__sidebar {
    padding-top: 50px;
  }

  .blog__details__share {
    width: auto;
    position: relative;
    left: 0;
    top: 0;
    margin-bottom: 40px;
  }

  .blog__details__share a {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 6px;
  }
  .blog__details__share a:last-child {
    margin-right: 0;
  }

  .blog__details__recipe__item {
    width: 50%;
    float: left;
    margin-bottom: 30px;
  }

  .product__details__big__img {
    float: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .product__details__big__img img {
    height: auto;
  }

  .product__details__thumb {
    height: auto;
    float: none;
    width: 100%;
    margin-right: -10px;
  }
  .product__details__thumb .pt__item {
    width: calc(20% - 10px);
    float: left;
    margin-right: 10px;
    margin-bottom: 0;
  }

  .product__details__text {
    padding-top: 16px;
  }

  .search-model-form input {
    width: 100%;
  }
}
@media only screen and (max-width: 575px) {
  .team__btn {
    text-align: left;
    margin-bottom: 40px;
  }

  .shop__pagination {
    text-align: center;
    margin-bottom: 20px;
  }

  .shop__last__text {
    text-align: center;
  }

  .continue__btn {
    text-align: center;
  }

  .continue__btn.update__btn {
    text-align: center;
    margin-top: 20px;
  }

  .breadcrumb__links {
    text-align: right;
    padding-top: 0;
  }
}
/* Small Device = 320px */
@media only screen and (max-width: 479px) {
  .section-title h2,
.blog__hero__text h2,
.blog__item__text h2 {
    font-size: 28px;
    line-height: normal;
  }

  .hero__text {
    padding: 40px 25px 50px;
  }

  .hero__text h2 {
    font-size: 34px;
    line-height: 45px;
  }

  .categories__item {
    margin: 0 auto;
  }

  .testimonial__item .rating {
    position: relative;
    right: 0;
    top: 0;
    margin-bottom: 20px;
  }

  .testimonial__item {
    padding: 30px 25px 25px 30px;
  }

  .product__details__option .quantity {
    margin-bottom: 20px;
  }

  .cart__total {
    padding: 30px 20px 30px;
  }

  .blog__item__pic .blog__pic__inner ul {
    display: block;
    margin-left: 0;
    margin-top: 15px;
  }

  .blog__details__author__pic {
    float: none;
    margin-right: 0;
  }

  .blog__details__author__text {
    padding-top: 25px;
  }

  .blog__details__recipe__item {
    width: 100%;
    float: none;
    margin-bottom: 30px;
    text-align: center;
  }

  .blog__details__comment__item__pic {
    float: none;
    margin-bottom: 30px;
  }

  .blog__details__comment .primary-btn {
    position: relative;
    right: 0;
    top: 0;
    margin-bottom: 30px;
  }

  .blog__details__comment__item__text .blog__details__comment__btns {
    position: relative;
    right: 0;
    top: 0;
    margin-top: 15px;
  }

  .product__details__big__img img {
    height: auto;
  }

  .product__details__img {
    height: auto;
    overflow: hidden;
  }

  .product__details__thumb {
    height: auto;
  }

  .breadcrumb__text h2 {
    font-size: 30px;
  }

  .checkout__total__products li span {
    float: none;
    display: block;
    margin-top: 10px;
  }

  .checkout__order__products span {
    display: none;
  }
}

.instagram__text a,
  a:hover,
  a:focus {
    text-decoration: none;
    outline: none;
    color: inherit;
}

/* =============================================
   BLOG CARD STYLES
   ============================================= */

.blog__details__text h5 {
    font-family: 'Lato', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--cc-primary, #781717);
    margin-top: 24px;
    margin-bottom: 8px;
}

/* Blog section — reduce spad to eliminate excessive whitespace */
.blog.spad {
    padding-top: 48px;
    padding-bottom: 56px;
}

.cc-blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

@media (max-width: 1199px) {
    .cc-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 575px) {
    .cc-blog-grid { grid-template-columns: 1fr; gap: 16px; }
}

.cc-blog-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(0,0,0,0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}

.cc-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(120,23,23,0.12);
}

.cc-blog-card__img-wrap {
    position: relative;
    display: block;
    overflow: hidden;
    height: 175px;
}

.cc-blog-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.cc-blog-card:hover .cc-blog-card__img-wrap img {
    transform: scale(1.06);
}

.cc-blog-card__tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--cc-primary, #781717);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    font-family: 'Lato', sans-serif;
}

.cc-blog-card__body {
    padding: 16px 18px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cc-blog-card__meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: #999;
    margin-bottom: 8px;
    font-family: 'Lato', sans-serif;
}

.cc-blog-card__meta i {
    color: var(--cc-primary, #781717);
    margin-right: 3px;
}

.cc-blog-card__title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 8px;
    font-family: 'Lato', sans-serif;
}

.cc-blog-card__title a {
    color: #2c2c2c;
    text-decoration: none;
    transition: color 0.2s;
}

.cc-blog-card__title a:hover {
    color: var(--cc-primary, #781717);
}

.cc-blog-card__excerpt {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    flex: 1;
    margin-bottom: 12px;
}

.cc-blog-card__readmore {
    font-size: 12px;
    font-weight: 700;
    color: var(--cc-primary, #781717);
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    letter-spacing: 0.4px;
    transition: gap 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.cc-blog-card__readmore:hover {
    color: var(--cc-primary, #781717);
    text-decoration: none;
    gap: 9px;
}

/* =============================================
   CART STYLES
   ============================================= */


/* =============================================
   CUSTOM CAKE PAGE STYLES
   ============================================= */

/* Override spad for custom cake page */
.custom-cake-section.spad {
    padding-top: 24px;
    padding-bottom: 40px;
}

/* Tighten intro spacing */
.custom-cake-section .custom-cake-intro {
    margin-bottom: 20px !important;
}
.custom-cake-section .section-title {
    margin-bottom: 10px;
}
.custom-cake-intro__text {
    font-size: 14.5px;
    color: #777;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ── Custom Cake Form — modern redesign ── */
.custom-cake-form {
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 18px;
    padding: 28px 30px 24px;
    box-shadow: 0 4px 28px rgba(0,0,0,.06);
}

/* Section grouping — no dividers */
.custom-cake-form .cc-form-section { margin-bottom: 4px; }
.cc-form-section-label {
    font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: #c8a0a8; margin-bottom: 12px; font-family: 'Lato', sans-serif;
}

.custom-cake-form .cc-form-row { margin-bottom: 20px; }
.custom-cake-field { margin-bottom: 0; }
.custom-cake-field label {
    display: block; font-weight: 600; font-size: 13px; color: #333;
    margin-bottom: 7px; letter-spacing: 0;
}
.custom-cake-field label span { color: #c0392b; font-weight: 700; margin-left: 1px; }
.custom-cake-field label small { font-weight: 400; color: #bbb; margin-left: 6px; font-size: 11.5px; }

.custom-cake-field input,
.custom-cake-field select,
.custom-cake-field textarea {
    width: 100%; border: 1.5px solid #e8e8e8; border-radius: 10px;
    padding: 11px 15px; font-size: 14px; color: #222; background: #fafafa;
    outline: none; transition: border-color .18s, box-shadow .18s, background .18s;
    font-family: 'Lato', sans-serif; -webkit-appearance: none; appearance: none;
}
.custom-cake-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.custom-cake-field input:focus,
.custom-cake-field select:focus,
.custom-cake-field textarea:focus {
    border-color: #781717; box-shadow: 0 0 0 3px rgba(120,23,23,.07); background: #fff;
}
.custom-cake-field textarea { resize: vertical; min-height: 88px; }

/* Other occasion row reveal — smooth slide */
#occasion-other-row {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .28s ease, opacity .22s ease, margin .22s ease;
    margin-bottom: 0;
}
#occasion-other-row.visible {
    max-height: 140px;
    opacity: 1;
    margin-bottom: 20px;
}

/* Upload area */
.custom-cake-upload {
    border: 2px dashed #e0e0e0; border-radius: 12px;
    padding: 22px 20px; text-align: center; cursor: pointer;
    background: #fafafa; transition: background .2s, border-color .2s; position: relative;
}
.custom-cake-upload:hover, .custom-cake-upload.dragover {
    background: #fdf5f5; border-color: #c47a85;
}
.custom-cake-upload .fa { font-size: 26px; color: #d0a0a0; margin-bottom: 7px; display: block; }
.custom-cake-upload p { margin: 0 0 3px; font-weight: 600; color: #555; font-size: 13.5px; }
.custom-cake-upload small { color: #bbb; font-size: 11.5px; }
.custom-cake-upload input[type="file"] {
    position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}

/* Submit button */
.cc-cake-submit-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--cc-primary, #781717); color: #fff; border: none;
    padding: 14px 40px; border-radius: 12px;
    font-family: 'Lato', sans-serif; font-size: 15px; font-weight: 700;
    letter-spacing: .03em; cursor: pointer;
    transition: opacity .18s, transform .15s, box-shadow .18s;
    box-shadow: 0 4px 18px rgba(120,23,23,.28);
}
.cc-cake-submit-btn:hover { opacity: .88; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(120,23,23,.35); }
.cc-cake-submit-btn:active { transform: translateY(0); opacity: 1; }

/* Custom cake success message */
.cc-cake-success {
    text-align: center;
    padding: 48px 32px;
    background: linear-gradient(135deg, #f0faf4 0%, #e8f5e9 100%);
    border: 1.5px solid #a5d6a7;
    border-radius: 20px;
    margin: 8px 0 24px;
}
.cc-cake-success__icon { font-size: 56px; color: #4caf50; margin-bottom: 16px; line-height: 1; }
.cc-cake-success__heading { font-family: 'Playfair Display', serif; font-size: 26px; color: #1b5e20; margin-bottom: 12px; }
.cc-cake-success__body { font-size: 15px; color: #2e7d32; line-height: 1.7; margin-bottom: 24px; max-width: 480px; margin-left: auto; margin-right: auto; }
.cc-cake-success__contact { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.cc-cake-success__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 26px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}
.cc-cake-success__cta--call { background: var(--cc-primary, #781717); color: #fff; }
.cc-cake-success__cta--call:hover { background: var(--cc-primary, #781717); color: #fff; transform: translateY(-2px); text-decoration: none; }
.cc-cake-success__cta--whatsapp { background: #25d366; color: #fff; }
.cc-cake-success__cta--whatsapp:hover { background: #1da851; color: #fff; transform: translateY(-2px); text-decoration: none; }
.cc-cake-success__home { display: inline-block; margin-top: 8px; color: #888; font-size: 13px; text-decoration: none; }
.cc-cake-success__home:hover { color: var(--cc-primary, #781717); text-decoration: underline; }

/* Advance notice banner */
.cc-custom-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: linear-gradient(135deg, #fff7f0 0%, #ffeef2 100%);
    border: 1.5px solid #f5cdd5;
    border-left: 5px solid var(--cc-accent, #c47a85);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 28px;
    font-size: 14px;
    color: #5c2a34;
    line-height: 1.6;
}
.cc-custom-notice .fa {
    font-size: 22px;
    color: var(--cc-accent, #c47a85);
    margin-top: 2px;
    flex-shrink: 0;
}
.custom-cake-field__hint {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #a07080;
}

/* Success state */
.custom-cake-success {
    text-align: center;
    padding: 40px 30px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #d4edda;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.custom-cake-success .fa { font-size: 48px; color: #28a745; margin-bottom: 14px; display: block; }
.custom-cake-success h4 { font-size: 22px; font-weight: 700; color: #111; margin-bottom: 10px; }
.custom-cake-success p { color: #666; font-size: 14px; }

/* Error messages */
.custom-cake-errors {
    background: #fff0f0;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.custom-cake-errors p { margin: 0 0 4px; color: #721c24; font-size: 13px; }
.custom-cake-errors p:last-child { margin: 0; }

/* Responsive */
@media only screen and (max-width: 767px) {
    .custom-cake-form { padding: 20px 16px; }
    .custom-cake-section.spad { padding-top: 16px; padding-bottom: 28px; }
}

/* --- Cart icon in header ---
   position/margin/size/colour used to be inline styles on the anchor in
   header.php; they live here now so breakpoints can override them. */
.cart-icon-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  position: relative;
  margin-left: 14px;
  font-size: 20px;
  color: var(--cc-accent, #c47a85);
}
#cart-count-badge {
    display: none;
    position: absolute;
    top: -8px; right: -10px;
    background: var(--cc-primary, #781717);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Lato', Arial, sans-serif;
    font-style: normal;
    min-width: 18px; height: 18px;
    border-radius: 50%;
    align-items: center; justify-content: center;
    line-height: 1;
}

/* --- Add to Cart button (product cards) --- */
.add-to-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: linear-gradient(135deg, var(--cc-primary, #781717) 0%, var(--cc-primary, #781717) 60%, var(--cc-primary, #781717) 100%);
    color: #ffffff;
    border: none;
    padding: 8px 14px;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(120, 23, 23, 0.35);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}
.add-to-cart-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: rgba(255,255,255,0.12);
    transform: skewX(-20deg);
    transition: left 0.4s ease;
}
.add-to-cart-btn:hover::before { left: 150%; }
.add-to-cart-btn:hover {
    background: linear-gradient(135deg, #c0392b 0%, var(--cc-primary, #781717) 60%, var(--cc-primary, #781717) 100%);
    box-shadow: 0 6px 20px rgba(120, 23, 23, 0.5);
    color: #fff;
    transform: translateY(-1px);
}
.add-to-cart-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(120,23,23,0.3); }
.add-to-cart-btn .fa { font-size: 12px; }
.add-to-cart-btn.add-to-cart-detail {
    padding: 13px 36px;
    font-size: 15px;
    width: auto;
    letter-spacing: 2px;
}

/* --- Variant buttons (detail page) --- */
.variant-btn {
    background: var(--cc-card-bg, #fff5f5);
    border: 1.8px solid var(--cc-accent, #c47a85);
    border-radius: 25px;
    padding: 8px 18px;
    font-size: 13px;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    cursor: pointer;
    color: var(--cc-accent, #c47a85);
    transition: all 0.2s;
}
.variant-btn.active, .variant-btn:hover {
    background: var(--cc-accent, #c47a85);
    border-color: var(--cc-accent, #c47a85);
    color: #fff;
}

/* --- Egg/Eggless toggle buttons (detail page) --- */
.egg-btn {
    background: var(--cc-card-bg, #fff5f5);
    border: 1.8px solid var(--cc-accent, #c47a85);
    border-radius: 25px;
    padding: 8px 18px;
    font-size: 13px;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    cursor: pointer;
    color: var(--cc-accent, #c47a85);
    transition: all 0.2s;
}
.egg-btn.active, .egg-btn:hover {
    background: var(--cc-accent, #c47a85);
    border-color: var(--cc-accent, #c47a85);
    color: #fff;
}

/* --- Cart Drawer --- */
/* Backdrop + drawer both start below the promo ticker's visible bottom
   (--cc-drawer-top is set by cart.js at open; 0 when ticker absent/scrolled)
   so the ticker is never covered. z-index unified across breakpoints:
   overlay 10000 / drawer 10001, above header but toast (10002) on top. */
#cart-drawer-overlay {
    position: fixed;
    top: var(--cc-drawer-top, 0px); right: 0; bottom: 0; left: 0;
    background: rgba(58, 30, 26, 0.38);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 10000;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}
#cart-drawer-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }

#cart-drawer {
    position: fixed;
    top: var(--cc-drawer-top, 0px); right: 0; bottom: 0;
    width: 420px; max-width: 95vw;
    background: #fffdfb;
    z-index: 10001;
    display: flex; flex-direction: column;
    box-shadow: -12px 0 40px rgba(74, 47, 43, 0.16);
    border-radius: 16px 0 0 0;
    /* Off-screen via TRANSFORM, not negative right — a fixed element at
       negative right escapes body{overflow-x:clip} and made the
       full-height white strip / horizontal overflow at every width. */
    transform: translateX(105%);
    transition: transform 0.32s cubic-bezier(0.22, 0.72, 0.28, 1);
}
#cart-drawer.active { transform: translateX(0); }

/* Page scroll locked while the drawer is open */
html.cc-cart-open, html.cc-cart-open body { overflow: hidden; }

.cart-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    background: #fdf6f2;
    color: #4a2f2b;
    border-bottom: 1px solid #f2e2dc;
    border-radius: 16px 0 0 0;
}
.cart-drawer-title { display: flex; align-items: baseline; gap: 8px; }
.cart-drawer-header h5 {
    margin: 0; font-size: 18px; font-weight: 700;
    color: #4a2f2b; letter-spacing: 0.02em;
}
#cart-drawer-count { font-size: 12.5px; color: #9b8480; font-weight: 600; }
#cart-drawer-close {
    width: 34px; height: 34px; border-radius: 50%;
    background: #fff; border: 1px solid #eed9d2;
    color: #7a5a54; font-size: 15px; cursor: pointer; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
}
#cart-drawer-close:hover {
    background: var(--cc-primary, #781717);
    border-color: var(--cc-primary, #781717);
    color: #fff; transform: rotate(90deg);
}

#cart-drawer-items {
    flex: 1; overflow-y: auto;
    padding: 14px 16px;
    display: flex; flex-direction: column;
    scrollbar-width: thin; scrollbar-color: #e8d5cf transparent;
}

/* Empty state — vertically centred, warm and inviting */
.cart-empty {
    margin: auto;
    text-align: center;
    padding: 24px 18px;
    display: flex; flex-direction: column; align-items: center;
}
.cart-empty__icon {
    width: 76px; height: 76px; border-radius: 50%;
    background: #fbeeea;
    color: var(--cc-primary, #781717);
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; margin-bottom: 14px;
}
.cart-empty h6 { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: #4a2f2b; }
.cart-empty p {
    margin: 0 0 16px; font-size: 13.5px; color: #9b8480;
    line-height: 1.55; max-width: 230px;
}
.cart-empty__cta {
    display: inline-block; padding: 11px 26px; border-radius: 50px;
    background: #fff; border: 1.5px solid var(--cc-primary, #781717);
    color: var(--cc-primary, #781717);
    font-weight: 700; font-size: 13.5px; letter-spacing: 0.04em;
    text-decoration: none;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.15s;
}
.cart-empty__cta:hover {
    background: var(--cc-primary, #781717); color: #fff;
    box-shadow: 0 6px 18px rgba(120, 23, 23, 0.22);
    transform: translateY(-1px);
}

/* Item cards — soft rounded ivory cards */
.cart-drawer-item {
    display: flex; gap: 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid #f4e6e0;
    border-radius: 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(74, 47, 43, 0.04);
}
.cart-drawer-item img {
    width: 68px; height: 68px;
    object-fit: cover; border-radius: 10px;
    flex-shrink: 0;
}
.cart-drawer-item-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
}
.cart-item-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 8px;
}
.cart-item-name { font-weight: 600; font-size: 14px; color: #3d2925; line-height: 1.35; }
.cart-item-variant { font-size: 12px; color: #9b8480; }
.cart-item-bottom {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px;
}
.cart-item-price { font-size: 14.5px; color: var(--cc-primary, #781717); font-weight: 700; }

/* Quantity — modern pill stepper */
.cart-item-qty-controls {
    display: inline-flex; align-items: center;
    background: #fdf6f2; border: 1px solid #f0dcd4;
    border-radius: 50px; padding: 2px;
}
.cart-item-qty-controls button {
    background: #fff; border: none;
    width: 26px; height: 26px; border-radius: 50%;
    font-size: 14px; color: #4a2f2b; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 2px rgba(74, 47, 43, 0.08);
    transition: background 0.15s, color 0.15s;
}
.cart-item-qty-controls button:hover { background: var(--cc-primary, #781717); color: #fff; }
.cart-item-qty-controls span {
    font-weight: 700; min-width: 26px; text-align: center;
    font-size: 13.5px; color: #3d2925;
}

/* Remove — subtle ghost icon, top-right of the card */
.cart-item-remove {
    background: transparent !important;
    box-shadow: none !important;
    color: #b9a09a !important;
    width: 28px; height: 28px;
    border: none; border-radius: 50%;
    font-size: 13px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin: -4px -4px 0 0;
    transition: background 0.15s, color 0.15s;
}
.cart-item-remove:hover {
    background: #fbeeea !important;
    color: var(--cc-primary, #781717) !important;
}

/* Footer — cream panel; Place Order is the hero, Clear Cart is quiet */
.cart-drawer-footer {
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #f2e2dc;
    background: #fdf6f2;
}
.cart-drawer-total-row {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 14px;
}
.cart-drawer-total-row span {
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: #9b8480;
}
.cart-drawer-total-row strong {
    color: var(--cc-primary, #781717);
    font-size: 22px; font-weight: 800;
}
.cart-checkout-btn {
    display: block; text-align: center;
    background: var(--cc-primary, #781717); color: #fff;
    padding: 14px 12px; border-radius: 50px;
    font-weight: 700; font-size: 14.5px;
    text-transform: uppercase; letter-spacing: 0.06em;
    text-decoration: none; margin-bottom: 10px;
    box-shadow: 0 6px 16px rgba(120, 23, 23, 0.18);
    transition: background .2s, box-shadow .2s, transform .15s;
}
.cart-checkout-btn:hover {
    background: #5e1111; color: #fff;
    box-shadow: 0 8px 22px rgba(120, 23, 23, 0.28);
    transform: translateY(-1px);
}
/* WhatsApp alternative — friendly green outline between the primary
   Place Order and the quiet Clear Cart; matches the FAB's green */
.cart-wa-btn {
    display: block; text-align: center;
    background: #fff; color: #1da851;
    border: 1.5px solid #25d366;
    padding: 12px; border-radius: 50px;
    font-weight: 700; font-size: 13.5px;
    letter-spacing: 0.03em;
    text-decoration: none; margin-bottom: 10px;
    transition: background .18s, color .18s, box-shadow .18s;
}
.cart-wa-btn i { font-size: 16px; margin-right: 6px; }
.cart-wa-btn:hover {
    background: #25d366; color: #fff;
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.25);
    text-decoration: none;
}

.cart-clear-btn {
    width: 100%; background: transparent;
    border: 1px solid #e5cfc7; color: #8a6058;
    padding: 10px 12px; border-radius: 50px;
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    letter-spacing: 0.03em;
    transition: background .18s, border-color .18s, color .18s;
    margin-bottom: 0;
}
.cart-clear-btn:hover {
    background: #fbeeea;
    border-color: #d9b7ae;
    color: var(--cc-primary, #781717);
}

/* --- Toast notification — soft pill with a sage check --- */
#cart-toast {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: #fffdfb; color: #3d2925;
    border: 1px solid #f0dcd4;
    padding: 12px 22px 12px 18px; border-radius: 50px;
    font-size: 13.5px; font-weight: 600;
    box-shadow: 0 10px 30px rgba(74, 47, 43, 0.18);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 10002; white-space: nowrap;
    max-width: 92vw; overflow: hidden; text-overflow: ellipsis;
}
#cart-toast::before {
    content: "\f058"; /* fa-check-circle */
    font-family: FontAwesome;
    color: #6b8f6b; /* soft sage — brand green nod */
    margin-right: 8px;
}
#cart-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Cart badge pop on count change */
@keyframes cc-badge-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}
#cart-count-badge.cc-badge-pop { animation: cc-badge-pop 0.35s ease; }

/* Add-to-cart press feedback */
.add-to-cart-btn:active { transform: scale(0.97); }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    #cart-drawer, #cart-drawer-overlay, #cart-toast,
    #cart-drawer-close, .cart-empty__cta, .cart-checkout-btn { transition: none; }
    #cart-count-badge.cc-badge-pop { animation: none; }
    #cart-drawer-close:hover { transform: none; }
}

/* --- Cart responsive (mobile) --- */
@media only screen and (max-width: 767px) {
    #cart-drawer { width: 100%; max-width: 100vw; right: 0; transform: translateX(105%); border-radius: 0; }
    #cart-drawer.active { transform: translateX(0); }
    .cart-drawer-header { border-radius: 0; }
    /* Larger tap targets on touch */
    #cart-drawer-close { width: 40px; height: 40px; font-size: 17px; }
    .cart-item-qty-controls button { width: 34px; height: 34px; font-size: 16px; }
    .cart-item-qty-controls span { min-width: 30px; }
    .cart-item-remove { width: 34px; height: 34px; font-size: 15px; }
    .add-to-cart-btn.add-to-cart-detail { width: 100%; justify-content: center; }
    /* Remove pill on mobile — nav goes into offcanvas */
    .header__menu {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
    }
}

/* =============================================
   RESPONSIVE FIXES — desktop look unchanged
   ============================================= */

/* --- Tablet: 768px – 991px --- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  /* Logo: shrink and keep left-aligned */
  .header__logo {
    left: 15px;
  }
  .header__logo img {
    height: 100px !important;
    width: auto !important;
  }

  /* Nav tabs: reduce padding so they fit */
  .header__menu ul li a {
    font-size: 15px;
    padding: 20px 18px;
    letter-spacing: 0.5px;
  }

  /* Product grid: 2 per row on tablet */
  #shop-products-grid .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Breadcrumb font size */
  .breadcrumb__text h2 {
    font-size: 24px;
  }

  /* Footer columns stack nicely */
  .footer__widget {
    margin-bottom: 30px;
  }
}

/* --- Mobile: max 767px --- */
@media only screen and (max-width: 767px) {
  /* Header: keep border, allow overflow for logo */
  .header {
    overflow: visible;
  }

  /* Logo: position left, smaller size */
  .header__logo {
    left: 15px;
    top: calc(50% + 8px);
    transform: translateY(-50%);
  }
  .header__logo img {
    height: 70px !important;
    width: auto !important;
  }

  /* Hide desktop nav on mobile (slicknav handles it) */
  .header__menu {
    display: none;
  }

  /* Header top padding to accommodate logo + hamburger */
  .header__top {
    padding: 15px 0;
  }

  /* Hero text readable on mobile */
  .hero__text h2 {
    font-size: 28px;
    line-height: 1.3;
  }
  .hero__text p {
    font-size: 14px;
  }

  /* Product grid: 1 per row on small mobile, 2 on wider */
  #shop-products-grid .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Product item image height */
  .product__item__pic {
    height: 200px !important;
  }

  /* Search form stacks vertically as a rounded card.
     The base rule pins the form to a 52px pill; height:auto here is what
     stops the stacked controls from overflowing it. The visible dropdown
     is the div.nice-select the plugin renders — not the hidden <select>. */
  .shop__option__search form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 10px;
    padding: 12px;
    border-radius: 34px;
  }
  .shop__option__search form::before {
    border-radius: 34px;
  }
  /* Categories + search: two matching pills, same height & border */
  .shop__option__search form .nice-select {
    width: 100% !important;
    height: 48px;
    line-height: 46px;
    border: 1.5px solid rgba(196, 122, 133, 0.45);
    border-radius: 50px;
    padding-left: 20px;
  }
  .shop__option__search form .nice-select:after {
    right: 18px;
  }
  .shop__option__search form .nice-select .list {
    width: 100%;
  }
  .shop__option__search form select {
    width: 100%;
    height: 48px;
  }
  .shop__option__search form input {
    width: 100% !important;
    /* base rule's flex:1 (basis 0) would override height as the main
       size in this column layout and collapse the pill to ~23px */
    flex: 0 0 auto;
    height: 48px;
    border: 1.5px solid rgba(196, 122, 133, 0.45);
    border-radius: 50px !important;
    padding: 0 56px 0 20px; /* right space clears the docked lens */
    font-size: 16px; /* >=16px stops iOS Safari zoom-on-focus */
  }
  /* Lens: no full-width bar — a compact circle docked inside the right
     end of the search pill (form is position:relative; bottom/right
     offsets centre it on the 48px input row: 12px pad + 4px). */
  .shop__option__search form button {
    position: absolute;
    right: 16px;
    bottom: 16px;
    /* !important: style.css's mobile copy sets width:100%/radius:12px
       with !important; this file loads later so equal importance wins */
    width: 40px !important;
    height: 40px;
    padding: 0;
    border-radius: 50% !important;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Breadcrumb stacks */
  .breadcrumb__text h2 {
    font-size: 20px;
  }
  .breadcrumb__links {
    text-align: right;
    margin-top: 0;
  }

  /* About section stacks */
  .about__text {
    padding: 30px 0 0;
  }

  /* Footer: stack columns */
  .footer__widget {
    margin-bottom: 30px;
  }

  /* Blog grid: full width on mobile */
  .blog__item {
    margin-bottom: 30px;
  }

  /* Contact form full width */
  .contact__form input,
  .contact__form textarea {
    width: 100%;
  }

  /* ── Mobile ordering ergonomics ─────────────────────────── */
  /* Product-card CTA: thumb-sized (was 33px tall / 11px text) */
  .add-to-cart-btn {
    font-size: 13px !important;
    padding: 11px 18px !important;
    min-height: 44px;
  }
  .product__item__text {
    padding: 10px 12px 12px !important;
  }
  /* Category filter pills: 40px+ tap height */
  .cc-subcat-nav__pill {
    padding: 9px 16px;
    font-size: 13px;
  }
  /* Product page: primary CTA — filled, 48px, sticks to the bottom
     of the screen while the order options/description are in view */
  .product__details__text {
    margin-top: 0;
  }
  .add-to-cart-btn.add-to-cart-detail {
    background: var(--cc-primary, #781717) !important;
    color: #fff !important;
    border-color: var(--cc-primary, #781717) !important;
    font-size: 15px !important;
    padding: 14px 20px !important;
    min-height: 48px;
    width: 100%;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(120, 23, 23, 0.28) !important;
  }
  /* Sticky goes on the wrapper (.pd-atc-wrap in shop-details.php) — the
     button alone has no travel room inside its own-height div. Pins the
     CTA to the screen bottom while the order options are in view. */
  .pd-atc-wrap {
    position: sticky;
    bottom: 12px;
    z-index: 50;
  }
  /* (cart drawer tap-target sizes now live in the unified cart mobile block) */
  /* Header search overlay: stop iOS zoom-on-focus */
  #hdrSearchInput {
    font-size: 16px !important;
  }
  /* "BESPOKE" badge on the home custom-cake tile — centred above the
     collage (matches style.css's <=900px rules; the old left:12px patch
     fought the base right:18px and squished the pill onto the photos) */
  .cc-custom-tile__badge {
    top: -6px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  /* (cart drawer z-index + below-ticker offset now unified in base rules) */
  /* Less dead space between the search card and the section heading */
  .shop__option {
    margin-bottom: 10px;
  }
}

/* --- Small mobile: max 479px --- */
@media only screen and (max-width: 479px) {
  /* Product grid: 1 per row */
  #shop-products-grid .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Logo even smaller */
  .header__logo img {
    height: 55px !important;
  }

  /* Hero button */
  .primary-btn {
    padding: 12px 20px;
    font-size: 13px;
  }

  /* Section titles */
  .section-title h2 {
    font-size: 26px;
  }
}

/* =============================================
   NAV SPARKLE PARTICLES
   ============================================= */
.cc-sparkle-particle {
  animation-name: cc-sparkle-fly;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

@keyframes cc-sparkle-fly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    text-shadow: 0 0 6px currentColor;
  }
  40% {
    opacity: 0.9;
    transform: translate(calc(-50% + var(--spk-tx) * 0.6), calc(-50% + var(--spk-ty) * 0.6)) scale(1.2) rotate(90deg);
    text-shadow: 0 0 10px currentColor;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--spk-tx)), calc(-50% + var(--spk-ty))) scale(0.1) rotate(200deg);
    text-shadow: none;
  }
}

/* =============================================
   NEW HOMEPAGE REDESIGN — BLUSH PINK AESTHETIC
   ============================================= */

/* ---- HERO NEW ---- */
.cc-hero-new {
  background: url('../img/home/hero-bg.jpg') center center / cover no-repeat;
  padding: 0;
  margin-top: 42px;
  overflow: hidden;
  min-height: 580px;
  position: relative;
}
.cc-hero-new::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(15,5,2,0.78) 0%, rgba(15,5,2,0.45) 50%, rgba(15,5,2,0.08) 100%);
  pointer-events: none;
  z-index: 0;
}
.cc-hero-new__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 580px;
}

/* Left text panel — transparent, text directly on image */
.cc-hero-new__center {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 55%;
  display: flex;
  align-items: center;
}
.cc-hero-new__circle {
  width: 100%;
  min-height: 100%;
  background: transparent;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding: 80px 40px 120px 64px;
  box-shadow: none;
  backdrop-filter: none;
}
.cc-hero-new__tag {
  font-size: 33px;
  color: var(--cc-accent, #c47a85);
  margin-top: 32px;
  margin-bottom: -10px;
  display: block;
}
.cc-hero-new__heading {
  font-family: 'Playfair Display', serif;
  font-size: 52px;
  font-weight: 700;
  color: var(--cc-fclr-hero-heading, #fff) !important;
  line-height: 1.1;
  margin-bottom: 16px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
}
.cc-hero-new__sub {
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  color: var(--cc-fclr-hero-body, rgba(255,255,255,0.85)) !important;
  line-height: 1.7;
  margin-bottom: 0;
  max-width: 340px;
  text-align: left;
}

/* Order Now CTA — below text, left side */
.cc-hero-new__cta {
  position: absolute;
  left: 64px;
  right: auto;
  bottom: 18%;
  display: inline-block;
  color: #fff;
  padding: 13px 38px;
  border-radius: 50px;
  border: 2px solid #fff;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-decoration: none;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  background: #781717;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(255, 255, 255, 0.22);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: background 0.25s, border-color 0.25s, transform 0.2s, box-shadow 0.25s;
  z-index: 2;
  overflow: hidden;
}
/* Shimmer sweep — always running at rest */
.cc-hero-new__cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.32) 50%, transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: cta-shimmer 2.8s ease-in-out infinite;
}
/* Sparkle star — always running at rest */
.cc-hero-new__cta::after {
  content: '✦';
  position: absolute;
  top: 4px;
  right: 10px;
  font-size: 9px;
  color: rgba(255,255,255,0.7);
  pointer-events: none;
  animation: cta-sparkle 2.8s ease-in-out infinite;
}
.cc-hero-new__cta:hover {
  background: #5c1010;
  border-color: #fff;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 0 5px rgba(255, 255, 255, 0.3);
}
@keyframes cta-shimmer {
  0%   { left: -75%; }
  60%  { left: 130%; }
  100% { left: 130%; }
}
@keyframes cta-sparkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
  50%       { opacity: 1;   transform: scale(1.3) rotate(180deg); }
}


/* ---- Hanging offer price tag ---- */
.cc-hero-offer-tag {
  position: absolute;
  right: 80px;
  top: 14px;
  width: 156px;
  z-index: 3;
  animation: tag-sway 4.6s ease-in-out infinite;
  transform-origin: top center;
  will-change: transform;
  /* clip just the shadow tip where wire grazes the pin — string stays visible */
  clip-path: inset(14% 0 0 0);
}
@keyframes tag-sway {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.75deg); }
}

.cc-hero-offer-tag__img {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
  /* shadow moved here so clip-path on container doesn't cut it */
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.34));
}

/* Pin is a sibling of the sway container — fixed to the hero surface, never moves.
   Tag right:80px, width:156px → wire-loop centre = right:(80 + 78) = 158px from hero right
   Pin 62px wide, head at ~65% from left = 40px → pin right = 158-(62-40) = 136px */
.cc-hero-offer-tag__pin {
  position: absolute;
  top: -2px;
  right: 166px;
  width: 62px;
  height: auto;
  mix-blend-mode: multiply;
  z-index: 5;             /* above tag container (z-index:3) — wire always behind pin */
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5));
}

.cc-hero-offer-tag__text {
  position: absolute;
  top: 63%;
  left: 52%;
  transform: translate(-50%, -50%) rotate(3deg);
  text-align: center;
  color: #fff;
  width: 62%;
  pointer-events: none;
  line-height: 1.2;
  z-index: 2;
}
.cc-hero-offer-tag__flat {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: block;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  margin-bottom: -4px;
}
.cc-hero-offer-tag__amount {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  display: block;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  margin-bottom: 1px;
  letter-spacing: 0;
}
.cc-hero-offer-tag__off {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: block;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* ---- CATEGORY CARDS ---- */
.cc-cats { background: var(--cc-section-warm, #fdf8f5); }
.cc-cats__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 28px;
  align-items: start;
}
.cc-cat-card {
  background: #fff;
  border-radius: 20px;
  padding: 30px 24px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(180, 60, 60, 0.07);
  transition: transform 0.25s, box-shadow 0.25s;
}
.cc-cat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(180, 60, 60, 0.13);
}
.cc-cat-card__img-wrap {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 20px;
  border: 4px solid #fce8e8;
}
.cc-cat-card__img-wrap--lg {
  width: 150px;
  height: 150px;
}
.cc-cat-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cc-cat-card h4 {
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--cc-dark, #2c1515);
  margin-bottom: 10px;
}
.cc-cat-card p {
  font-size: 14px;
  color: #888;
  line-height: 1.65;
  margin-bottom: 18px;
}
.cc-cat-card__btn {
  display: inline-block;
  border: 2px solid var(--cc-accent, #c47a85);
  color: var(--cc-accent, #c47a85);
  padding: 8px 22px;
  border-radius: 25px;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.22s;
}
.cc-cat-card__btn:hover,
.cc-cat-card--featured .cc-cat-card__btn {
  background: var(--cc-accent, #c47a85);
  color: #fff;
}
.cc-cat-card--featured {
  background: var(--cc-card-bg, #fff5f5);
  border: 2px solid #f5c0c8;
}
.cc-cat-card--featured h4 { font-size: 22px; }

/* ---- FEATURED PRODUCTS ---- */
.cc-featured { background: var(--cc-section-bg, #c7ebe7); }
.cc-featured.spad { padding-top: 60px; padding-bottom: 60px; }
.cc-featured .section-title span { color: var(--cc-accent, #c47a85); }
.cc-featured .section-title h2 { color: var(--cc-dark, #2c1515); }
.cc-featured__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
/* Full-image card — body overlays on top of photo */
.cc-feat-card {
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  height: 340px;
  box-shadow: 0 4px 18px rgba(180, 60, 60, 0.12);
  transition: transform 0.25s, box-shadow 0.25s;
  cursor: pointer;
}
.cc-feat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 34px rgba(180, 60, 60, 0.20);
}
/* Image fills entire card */
.cc-feat-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.cc-feat-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.cc-feat-card:hover .cc-feat-card__img img { transform: scale(1.07); }
/* Carousel fills the card too */
.cc-feat-card__img .owl-carousel,
.cc-feat-card__img .owl-stage-outer,
.cc-feat-card__img .owl-stage,
.cc-feat-card__img .owl-item { height: 100%; }
.cc-feat-card__img .owl-item > div { height: 100%; }
.cc-feat-card__img .owl-item img { height: 100%; width: 100%; object-fit: cover; }
.cc-feat-card__img .owl-dots { position: absolute; bottom: 76px; width: 100%; text-align: center; z-index: 3; }
/* Premium ivory caption — image stays clear; only the bottom fades to cream
   for caption readability. No whole-card darkening. */
.cc-feat-card__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(253, 248, 245, 0)    0%,
    rgba(253, 248, 245, 0)   55%,
    rgba(253, 248, 245, 0.92) 78%,
    rgba(253, 248, 245, 0.98) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Body sits on the cream caption area at the bottom of the card. */
.cc-feat-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 22px 22px 24px;
  z-index: 2;
  background: transparent;
}
.cc-feat-card__body h5 {
  font-family: 'Lato', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--cc-dark, #2c1515);
  margin-bottom: 6px;
  text-shadow: none;
  /* Lock title height so all 3 cards share one baseline, even on mobile */
  min-height: 23px;
}
.cc-feat-card__body p {
  font-size: 14px;
  font-weight: 500;
  color: #6a4d4d;
  line-height: 1.45;
  margin-bottom: 14px;
  text-shadow: none;
  /* Clamp to exactly 2 lines and reserve that space so titles align across cards */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 41px;
}
.cc-feat-card__btn {
  display: inline-block;
  background: var(--cc-accent, #c47a85);
  color: #fff;
  padding: 9px 24px;
  border-radius: 25px;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid var(--cc-accent, #c47a85);
  transition: background 0.22s, transform 0.2s, border-color 0.22s;
}
.cc-feat-card__btn:hover {
  background: #a85e6e;
  border-color: #a85e6e;
  color: #fff;
  transform: translateY(-2px);
  text-decoration: none;
}

/* ---- PROMO / ABOUT ---- */
.cc-promo { background: var(--cc-section-warm, #fdf8f5); }
.cc-promo__text .section-title { margin-bottom: 20px; }
.cc-promo__text p { font-size: 15px; color: #555; line-height: 1.8; margin-bottom: 28px; }
.cc-promo__btn {
  display: inline-block;
  background: var(--cc-accent, #c47a85);
  color: #fff;
  padding: 11px 28px;
  border-radius: 28px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.22s;
}
.cc-promo__btn:hover { background: #a85e6e; color: #fff; }
.cc-promo__img {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(180, 60, 60, 0.13);
}
.cc-promo__img img { width: 100%; height: 360px; object-fit: cover; display: block; }

/* ---- FAST ORDER / ENQUIRY ---- */
.cc-enquiry { background: var(--cc-section-bg, #c7ebe7); }
.cc-enquiry .section-title span { color: var(--cc-accent, #c47a85); }
.cc-enquiry .section-title h2 { color: var(--cc-dark, #2c1515); }
.cc-enquiry__img {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(180, 60, 60, 0.11);
}
.cc-enquiry__img img { width: 100%; height: 340px; object-fit: cover; display: block; }
.cc-enquiry__text .section-title { margin-bottom: 16px; }
.cc-enquiry__text p { font-size: 15px; color: #555; margin-bottom: 28px; }
.cc-enquiry__btn {
  display: inline-block;
  background: var(--cc-accent, #c47a85);
  color: #fff;
  padding: 11px 26px;
  border-radius: 28px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  margin-right: 12px;
  margin-bottom: 12px;
  transition: background 0.22s;
}
.cc-enquiry__btn:hover { background: #a85e6e; color: #fff; }
.cc-enquiry__btn--outline {
  background: transparent;
  border: 2px solid var(--cc-accent, #c47a85);
  color: var(--cc-accent, #c47a85);
}
.cc-enquiry__btn--outline:hover { background: var(--cc-accent, #c47a85); color: #fff; }

/* ---- TESTIMONIALS ---- */
.cc-testimonials { background: var(--cc-section-warm, #fdf8f5); }
.cc-testi__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cc-testi-card {
  background: #fff;
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 4px 16px rgba(180, 60, 60, 0.07);
}
.cc-testi-card__stars {
  color: var(--cc-accent, #c47a85);
  font-size: 15px;
  margin-bottom: 14px;
  letter-spacing: 2px;
}
.cc-testi-card p {
  font-size: 14px;
  color: #555;
  line-height: 1.75;
  margin-bottom: 20px;
  font-style: italic;
}
.cc-testi-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cc-testi-card__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fce8e8;
  color: var(--cc-accent, #c47a85);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lato', sans-serif;
  flex-shrink: 0;
}
.cc-testi-card__author strong {
  display: block;
  font-size: 14px;
  color: var(--cc-dark, #2c1515);
  font-weight: 700;
  font-family: 'Lato', sans-serif;
}
.cc-testi-card__author span { font-size: 12px; color: #aaa; }

/* ---- INSTAGRAM ---- */
.cc-insta { background: var(--cc-section-bg, #c7ebe7); }
.cc-insta__text { padding-right: 16px; }
.cc-insta__text .section-title { margin-bottom: 18px; }
.cc-insta__text .section-title span {
  display: inline-block;
  color: var(--cc-primary, #781717);
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 0;
  padding-bottom: 12px;
  position: relative;
}
.cc-insta__text .section-title span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 2px;
  background: var(--cc-accent, #c47a85);
}
.cc-insta__handle {
  margin: 0;
  line-height: 1;
  word-break: break-word;
}
.cc-insta__handle a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cc-accent, #c47a85);
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
  transition: color 0.25s;
}
.cc-insta__handle a .cc-ig-icon {
  width: 42px;
  height: 42px;
  padding: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(120, 23, 23, 0.14);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}
.cc-insta__handle a:hover { color: #a85e6e; }
.cc-insta__handle a:hover .cc-ig-icon {
  transform: translateY(-2px) rotate(-4deg);
  box-shadow: 0 8px 20px rgba(120, 23, 23, 0.22);
}
.cc-insta__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.cc-insta__pic {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.cc-insta__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s, opacity 0.35s;
  display: block;
}
.cc-insta__pic:hover img { transform: scale(1.08); opacity: 0.9; }

/* ---- PING DOT ---- */
@keyframes cc-ping {
  0%   { transform: scale(1);   opacity: 0.8; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}
.cc-ping-dot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}
.cc-ping-dot__ring {
  position: relative;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.cc-ping-dot__ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--cc-accent, #c47a85);
  animation: cc-ping 1.6s ease-out infinite;
}
.cc-ping-dot__ring::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--cc-accent, #c47a85);
}
.cc-ping-dot__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-accent, #c47a85);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 991px) {
  .cc-hero-new { min-height: 480px; }
  .cc-hero-new__inner { min-height: 480px; }
  .cc-hero-new__center { width: 65%; }
  .cc-hero-new__circle { padding: 60px 30px 100px 48px; }
  .cc-hero-new__heading { font-size: 40px; }
  .cc-hero-new__cta { left: 48px; bottom: 12%; font-size: 13px; padding: 11px 28px; }
  /* tag right:50 width:136 → wire centre=right:118 → pin right:118-(50-32)=100 */
  .cc-hero-offer-tag { right: 50px; width: 136px; top: 14px; }
  .cc-hero-offer-tag__pin { right: 100px; width: 50px; }
  .cc-hero-offer-tag__amount { font-size: 26px; }
  /* Tablet: stack the 3 category tiles in ONE centered column. Was
     1fr 1fr with the last card spanning full width -> Handcrafted +
     Premium top-aligned at unequal heights then Fudge full-width =
     staggered/uneven. Desktop (>=992px) keeps 1fr 1.2fr 1fr. */
  .cc-cats__grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .cc-cats__grid .cc-cat-card:last-child { grid-column: auto; }
  /* Tablet: stack the 3 featured cards in ONE column (was 1fr 1fr,
     which left the 3rd card alone in row 2 — staggered/uneven). Matches
     the mobile behaviour. Desktop (>=992px) keeps repeat(3,1fr). */
  .cc-featured__grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .cc-feat-card { height: 300px; }
  .cc-testi__grid { grid-template-columns: 1fr; gap: 16px; }
  .cc-insta__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .cc-hero-new { min-height: 400px; }
  .cc-hero-new__inner { min-height: 400px; }
  .cc-hero-new__center { width: 80%; }
  .cc-hero-new__circle { padding: 50px 24px 90px 32px; }
  .cc-hero-new__heading { font-size: 32px; }
  .cc-hero-new__sub { font-size: 13px; max-width: 260px; }
  .cc-hero-new__cta { left: 32px; bottom: 10%; font-size: 12px; padding: 10px 22px; }
  /* tag right:14 width:110 → wire centre=right:69 → pin right:69-(42-27)=54 */
  .cc-hero-offer-tag { right: 14px; width: 110px; top: 14px; }
  .cc-hero-offer-tag__pin { right: 54px; width: 42px; }
  .cc-hero-offer-tag__amount { font-size: 22px; }
  .cc-hero-offer-tag__flat { letter-spacing: 1.5px; }
  .cc-hero-offer-tag__off { letter-spacing: 1.5px; }
  .cc-cats__grid { grid-template-columns: 1fr; }
  .cc-cats__grid .cc-cat-card:last-child { grid-column: auto; }
  .cc-featured__grid { grid-template-columns: 1fr; }
  .cc-feat-card { height: 280px; }
  .cc-promo__img img { height: 240px; }
  .cc-enquiry__img img { height: 220px; }
  .cc-testi__grid { grid-template-columns: 1fr; }
  .cc-insta__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
  .cc-hero-new__center { width: 92%; }
  .cc-hero-new__circle { padding: 40px 20px 80px 24px; }
  .cc-hero-new__heading { font-size: 26px; }
  .cc-hero-new__cta { left: 24px; bottom: 8%; font-size: 11px; padding: 9px 18px; }
  /* tag right:8 width:88 → wire centre=right:52 → pin right:52-(34-22)=40 */
  .cc-hero-offer-tag { right: 8px; width: 88px; top: 14px; }
  .cc-hero-offer-tag__pin { right: 40px; width: 34px; }
  .cc-hero-offer-tag__amount { font-size: 18px; }
}

/* =============================================
   CAKE SUBCATEGORY GRID (shop-cakes.php)
   ============================================= */
.cc-cake-subcats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 8px 0 20px;
}

.cc-cake-subcat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--cc-card-bg, #fff5f5);
    border: 1.8px solid var(--cc-shop-border, #f0c8ce);
    border-radius: 18px;
    padding: 32px 20px 24px;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
}
.cc-cake-subcat-card:hover {
    background: #fff;
    border-color: var(--cc-accent, #c47a85);
    box-shadow: 0 8px 28px rgba(196, 122, 133, 0.18);
    transform: translateY(-4px);
    text-decoration: none;
    color: inherit;
}
.cc-cake-subcat-card__icon {
    font-size: 36px;
    margin-bottom: 14px;
    line-height: 1;
}
.cc-cake-subcat-card h5 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--cc-shop-heading, #3a1a1a);
    margin-bottom: 8px;
    line-height: 1.3;
}
.cc-cake-subcat-card p {
    font-size: 13px;
    color: #888;
    margin-bottom: 14px;
    line-height: 1.5;
    flex: 1;
}
.cc-cake-subcat-card__link {
    font-size: 13px;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    color: var(--cc-accent, #c47a85);
    letter-spacing: 0.5px;
}
.cc-cake-subcat-card__link .fa {
    font-size: 11px;
    transition: transform 0.2s;
}
.cc-cake-subcat-card:hover .cc-cake-subcat-card__link .fa {
    transform: translateX(3px);
}

/* --- Subcategory listing page helpers --- */
.cc-subcat-heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 26px;
    color: var(--cc-shop-heading, #3a1a1a);
}
.cc-back-link {
    font-size: 13px;
    color: var(--cc-accent, #c47a85);
    text-decoration: none;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    border: 1.5px solid var(--cc-accent, #c47a85);
    border-radius: 20px;
    padding: 6px 16px;
    transition: all 0.2s;
}
.cc-back-link:hover {
    background: var(--cc-accent, #c47a85);
    color: #fff;
    text-decoration: none;
}
.product__item__price span {
    font-size: 13px;
    color: var(--cc-accent, #c47a85);
    font-weight: 600;
}

@media (max-width: 1199px) {
  .cc-cake-subcats__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .cc-cake-subcats__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cc-cake-subcat-card { padding: 22px 14px 18px; }
  .cc-cake-subcat-card__icon { font-size: 28px; }
  .cc-cake-subcat-card h5 { font-size: 15px; }
}
@media (max-width: 479px) {
  .cc-cake-subcats__grid { grid-template-columns: 1fr; }
}

/* =============================================
   CAKE SECTIONS PAGE (shop-cakes.php redesign)
   ============================================= */

/* Reduce spad on all shop/category section pages — default 100px is excessive */
.shop.spad {
    padding-top: 28px;
    padding-bottom: 48px;
}

/* Category tagline block */
.cc-category-tagline {
    text-align: center;
    padding: 10px 20px 16px;
}
.cc-category-tagline h2 {
    font-family: var(--cc-font-shop-tagline, var(--cc-font-decorative, 'Cormorant Garamond')), Georgia, serif;
    font-size: 36px;
    font-weight: 600;
    color: #5a3040;
    letter-spacing: 0.02em;
    line-height: 1.25;
    margin-bottom: 10px;
}
.cc-category-tagline p {
    font-family: var(--cc-font-shop-tagline, var(--cc-font-decorative, 'Cormorant Garamond')), Georgia, serif;
    font-size: 17px;
    color: #a06070;
    font-style: italic;
    margin: 0;
}
@media (max-width: 767px) {
    .cc-category-tagline h2 { font-size: 24px; }
    .cc-category-tagline p  { font-size: 14px; }
}

/* Quick-nav pill bar */
.cc-subcat-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 0 16px;
    border-bottom: 1.5px solid var(--cc-shop-border, #f0c8ce);
    margin-bottom: 0;
}
.cc-subcat-nav__pill {
    display: inline-block;
    background: var(--cc-card-bg, #fff5f5);
    border: 1.5px solid var(--cc-accent, #c47a85);
    border-radius: 25px;
    padding: 6px 16px;
    font-size: 13px;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    color: var(--cc-accent, #c47a85);
    text-decoration: none;
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
    white-space: nowrap;
}
.cc-subcat-nav__pill:hover,
.cc-subcat-nav__pill.active {
    background: var(--cc-accent, #c47a85);
    border-color: var(--cc-accent, #c47a85);
    color: #fff;
    text-decoration: none;
}
/* Empty subcategory pill — dimmed, italic, still clickable */
.cc-subcat-nav__pill--empty {
    opacity: 0.55;
    font-style: italic;
    border-style: dashed;
}
.cc-subcat-nav__pill--empty:hover,
.cc-subcat-nav__pill--empty.active {
    background: var(--cc-accent, #c47a85);
    border-color: var(--cc-accent, #c47a85);
    border-style: solid;
    color: #fff;
    opacity: 1;
}

/* Coming soon notice for empty subcategory sections */
.cc-subcat-empty-notice {
    padding: 32px 0 16px;
    text-align: center;
}
.cc-subcat-empty-notice p {
    color: var(--cc-accent, #c47a85);
    font-size: 15px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    opacity: 0.8;
}

/* Individual subcategory section */
.cc-cake-section {
    margin-bottom: 32px;
    padding-bottom: 0;
    border-bottom: none;
}
.cc-cake-section:last-child {
    margin-bottom: 0;
}

/* Subcategory title bar — clean, no border lines */
.cc-cake-section__title-bar {
    margin-bottom: 16px;
    padding-bottom: 0;
    border-bottom: none;
}
.cc-cake-section__title-bar h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--cc-shop-heading, #3a1a1a);
    margin: 0;
    letter-spacing: 0.3px;
}

/* Section header: image + title side by side */
.cc-cake-section__header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
    background: var(--cc-card-bg, #fff5f5);
    border: 1.5px solid var(--cc-shop-border, #f0c8ce);
    border-radius: 14px;
    overflow: hidden;
    padding: 0;
}
.cc-cake-section__header-img {
    flex-shrink: 0;
    width: 120px;
    height: 90px;
    overflow: hidden;
}
.cc-cake-section__header-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.cc-cake-section:hover .cc-cake-section__header-img img {
    transform: scale(1.05);
}
.cc-cake-section__header-text {
    padding: 16px 20px;
}
.cc-cake-section__header-text h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--cc-shop-heading, #3a1a1a);
    margin: 0 0 4px;
}
.cc-cake-section__count {
    font-size: 12px;
    color: var(--cc-accent, #c47a85);
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ══════ Coming Soon — blinking dot, landing page, teasers ══════ */

/* Blinking dot — used in nav dropdown, pills, headings */
@keyframes ccCsDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.7); }
}
.cc-cs-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e8913a;
    margin-left: 6px;
    vertical-align: middle;
    animation: ccCsDotPulse 1.4s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(232, 145, 58, 0.5);
}
.cc-cs-dot--heading {
    width: 9px;
    height: 9px;
    margin-left: 8px;
    box-shadow: 0 0 10px rgba(232, 145, 58, 0.6);
}

/* Nav dropdown — coming soon badge */
.cc-cs-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #c48a30;
    font-family: 'Lato', sans-serif;
    line-height: 1;
    position: absolute;
    bottom: 2px;
    right: 6px;
}
.cc-cs-badge .cc-cs-dot {
    width: 4px;
    height: 4px;
    margin-left: 0;
}
.cc-nav-coming-soon {
    position: relative;
}
.header__menu ul li .dropdown--catalogue li a.cc-nav-coming-soon {
    background: linear-gradient(135deg, #fffbf2, #fff5e6);
    border: 1px solid #f5deb3;
    position: relative;
}
.header__menu ul li .dropdown--catalogue li a.cc-nav-coming-soon:hover {
    background: linear-gradient(135deg, #f5deb3, #ecc87a);
    color: #5a3e10;
    border-color: #e8c35a;
}
.header__menu ul li .dropdown--catalogue li a.cc-nav-coming-soon:hover .cc-cs-badge {
    color: #5a3e10;
}

/* Pill with coming soon dot */
/* Pack subtitle — "Pack of 4 / 6 / 10 pcs" */
.cc-pack-subtitle {
    font-size: 10.5px;
    color: #2a2a2a;
    font-weight: 600;
    font-family: 'Lato', sans-serif !important;
    font-style: normal;
    letter-spacing: 0;
    margin: 0;
    line-height: 1.3;
}
.product__item__text .cc-pack-subtitle {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    justify-self: start;
    text-align: left;
    margin-top: -5px;
}
.product__details__text .cc-pack-subtitle {
    font-size: 13px;
    color: #2a2a2a;
    margin-top: 2px;
    margin-bottom: 2px;
}

.cc-pill-coming-soon {
    border-style: dashed !important;
    border-color: #e8913a !important;
    color: #c47a30 !important;
}
.cc-pill-coming-soon:hover,
.cc-pill-coming-soon.active {
    background: linear-gradient(135deg, #f5a623, #e8913a) !important;
    border-color: #e8913a !important;
    border-style: solid !important;
    color: #fff !important;
}
.cc-pill-coming-soon .cc-cs-dot {
    background: currentColor;
    box-shadow: none;
}

/* ── Coming Soon Full Landing Page ── */
.cc-coming-soon-page {
    padding: 0;
    min-height: 70vh;
    display: flex;
    align-items: center;
    background: linear-gradient(170deg, #fdfaf6 0%, #fdf3ee 35%, #f8ece8 70%, #f5e6e0 100%);
    position: relative;
    overflow: hidden;
}
.cc-coming-soon-page::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -80px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 122, 133, 0.08) 0%, transparent 70%);
    pointer-events: none;
}
.cc-coming-soon-page::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -60px;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 166, 35, 0.06) 0%, transparent 70%);
    pointer-events: none;
}
.cc-cs-landing {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    padding: 70px 50px 60px;
    z-index: 1;
}
.cc-cs-landing__glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 166, 35, 0.10) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(30px);
}
@keyframes ccCsLandingDot {
    0%, 100% { transform: scale(1); box-shadow: 0 0 24px rgba(245, 166, 35, 0.5), 0 0 60px rgba(245, 166, 35, 0.15); }
    50% { transform: scale(0.6); box-shadow: 0 0 8px rgba(245, 166, 35, 0.2), 0 0 20px rgba(245, 166, 35, 0.05); }
}
.cc-cs-landing__dot-pulse {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5a623, #e8913a);
    margin-bottom: 24px;
    animation: ccCsLandingDot 2.4s ease-in-out infinite;
}
@keyframes ccCsFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.cc-cs-landing__content {
    animation: ccCsFadeUp 0.8s ease-out both;
}
.cc-cs-landing__title {
    font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    font-size: 44px;
    font-weight: 700;
    color: var(--cc-primary, #781717);
    margin: 0 0 6px;
    letter-spacing: 0.5px;
    line-height: 1.1;
}
.cc-cs-landing__divider {
    width: 50px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, #d4a373, transparent);
    margin: 18px auto 20px;
}
.cc-cs-landing__subtitle {
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    color: #c4944a;
    margin: 0 0 28px;
    letter-spacing: 5px;
    text-transform: uppercase;
}
.cc-cs-landing__desc {
    font-size: 15px;
    line-height: 1.8;
    color: #8a8080;
    margin: 0 auto 16px;
    max-width: 460px;
}
.cc-cs-landing__tagline {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 17px;
    font-style: italic;
    color: var(--cc-accent, #c47a85);
    margin: 0 0 8px;
    opacity: 0.85;
}
.cc-cs-landing__cta {
    margin-top: 36px;
}
.cc-cs-landing__btn {
    display: inline-block;
    padding: 14px 38px;
    border-radius: 40px;
    background: var(--cc-primary, #781717);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.35s ease;
    box-shadow: 0 6px 24px rgba(120, 23, 23, 0.18);
    position: relative;
    overflow: hidden;
}
.cc-cs-landing__btn::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.5s ease;
}
.cc-cs-landing__btn:hover::after {
    left: 100%;
}
.cc-cs-landing__btn:hover {
    background: var(--cc-accent, #c47a85);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(120, 23, 23, 0.25);
    color: #fff;
}
/* Decorative corner flourishes */
.cc-cs-landing__ornament {
    position: absolute;
    width: 80px;
    height: 80px;
    opacity: 0.12;
    pointer-events: none;
}
.cc-cs-landing__ornament--tl {
    top: 20px; left: 20px;
    border-top: 2px solid var(--cc-primary, #781717);
    border-left: 2px solid var(--cc-primary, #781717);
    border-top-left-radius: 12px;
}
.cc-cs-landing__ornament--br {
    bottom: 20px; right: 20px;
    border-bottom: 2px solid var(--cc-primary, #781717);
    border-right: 2px solid var(--cc-primary, #781717);
    border-bottom-right-radius: 12px;
}

/* ── Coming Soon Teaser (inline, for shop.php sections + subcategories) ── */
.cc-coming-soon-teaser {
    padding: 40px 20px;
    text-align: center;
}
.cc-cs-teaser-inner {
    max-width: 420px;
    margin: 0 auto;
    padding: 32px 28px;
    border-radius: 16px;
    background: linear-gradient(160deg, #fffdf8, #fff8f0);
    border: 1.5px dashed #f0d4a8;
    box-shadow: 0 4px 20px rgba(245, 166, 35, 0.06);
}
.cc-cs-teaser-inner h4 {
    font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    color: #c47a30;
    margin: 12px 0 8px;
    letter-spacing: 1px;
}
.cc-cs-teaser-inner p {
    font-size: 14px;
    color: #999;
    line-height: 1.6;
    margin: 0;
}
@keyframes ccCsTeaserDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.5); }
}
.cc-cs-teaser-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5a623, #e8913a);
    animation: ccCsTeaserDot 1.6s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(245, 166, 35, 0.4);
}
.cc-cs-teaser-link {
    display: inline-block;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cc-primary, #781717);
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}
.cc-cs-teaser-link:hover {
    color: var(--cc-accent, #c47a85);
}
.cc-cs-teaser-link i {
    margin-left: 4px;
    transition: transform 0.2s;
}
.cc-cs-teaser-link:hover i {
    transform: translateX(4px);
}

/* ── Coming Soon — compact inline (shop.php) ── */
.cc-cs-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: -4px;
}
.cc-cs-inline__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5a623, #e8913a);
    animation: ccCsTeaserDot 1.6s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(245, 166, 35, 0.4);
}
.cc-cs-inline__label {
    font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    font-size: 15px;
    font-weight: 600;
    color: #c47a30;
    letter-spacing: 0.5px;
}
.cc-cs-inline__msg {
    text-align: center;
    font-size: 13px;
    color: #aaa;
    margin: 4px 0 10px;
    line-height: 1.5;
}

/* ── Admin Preview Bar ── */
.cc-admin-preview-bar {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    border-bottom: 2px solid #f0d060;
    font-size: 13px;
    color: #5a4e00;
    text-align: center;
    font-weight: 500;
}
.cc-admin-preview-bar .cc-cs-dot {
    width: 8px;
    height: 8px;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .cc-coming-soon-page { min-height: 55vh; }
    .cc-coming-soon-page::before, .cc-coming-soon-page::after { display: none; }
    .cc-cs-landing { padding: 50px 24px 40px; }
    .cc-cs-landing__title { font-size: 30px; }
    .cc-cs-landing__subtitle { font-size: 14px; letter-spacing: 3px; }
    .cc-cs-landing__desc { font-size: 13px; }
    .cc-cs-landing__ornament { width: 50px; height: 50px; }
    .cc-cs-teaser-inner { padding: 24px 20px; }
    .cc-cs-teaser-inner h4 { font-size: 18px; }
    .cc-cs-badge { font-size: 7px; }
}

@media (max-width: 767px) {
    .cc-subcat-nav { gap: 6px; padding-bottom: 12px; margin-bottom: 0; }
    .cc-subcat-nav__pill { font-size: 12px; padding: 5px 12px; }
    .cc-cake-section__header-img { width: 80px; height: 70px; }
    .cc-cake-section__header-text h3 { font-size: 18px; }
    .cc-cake-section { margin-bottom: 36px; }
}

/* =============================================
   SHOP PAGE — CATEGORY SECTIONS LAYOUT
   ============================================= */

.cc-shop-search-wrap {
    padding: 16px 0 0;
    background: #fff;
}

/* "All Products" divider label */
.cc-shop-all-label {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 0 4px;
}
.cc-shop-all-label__line {
    flex: 1;
    height: 1px;
    background: var(--cc-accent, #c47a85);
    opacity: 0.5;
}
.cc-shop-all-label__text {
    font-family: 'Playfair Display', serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--cc-accent, #c47a85);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.cc-shop-section {
    padding: 28px 0 20px;
}
.cc-shop-section + .cc-shop-section {
    border-top: 1px solid var(--cc-shop-divider, #f0e8ea);
}

.cc-shop-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 28px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--cc-shop-border, #f0c8ce);
}
.cc-shop-section__title {
    font-family: var(--cc-font-shop-heading, var(--cc-font-heading, 'Playfair Display')), serif;
    font-weight: 700;
    font-size: 30px;
    color: var(--cc-shop-heading, #3a1a1a);
    margin: 0;
    letter-spacing: 0.5px;
}
.cc-shop-section__viewall {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--cc-accent, #c47a85);
    text-decoration: none;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: color 0.2s;
}
.cc-shop-section__viewall:hover { color: #a05565; text-decoration: none; }
.cc-shop-section__viewall .fa { font-size: 12px; margin-left: 4px; }

/* Reduce product card bottom margin inside catalogue sections */
.cc-shop-section .product__item {
    margin-bottom: 8px;
}
.cc-shop-section [class*="col-"].mb-4 {
    margin-bottom: 20px !important;
}

.cc-shop-section__more {
    display: inline-block;
    margin-top: 4px;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--cc-accent, #c47a85);
    border: 1.5px solid var(--cc-accent, #c47a85);
    border-radius: 25px;
    padding: 8px 22px;
    text-decoration: none;
    transition: all 0.2s;
}
.cc-shop-section__more:hover {
    background: var(--cc-accent, #c47a85);
    color: #fff;
    text-decoration: none;
}
.cc-shop-section__more .fa { margin-left: 6px; }

.cc-shop-section__empty {
    color: #bbb;
    font-size: 14px;
    padding: 20px 0 10px;
    font-style: italic;
}

@media (max-width: 767px) {
    .cc-shop-section { padding: 22px 0 18px; }
    .cc-shop-section__title { font-size: 22px; }
    .cc-shop-section__header { flex-direction: column; gap: 6px; }
}

/* =============================================
   ANNOUNCEMENT / OFFER BAR
   ============================================= */

.cc-offer-bar {
    background: #bcf5f5;
    color: #2c3a2c;
    overflow: hidden;
    white-space: nowrap;
    padding: 9px 0;
    position: relative;
    z-index: 9999;
    width: 100%;
}

.cc-offer-bar__track {
    display: inline-flex;
    align-items: center;
    gap: 0;
    animation: cc-ticker 28s linear infinite;
    will-change: transform;
    white-space: nowrap;
}

.cc-offer-bar__track span {
    display: inline-block;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0 28px;
    color: inherit;
}

.cc-offer-bar__sep {
    color: inherit !important;
    opacity: 0.45;
    padding: 0 !important;
    font-size: 10px !important;
}

@keyframes cc-ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.cc-offer-bar:hover .cc-offer-bar__track {
    animation-play-state: paused;
}

@media (max-width: 767px) {
    .cc-offer-bar__track span { font-size: 12px; padding: 0 18px; }
    .cc-offer-bar { padding: 7px 0; }
}

/* =============================================
   OFFER PRICE — product cards
   ============================================= */

.product__item__price del {
    font-size: 12px;
    color: #bbb;
    font-weight: 400;
    margin-right: 4px;
    text-decoration: line-through;
}

.product__item__price .cc-offer-price {
    font-size: 13px;
    color: var(--cc-primary, #781717);
    font-weight: 700;
}

.cc-offer-badge {
    display: inline-block;
    background: #d97706;
    color: #fff !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 10px;
    vertical-align: middle;
    margin-left: 4px;
    line-height: 1.4;
}

/* ── Out of Stock badge & product state ── */
.cc-oos-badge {
    display: inline-block;
    background: #666;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 10px;
    vertical-align: middle;
    line-height: 1.4;
}
.product__item--oos .product__item__pic {
    opacity: 0.65;
    filter: grayscale(30%);
}
.add-to-cart-btn--oos {
    background: #ccc !important;
    color: #888 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}
.add-to-cart-btn--oos::before { display: none !important; }

/* ── Search Suggestions Dropdown ── */
#cc-search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid var(--cc-accent, #c47a85);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(120, 23, 23, 0.13);
  z-index: 10000;
  display: none;
  overflow: hidden;
}
#cc-search-suggestions.cc-sug-open {
  display: block;
}
.cc-sug-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  cursor: pointer;
  border-bottom: 1px solid #fceef0;
  text-decoration: none;
  color: #2a1010;
  transition: background 0.15s;
}
.cc-sug-item:last-child { border-bottom: none; }
.cc-sug-item:hover { background: #fff5f6; color: #2a1010; text-decoration: none; }
.cc-sug-item__thumb {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
.cc-sug-item__icon {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: #fce8ec;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--cc-primary, #781717);
  font-size: 15px;
}
.cc-sug-item__body { flex: 1; min-width: 0; }
.cc-sug-item__label {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-sug-item__meta {
  font-size: 11px;
  color: #a06070;
  margin-top: 1px;
}
.cc-sug-item__badge {
  font-size: 10px;
  background: var(--cc-primary, #781717);
  color: #fff;
  border-radius: 4px;
  padding: 2px 7px;
  flex-shrink: 0;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* ══════════════════════════════════════════════════════════════════
   Shop Filter Sidebar
   ══════════════════════════════════════════════════════════════════ */

/* Shop layout: sidebar + content */
.cc-shop-layout {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}
.cc-shop-sidebar {
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: 100px;
}
.cc-shop-content {
    flex: 1;
    min-width: 0;
}

/* Sidebar widget card */
.cc-sidebar-widget {
    background: #fff;
    border: 1.5px solid #f2dede;
    border-radius: 12px;
    padding: 18px 16px;
    margin-bottom: 20px;
}
.cc-sidebar-widget__title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cc-dark, #2c1515);
    border-bottom: 1.5px solid #f2dede;
    padding-bottom: 10px;
    margin-bottom: 14px;
    margin-top: 0;
}

/* Filter checkboxes */
.cc-filter-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cc-filter-list li {
    margin-bottom: 10px;
}
.cc-filter-item {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 14px;
    color: var(--cc-shop-heading, #3a1a1a);
    user-select: none;
}
.cc-filter-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--cc-primary, #781717);
    cursor: pointer;
    flex-shrink: 0;
}
.cc-filter-item:hover { color: var(--cc-primary, #781717); }

/* Category nav list */
.cc-cat-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cc-cat-nav-list li {
    border-bottom: 1px solid #f7ecec;
}
.cc-cat-nav-list li:last-child { border-bottom: none; }
.cc-cat-nav-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px;
    font-size: 13px;
    color: var(--cc-shop-heading, #3a1a1a);
    text-decoration: none;
    transition: color 0.15s;
}
.cc-cat-nav-list a:hover { color: var(--cc-primary, #781717); text-decoration: none; }
.cc-cat-nav-list a.active { color: var(--cc-primary, #781717); font-weight: 700; }
.cc-cat-nav-list a i { font-size: 11px; opacity: 0.5; }

/* ₹ in black */
.product__item__price {
    color: var(--cc-fclr-price, #222);
}
.product__item__price del {
    color: var(--cc-fclr-price-strike, #aaa);
}
.product__item__price span:not(.cc-offer-badge) {
    color: var(--cc-fclr-price, #222);
}
.cc-offer-price { color: var(--cc-fclr-price, #222); }

/* Responsive: collapse sidebar on small screens */
@media (max-width: 991px) {
    .cc-shop-layout {
        flex-direction: column;
    }
    .cc-shop-sidebar {
        width: 100%;
        position: static;
        display: flex;
        gap: 14px;
    }
    .cc-sidebar-widget {
        flex: 1;
        margin-bottom: 0;
    }
}
@media (max-width: 575px) {
    .cc-shop-sidebar {
        flex-direction: column;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Shop Sidebar — Full-Width Edge Layout (replaces container-wrapped)
   ══════════════════════════════════════════════════════════════════ */

.cc-shop-fw-wrap {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

/* Sidebar: sits at the left page edge */
.cc-shop-fw-wrap .cc-shop-sidebar {
    width: 230px;
    min-width: 230px;
    padding: 4px 10px 20px 20px;
    position: sticky;
    top: 80px;
    align-self: flex-start;
    flex-shrink: 0;
}

/* Content: gets the rest of the width + right padding matching Bootstrap container */
.cc-shop-fw-wrap .cc-shop-content {
    flex: 1;
    min-width: 0;
    padding: 0 40px 0 10px;
    max-width: calc(100% - 230px);
}

/* Expandable category nav */
.cc-cat-nav-item {
    border-bottom: 1px solid #f5e8e8;
}
.cc-cat-nav-item:last-child { border-bottom: none; }

.cc-cat-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 4px;
}
.cc-cat-nav-header a {
    flex: 1;
    font-size: 13px;
    color: var(--cc-shop-heading, #3a1a1a);
    text-decoration: none;
    transition: color 0.15s;
}
.cc-cat-nav-header a:hover { color: var(--cc-primary, #781717); }

.cc-cat-nav-item.active > .cc-cat-nav-header a {
    color: var(--cc-primary, #781717);
    font-weight: 700;
}

.cc-cat-nav-toggle {
    background: none;
    border: none;
    padding: 0 4px;
    cursor: pointer;
    color: #aaa;
    font-size: 13px;
    line-height: 1;
    transition: transform 0.2s, color 0.15s;
    flex-shrink: 0;
}
.cc-cat-nav-toggle.open { transform: rotate(180deg); color: var(--cc-primary, #781717); }
.cc-cat-nav-toggle:hover { color: var(--cc-primary, #781717); }

.cc-cat-nav-subs {
    list-style: none;
    margin: 0;
    padding: 0 0 4px 12px;
    display: none;
}
.cc-cat-nav-subs.open { display: block; }
.cc-cat-nav-subs li a {
    display: block;
    padding: 4px 4px;
    font-size: 12px;
    color: #7a4040;
    text-decoration: none;
    transition: color 0.15s;
}
.cc-cat-nav-subs li a:hover { color: var(--cc-primary, #781717); }

/* Old cc-cat-nav-list / cc-cat-item — override for backward compat */
.cc-cat-nav-list { list-style: none; margin: 0; padding: 0; }

@media (max-width: 991px) {
    .cc-shop-fw-wrap { flex-direction: column; }
    .cc-shop-fw-wrap .cc-shop-sidebar {
        width: 100%;
        min-width: unset;
        position: static;
        display: flex;
        gap: 14px;
        padding: 0 15px;
    }
    .cc-shop-fw-wrap .cc-shop-content {
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Symmetry & Layout Polish
   ══════════════════════════════════════════════════════════════════ */

/* Pills: single scrollable row instead of wrapping */
.cc-subcat-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 10px !important;
}
.cc-subcat-nav::-webkit-scrollbar { display: none; }

/* Sidebar: overall compact styling */
.cc-sidebar-widget {
    background: #fff;
    border: 1px solid var(--cc-shop-border, #f0c8ce);
    border-radius: 8px;
    padding: 14px 14px;
    margin-bottom: 16px;
}
.cc-sidebar-widget__title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #555;
    border-bottom: 1px solid var(--cc-shop-border, #f0c8ce);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

/* Sidebar category items: compact, no overflow */
.cc-cat-nav-header a {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 155px;
    display: inline-block;
}
.cc-cat-nav-subs li a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 155px;
    display: block;
    padding: 3px 4px;
    font-size: 12px;
}

/* Sidebar subcategory list: scrollable if too tall */
.cc-cat-nav-subs {
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--cc-accent, #c47a85) #fff;
}
.cc-cat-nav-subs::-webkit-scrollbar { width: 4px; }
.cc-cat-nav-subs::-webkit-scrollbar-track { background: #fff; }
.cc-cat-nav-subs::-webkit-scrollbar-thumb { background: var(--cc-accent, #c47a85); border-radius: 4px; }

/* Filter items: compact */
.cc-filter-item {
    font-size: 13px;
    gap: 8px;
    margin-bottom: 2px;
}
.cc-filter-list li { margin-bottom: 8px; }

/* Product card: symmetric with better spacing */
.product__item {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(44,21,21,0.07);
    background: #fff;
    transition: box-shadow 0.2s, transform 0.2s;
}
.product__item:hover {
    box-shadow: 0 6px 24px rgba(44,21,21,0.12);
    transform: translateY(-3px);
}
.product__item__text {
    padding: 12px 14px 14px;
}
.product__item__text h6 {
    font-size: 13px;
    margin-bottom: 6px;
    line-height: 1.35;
}
.product__item__price {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--cc-fclr-price, #222) !important;
}

/* Subcategory title — no border, clean spacing */
.cc-cake-section__title-bar h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--cc-shop-heading, #3a1a1a);
    padding: 8px 0 6px;
    border-bottom: none;
    margin-bottom: 14px;
}

/* Breathing room between subcategory sections */
.cc-cake-section { margin-bottom: 24px; }

/* Category section on overview page */
.cc-shop-section-inner {
    padding: 28px 0 8px !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--cc-shop-border, #f0c8ce);
}
.cc-shop-section-inner:last-child {
    border-bottom: none;
}
.cc-shop-section__header {
    padding-bottom: 10px;
    border-bottom: 2px solid var(--cc-shop-border, #f0c8ce);
    margin-bottom: 18px;
}

/* ══════════════════════════════════════════════════════════════════
   Bootstrap-grid sidebar columns (replaces fw-wrap approach)
   ══════════════════════════════════════════════════════════════════ */

/* Sidebar column: sticky, with top padding */
.cc-shop-sidebar-col {
    position: sticky;
    top: 80px;
    align-self: flex-start;
    padding-right: 8px;
}

/* Content column: no extra padding needed */
.cc-shop-content-col {
    padding-left: 10px;
}

/* Override Bootstrap row's flex-wrap so sticky works correctly */
.cc-shop-sidebar-col,
.cc-shop-content-col {
    align-self: flex-start;
}

/* Product cards in category pages — 3 per row already via col-lg-4 */
.cc-shop-content-col .product__item__pic.set-bg {
    height: 240px;
}

/* Responsive: stack on tablet/mobile */
@media (max-width: 991px) {
    .cc-shop-sidebar-col {
        position: static;
        margin-bottom: 24px;
    }
    .cc-shop-content-col {
        padding-left: 15px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Product Card — Clean Card Redesign (Theobroma-inspired)
   ══════════════════════════════════════════════════════════════════ */

/* Card wrapper */
.product__item {
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07) !important;
    background: #fff;
    transition: box-shadow 0.2s, transform 0.2s !important;
    margin-bottom: 0;
}
.product__item:hover {
    box-shadow: 0 4px 18px rgba(44,21,21,0.13) !important;
    transform: translateY(-2px) !important;
}

/* Image area */
.product__item__pic {
    height: 250px !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 0 !important;
    display: block;
}

/* Label: move to top-left corner badge, small and non-intrusive */
.product__item__pic .product__label {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    bottom: auto !important;
    width: auto !important;
    text-align: left !important;
    background: transparent !important;
}
.product__item__pic .product__label span {
    display: inline-block;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    background: rgba(120,23,23,0.82) !important;
    color: #fff !important;
    backdrop-filter: blur(2px);
}
.product__item:hover .product__item__pic .product__label span {
    background: rgba(120,23,23,0.95) !important;
}

/* Text area: CSS grid — name spans full width, price + button on same row */
.product__item__text {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    column-gap: 8px;
    row-gap: 6px;
    align-items: center;
    padding: 12px 14px 14px !important;
    position: static !important;
}

/* Product name: top full-width row */
.product__item__text h6 {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0 !important;
    min-height: unset !important;
    justify-content: flex-start !important;
    display: block !important;
}
.product__item__text h6 a {
    text-transform: none !important;
    font-size: 14px !important;
    color: var(--cc-primary, #781717) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    display: block;
    line-height: 1.4;
    font-family: var(--cc-font-shop-card, var(--cc-font-body, 'Lato')), sans-serif !important;
}
.product__item__text h6 a:hover {
    color: #a03030 !important;
    text-decoration: none;
}

/* Price: bottom-left */
.product__item__text .product__item__price {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    text-align: left;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--cc-fclr-price, #222) !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.product__item__text .product__item__price del {
    font-size: 12px !important;
    color: var(--cc-fclr-price-strike, #bbb) !important;
    font-weight: 400 !important;
}
.product__item__text .product__item__price .cc-offer-price {
    color: var(--cc-fclr-price, #222) !important;
    font-weight: 600 !important;
}
.product__item__text .product__item__price .cc-offer-badge {
    background: #d97706 !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 8px !important;
}

/* Cart button: bottom-right */
.product__item__text .cart_add {
    grid-column: 2;
    grid-row: 2 / 4;
    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
}

/* Add to Cart button — pill, outlined */
.add-to-cart-btn {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    padding: 7px 14px !important;
    border-radius: 50px !important;
    border: 1.5px solid var(--cc-accent, #c47a85) !important;
    background: transparent !important;
    color: var(--cc-primary, #781717) !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s !important;
    box-shadow: none !important;
    transform: none !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.add-to-cart-btn:hover {
    background: var(--cc-primary, #781717) !important;
    border-color: var(--cc-primary, #781717) !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: 0 4px 12px rgba(120,23,23,0.25) !important;
}
/* Hide cart icon for clean look */
.add-to-cart-btn .fa-shopping-cart { display: none !important; }

/* Out-of-stock button override */
.add-to-cart-btn--oos {
    border-color: #ddd !important;
    color: #aaa !important;
}
.add-to-cart-btn--oos:hover {
    background: transparent !important;
    border-color: #ddd !important;
    color: #aaa !important;
    box-shadow: none !important;
}

/* ── Sidebar fix: remove sticky to prevent duplication visual ── */
.cc-shop-sidebar-col {
    position: static !important;
}

/* Make sidebar sticky via inner wrapper for better compat */
.cc-shop-sidebar-col > .cc-sidebar-widget,
.cc-shop-sidebar-col > .cc-sidebar-sticky {
    position: sticky;
    top: 90px;
}

/* ── Sidebar: flat category list (no toggle arrows) ── */
.cc-cat-nav-toggle { display: none !important; }
.cc-cat-nav-subs   { display: none !important; }
.cc-cat-nav-header {
    padding: 6px 4px !important;
    border-bottom: none !important;
}
.cc-cat-nav-item {
    border-bottom: 1px solid #f5ecec !important;
}
.cc-cat-nav-item:last-child { border-bottom: none !important; }
.cc-cat-nav-header a {
    font-size: 13px !important;
    color: var(--cc-shop-heading, #3a1a1a) !important;
    max-width: 100% !important;
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}
.cc-cat-nav-item.active > .cc-cat-nav-header a {
    color: var(--cc-primary, #781717) !important;
    font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════════════
   THEOBROMA LAYOUT MATCH — Final polish pass
   (Brand colors kept: var(--cc-primary, #781717), var(--cc-shop-bg, #fdf6f6), var(--cc-accent, #c47a85))
   ══════════════════════════════════════════════════════════════════ */

/* 1. Shop section background — light cream/pink tint */
section.shop.spad {
    background: var(--cc-shop-bg, #fdf6f6) !important;
}

/* 2. Sidebar widgets — flat (no box border), Theobroma-style heading */
.cc-sidebar-widget {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 0 24px !important;
    margin-bottom: 0 !important;
}
.cc-sidebar-widget + .cc-sidebar-widget {
    border-top: 1.5px solid var(--cc-shop-border, #f0c8ce) !important;
    padding-top: 20px !important;
}
.cc-sidebar-widget__title {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--cc-dark, #2c1515) !important;
    border-bottom: 1.5px solid var(--cc-dark, #2c1515) !important;
    padding-bottom: 10px !important;
    margin-bottom: 16px !important;
}

/* 3. Filter checkboxes — Theobroma row style */
.cc-filter-list li {
    border-bottom: 1px solid #f5ecec;
    margin-bottom: 0 !important;
}
.cc-filter-list li:last-child { border-bottom: none; }
.cc-filter-item {
    padding: 8px 4px;
    font-size: 13px !important;
}
.cc-filter-item input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
}

/* 4. Category nav — circle bullet indicators */
.cc-cat-nav-item {
    position: relative !important;
}
.cc-cat-nav-header a::before {
    content: '○';
    font-size: 10px;
    margin-right: 8px;
    color: var(--cc-accent, #c47a85);
    line-height: 1;
    flex-shrink: 0;
    display: inline-block;
}
.cc-cat-nav-item.active > .cc-cat-nav-header a::before {
    content: '●' !important;
    color: var(--cc-primary, #781717) !important;
}
.cc-cat-nav-header a {
    display: flex !important;
    align-items: center !important;
}

/* 5. Product card — dividing line between image and text */
.product__item__text {
    border-top: 1px solid var(--cc-shop-border, #f0c8ce) !important;
    padding: 14px 14px 16px !important;
}

/* 6. Product card text — slight padding between name and price row */
.product__item__text h6 {
    padding-bottom: 8px;
    border-bottom: 1px solid #f5ecec;
}

/* 7. Cart button — show cart icon on desktop, keep pill clean */
.add-to-cart-btn .fa-shopping-cart {
    display: inline-block !important;
    font-size: 10px !important;
}

/* 8. Category tagline — centered, branded */
.cc-category-tagline {
    text-align: center !important;
    padding: 10px 0 24px !important;
    border-bottom: 1px solid var(--cc-shop-border, #f0c8ce) !important;
    margin-bottom: 24px !important;
}
.cc-category-tagline h2 {
    font-family: var(--cc-font-shop-tagline, var(--cc-font-decorative, 'Cormorant Garamond')), Georgia, serif !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    color: var(--cc-dark, #2c1515) !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 8px !important;
    text-transform: none !important;
}
.cc-category-tagline p {
    font-family: var(--cc-font-shop-tagline, var(--cc-font-decorative, 'Cormorant Garamond')), Georgia, serif !important;
    font-size: 16px !important;
    color: var(--cc-fclr-shop-tagline, #a06070) !important;
    font-style: italic !important;
    max-width: 520px !important;
    margin: 0 auto !important;
}

/* 9. Subcategory pill nav — match Theobroma pill bar */
.cc-subcat-nav {
    border-bottom: 1px solid var(--cc-shop-border, #f0c8ce) !important;
    padding-bottom: 4px !important;
    margin-bottom: 24px !important;
    gap: 6px !important;
}
.cc-subcat-nav__pill {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 16px !important;
    border-radius: 50px !important;
    border: 1.5px solid #e8d0d0 !important;
    background: #fff !important;
    color: var(--cc-shop-heading, #3a1a1a) !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
.cc-subcat-nav__pill.active,
.cc-subcat-nav__pill:hover {
    background: var(--cc-primary, #781717) !important;
    border-color: var(--cc-primary, #781717) !important;
    color: #fff !important;
}
.cc-subcat-nav__pill--empty {
    opacity: 0.45 !important;
}

/* 10. Section title bar — ornament centred heading (no border lines) */
.cc-cake-section__title-bar {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
    margin-top: 4px !important;
}
.cc-cake-section__title-bar::before,
.cc-cake-section__title-bar::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: linear-gradient(to right, transparent, var(--cc-accent, #c47a85) 60%) !important;
}
.cc-cake-section__title-bar::after {
    background: linear-gradient(to left, transparent, var(--cc-accent, #c47a85) 60%) !important;
}
.cc-cake-section__title-bar h3 {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--cc-primary, #781717) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* 11. Product card image height — consistent tall cards */
.product__item__pic {
    height: 250px !important;
}

/* 12. Subcategory sections — clean separator, no double lines */
.cc-cake-section {
    margin-bottom: 0 !important;
    padding: 20px 0 16px !important;
    border-bottom: 1px solid var(--cc-shop-border, #f0c8ce) !important;
}
.cc-cake-section:last-child {
    border-bottom: none !important;
}

/* 13. Breadcrumb section: light tint */
.breadcrumb-option {
    background: var(--cc-shop-bg, #fdf6f6) !important;
}

/* 14. Search bar wrap on category pages */
.cc-shop-search-wrap {
    background: #fff !important;
    border-top: 1px solid var(--cc-shop-border, #f0c8ce) !important;
    border-bottom: 1px solid var(--cc-shop-border, #f0c8ce) !important;
    padding: 10px 0 8px !important;
    margin-bottom: 0 !important;
}

/* Responsive: pills scrollable on mobile */
@media (max-width: 767px) {
    .cc-subcat-nav {
        padding-bottom: 8px !important;
    }
    .cc-category-tagline h2 { font-size: 20px !important; }
    .product__item__pic { height: 200px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   FULL-WIDTH CATEGORY PAGE — No sidebar layout
   ══════════════════════════════════════════════════════════════════ */

/* Main section */
.cc-cat-section {
    background: var(--cc-shop-bg, #fdf6f6);
    padding: 20px 0 60px;
}

/* Category tagline block — centered, elegant */
.cc-cat-section .cc-category-tagline {
    text-align: center;
    padding: 0 0 24px;
    border-bottom: 1px solid var(--cc-shop-border, #f0c8ce);
    margin-bottom: 20px;
}
.cc-cat-section .cc-category-tagline h2 {
    font-family: var(--cc-font-shop-tagline, var(--cc-font-decorative, 'Cormorant Garamond')), Georgia, serif;
    font-size: 34px;
    font-weight: 600;
    color: var(--cc-dark, #2c1515);
    letter-spacing: 0.03em;
    margin-bottom: 8px;
    text-transform: none;
}
.cc-tagline-ornament {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 6px 0 10px;
    color: var(--cc-accent, #c47a85);
    font-size: 10px;
    letter-spacing: 4px;
}
.cc-cat-section .cc-category-tagline p {
    font-family: var(--cc-font-shop-tagline, var(--cc-font-decorative, 'Cormorant Garamond')), Georgia, serif;
    font-size: 16px;
    color: #a06070;
    font-style: italic;
    max-width: 560px;
    margin: 0 auto;
}

/* Top control bar: always two rows — pills row 1, filters row 2 */
.cc-cat-topbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
    border-bottom: none;
    padding-bottom: 6px;
}

/* Row 1: subcategory pills */
.cc-cat-topbar .cc-subcat-nav {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    width: 100%;
}

/* Row 2: filter chips — left-aligned, same style line */
.cc-topbar-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 2px;
    border-top: 1px solid #f5ecec;
}
.cc-topbar-filter-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--cc-shop-heading, #3a1a1a);
    cursor: pointer;
    user-select: none;
    padding: 4px 12px;
    border: 1.5px solid #e8d0d0;
    border-radius: 50px;
    background: #fff;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
}
.cc-topbar-filter-item:hover {
    border-color: var(--cc-accent, #c47a85);
    color: var(--cc-primary, #781717);
}
.cc-topbar-filter-item input[type="checkbox"] {
    width: 13px;
    height: 13px;
    accent-color: var(--cc-primary, #781717);
    cursor: pointer;
    flex-shrink: 0;
}
.cc-topbar-filter-item:has(input:checked) {
    background: var(--cc-primary, #781717);
    border-color: var(--cc-primary, #781717);
    color: #fff;
}

/* Product cards — 4 per row on desktop (col-lg-3), looks best full-width */
.cc-cat-section .product__item__pic {
    height: 240px !important;
}

/* Section title bar */
.cc-cat-section .cc-cake-section__title-bar h3 {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--cc-dark, #2c1515);
    padding: 12px 0 10px;
    border-bottom: 2px solid var(--cc-accent, #c47a85);
    margin-bottom: 20px;
}

/* Subcategory sections inside category pages */
.cc-cat-section .cc-cake-section {
    margin-bottom: 0 !important;
    padding: 20px 0 16px !important;
    border-bottom: 1px solid var(--cc-shop-border, #f0c8ce) !important;
}
.cc-cat-section .cc-cake-section:last-child {
    border-bottom: none !important;
}
.cc-cat-section .cc-cake-section .cc-product-card.mb-4 {
    margin-bottom: 16px !important;
}

/* (topbar is already flex-direction:column on all breakpoints) */
@media (max-width: 767px) {
    .cc-cat-section { padding: 24px 0 40px; }
    .cc-cat-section .cc-category-tagline h2 { font-size: 24px; }
    .cc-cat-section .product__item__pic { height: 190px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   SPACING FIX — section gaps + topbar alignment
   ══════════════════════════════════════════════════════════════════ */

/* Tighten card bottom gap inside sections */
.cc-shop-section-inner .cc-product-card.mb-4,
#cc-category-sections .cc-product-card.mb-4 {
    margin-bottom: 16px !important;
}

/* "See all X" button row — reduce the top/bottom space */
.cc-shop-section-inner .col-12.text-center.mt-2,
.cc-shop-section-inner .col-12.text-center {
    margin-top: 2px !important;
    padding-top: 0 !important;
    padding-bottom: 4px !important;
}

/* Section header title — tighter size */
.cc-shop-section__title {
    font-size: 22px !important;
}

/* Pills in topbar */
.cc-cat-topbar .cc-subcat-nav__pill {
    padding: 5px 14px !important;
    font-size: 12px !important;
}

/* Category section on shop.php — clean separator, no box */
.cc-cat-section .cc-shop-section-inner {
    background: transparent !important;
    box-shadow: none !important;
}

/* Responsive topbar: already column-direction, just reduce gap on mobile */
@media (max-width: 767px) {
    .cc-cat-topbar {
        gap: 8px;
        padding-bottom: 10px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   ORNAMENT HEADINGS — subcategory + main shop section titles
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Subcategory section title bars (Birthday Cakes, etc.)
        Centered text with fading lines either side ── */
.cc-cake-section__title-bar {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: none !important;
}
.cc-cake-section__title-bar::before,
.cc-cake-section__title-bar::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
}
.cc-cake-section__title-bar::before {
    background: linear-gradient(to right, transparent, var(--cc-accent, #c47a85)) !important;
}
.cc-cake-section__title-bar::after {
    background: linear-gradient(to left, transparent, var(--cc-accent, #c47a85)) !important;
}
.cc-cake-section__title-bar h3 {
    font-family: var(--cc-font-shop-heading, var(--cc-font-heading, 'Playfair Display')), serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    color: var(--cc-primary, #781717) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* ── 2. Main shop.php section headers (Cakes, Cupcakes, …)
        ✦ Title ————————————————————— View All → ── */
.cc-shop-section__header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}
.cc-shop-section__title {
    font-family: var(--cc-font-shop-heading, var(--cc-font-heading, 'Playfair Display')), serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--cc-primary, #781717) !important;
    letter-spacing: 0.02em !important;
    margin: 0 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
/* ✦ ornament before title */
.cc-shop-section__title::before {
    content: '✦' !important;
    color: var(--cc-accent, #c47a85) !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
}
/* gradient line after title, stretches to fill space before View All */
.cc-shop-section__title::after {
    content: '' !important;
    display: block !important;
    width: 80px !important;
    height: 1px !important;
    background: linear-gradient(to right, var(--cc-accent, #c47a85), transparent) !important;
    margin-left: 4px !important;
}

/* Tighten section spacing on shop.php */
.cc-shop-section-inner {
    padding: 8px 0 8px !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--cc-shop-border, #f0c8ce) !important;
}
.cc-shop-section-inner:last-child {
    border-bottom: none !important;
}

/* ── 3. "Coming soon" notice — less vertical space ── */
.cc-subcat-empty-notice {
    padding: 12px 0 8px !important;
    margin: 0 !important;
}
.cc-subcat-empty-notice p {
    font-size: 13px !important;
    color: var(--cc-accent, #c47a85) !important;
    font-style: italic !important;
    margin: 0 !important;
}

/* ── 4. Remove extra top gap before tagline ── */
.cc-cat-section {
    padding-top: 4px !important;
}

/* ══════════════════════════════════════════════════════════════════
   PRODUCT DETAIL — Size dropdown + egg option buttons
   ══════════════════════════════════════════════════════════════════ */

.pd-option-group {
    display: block !important;
    clear: both !important;
    width: 100% !important;
    margin-bottom: 20px;
}
.pd-option-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--cc-dark, #2c1515);
    letter-spacing: 0.03em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* Size dropdown wrapper */
.pd-size-select-wrap {
    display: block;
    width: 100%;
    max-width: 300px;
}
.pd-size-select {
    display: block;
    width: 100%;
    /* Remove ALL browser native arrows — every engine */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    /* SVG arrow as background — single source of truth, no span needed */
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23781717'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 9px 5px !important;
    /* Border */
    border: 1px solid #c8b0a0 !important;
    border-radius: 4px !important;
    padding: 10px 36px 10px 14px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--cc-dark, #2c1515) !important;
    line-height: 1.4 !important;
    cursor: pointer;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s;
}
.pd-size-select:hover,
.pd-size-select:focus {
    border-color: var(--cc-primary, #781717) !important;
    box-shadow: none !important;
    outline: none !important;
}
/* Arrow span no longer used — hidden for safety */
.pd-size-select-arrow { display: none !important; }

/* Egg/diet option buttons */
.egg-btn {
    padding: 8px 18px;
    border-radius: 50px;
    border: 1.5px solid #e8d0d0;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--cc-shop-heading, #3a1a1a);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.egg-btn:hover {
    border-color: var(--cc-accent, #c47a85);
    color: var(--cc-primary, #781717);
}
.egg-btn.active {
    background: var(--cc-primary, #781717);
    border-color: var(--cc-primary, #781717);
    color: #fff;
}

/* ── Size dropdown option label ── */
.pd-option-label {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--cc-primary, #781717) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* ══════════════════════════════════════════════════════════════════
   DECORATIVE VINTAGE HEADING FRAME  (1021 × 350 px source image)
   — background-size: 420px kept at the size the user approved
   — padding-top nudges text into the visual centre of the frame
     (the top ornament is visually heavier so the text needs a
      small downward shift to LOOK equally spaced top and bottom)
   ══════════════════════════════════════════════════════════════════ */
.cc-deco-heading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 144px;
    padding: 10px 24px 0;   /* top offset shifts text into visual centre */
    margin: 0 auto 8px;
    width: 100%;
    max-width: 520px;
    box-sizing: border-box;
}

/* Ornamental frame — scales proportionally with container */
.cc-deco-heading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/deco-frame.jpg') no-repeat center center;
    background-size: contain;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}

/* Text centred in the ornamental zone */
.cc-deco-heading h2,
.cc-deco-heading h3 {
    position: relative;
    z-index: 1;
    color: var(--cc-shop-heading, #3a1a1a);
    font-family: var(--cc-font-shop-heading, var(--cc-font-heading, 'Playfair Display')), serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.3;
    max-width: 75%;
    word-break: keep-all;
    overflow-wrap: normal;
}

/* Subcategory headings — same image size, same offset */
.cc-cake-section__title-bar.cc-deco-heading {
    background: none !important;
    border: none !important;
}
.cc-cat-section .cc-cake-section__title-bar.cc-deco-heading h3 {
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    color: var(--cc-shop-heading, #3a1a1a) !important;
    font-family: var(--cc-font-shop-heading, var(--cc-font-heading, 'Playfair Display')), serif !important;
    letter-spacing: 0.12em !important;
    margin: 0 !important;
}

@media (max-width: 991px) {
    .cc-deco-heading         { max-width: 460px; }
    .cc-deco-heading h2      { font-size: 24px; letter-spacing: 0.08em; }
}
@media (max-width: 767px) {
    .cc-deco-heading         { min-height: 100px; padding-top: 10px; max-width: 320px; }
    .cc-deco-heading h2      { font-size: 18px; letter-spacing: 0.06em; }
    .cc-cat-section .cc-cake-section__title-bar.cc-deco-heading h3 { font-size: 18px !important; }
}

/* =============================================
   ADMIN FONT VARS — PAGE-SPECIFIC OVERRIDES
   ============================================= */

/* Home page body text */
body.page-index p,
body.page-index .section-subtitle,
body.page-index .hero__text p { font-family: var(--cc-font-home-body, 'Lato'), sans-serif; }

/* Hero body sub-text */
.hero__text p,
.hero__text .normal { font-family: var(--cc-font-hero-body, 'Lato'), sans-serif; }

/* Custom Cake page headings + body */
body.page-custom-cake .section-title h2 { font-family: var(--cc-font-cake-heading, var(--cc-font-heading, 'Playfair Display')), serif !important; }
body.page-custom-cake p,
body.page-custom-cake label,
body.page-custom-cake input,
body.page-custom-cake textarea,
body.page-custom-cake select { font-family: var(--cc-font-cake-body, var(--cc-font-body, 'Lato')), sans-serif; }

/* =============================================
   ADMIN FONT COLOR VARS — TEXT COLOUR OVERRIDES
   All --cc-fclr-* vars are injected by header.php from admin settings.
   ============================================= */

/* Global body text */
body { color: var(--cc-fclr-body, #555555); }
a    { color: var(--cc-fclr-link, #c47a85); }

/* Global heading text */
.section-title h2,
.cc-deco-heading h2,
.cc-deco-heading h3,
.breadcrumb__text h2,
.product-details__text h3 { color: var(--cc-fclr-heading, #3a1a1a); }

/* Section title (home / global) */
.section-title h2 { color: var(--cc-fclr-section-title, var(--cc-fclr-heading, #2c1515)) !important; }

/* Shop deco headings */
.cc-deco-heading h2,
.cc-deco-heading h3,
.cc-cat-section .cc-cake-section__title-bar.cc-deco-heading h3 { color: var(--cc-fclr-shop-heading, var(--cc-shop-heading, #3a1a1a)) !important; }

/* Product card name */
.product__item__text h6 a { color: var(--cc-fclr-shop-card, var(--cc-primary, #781717)) !important; }

/* Price & amount — always plain sans-serif, never inherits decorative fonts */
.product__item__price,
.product__item__price span,
.product__item__price del,
.product__item__price .cc-offer-price,
.cc-offer-price,
.product__details__text .product__item__price,
.product__details__text .product__item__price span,
#pd-price-display,
#pd-price-display del,
.cart-item-price,
.cart__total ul li span,
.cart-drawer-total-row,
.cart-drawer-total-row strong,
.checkout__total td,
.checkout__total th,
.checkout__total__products li span,
.checkout__total__all li span,
#cart-count-badge,
.cart-item-qty-controls span { font-family: 'Lato', Arial, sans-serif !important; font-style: normal !important; }

/* Product price colour */
.product__item__price span,
.cc-offer-price { color: var(--cc-fclr-price, var(--cc-primary, #781717)); }

/* Strikethrough original price */
.product__item__price del { color: var(--cc-fclr-price-strike, #aaaaaa); }

/* Category tagline */
.cc-category-tagline h2,
.cc-cat-section .cc-category-tagline h2 { color: var(--cc-fclr-shop-heading, var(--cc-fclr-heading, #3a1a1a)); }
.cc-category-tagline p,
.cc-cat-section .cc-category-tagline p,
.cc-category-sub { color: var(--cc-fclr-shop-tagline, #a06070); }

/* Hero banner */
.hero__text h2 { color: var(--cc-fclr-hero-heading, #111111); }
.hero__text p,
.hero__text .normal { color: var(--cc-fclr-hero-body, #444444); }

/* Muted / secondary text */
small, .text-muted, .about-breadcrumb__links { color: var(--cc-fclr-muted, #999999); }

/* Home page body text — excludes hero elements which have their own variable */
body.page-index p:not(.cc-hero-new__sub),
body.page-index .section-subtitle { color: var(--cc-fclr-home-body, var(--cc-fclr-body, #555555)); }

/* Shop card body / description text (product details page) */
.product__details__text p,
.product__details__tab .tab-content p { color: var(--cc-fclr-shop-card-body, var(--cc-fclr-body, #666666)); }

/* Custom Cake page text colours */
body.page-custom-cake .section-title h2 { color: var(--cc-fclr-cake-heading, var(--cc-fclr-heading, #2c1515)) !important; }
body.page-custom-cake p,
body.page-custom-cake label { color: var(--cc-fclr-cake-body, var(--cc-fclr-body, #555555)); }

/* Instagram image icon (replaces fa-instagram) */
.cc-ig-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
}
.cc-ig-icon--inline { width: 18px; height: 18px; margin-right: 2px; }
.cc-footer-styled .footer__about .footer__social a.cc-ig-link {
  background: transparent;
  box-shadow: none;
  transition: transform 0.25s;
}
.cc-footer-styled .footer__about .footer__social a.cc-ig-link:hover { transform: translateY(-2px); }
.cc-footer-styled .footer__about .footer__social a.cc-ig-link .cc-ig-icon { width: 26px; height: 26px; }
.team__item__social a.cc-ig-link { background: transparent; }

/*---------------------
  Product Details — tighter, premium layout
-----------------------*/
.breadcrumb-option + .product-details.spad,
section.product-details.spad {
  padding-top: 32px;
  padding-bottom: 48px;
}
.product-details .product__details__img {
  margin-bottom: 0;
}
.product-details .product__details__text {
  padding-left: 10px;
}
.product-details .product__details__text h4 {
  margin-top: 12px;
  margin-bottom: 14px;
}
.product-details .product__details__text h5 {
  padding-bottom: 16px;
  margin-bottom: 14px;
}
.product-details .product__details__text p {
  margin-bottom: 14px;
}
.product-details .product__details__text ul {
  margin-bottom: 18px;
}
.product-details .pd-option-group {
  margin-top: 14px;
}
.product-details .product__details__tab {
  padding-top: 36px;
}
.product-details .product__details__tab .tab-content p {
  padding-top: 24px;
}
.product-details + .related-products.spad,
section.related-products.spad {
  padding-top: 40px;
  padding-bottom: 40px;
}
@media (max-width: 991px) {
  .product-details .product__details__text {
    padding-left: 0;
    margin-top: 24px;
  }
  section.product-details.spad {
    padding-top: 20px;
    padding-bottom: 32px;
  }
  .product-details .product__details__tab {
    padding-top: 24px;
  }
}

/* ============================================================
   Featured-card text-color overrides
   ------------------------------------------------------------
   The global rule earlier in this file:
     body.page-index p:not(.cc-hero-new__sub) { color: #555555; }
   has specificity (0,2,2) and would otherwise paint our cream-
   caption description text dark gray. The override below has
   the same specificity but wins on cascade order (last in file).
   Keep this block AT THE END of the file. Do not move earlier.
   ============================================================ */
body.page-index .cc-feat-card__body p { color: #6a4d4d; }


/* ============================================================
   RESPONSIVE HEADER — tablet + mobile (<= 991px), single source.
   Replaces the earlier patch blocks. Desktop (>= 992px) is
   untouched. The site's custom header (Locations / Search / Cart
   pills + the template hamburger .canvas__open) was never made
   responsive: at <=991 the desktop nav collided with the pills,
   the Bootstrap grid overflowed the viewport, and the absolute
   hamburger stacked on the cart.

   Fix: turn the header bar into ONE controlled flex line. The
   hamburger (.canvas__open) is a sibling of .row inside
   .container, so we make .container the flex context and pull it
   into the line as a normal flex item — it can never overlap or
   be clipped again, at any width. Layout:

     [logo] .......... [Loc] [Search] [Cart]   [≡]

   Every box has min-width:0 so the row shrinks instead of
   overflowing. No absolute positioning, no width math.
   ============================================================ */
@media only screen and (max-width: 991px) {

  /* Desktop nav lives in the hamburger menu on tablet/mobile */
  .header__menu { display: none !important; }

  /* .container = flex context so .row and .canvas__open sit on one line */
  .header__top { padding: 10px 0 !important; }
  .header__top .container {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
  }
  .header__top .container > .row {
    flex: 1 1 auto;
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    width: auto;
    min-width: 0;
  }

  /* Logo: natural size, no fixed 160px column, not absolute */
  .header__top .row > .col-lg-2:first-child {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
  }
  .header__logo {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
  }
  .header__logo img { height: 84px !important; width: auto !important; }

  /* Empty nav column removed entirely */
  .header__top .row > .col-lg-8 { display: none !important; }

  /* Right cluster fills remaining space, stays right-aligned */
  .header__top .row > .col-lg-2:last-child {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
  }
  .header__right {
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 0 !important;
    height: auto;
    min-width: 0;
  }

  /* Locations + Search → icon-only circles (font-size:0 hides the
     bare text node; the <i> icon is restored) */
  .hdr-locations-btn,
  .hdr-search__pill {
    width: 40px;
    height: 40px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-size: 0;
    flex: 0 0 auto;
    background: var(--cc-card-bg, #fff5f5);
  }
  .hdr-locations-btn i,
  .hdr-search__pill i { font-size: 16px; line-height: 1; }

  /* Cart → matching circle (override the element's inline styles) */
  #cart-icon-btn {
    width: 40px;
    height: 40px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--cc-accent, #c47a85);
    border-radius: 50%;
    margin: 0 !important;
    font-size: 16px !important;
    flex: 0 0 auto;
    background: var(--cc-card-bg, #fff5f5);
  }

  /* Hamburger → OUT of absolute, into the flex line as the last item.
     Click handler binds to the element, not its position, so the
     menu still opens. */
  .canvas__open {
    display: block !important;
    position: static !important;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    line-height: 36px;
    text-align: center;
    border: 2px solid var(--cc-accent, #c47a85);
    color: var(--cc-accent, #c47a85);
    border-radius: 50%;
    font-size: 17px;
    margin: 0;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    background: var(--cc-card-bg, #fff5f5);
  }

  /* Symmetric band on mobile too (mirrors the >=992px fix): the logo
     is in normal flow in this layout, so the band contains it and the
     hero can sit directly below with the same 10px rhythm as the top. */
  .cc-hero-new { margin-top: 0; }

  /* Off-canvas slide menu + slicknav nav MUST work across the whole
     tablet+mobile range. The template only enabled these at <=767px,
     so on 768-991 (iPad Mini etc.) the hamburger showed but the menu
     it opens was display:none -> dead tap. Replicated here at <=991. */
  .offcanvas-menu-overlay {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 98;
    transition: all 0.5s;
    visibility: hidden;
  }
  .offcanvas-menu-overlay.active { visibility: visible; }
  /* Slides from the RIGHT to match the right-side hamburger (see the
     <=767px block note; left:auto beats style.css's left rules). */
  .offcanvas-menu-wrapper {
    position: fixed;
    left: auto;
    right: -300px;
    width: 300px;
    height: 100%;
    background: #ffffff;
    padding: 50px 20px 30px 30px;
    display: block;
    z-index: 99;
    overflow-y: auto;
    transition: all 0.5s;
    opacity: 0;
  }
  .offcanvas-menu-wrapper.active { opacity: 1; left: auto; right: 0; }
  .offcanvas__menu { display: none; }
  .slicknav_btn { display: none; }
  .slicknav_menu { background: transparent; padding: 0; margin-bottom: 30px; }
  .slicknav_nav { display: block !important; }
  .slicknav_nav ul { margin: 0; }
  .slicknav_nav .slicknav_row,
  .slicknav_nav a { padding: 7px 0; margin: 0; color: #111111; font-weight: 600; }
  .slicknav_nav .slicknav_arrow { color: #111111; }
  .slicknav_nav .slicknav_row:hover,
  .slicknav_nav a:hover { background: transparent; color: #111111; border-radius: 0; }

  /* Floating Kids-Workshops promo: hidden on mobile + small/portrait
     tablets (kept on laptop / large iPads >= 992px per request). */
  .cc-ws-widget { display: none !important; }
}

/* Small phones: shrink so logo + 4 circles always fit narrow widths */
@media only screen and (max-width: 420px) {
  .header__top .container { gap: 8px; }
  .header__right { gap: 7px; }
  .hdr-locations-btn,
  .hdr-search__pill,
  #cart-icon-btn,
  .canvas__open {
    width: 36px !important;
    height: 36px !important;
    line-height: 32px !important;
  }
  .hdr-locations-btn i,
  .hdr-search__pill i,
  #cart-icon-btn { font-size: 14px !important; }
  .header__logo img { height: 64px !important; }
}

/* ──────────────────────────────────────────────────────────────────
   Phone product image — show the WHOLE product, centered.
   On a single-column phone the card is full-width but the image box
   stays short, so `cover` cropped the top & bottom off a square cake
   photo. `contain` always fits the entire photo inside the box and
   centres it (clean white margins), so it reads like the laptop grid.
   Placed last so it wins over the many earlier height/cover rules.
   Scoped to phones only — tablet/laptop layout is unchanged.
   ────────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 575.98px) {
  .product__item__pic,
  .product__item__pic.set-bg,
  #shop-products-grid .product__item__pic,
  .cc-shop-content-col .product__item__pic.set-bg,
  .cc-cat-section .product__item__pic {
    height: 300px !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #ffffff !important;
  }
}

/* =========================================================
   Phase 1 UX: floating WhatsApp button. Appended 2026-07-08.
   ========================================================= */

/* ---- Floating WhatsApp button (bottom-left; workshops widget owns
        bottom-right). Icon-only circle; label expands on hover/focus
        on pointer devices, stays hidden on mobile. ---- */
.cc-wa-fab {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 54px;
  padding: 0 13px;
  border-radius: 27px;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .45), 0 2px 6px rgba(0, 0, 0, .18);
  transition: transform .2s ease, box-shadow .25s ease;
}
.cc-wa-fab i {
  font-size: 28px;
  line-height: 1;
}
.cc-wa-fab__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .3px;
  transition: max-width .3s ease, margin-left .3s ease;
}
.cc-wa-fab:hover,
.cc-wa-fab:focus {
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(37, 211, 102, .55), 0 3px 8px rgba(0, 0, 0, .22);
}
.cc-wa-fab:hover .cc-wa-fab__label,
.cc-wa-fab:focus .cc-wa-fab__label {
  max-width: 200px;
  margin-left: 10px;
}
/* Intro state (added by footer.php on the first 2 page views/session):
   pill opens expanded so "Order on WhatsApp" is readable without hover,
   then collapses to the icon */
.cc-wa-fab.cc-wa-fab--expanded .cc-wa-fab__label {
  max-width: 200px;
  margin-left: 10px;
}
/* Two soft pulse rings right after the intro collapses — anchors the
   green icon = order association, then goes still */
.cc-wa-fab.cc-wa-fab--pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
  animation: cc-wa-fab-pulse 1.5s ease-out 2;
  pointer-events: none;
}
@keyframes cc-wa-fab-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
  100% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
}
@media (max-width: 767px) {
  .cc-wa-fab { left: 14px; bottom: 14px; min-width: 52px; height: 52px; }
  .cc-wa-fab i { font-size: 26px; }
  /* Label now participates on mobile too (was display:none) so customers
     see "Order on WhatsApp" during the intro; collapses like desktop */
  .cc-wa-fab .cc-wa-fab__label { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-wa-fab,
  .cc-wa-fab__label { transition: none; }
  .cc-wa-fab:hover { transform: none; }
  .cc-wa-fab.cc-wa-fab--pulse::after { animation: none; }
}

/* =========================================================
   Phase 2 design polish. Appended 2026-07-08.
   (Hero CTA restraint edits are inline in the hero block above.)
   ========================================================= */

/* ---- Trust badge strip (directly under hero). Slim, quiet band on
        the existing blush card tone; rose icons, cocoa-toned text —
        all from the current theme variables. No animation. ---- */
.cc-trust-strip {
  background: var(--cc-card-bg, #fff5f5);
  border-bottom: 1px solid var(--cc-shop-divider, #f0e8ea);
}
.cc-trust-strip__list {
  list-style: none;
  margin: 0;
  padding: 14px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 0;
}
.cc-trust-strip__list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 26px;
  font-family: 'Lato', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .35px;
  color: var(--cc-fclr-heading, #3a1a1a);
  white-space: nowrap;
}
.cc-trust-strip__list li + li {
  border-left: 1px solid var(--cc-shop-border, #f0c8ce);
}
.cc-trust-strip__list li i {
  font-size: 15px;
  color: var(--cc-accent, #c47a85);
}
@media (max-width: 991px) {
  /* 2×2 grid on tablets/phones; drop the divider rules */
  .cc-trust-strip__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 8px;
    padding: 12px 0;
    justify-items: start;
  }
  .cc-trust-strip__list li { padding: 0 4px; }
  .cc-trust-strip__list li + li { border-left: none; }
}
@media (max-width: 479px) {
  .cc-trust-strip__list li { font-size: 12px; letter-spacing: .2px; }
  .cc-trust-strip__list li i { font-size: 13px; }
}

/* ---- Ingredient promise line (under the Featured Treats title) ---- */
.cc-featured__promise {
  font-family: var(--cc-font-decorative, 'Cormorant Garamond'), serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--cc-fclr-shop-tagline, #a06070);
  margin: 6px auto 0;
  max-width: 460px;
}
@media (max-width: 767px) {
  .cc-featured__promise { font-size: 16px; }
}

/* =========================================================
   Phase 2.5: header symmetry + hero slideshow. 2026-07-09.
   ========================================================= */

/* ---- Desktop header alignment (≥992px only — the ≤991px blocks
        above position the logo absolutely for slicknav and stay
        untouched). Logo returns to normal flow so the header row's
        height contains it: no more logo dangling below the bar, and
        logo / nav pill / Locations / Search / cart all centre on one
        line. ---- */
@media (min-width: 992px) {
  .header__top { padding: 10px 0; }
  .header__logo {
    position: static;
    transform: none;
    display: flex;
    align-items: center;
    height: 100%;
  }
  .header__top .row > .col-lg-2:first-child {
    display: flex;
    align-items: center;
  }
  /* Even rhythm across the right-side actions */
  .header__right { gap: 12px; }
  .hdr-locations-btn { margin-right: 0; }
  /* Cart: soft circle matching the pill language (mobile already
     renders it as a 40px circle — this unifies the two). */
  .cart-icon-btn {
    margin-left: 0;
    width: 44px;
    height: 44px;
    justify-content: center;
    border: 2px solid var(--cc-accent, #c47a85);
    border-radius: 50%;
    background: var(--cc-card-bg, #fff5f5);
    font-size: 19px;
    transition: background .22s, color .22s;
  }
  .cart-icon-btn:hover {
    background: var(--cc-accent, #c47a85);
    color: #fff;
  }
  .cart-icon-btn #cart-count-badge { top: -6px; right: -6px; }
}

/* ---- Hero slideshow ---- */
/* The slides layer replaces the hardcoded CSS background-image (which
   stays in the base rule as a no-JS-era fallback for other consumers). */
.cc-hero-new--slides { background: none; }
.cc-hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cc-hero-slide {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease;
}
.cc-hero-slide.is-active { opacity: 1; }
.cc-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Slides 2+ (the ones with data-desktop) carry extended empty wall on their
   left side — anchor right so the cakes stay fully in frame at any width.
   Mobile variants are centered square crops, so keep default centering there. */
@media (min-width: 768px) {
  .cc-hero-slide[data-desktop] img { object-position: right center; }
}
/* Gradient overlay must sit above the slides; text/CTA above both.
   (Original rules set both to 0/1 — re-stack here.) */
.cc-hero-new::before { z-index: 1; }
.cc-hero-new__inner  { z-index: 2; }

/* Minimal dots — only rendered when there is more than one slide */
.cc-hero-dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 2;
}
.cc-hero-dots__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background .25s, transform .25s;
}
.cc-hero-dots__dot:hover { background: rgba(255, 255, 255, 0.7); }
.cc-hero-dots__dot.is-active {
  background: #fff;
  transform: scale(1.2);
}
@media (prefers-reduced-motion: reduce) {
  .cc-hero-slide { transition: none; }
}

/* Symmetric header band (>=992px): the ticker->row space is 10px
   padding; mirror it below by dropping the hero's 42px offset.
   The <=991px flex-header block sets the same margin-top:0 for
   mobile/tablet, so the band is symmetric at every width. */
@media (min-width: 992px) {
  .cc-hero-new { margin-top: 0; }
}

/* =========================================================
   Phase 3: product catalogue & shop UX polish. 2026-07-09.
   ========================================================= */

/* ---- Real <img> product cards (converted from set-bg backgrounds).
        The anchor keeps its fixed height from the rules above; the
        image fills it with the same centre-crop as the old
        background-size:cover. ---- */
.product__item__pic--img {
  position: relative;
  overflow: hidden;
}
.product__item__pic--img picture { display: contents; }
.product__item__pic--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .35s ease;
}
/* Subtle, clean hover: image-only zoom (card lift already exists) */
.product__item:hover .product__item__pic--img img { transform: scale(1.04); }
.product__item__pic--img .product__label { z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .product__item__pic--img img,
  .product__item:hover .product__item__pic--img img {
    transition: none;
    transform: none;
  }
}
/* Phones: mirror the legacy "show the WHOLE product" behaviour the
   set-bg cards get from the max-575.98px background rules above. */
@media only screen and (max-width: 575.98px) {
  .product__item__pic--img img { object-fit: contain; }
}

/* ---- Freshness line at the top of the catalogue ---- */
.cc-shop-freshline {
  font-family: var(--cc-font-decorative, 'Cormorant Garamond'), serif;
  font-style: italic;
  font-size: 17px;
  text-align: center;
  color: var(--cc-fclr-shop-tagline, #a06070);
  margin: 4px 0 14px;
}
@media (max-width: 767px) {
  .cc-shop-freshline { font-size: 15px; margin-bottom: 10px; }
  /* Filter pills: breathing room when they wrap on phones */
  .cc-subcat-nav { row-gap: 8px; }
  /* Card buttons stay comfortably tappable */
  .add-to-cart-btn { padding: 8px 14px !important; }
}

/* ---- Card text symmetry (owner reference: name left-aligned; price
        and CTA share ONE bottom row on the same vertical centre).
        The button previously spanned grid rows 2-4, so with no pack
        subtitle it centred lower than the price — misaligned. ---- */
.product__item__text { text-align: left !important; }
.product__item__text .cart_add {
  grid-row: 2;            /* same row as the price */
  justify-self: end;
  align-self: center;
}
.product__item__text .product__item__price { align-self: center; }
.product__item__text .cc-pack-subtitle {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 0;
  text-align: left;
}

/* ---- Tile-less cards (owner ref: theobroma.in/collections/cakes —
        no boxed tile; a big product image with details beneath it,
        sitting directly on the page background). ---- */
.product__item {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.product__item:hover {
  box-shadow: none !important;
  transform: none !important;
}
.product__item__pic--img {
  border-radius: 10px !important;
  overflow: hidden;
}
.product__item__text {
  background: transparent !important;
  padding: 12px 2px 0 !important;
}
/* Borderless: no divider under the name (matches the reference) */
.product__item__text h6 {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.product__item__text h6 a { font-size: 15px !important; }
.product__item__text .product__item__price { font-size: 15px !important; }

/* ---- Reference-sized images + tight text grouping.
        Fixed 250px heights went short-and-flat on wide monitors;
        a square aspect keeps the photo dominant at every width.
        Text: name, pack-size line directly beneath, then ONE action
        row (price left / button right). nowrap stops "₹ 725"
        wrapping in the narrow grid track (it made the price row
        54px tall and pushed the button off the price's axis). ---- */
@media (min-width: 768px) {
  .product__item__pic--img {
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
}
.product__item__text {
  grid-template-columns: 1fr auto !important;
  row-gap: 5px !important;
  padding: 10px 2px 0 !important;
}
.product__item__text h6 {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}
.product__item__text .cc-pack-subtitle {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  text-align: left;
}
.product__item__text .product__item__price {
  grid-column: 1 !important;
  grid-row: 3 !important;
  align-self: center !important;
  justify-self: start;
  white-space: nowrap;
  flex-wrap: nowrap !important;
}
.product__item__text .cart_add {
  grid-column: 2 !important;
  grid-row: 3 !important;
  align-self: center;
  justify-self: end;
}

/* The old boxed-tile design forced every price to min-height:54px
   (style.css, late block) so plain cards matched offer cards' stacked
   height. Tile-less cards don't need equal-height rows: let plain
   prices be one line, centred on the button's axis. Offer cards keep
   their compact del/price/badge stack. */
.product__item__text .product__item__price {
  min-height: 0 !important;
}

/* ---- Bigger product photos: 3-across on desktop (reference is
        3-col with large images; 4-across in a 1140px container gave
        ~260px photos). CSS-only — markup keeps col-lg-3. Related-
        products carousel (owl) is untouched. ---- */
@media (min-width: 992px) {
  .cc-product-card {
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
  }
}
/* Pull the detail row closer to the photo */
.product__item__text {
  padding-top: 8px !important;
  row-gap: 4px !important;
}

/* Names: keep the 2-line clamp (truncation) but stop RESERVING two
   lines (style.css min-height:2.8em) — single-line names left the
   price row floating far from the product. */
.product__item__text h6 a {
  min-height: 0 !important;
}

/* Specificity fix: '.cc-cat-section .product__item__pic {height:240px
   !important}' (two classes) beat the single-class aspect rule above,
   pinning photos to 240px inside 360px columns (aspect-ratio derived
   width from the pinned height). Match the specificity so the photo
   fills the column — flush with the text block's top border line. */
@media (min-width: 768px) {
  .cc-cat-section .product__item__pic--img,
  .cc-shop-content-col .product__item__pic--img,
  .product__item .product__item__pic--img {
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
}

/* Category filter pills: scaled up to sit right with the larger
   3-across cards (owner: names looked tiny). Two earlier rules pin
   12px with !important ('.cc-cat-topbar .cc-subcat-nav__pill' and the
   flat-pill restyle) — match specificity+importance; this file
   position wins the tie. Mobile keeps its compact size. */
@media (min-width: 992px) {
  .cc-subcat-nav__pill,
  .cc-cat-topbar .cc-subcat-nav__pill {
    font-size: 15px !important;
    padding: 8px 20px !important;
  }
}