/******************************************************************
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`. overflow-x:HIDDEN on
makes it a scroll container and breaks AOS 2.3.4 scroll/offset
detection (blanks everything below the hero). `clip` clips WITHOUT a
scroll container, so AOS is fine — and it's required on the root to
contain position:fixed off-canvas panels (the cart drawer), which
body overflow cannot clip. */
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;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
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;
}
.offcanvas-menu-wrapper {
position: fixed;
left: -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: 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__search form .nice-select {
width: 140px;
}
.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: 40px;
}
.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;
}
.shop__option__search form .nice-select {
width: 130px;
padding-left: 14px;
}
.shop__option__search form input {
padding-left: 12px;
}
.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 --- */
.cart-icon-btn { display: inline-flex; align-items: center; text-decoration: none; }
#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 --- */
#cart-drawer-overlay {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,0.5);
z-index: 999;
}
#cart-drawer-overlay.active { display: block; }
#cart-drawer {
position: fixed;
top: 0; right: 0;
width: 400px; max-width: 95vw;
height: 100%;
background: #fff;
z-index: 1000;
display: flex; flex-direction: column;
box-shadow: -4px 0 20px rgba(0,0,0,0.15);
/* 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.35s ease;
}
#cart-drawer.active { transform: translateX(0); }
.cart-drawer-header {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 20px;
background: var(--cc-primary, #781717);
color: #fff;
}
.cart-drawer-header h5 { margin: 0; font-size: 17px; font-weight: 700; }
#cart-drawer-close {
background: none; border: none; color: #fff;
font-size: 20px; cursor: pointer; line-height: 1;
}
#cart-drawer-items {
flex: 1; overflow-y: auto;
padding: 16px;
}
.cart-empty-msg {
text-align: center;
color: #999;
padding: 40px 0;
font-size: 15px;
line-height: 2;
}
.cart-empty-msg .fa { font-size: 36px; display: block; margin-bottom: 10px; }
.cart-drawer-item {
display: flex; gap: 12px;
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
}
.cart-drawer-item img {
width: 70px; height: 70px;
object-fit: cover; border-radius: 6px;
flex-shrink: 0;
}
.cart-drawer-item-info {
flex: 1; display: flex; flex-direction: column; gap: 4px;
}
.cart-item-name { font-weight: 600; font-size: 14px; color: #111; }
.cart-item-variant { font-size: 12px; color: #888; }
.cart-item-price { font-size: 14px; color: var(--cc-primary, #781717); font-weight: 700; }
.cart-item-qty-controls {
display: flex; align-items: center; gap: 6px; margin-top: 4px;
}
.cart-item-qty-controls button {
background: #f0f0f0; border: none;
width: 26px; height: 26px; border-radius: 4px;
font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.cart-item-qty-controls button:hover { background: #ddd; }
.cart-item-qty-controls span { font-weight: 600; min-width: 20px; text-align: center; }
.cart-item-remove { background: #fff0f0 !important; color: var(--cc-primary, #781717) !important; margin-left: 4px; }
.cart-item-remove:hover { background: var(--cc-primary, #781717) !important; color: #fff !important; }
.cart-drawer-footer {
padding: 16px 20px;
border-top: 2px solid #f0f0f0;
background: #fafafa;
}
.cart-drawer-total-row {
display: flex; justify-content: space-between;
font-size: 16px; margin-bottom: 14px;
}
.cart-drawer-total-row strong { color: var(--cc-primary, #781717); font-size: 18px; }
.cart-checkout-btn {
display: block; text-align: center;
background: var(--cc-primary, #781717); color: #fff;
padding: 13px 12px; border-radius: 50px;
font-weight: 700; font-size: 15px;
text-decoration: none; margin-bottom: 10px;
letter-spacing: .3px;
transition: background .2s, box-shadow .2s, transform .15s;
}
.cart-checkout-btn:hover {
background: #5e1111; color: #fff;
box-shadow: 0 4px 14px rgba(120,23,23,.22);
transform: translateY(-1px);
}
.cart-clear-btn {
width: 100%; background: #fff;
border: 1.5px solid #e0d0d0; color: #781717;
padding: 11px 12px; border-radius: 50px;
font-size: 13.5px; font-weight: 600; cursor: pointer;
letter-spacing: .2px;
transition: background .18s, border-color .18s, box-shadow .18s;
margin-bottom: 10px;
}
.cart-clear-btn:hover {
background: #fff5f5;
border-color: #781717;
box-shadow: 0 2px 8px rgba(120,23,23,.1);
}
/* --- Toast notification --- */
#cart-toast {
position: fixed;
bottom: 24px; left: 50%;
transform: translateX(-50%) translateY(20px);
background: var(--cc-primary, #781717); color: #fff;
padding: 12px 24px; border-radius: 6px;
font-size: 14px; font-weight: 600;
opacity: 0; pointer-events: none;
transition: opacity 0.3s, transform 0.3s;
z-index: 2000; white-space: nowrap;
}
#cart-toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* --- Cart responsive (mobile) --- */
@media only screen and (max-width: 767px) {
#cart-drawer { width: 100%; max-width: 100vw; right: 0; transform: translateX(105%); }
#cart-drawer.active { transform: translateX(0); }
.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 */
.shop__option__search form {
display: flex;
flex-direction: column;
gap: 8px;
}
.shop__option__search form select,
.shop__option__search form input,
.shop__option__search form button {
width: 100% !important;
border-radius: 4px !important;
}
/* 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%;
}
}
/* --- 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 {
display: block;
width: 110px;
height: 110px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 20px;
border: 4px solid #fce8e8;
text-decoration: none;
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
a.cc-cat-card__img-wrap:hover {
transform: scale(1.03);
border-color: var(--cc-accent, #c47a85);
box-shadow: 0 6px 18px rgba(196, 122, 133, 0.25);
text-decoration: none;
}
.cc-cat-card__title-link,
.cc-cat-card__title-link:hover,
.cc-cat-card__title-link:focus {
color: inherit;
text-decoration: none;
}
.cc-cat-card__title-link:hover { color: var(--cc-accent, #c47a85); }
.cc-feat-card__title-link,
.cc-feat-card__title-link:hover,
.cc-feat-card__title-link:focus {
color: inherit;
text-decoration: none;
}
/* ---- CREAM TYPE SELECTOR (radio cards on shop-details.php) ---- */
.cc-cream-cards {
display: flex;
flex-direction: column;
gap: 10px;
}
.cc-cream-card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
border: 1.5px solid #e8d8da;
border-radius: 12px;
background: #fffaf7;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.cc-cream-card:hover {
border-color: var(--cc-accent, #c47a85);
background: #fff5f3;
}
.cc-cream-card.active {
border-color: var(--cc-primary, #781717);
background: #fff0ec;
box-shadow: 0 4px 12px rgba(120, 23, 23, 0.12);
}
.cc-cream-card input[type="radio"] {
margin-top: 4px;
accent-color: var(--cc-primary, #781717);
width: 16px;
height: 16px;
flex-shrink: 0;
}
.cc-cream-card__body { flex: 1; }
.cc-cream-card__title {
font-weight: 700;
font-size: 14px;
color: var(--cc-dark, #2c1515);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.cc-cream-card__badge {
font-size: 10px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #fff;
background: linear-gradient(135deg, #b8860b, #d4af37);
padding: 2px 8px;
border-radius: 999px;
}
.cc-cream-card__price {
font-size: 12px;
font-weight: 700;
color: var(--cc-primary, #781717);
background: #fde8e8;
padding: 2px 8px;
border-radius: 999px;
margin-left: auto;
}
.cc-cream-card__desc {
font-size: 12.5px;
color: #7a5a5a;
line-height: 1.45;
}
/* ---- CUSTOM CAKE FEATURE TILE ---- */
.cc-custom-tile {
position: relative;
padding: 56px 0 60px;
background:
radial-gradient(ellipse at top right, rgba(196, 122, 133, 0.10), transparent 55%),
linear-gradient(135deg, #fef0e8 0%, #fff7ee 55%, #fdebe2 100%);
overflow: hidden;
}
.cc-custom-tile::before {
content: '';
position: absolute; top: -120px; left: -120px;
width: 280px; height: 280px; border-radius: 50%;
background: radial-gradient(circle, rgba(212, 175, 55, 0.14), transparent 65%);
pointer-events: none;
}
.cc-custom-tile__grid {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 48px;
align-items: center;
position: relative; z-index: 1;
}
.cc-custom-tile__media {
position: relative;
height: 360px;
}
.cc-custom-tile__photo {
position: absolute;
background-size: cover;
background-position: center;
border-radius: 18px;
border: 4px solid #fff;
box-shadow: 0 16px 36px rgba(120, 23, 23, 0.18);
}
.cc-custom-tile__photo--back {
width: 200px; height: 240px;
top: 0; left: 0;
transform: rotate(-6deg);
z-index: 1;
}
.cc-custom-tile__photo--mid {
width: 220px; height: 260px;
top: 60px; left: 165px;
transform: rotate(3deg);
z-index: 2;
}
.cc-custom-tile__photo--front {
width: 180px; height: 220px;
top: 130px; left: 60px;
transform: rotate(-2deg);
z-index: 3;
}
.cc-custom-tile__badge {
position: absolute;
top: 12px; right: 18px;
padding: 6px 16px;
background: linear-gradient(135deg, #781717, #a02828);
color: #fff;
font-size: 11px;
letter-spacing: 2.5px;
font-weight: 700;
text-transform: uppercase;
border-radius: 999px;
box-shadow: 0 6px 14px rgba(120, 23, 23, 0.35);
z-index: 4;
}
.cc-custom-tile__copy { padding: 4px 0; }
.cc-custom-tile__eyebrow {
display: inline-block;
color: #b8860b;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 12px;
}
.cc-custom-tile__title {
font-family: var(--cc-font-heading, 'Playfair Display'), Georgia, serif;
font-size: clamp(26px, 3.4vw, 38px);
font-weight: 700;
color: var(--cc-dark, #2c1515);
line-height: 1.15;
margin: 0 0 12px;
}
.cc-custom-tile__title em {
font-style: italic;
background: linear-gradient(135deg, #c47a85, #781717 60%, #b8860b);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.cc-custom-tile__lead {
font-family: var(--cc-font-decorative, 'Cormorant Garamond'), Georgia, serif;
font-style: italic;
font-size: 17px;
color: #6b4c4c;
line-height: 1.55;
margin: 0 0 20px;
max-width: 460px;
}
.cc-custom-tile__steps {
list-style: none;
padding: 0; margin: 0 0 26px;
}
.cc-custom-tile__steps li {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
color: #4a2f2f;
margin-bottom: 10px;
line-height: 1.4;
}
.cc-custom-tile__step-num {
flex: 0 0 auto;
width: 26px; height: 26px;
border-radius: 50%;
background: #fff;
border: 1.5px solid #c47a85;
color: #781717;
font-weight: 700;
font-size: 12px;
display: inline-flex;
align-items: center; justify-content: center;
box-shadow: 0 2px 6px rgba(196, 122, 133, 0.18);
}
.cc-custom-tile__cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #781717, #a02828);
color: #fff;
text-decoration: none;
padding: 13px 28px;
border-radius: 999px;
font-weight: 700;
font-size: 13.5px;
letter-spacing: 1px;
text-transform: uppercase;
box-shadow: 0 8px 20px rgba(120, 23, 23, 0.28);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cc-custom-tile__cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(120, 23, 23, 0.38);
color: #fff;
text-decoration: none;
}
.cc-custom-tile__cta svg { transition: transform 0.2s ease; }
.cc-custom-tile__cta:hover svg { transform: translateX(4px); }
@media (max-width: 900px) {
.cc-custom-tile__grid { grid-template-columns: 1fr; gap: 28px; }
.cc-custom-tile__media { height: 300px; max-width: 380px; margin: 0 auto; }
.cc-custom-tile__photo--back { width: 160px; height: 200px; }
.cc-custom-tile__photo--mid { width: 180px; height: 220px; left: 130px; }
.cc-custom-tile__photo--front { width: 150px; height: 180px; top: 110px; left: 50px; }
.cc-custom-tile__lead { max-width: none; }
}
@media (max-width: 500px) {
.cc-custom-tile { padding: 40px 0 44px; }
.cc-custom-tile__media { height: 240px; max-width: 320px; }
.cc-custom-tile__photo--back { width: 130px; height: 160px; }
.cc-custom-tile__photo--mid { width: 150px; height: 180px; left: 100px; top: 50px; }
.cc-custom-tile__photo--front { width: 120px; height: 150px; top: 90px; left: 40px; }
.cc-custom-tile__cta { padding: 11px 22px; font-size: 12px; }
}
.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 -> 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: clamp(14px, 2.4vw, 26px);
font-weight: 600;
letter-spacing: clamp(0.04em, 0.6vw, 0.12em);
text-transform: uppercase;
margin: 0;
line-height: 1.3;
max-width: 90%;
white-space: nowrap;
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: clamp(13px, 2vw, 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: clamp(0.04em, 0.5vw, 0.12em) !important;
margin: 0 !important;
white-space: nowrap !important;
}
@media (max-width: 991px) {
.cc-deco-heading { max-width: 460px; }
}
@media (max-width: 767px) {
.cc-deco-heading { min-height: 100px; padding-top: 10px; max-width: 320px; }
}
/* ══════════════════════════════════════════════════════════════════
QUALITY / INGREDIENTS MESSAGING
- .cc-shop-promise : compact strip on shop.php
- .cc-ingredients-section : fuller block on every category page
══════════════════════════════════════════════════════════════════ */
.cc-shop-promise {
background: var(--cc-shop-bg, #fdf6f6);
padding: 22px 0 6px;
}
.cc-shop-promise .container {
display: flex;
align-items: center;
gap: 16px;
justify-content: center;
}
.cc-shop-promise__rule {
flex: 1 1 auto;
height: 1px;
max-width: 120px;
background: linear-gradient(to right, transparent, var(--cc-shop-divider, #f0e8ea), transparent);
}
.cc-shop-promise__text {
flex: 0 1 auto;
margin: 0;
text-align: center;
color: var(--cc-shop-heading, #3a1a1a);
font-family: var(--cc-font-decorative, 'Cormorant Garamond'), Georgia, serif;
font-size: clamp(14px, 1.4vw, 17px);
line-height: 1.5;
letter-spacing: 0.01em;
max-width: 760px;
}
.cc-shop-promise__text em {
font-style: italic;
color: var(--cc-primary, #781717);
font-weight: 500;
}
.cc-ingredients-section {
margin: 8px auto 28px;
padding: 8px 16px 18px;
text-align: center;
max-width: 880px;
}
.cc-ingredients-rule {
display: block;
height: 1px;
width: 240px;
margin: 0 auto;
background: linear-gradient(to right, transparent, var(--cc-accent, #c47a85), transparent);
opacity: 0.55;
}
.cc-ingredients-eyebrow {
display: inline-block;
margin: 14px 0 6px;
color: var(--cc-primary, #781717);
font-family: var(--cc-font-body, 'Lato'), sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.32em;
text-transform: uppercase;
}
.cc-ingredients-title {
margin: 0 0 10px;
color: var(--cc-shop-heading, #3a1a1a);
font-family: var(--cc-font-decorative, 'Cormorant Garamond'), Georgia, serif;
font-size: clamp(20px, 2.4vw, 28px);
font-weight: 600;
font-style: italic;
letter-spacing: 0.02em;
}
.cc-ingredients-body {
margin: 0 auto 14px;
max-width: 720px;
color: #5a4045;
font-family: var(--cc-font-body, 'Lato'), sans-serif;
font-size: clamp(13px, 1.2vw, 15px);
line-height: 1.7;
}
.cc-ingredients-list {
list-style: none;
padding: 0;
margin: 6px auto 14px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 10px;
max-width: 760px;
}
.cc-ingredients-list li {
display: inline-flex;
align-items: center;
padding: 5px 12px;
border: 1px solid var(--cc-shop-border, #f0c8ce);
border-radius: 999px;
background: rgba(255, 255, 255, 0.6);
color: var(--cc-shop-heading, #3a1a1a);
font-family: var(--cc-font-body, 'Lato'), sans-serif;
font-size: 12px;
letter-spacing: 0.04em;
white-space: nowrap;
}
.cc-ingredients-list li::before {
content: '\2022';
color: var(--cc-accent, #c47a85);
font-weight: 700;
margin-right: 6px;
font-size: 14px;
line-height: 1;
}
@media (max-width: 767px) {
.cc-shop-promise { padding: 16px 0 4px; }
.cc-shop-promise .container { flex-direction: column; gap: 8px; }
.cc-shop-promise__rule { max-width: 200px; width: 60%; }
.cc-ingredients-section { padding: 4px 12px 14px; }
.cc-ingredients-list li { font-size: 11px; padding: 4px 10px; }
}
/* ══════════════════════════════════════════════════════════════════
PRODUCT IMAGE ZOOM + PROTECTION LAYER
- .cc-zoom-wrap : container for hero image (hover zoom + lightbox)
- .cc-zoom-real : the real ![]()
(sits behind decoy, no events)
- .cc-decoy : transparent 1×1 GIF on top — what right-clickers save
- .cc-watermark : faint "Crust & Crumble" in corner
- .cc-thumb-protected : same protection minus zoom, applied to thumbnails
- .cc-lightbox-overlay : fullscreen overlay for tap/click-to-zoom
══════════════════════════════════════════════════════════════════ */
.cc-zoom-wrap {
position: relative;
overflow: hidden;
cursor: zoom-in;
background: #fff;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
border-radius: 4px;
}
/* Zoom disabled in admin → static cursor, no transform */
.cc-zoom-wrap.cc-zoom-disabled { cursor: default; }
.cc-zoom-wrap.cc-zoom-disabled .cc-zoom-real { transform: none !important; transition: none !important; }
.cc-zoom-wrap .cc-zoom-real {
display: block;
width: 100%;
height: auto;
transition: transform 0.18s ease;
will-change: transform;
pointer-events: none;
-webkit-user-drag: none;
user-select: none;
}
.cc-zoom-wrap.is-zooming .cc-zoom-real {
transform: scale(2);
transition: none;
}
/* The decoy image sits on top and is what right-click "Save Image As" saves */
.cc-decoy {
position: absolute !important;
inset: 0;
width: 100% !important;
height: 100% !important;
z-index: 2;
background: transparent;
/* Decoy must remain interactive — it's what receives right-click/drag */
}
.cc-watermark {
position: absolute;
top: 10px;
right: 12px;
z-index: 4;
pointer-events: none;
user-select: none;
}
/* Logo-image watermark: brand mark in corner of protected images.
min-width:0 overrides the theme's `.product__details__big__img img { min-width: 100% }`
which would otherwise stretch the watermark to fill the frame. */
.cc-watermark--logo {
width: clamp(32px, 4.5vw, 52px);
min-width: 0 !important;
max-width: none;
height: auto;
opacity: 0.5;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
-webkit-user-drag: none;
}
.cc-zoom-hint {
position: absolute;
top: 12px;
left: 14px;
z-index: 4;
background: rgba(255, 255, 255, 0.85);
color: var(--cc-shop-heading, #3a1a1a);
font-family: var(--cc-font-body, 'Lato'), sans-serif;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
pointer-events: none;
user-select: none;
opacity: 0.9;
transition: opacity 0.2s ease;
}
.cc-zoom-wrap.is-zooming .cc-zoom-hint { opacity: 0; }
.cc-thumb-protected {
position: relative;
user-select: none;
}
.cc-thumb-protected img:not(.cc-decoy) {
pointer-events: none;
-webkit-user-drag: none;
}
/* ─── Lightbox ───────────────────────────────────────────────────── */
.cc-lightbox-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.92);
display: none;
align-items: center;
justify-content: center;
cursor: zoom-out;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
animation: cc-lb-fade 0.18s ease;
}
.cc-lightbox-overlay.is-open { display: flex; }
.cc-lightbox-frame {
position: relative;
max-width: 92vw;
max-height: 86vh;
display: flex;
align-items: center;
justify-content: center;
}
.cc-lightbox-img {
max-width: 92vw;
max-height: 86vh;
object-fit: contain;
pointer-events: none;
-webkit-user-drag: none;
user-select: none;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
border-radius: 4px;
}
.cc-lightbox-decoy {
z-index: 1;
}
.cc-watermark--lightbox {
top: 18px;
right: 22px;
bottom: auto;
width: clamp(44px, 5.5vw, 70px);
opacity: 0.6;
}
.cc-lightbox-close {
position: absolute;
top: 18px;
right: 22px;
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.4);
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 22px;
line-height: 1;
cursor: pointer;
z-index: 5;
transition: background 0.15s ease, border-color 0.15s ease;
}
.cc-lightbox-close:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.7);
}
@keyframes cc-lb-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@media (max-width: 767px) {
.cc-zoom-wrap { cursor: pointer; }
.cc-zoom-wrap .cc-zoom-real { transform: none !important; }
.cc-zoom-hint { font-size: 10px; padding: 3px 8px; }
}
/* Card images (catalog) — protection without zoom */
.product__item__pic { user-select: none; -webkit-touch-callout: none; }
/* =============================================
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;
}
}
/* ============================================================
Baking Workshops — slim homepage band (below "Our Story")
============================================================ */
.cc-workshops-slim {
background: linear-gradient(135deg, #fff5f0 0%, #fdebe1 100%);
padding: 38px 0;
position: relative;
overflow: hidden;
}
.cc-workshops-slim__inner {
display: grid;
grid-template-columns: 320px 1fr;
gap: 32px;
align-items: center;
}
.cc-workshops-slim__photo {
position: relative;
height: 200px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 8px 22px rgba(120,23,23,.15);
background: #fff5f0;
}
.cc-workshops-slim__slide {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.1s ease;
pointer-events: none;
-webkit-user-drag: none;
-webkit-touch-callout: none;
}
.cc-workshops-slim__slide.is-active { opacity: 1; }
.cc-workshops-slim__badge {
position: absolute; top: 10px; left: 10px; z-index: 3;
background: rgba(255,255,255,.92);
color: var(--cc-accent, #c47a85);
font: 700 10px/1 'Lato', sans-serif;
text-transform: uppercase; letter-spacing: .08em;
padding: 5px 10px; border-radius: 999px;
}
.cc-workshops-slim__eyebrow {
font-family: 'Dancing Script', cursive;
font-size: 22px; color: var(--cc-accent, #c47a85);
margin: 0 0 4px;
}
.cc-workshops-slim__title {
font-family: 'Cormorant Garamond', serif;
font-size: 28px; font-weight: 700; line-height: 1.15;
color: #5a3a2a; margin: 0 0 8px;
}
.cc-workshops-slim__lead {
font: 14px/1.55 'Lato', sans-serif;
color: #5a4a40; margin: 0 0 14px; max-width: 540px;
}
.cc-workshops-slim__pills {
display: flex; flex-wrap: wrap; gap: 6px;
margin-bottom: 14px;
}
.cc-workshops-slim__pill {
background: rgba(255,255,255,.7);
border: 1px solid rgba(196,122,133,.25);
color: #7a4a3a;
font: 600 11px/1 'Lato', sans-serif;
padding: 5px 10px; border-radius: 999px;
text-transform: uppercase; letter-spacing: .04em;
}
.cc-workshops-slim__cta {
display: inline-flex; align-items: center; gap: 6px;
background: var(--cc-accent, #c47a85);
color: #fff;
padding: 10px 22px; border-radius: 24px;
font: 700 13px/1 'Lato', sans-serif;
text-decoration: none;
transition: background .22s, transform .22s;
}
.cc-workshops-slim__cta:hover {
background: #a85e6e; color: #fff;
transform: translateY(-1px);
}
@media (max-width: 760px) {
.cc-workshops-slim__inner { grid-template-columns: 1fr; gap: 18px; }
.cc-workshops-slim__photo { height: 180px; }
}
/* ============================================================
Baking Workshops — sticky right-side widget (every page)
Permanent dismissal via localStorage; appears immediately when
the workshops setting is enabled and at least one open class exists.
============================================================ */
.cc-ws-widget {
position: fixed; right: 18px; bottom: 18px;
width: 280px; max-width: calc(100vw - 36px);
background: #fff;
border-radius: 14px;
box-shadow: 0 14px 40px rgba(120,23,23,.22), 0 0 0 1px rgba(196,122,133,.12);
overflow: hidden;
z-index: 9000;
opacity: 0;
transform: translateY(16px) scale(.98);
pointer-events: none;
transition: opacity .35s ease, transform .35s ease;
font-family: 'Lato', sans-serif;
}
.cc-ws-widget.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.cc-ws-widget__close {
position: absolute; top: 8px; right: 8px; z-index: 3;
width: 26px; height: 26px;
border-radius: 50%; border: none;
background: rgba(0,0,0,.45); color: #fff;
font-size: 16px; line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .2s;
}
.cc-ws-widget__close:hover { background: rgba(0,0,0,.7); }
.cc-ws-widget__photo {
position: relative; height: 130px;
background: #fff5f0; overflow: hidden;
}
.cc-ws-widget__slide {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.1s ease;
pointer-events: none;
-webkit-user-drag: none;
}
.cc-ws-widget__slide.is-active { opacity: 1; }
.cc-ws-widget__badge {
position: absolute; top: 10px; left: 10px; z-index: 2;
background: rgba(255,255,255,.95);
color: var(--cc-accent, #c47a85);
font: 700 9px/1 'Lato', sans-serif;
text-transform: uppercase; letter-spacing: .08em;
padding: 4px 9px; border-radius: 999px;
}
.cc-ws-widget__body { padding: 12px 16px 16px; }
.cc-ws-widget__eyebrow {
font-family: 'Dancing Script', cursive;
font-size: 18px; color: var(--cc-accent, #c47a85);
margin: 0 0 2px; line-height: 1;
}
.cc-ws-widget__title {
font-family: 'Cormorant Garamond', serif;
font-size: 19px; font-weight: 700;
color: #2c1515; margin: 0 0 6px; line-height: 1.2;
}
.cc-ws-widget__meta {
font: 12px/1.4 'Lato', sans-serif;
color: #5a4a40; margin: 0 0 10px;
}
.cc-ws-widget__cta {
display: block; text-align: center;
background: var(--cc-accent, #c47a85);
color: #fff;
padding: 9px 14px; border-radius: 22px;
font: 700 12px/1 'Lato', sans-serif;
text-decoration: none;
transition: background .22s;
}
.cc-ws-widget__cta:hover { background: #a85e6e; color: #fff; }
@media (max-width: 540px) {
/* Compact corner card on phones — was calc(100vw-24px) (~full screen),
which dominated mobile and overlapped content. */
.cc-ws-widget {
width: 208px;
right: 12px; bottom: 12px;
border-radius: 12px;
}
.cc-ws-widget__photo { height: 86px; }
.cc-ws-widget__body { padding: 9px 12px 12px; }
.cc-ws-widget__title { font-size: 14px; margin: 0 0 4px; }
.cc-ws-widget__eyebrow{ font-size: 10px; }
.cc-ws-widget__meta { font-size: 11px; }
.cc-ws-widget__cta { padding: 7px 12px; font-size: 12px; }
.cc-ws-widget__close { width: 22px; height: 22px; font-size: 14px; }
}
/* ============================================================
Product tile name — reserve 2 lines and clamp longer names
------------------------------------------------------------
The product card text area is a CSS grid (see rule near
line 7330) where row 1 is the name. Without a height
floor, a single 2-line name like "Chocolate Truffle Cake -
Milk chocolate" makes that one tile taller than its 1-line
siblings and breaks row alignment in the category grids
(shop-cakes, shop-cupcakes, etc.).
Clamping to 2 lines with a matching min-height locks the
name block to a fixed height for every card.
============================================================ */
.product__item__text h6 a {
display: -webkit-box !important;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.8em !important; /* 2 lines × line-height 1.4 */
}
/* ============================================================
Product tile price block — force consistent stacking
------------------------------------------------------------
The price block (see rule near line 7366) was a flex row with
flex-wrap:wrap, so del / offer-price / OFFER-badge wrapped
differently depending on digit count. Tiles with ₹1,249→₹1,149
stacked onto 3 lines while ₹1,050→₹950 fit on 2, producing
different card heights in the same grid row.
Stacking the block as a column gives every offer tile an
identical 3-row price structure. A min-height keeps non-offer
tiles (single ) the same total height so plain-priced
cards stay aligned with offer cards next to them.
============================================================ */
.product__item__text .product__item__price {
flex-direction: column !important;
align-items: flex-start !important;
gap: 3px !important;
min-height: 54px;
}
/* ============================================================
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; }
/* Brand ampersand — Playfair Display flourish for "Crust & Crumble" */
.cc-amp {
font-family: 'Playfair Display', serif;
font-style: normal;
font-weight: 600;
padding: 0 0.08em;
}
/* ============================================================
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: 12px 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: 56px !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 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;
}
.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;
}
/* 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;
}
/* 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; }
.offcanvas-menu-wrapper {
position: fixed;
left: -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: 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). It is
position:fixed but its slideshow forced horizontal overflow → the
full-height white strip on the right on phones. */
.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: 48px !important; }
}