/* ===== FIX: WooCommerce clearfix quebra o GRID (buraco no 1º item) ===== */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after{
content: none !important;
display: none !important;
}
/* ===== Loja: remover estilos default do Woo que atrapalham ===== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
margin: 0;
padding: 0;
width: auto !important;
float: none !important;
display: flex;
}
/* ===== Grid ===== */
.woocommerce ul.products{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
@media (max-width: 1100px){
.woocommerce ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ===== Card wrapper (li.product) ===== */
.woocommerce ul.products li.product{
background: transparent;
border: 0;
}
.woocommerce ul.products li.product .cs-pcard{
width: 100%;
height: 100%;
}
/* =========================
Woo Star Rating (FIX)
- sem isso, aparece o texto "Classificado com..."
========================= */
.star-rating{
position: relative;
display: inline-block;
line-height: 1;
font-size: 14px;
width: 5em; /* 5 estrelas */
height: 1em;
overflow: hidden;
vertical-align: middle;
color: #f7b500; /* cor das estrelas cheias */
}
.star-rating::before{
content: "★★★★★";
position: absolute;
left: 0;
top: 0;
opacity: .25; /* estrelas vazias */
}
.star-rating span{
position: absolute;
left: 0;
top: 0;
height: 1em;
overflow: hidden;
white-space: nowrap;
text-indent: -9999px; /* esconde texto interno do Woo */
}
.star-rating span::before{
content: "★★★★★";
position: absolute;
left: 0;
top: 0;
text-indent: 0;
}
/* Se o tema tiver quebrado o padrão do WP, garante o "screen-reader-text" invisível */
.screen-reader-text{
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Wishlist page também deve ter o mesmo grid */
.cs-wishlist ul.products{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.cs-wishlist__title {
display: none;
}
.cs-wishlist__sub {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px 0;
border-bottom:1px solid rgba(0,0,0,.08);
margin-bottom: 15px;
}
.button {
text-decoration: none;
color: #ffffff;
background-color: #600165;
font-size: 14px;
font-weight: 600;
border: solid 1px;
border-color: #a4a4a4;
border-radius: 20px;
padding: 6px 14px;
}
.button:hover {
background-color: #410045;
color: #ffffff;
}
/* Remove os “pontinhos” da lista e alinhamentos estranhos */
.cs-page-wishlist .cs-wishlist ul.products{
list-style: none;
padding-left: 0;
margin-left: 0;
}
.page-content {
max-width: 1440px;
}
@media (max-width: 1100px){
.cs-wishlist ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
.cs-wishlist ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* reset do li.product dentro da wishlist (igual ao Woo) */
.cs-wishlist ul.products li.product{
margin: 0;
padding: 0;
width: auto !important;
float: none !important;
background: transparent;
border: 0;
display: flex;
}
.cs-wishlist ul.products li.product .cs-pcard{ width: 100%; }
/* evita ::before/::after que quebram o grid */
.cs-wishlist ul.products::before,
.cs-wishlist ul.products::after{
content: none !important;
display: none !important;
}
@keyframes csCartFeedbackPulse {
0% { transform: scale(1); }
35% { transform: scale(1.08); }
100% { transform: scale(1); }
}
[data-cs-mini-cart-trigger].cs-cart-feedback-pulse,
.cart-count.cs-cart-feedback-pulse {
animation: csCartFeedbackPulse .55s ease both;
}
/* ===== Shop Layout (sidebar + products) ===== */
.cs-shop-layout{
display: grid;
grid-template-columns: 280px 1fr;
gap: 24px;
align-items: start;
}
@media (max-width: 980px){
.cs-shop-layout{ grid-template-columns: 1fr; }
.cs-shop-layout__sidebar{ order: 2; }
.cs-shop-layout__main{ order: 1; }
}
/* =========================================================
CS SHOP LAYOUT + FILTERS (do zero)
========================================================= */
.cs-shop-layout{
display:grid;
grid-template-columns: 320px 1fr;
gap: 24px;
align-items:start;
margin-top: 18px;
}
/* The catalog grid responds to its usable panel, not the viewport. The
* 320px filter sidebar remains part of the desktop calculation. */
.cs-shop .cs-shop-products {
min-width: 0;
container-type: inline-size;
}
.cs-shop .cs-shop-products > .cs-loop > ul.products {
display: grid;
gap: 18px;
margin: 0;
padding: 0;
list-style: none;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cs-shop .cs-shop-products > .cs-loop > ul.products > li.product {
display: flex;
width: auto !important;
margin: 0;
padding: 0;
float: none !important;
border: 0;
background: transparent;
}
.cs-shop .cs-shop-products > .cs-loop > ul.products > li.product .cs-pcard {
width: 100%;
height: 100%;
}
@container (min-width: 760px) {
.cs-shop .cs-shop-products > .cs-loop > ul.products {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@container (min-width: 1000px) {
.cs-shop .cs-shop-products > .cs-loop > ul.products {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@container (max-width: 320px) {
.cs-shop .cs-shop-products > .cs-loop > ul.products {
grid-template-columns: minmax(0, 1fr);
}
}
.cs-shop-sidebar{
position: sticky;
top: 208px;
}
.cs-filters-overlay{
display:none;
}
@media (max-width: 1100px){
.cs-shop-layout{
grid-template-columns: 1fr;
}
.cs-filters-open{
display:inline-flex !important;
}
}
/* HERO */
.cs-shop-hero{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap: 18px;
}
.cs-shop-title{
font-size: 34px;
font-weight: 900;
margin: 0 0 10px;
}
.cs-shop-description{
max-width: 720px;
opacity: .8;
}
.tax-product_cat .cs-shop-hero{
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
align-items: stretch;
gap: 28px;
margin: 18px 0 24px;
padding: 28px 32px;
border: 1px solid rgba(96, 1, 101, .08);
border-radius: 24px;
background:
linear-gradient(135deg, rgba(250, 244, 251, .92), rgba(255, 255, 255, .96));
}
.tax-product_cat .cs-shop-hero--no-description{
grid-template-columns: minmax(0, 1fr);
}
.tax-product_cat .cs-shop-hero__meta{
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.tax-product_cat .cs-shop-hero__eyebrow{
display: inline-flex;
align-items: center;
width: fit-content;
margin-bottom: 12px;
padding: 7px 12px;
border: 1px solid rgba(96, 1, 101, .14);
border-radius: 999px;
background: rgba(255, 255, 255, .72);
color: #600165;
font-size: 11px;
font-weight: 900;
letter-spacing: .08em;
line-height: 1;
text-transform: uppercase;
}
.tax-product_cat .cs-shop-hero__title{
max-width: 12ch;
margin-bottom: 12px;
font-size: clamp(38px, 4vw, 58px);
line-height: .95;
letter-spacing: -.035em;
}
.tax-product_cat .cs-shop-hero__count{
margin: 0;
color: rgba(0, 0, 0, .52);
font-size: 15px;
font-weight: 800;
}
.tax-product_cat .cs-shop-hero__content{
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.tax-product_cat .cs-shop-hero__description-card{
max-width: 760px;
padding: 22px 24px;
border: 1px solid rgba(96, 1, 101, .09);
border-radius: 20px;
background: rgba(255, 255, 255, .84);
color: rgba(0, 0, 0, .66);
font-size: 15px;
line-height: 1.65;
opacity: 1;
}
.tax-product_cat .cs-shop-hero__description-card--mobile{
display: none;
}
.tax-product_cat .cs-shop-hero__description-card p{
margin: 0 0 12px;
}
.tax-product_cat .cs-shop-hero__description-card p:last-child{
margin-bottom: 0;
}
.tax-product_cat .cs-shop-hero__description-card a{
color: #600165;
font-weight: 800;
text-decoration: none;
}
.tax-product_cat .cs-shop-hero__description-card a:hover{
text-decoration: underline;
}
.cs-filters-open{
display:none;
height: 44px;
padding: 0 14px;
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.16);
background:#fff;
font-weight: 800;
cursor:pointer;
}
@media (max-width: 767px){
.tax-product_cat .cs-shop-hero{
display: block;
margin: 12px 0 16px;
padding: 16px;
border-radius: 20px;
}
.tax-product_cat .cs-shop-hero__eyebrow{
margin-bottom: 10px;
padding: 6px 10px;
font-size: 10px;
}
.tax-product_cat .cs-shop-hero__title{
max-width: none;
margin-bottom: 8px;
font-size: clamp(32px, 10vw, 42px);
line-height: 1;
}
.tax-product_cat .cs-shop-hero__count{
font-size: 14px;
}
.tax-product_cat .cs-shop-hero__content{
gap: 12px;
margin-top: 14px;
}
.tax-product_cat .cs-shop-hero__description-card--desktop{
display: none;
}
.tax-product_cat .cs-shop-hero__description-card--mobile{
display: block;
padding: 0;
overflow: hidden;
border-radius: 16px;
font-size: 14px;
line-height: 1.55;
}
.tax-product_cat .cs-shop-hero__description-summary{
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 44px;
padding: 0 54px 0 14px;
color: #170019;
cursor: pointer;
font-size: 13px;
font-weight: 900;
list-style: none;
}
.tax-product_cat .cs-shop-hero__description-summary::-webkit-details-marker{
display: none;
}
.tax-product_cat .cs-shop-hero__description-summary:hover,
.tax-product_cat .cs-shop-hero__description-summary:focus-visible{
color: var(--cs-purple, #600165);
outline: none;
}
.tax-product_cat .cs-shop-hero__description-summary:focus-visible{
box-shadow: inset 0 0 0 2px rgba(96, 1, 101, .14);
}
.tax-product_cat .cs-shop-hero__description-summary::before{
content: "";
position: absolute;
top: 50%;
right: 14px;
width: 26px;
height: 26px;
border: 1px solid rgba(96, 1, 101, .2);
border-radius: 999px;
background: #fff;
transform: translateY(-50%);
}
.tax-product_cat .cs-shop-hero__description-summary::after{
content: "";
position: absolute;
top: 50%;
right: 22px;
width: 11px;
height: 11px;
background:
linear-gradient(var(--cs-purple, #600165), var(--cs-purple, #600165)) center / 11px 2px no-repeat,
linear-gradient(var(--cs-purple, #600165), var(--cs-purple, #600165)) center / 2px 11px no-repeat;
transform: translateY(-50%);
transition: background-size .2s ease;
}
.tax-product_cat .cs-shop-hero__description-card--mobile[open] .cs-shop-hero__description-summary::after{
background-size: 11px 2px, 2px 0;
}
.tax-product_cat .cs-shop-hero__description-body{
padding: 0 14px 14px;
color: rgba(0, 0, 0, .64);
}
}
/* =========================================================
FILTER BOX
========================================================= */
.cs-filters{
border: 1px solid rgba(0,0,0,.12);
border-radius: 16px;
background:#fff;
padding: 16px;
overflow:hidden;
}
.cs-filters__head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap: 10px;
margin-bottom: 10px;
}
.cs-filters__title{
font-size: 16px;
font-weight: 900;
margin: 0;
color: #000;
}
.cs-filters__sub{
margin: 4px 0 0;
font-size: 15px;
opacity: .7;
}
.cs-filters__close{
display:none;
width: 38px;
height: 38px;
border-radius: 12px;
border: 1px solid rgba(0,0,0,.14);
background:#fff;
cursor:pointer;
font-weight:900;
}
.cs-filters__actions-top{
display:flex;
justify-content:flex-end;
margin: 8px 0 12px;
}
.cs-filters__clear{
font-size: 14px;
text-decoration:none;
opacity: .7;
color: #600165;
}
.cs-filters__clear:hover{ opacity: 1; }
.cs-filter{
border-top: 1px solid rgba(0,0,0,.08);
padding-top: 10px;
margin-top: 10px;
}
.cs-filter__toggle{
width: 100%;
border: 0;
background: transparent;
padding: 0;
display:flex;
align-items:center;
justify-content:space-between;
cursor:pointer;
font-weight: 900;
font-size: 16px;
color: #410045;
}
.cs-filter__toggle:hover,
.cs-filter__toggle:focus-visible,
.cs-filter.has-active-filter .cs-filter__toggle{
color: var(--cs-purple, #600165);
}
.cs-filter__label{
min-width: 0;
text-align: left;
}
.cs-filter__chev{
width: 10px;
height: 10px;
border-right: 2px solid rgba(0,0,0,.65);
border-bottom: 2px solid rgba(0,0,0,.65);
transform: rotate(45deg);
transition: transform .2s ease;
}
.cs-filter__body{
margin-top: 10px;
display:block;
overflow:hidden;
max-height: 1200px;
transition: max-height .25s ease, opacity .2s ease, margin-top .2s ease, visibility 0s linear 0s;
opacity: 1;
visibility: visible;
}
.cs-filter.is-collapsed .cs-filter__chev{
transform: rotate(-45deg);
}
.cs-filter.is-collapsed .cs-filter__body{
max-height: 0;
opacity: 0;
margin-top: 0;
visibility: hidden;
pointer-events: none;
transition: max-height .25s ease, opacity .2s ease, margin-top .2s ease, visibility 0s linear .25s;
}
.cs-filter__item{
display:flex;
align-items:center;
gap: 10px;
padding: 8px 0;
cursor:pointer;
user-select:none;
}
.cs-filter__item.is-disabled{
opacity: .4;
pointer-events: none;
}
.cs-filter__item input{
width: 18px;
height: 18px;
accent-color: var(--cs-purple, #600165);
}
.cs-filter__text{ flex: 1; font-size: 14px; }
.cs-filter__count{ font-size: 12px; opacity: .6; }
.cs-filters__apply{
width: 100%;
height: 46px;
border-radius: 12px;
border: 0;
background: #111;
color:#fff;
font-weight: 900;
cursor:pointer;
margin-top: 12px;
}
/* Loading */
.cs-filters__loading{
display:none;
margin-top: 12px;
gap: 6px;
align-items:center;
}
.cs-filters__loading span{
width: 6px;
height: 6px;
border-radius: 999px;
background: rgba(0,0,0,.35);
animation: csDot 1s infinite ease-in-out;
}
.cs-filters__loading span:nth-child(2){ animation-delay: .15s; }
.cs-filters__loading span:nth-child(3){ animation-delay: .3s; }
@keyframes csDot{
0%,100%{ transform: translateY(0); opacity:.45; }
50%{ transform: translateY(-4px); opacity:1; }
}
/* =========================================================
MOBILE DRAWER
========================================================= */
@media (max-width: 1100px){
.cs-shop-layout{
grid-template-columns: 1fr;
}
/* ✅ NÃO definir .cs-shop-sidebar como relative aqui */
.cs-filters-open{
display:flex !important;
align-items: center;
justify-content: center;
color: #000;
font-size: 16px;
}
.cs-shop-sidebar{
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: min(92vw, 380px);
z-index: var(--cs-z-filter, 710);
transform: translateX(-110%);
transition: transform .25s ease;
padding: 12px;
background: transparent;
}
.cs-shop-sidebar .cs-filters{
height: calc(100vh - 24px);
overflow: auto;
}
body.cs-filters-opened .cs-shop-sidebar{
transform: translateX(0);
}
.cs-filters__close{
display:inline-flex;
align-items:center;
justify-content:center;
}
.cs-filters-overlay{
display:block;
position: fixed;
inset: 0;
background: rgba(0,0,0,.35);
z-index: var(--cs-z-filter-backdrop, 700);
opacity: 0;
pointer-events:none;
transition: opacity .2s ease;
}
body.cs-filters-opened .cs-filters-overlay{
opacity: 1;
pointer-events:auto;
}
}
/* Toolbar (resultado + ordenação) */
.woocommerce .cs-shop-toolbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px 0;
border-bottom:1px solid rgba(0,0,0,.08);
margin-bottom: 15px;
}
.woocommerce .cs-shop-toolbar .woocommerce-result-count{
margin:0;
font-size:20px; /* ajuste */
font-weight:700; /* ajuste */
line-height:1.2;
color: #600165;
}
/* Select de ordenação */
.woocommerce .cs-shop-toolbar .woocommerce-ordering{
margin:0;
}
.woocommerce .cs-shop-toolbar .woocommerce-ordering select{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
border:1px solid rgba(0,0,0,.18);
border-radius:12px;
background:#fff;
padding:10px 42px 10px 14px; /* espaço pra “seta” */
font-weight:600;
font-size:14px;
color:#111 ;
outline:none;
}
/* Seta custom (não dá pra usar ::after no select, então pegamos no container) */
.woocommerce .cs-shop-toolbar .woocommerce-ordering{
position:relative;
}
.woocommerce .cs-shop-toolbar .woocommerce-ordering::after{
content:"";
position:absolute;
right:14px;
top:50%;
transform:translateY(-50%);
width:10px;
height:10px;
background:currentColor;
clip-path: polygon(15% 35%, 50% 70%, 85% 35%, 75% 25%, 50% 50%, 25% 25%);
opacity:.7;
pointer-events:none;
}
/* Mobile: empilha e deixa select full width */
@media (max-width: 520px){
.woocommerce .cs-shop-toolbar .woocommerce-ordering,
.woocommerce .cs-shop-toolbar .woocommerce-ordering select{
width:185px;
}
.woocommerce .cs-shop-toolbar .woocommerce-result-count{
margin:0;
font-size:15px; /* ajuste */
font-weight:700; /* ajuste */
line-height:1.2;
color: #600165;
}
} /* fecha @media (max-width: 520px) */
/* Shop/category pagination */
.woocommerce .cs-shop .cs-loop-pagination {
display: flex;
justify-content: center;
width: 100%;
margin-top: 48px;
}
.woocommerce .cs-shop .cs-loop-pagination nav.woocommerce-pagination,
.woocommerce .cs-shop .cs-loop-pagination .woocommerce-pagination {
display: flex;
justify-content: center;
width: 100%;
margin: 0;
}
.woocommerce .cs-shop .cs-loop-pagination nav.woocommerce-pagination ul,
.woocommerce .cs-shop .cs-loop-pagination .woocommerce-pagination ul {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
.woocommerce .cs-shop .cs-loop-pagination nav.woocommerce-pagination ul li,
.woocommerce .cs-shop .cs-loop-pagination .woocommerce-pagination ul li {
float: none;
margin: 0;
border: 0;
overflow: visible;
}
.woocommerce .cs-shop .cs-loop-pagination nav.woocommerce-pagination ul li a,
.woocommerce .cs-shop .cs-loop-pagination nav.woocommerce-pagination ul li span,
.woocommerce .cs-shop .cs-loop-pagination .page-numbers {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 12px;
border: 1px solid rgba(96, 1, 101, .18);
border-radius: 999px;
background: #fff;
color: var(--cs-purple, #600165);
font-size: 14px;
font-weight: 800;
line-height: 1;
text-decoration: none;
box-shadow: none;
transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.woocommerce .cs-shop .cs-loop-pagination nav.woocommerce-pagination ul li a:hover,
.woocommerce .cs-shop .cs-loop-pagination nav.woocommerce-pagination ul li a:focus-visible,
.woocommerce .cs-shop .cs-loop-pagination .page-numbers:hover,
.woocommerce .cs-shop .cs-loop-pagination .page-numbers:focus-visible {
border-color: rgba(96, 1, 101, .32);
background: #fff;
color: var(--cs-purple, #600165);
outline: none;
transform: translateY(-1px);
}
.woocommerce .cs-shop .cs-loop-pagination nav.woocommerce-pagination ul li a:focus-visible,
.woocommerce .cs-shop .cs-loop-pagination .page-numbers:focus-visible {
box-shadow: 0 0 0 3px rgba(96, 1, 101, .12);
}
.woocommerce .cs-shop .cs-loop-pagination nav.woocommerce-pagination ul li span.current,
.woocommerce .cs-shop .cs-loop-pagination .page-numbers.current {
border-color: var(--cs-purple, #600165);
background: var(--cs-purple, #600165);
color: #fff;
box-shadow: 0 10px 24px rgba(96, 1, 101, .16);
}
.woocommerce .cs-shop .cs-loop-pagination .next,
.woocommerce .cs-shop .cs-loop-pagination .prev {
min-width: 42px;
padding-inline: 13px;
}
@media (max-width: 600px) {
.woocommerce .cs-shop .cs-loop-pagination {
margin-top: 34px;
}
.woocommerce .cs-shop .cs-loop-pagination nav.woocommerce-pagination ul,
.woocommerce .cs-shop .cs-loop-pagination .woocommerce-pagination ul {
gap: 7px;
}
.woocommerce .cs-shop .cs-loop-pagination nav.woocommerce-pagination ul li a,
.woocommerce .cs-shop .cs-loop-pagination nav.woocommerce-pagination ul li span,
.woocommerce .cs-shop .cs-loop-pagination .page-numbers {
min-width: 36px;
height: 36px;
padding: 0 10px;
font-size: 13px;
}
.woocommerce .cs-shop .cs-loop-pagination .next,
.woocommerce .cs-shop .cs-loop-pagination .prev {
min-width: 40px;
}
}
/* =====================================================
WooCommerce Notices — on-brand
(message / error / info — usado em PDP, carrinho, checkout, etc.)
===================================================== */
.woocommerce-notices-wrapper {
margin: 0 0 24px;
}
.woocommerce-notices-wrapper:empty {
display: none;
}
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
padding: 14px 18px 14px 48px;
margin: 0 0 12px;
list-style: none;
background: #fff;
border: 1px solid rgba(96,1,101,.14);
border-left: 3px solid rgba(96,1,101,.72);
border-radius: 18px;
box-shadow: 0 10px 34px rgba(96,1,101,.07);
color: #1a1a1a;
font-size: 13px;
font-weight: 600;
line-height: 1.5;
}
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
content: '';
position: absolute;
top: 50%;
left: 16px;
transform: translateY(-50%);
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--cs-purple, #600165);
color: #fff !important;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 12px;
font-family: inherit;
font-weight: 700;
}
body.single-product .woocommerce-message:has(.cs-cart-notice__content) {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
justify-content: center;
column-gap: 12px;
row-gap: 0;
padding: 12px 14px;
border: 1px solid rgba(96,1,101,.12);
border-radius: 16px;
background: #fff;
box-shadow: 0 10px 26px rgba(15,23,42,.055);
}
body.single-product .woocommerce-message:has(.cs-cart-notice__content)::before {
display: none;
}
.cs-cart-notice__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(96,1,101,.095);
border: 1px solid rgba(96,1,101,.15);
color: var(--cs-purple, #600165);
flex: 0 0 auto;
}
.cs-cart-notice__icon::before {
content: '';
width: 18px;
height: 19px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 34 36' fill='none'%3E%3Cpath d='M14 41.9969V23.9687H17V21.9656H12V42.087C12 42.5944 12.2012 43.0809 12.5594 43.4397C12.9176 43.7985 13.4034 44 13.91 44H26V41.9969H14Z' fill='%23600165'/%3E%3Cpath d='M33 21.9656V19.011C33 18.0903 32.8189 17.1786 32.4672 16.328C32.1154 15.4774 31.5998 14.7045 30.9497 14.0535C30.2997 13.4024 29.5281 12.886 28.6788 12.5337C27.8295 12.1813 26.9193 12 26 12C25.0807 12 24.1705 12.1813 23.3212 12.5337C22.4719 12.886 21.7003 13.4024 21.0503 14.0535C20.4002 14.7045 19.8846 15.4774 19.5328 16.328C19.1811 17.1786 19 18.0903 19 19.011V26.0219C19 26.2875 19.1054 26.5423 19.2929 26.7301C19.4804 26.918 19.7348 27.0235 20 27.0235C20.2652 27.0235 20.5196 26.918 20.7071 26.7301C20.8946 26.5423 21 26.2875 21 26.0219V23.9687H29V21.9656H21V19.011C21 17.6828 21.5268 16.409 22.4645 15.4699C23.4021 14.5307 24.6739 14.0031 26 14.0031C27.3261 14.0031 28.5979 14.5307 29.5355 15.4699C30.4732 16.409 31 17.6828 31 19.011V25.9718C31 26.2375 31.1054 26.4922 31.2929 26.68C31.4804 26.8679 31.7348 26.9734 32 26.9734C32.2652 26.9734 32.5196 26.8679 32.7071 26.68C32.8946 26.4922 33 26.2375 33 25.9718V23.9687H38V32.9828H40V21.9656H33Z' fill='%23600165'/%3E%3Cpath d='M33 39.4839L36 44L43 34' stroke='%23600165' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cs-cart-notice__content {
display: grid;
gap: 2px;
min-width: 0;
}
.cs-cart-notice__title {
color: #171717;
font-size: 14.5px;
font-weight: 800;
line-height: 1.25;
}
.cs-cart-notice__text {
color: rgba(0,0,0,.58);
font-size: 12.5px;
font-weight: 600;
line-height: 1.45;
overflow-wrap: anywhere;
}
body.single-product .woocommerce-message:has(.cs-cart-notice__content) .cs-cart-notice__button {
min-height: 36px;
padding: 0 14px;
background: rgba(96,1,101,.07);
color: var(--cs-purple, #600165) !important;
border: 1px solid rgba(96,1,101,.14);
border-radius: 999px;
box-shadow: none;
}
body.single-product .woocommerce-message:has(.cs-cart-notice__content) .cs-cart-notice__button:hover,
body.single-product .woocommerce-message:has(.cs-cart-notice__content) .cs-cart-notice__button:focus-visible {
background: rgba(96,1,101,.12);
color: var(--cs-purple, #600165) !important;
box-shadow: none;
}
body.single-product .woocommerce-message:has(.cs-cart-notice__content) .cs-cart-notice__button:focus-visible {
outline: 3px solid rgba(96,1,101,.22);
outline-offset: 3px;
}
body.single-product .woocommerce-message:has(.cs-cart-notice__content) .cs-cart-notice__close {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid rgba(15,23,42,.08);
border-radius: 999px;
background: #fff;
color: rgba(15,23,42,.5);
font: inherit;
line-height: 1;
cursor: pointer;
align-self: center;
justify-self: end;
transition: border-color .18s ease, background .18s ease, transform .15s ease;
}
body.single-product .woocommerce-message:has(.cs-cart-notice__content) .cs-cart-notice__close svg,
.cs-toast__close svg {
display: block;
width: 9px;
height: 9px;
pointer-events: none;
}
body.single-product .woocommerce-message:has(.cs-cart-notice__content) .cs-cart-notice__close:hover {
background: rgba(96,1,101,.045);
}
body.single-product .woocommerce-message:has(.cs-cart-notice__content) .cs-cart-notice__close:hover,
body.single-product .woocommerce-message:has(.cs-cart-notice__content) .cs-cart-notice__close:focus-visible {
color: var(--cs-purple, #600165);
border-color: rgba(96,1,101,.2);
}
body.single-product .woocommerce-message:has(.cs-cart-notice__content) .cs-cart-notice__close:focus-visible {
outline: 3px solid rgba(96,1,101,.18);
outline-offset: 2px;
}
body.single-product .woocommerce-message.cs-cart-notice-toast.is-leaving {
animation: csToastOut .18s ease both;
}
/* Error — vermelho */
.woocommerce-error {
border-color: rgba(220,38,38,.2);
border-left-color: #dc2626;
background: linear-gradient(180deg, #fff 0%, #fef5f5 100%);
}
.woocommerce-error::before {
background-color: #dc2626;
background-image: url("data:image/svg+xml;utf8,");
}
/* Info — azul/cinza */
.woocommerce-info {
border-color: rgba(0,0,0,.12);
border-left-color: rgba(0,0,0,.4);
background: linear-gradient(180deg, #fff 0%, #f7f7f7 100%);
}
.woocommerce-info::before {
background-color: rgba(0,0,0,.55);
background-image: url("data:image/svg+xml;utf8,");
}
/* Botão dentro de notice (ex: "Ver carrinho") */
.woocommerce-message .button,
.woocommerce-message a.button,
.woocommerce-error .button,
.woocommerce-info .button {
margin-left: auto;
min-height: 38px;
padding: 0 18px;
background: var(--cs-purple, #600165);
color: #fff;
border: 0;
border-radius: 999px;
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0;
text-transform: none;
text-decoration: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
box-shadow: 0 8px 18px rgba(96,1,101,.14);
transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.woocommerce-message .button:hover,
.woocommerce-message a.button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover {
background: #7a0180;
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(96,1,101,.18);
color: #fff;
}
/* Mobile: toast compacto para sucesso de add-to-cart na PDP */
@media (max-width: 600px) {
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
padding: 14px 16px 14px 44px;
font-size: 13px;
}
body.single-product .woocommerce-message:has(.cs-cart-notice__content) {
position: fixed;
right: max(12px, env(safe-area-inset-right));
bottom: max(12px, env(safe-area-inset-bottom));
left: max(12px, env(safe-area-inset-left));
z-index: var(--cs-z-toast-critical, 1110);
grid-template-columns: auto minmax(0, 1fr) auto auto;
column-gap: 8px;
width: auto;
margin: 0;
padding: 10px;
border-radius: 16px;
box-shadow: 0 14px 34px rgba(15,23,42,.14);
}
.cs-cart-notice__icon {
width: 28px;
height: 28px;
}
.cs-cart-notice__icon::before {
width: 16px;
height: 17px;
}
.cs-cart-notice__title {
font-size: 12.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cs-cart-notice__text {
font-size: 11.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.woocommerce-message .button,
.woocommerce-message a.button,
.woocommerce-error .button,
.woocommerce-info .button {
margin-left: 0;
width: 100%;
margin-top: 4px;
}
body.single-product .woocommerce-message:has(.cs-cart-notice__content) .cs-cart-notice__button {
grid-column: auto;
width: auto;
min-width: 44px;
min-height: 44px;
margin: 0;
padding: 0 11px;
font-size: 11.5px;
white-space: nowrap;
box-shadow: none;
}
body.single-product .woocommerce-message:has(.cs-cart-notice__content) .cs-cart-notice__close {
width: 44px;
height: 44px;
margin: 0;
}
}
/* Order received / thank you */
body.woocommerce-order-received .woocommerce-order {
display: grid;
gap: 18px;
}
body.woocommerce-order-received .woocommerce-thankyou-order-received {
margin: 0;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
color: #170019;
font-size: clamp(22px, 3vw, 34px);
font-weight: 900;
line-height: 1.15;
}
body.woocommerce-order-received .woocommerce-thankyou-order-received::before {
display: none;
}
body.woocommerce-order-received .cs-thankyou-summary {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
gap: 24px;
align-items: stretch;
margin: 0 0 10px;
padding: 28px;
border: 1px solid rgba(96,1,101,.11);
border-radius: 24px;
background: #fff;
box-shadow: 0 18px 44px rgba(15,23,42,.06);
}
body.woocommerce-order-received .cs-thankyou-summary__intro {
display: grid;
align-content: center;
gap: 10px;
min-width: 0;
}
body.woocommerce-order-received .cs-thankyou-summary__eyebrow {
margin: 0;
color: var(--cs-purple, #600165);
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
line-height: 1.2;
text-transform: uppercase;
}
body.woocommerce-order-received .cs-thankyou-summary h2 {
margin: 0;
color: #170019;
font-size: clamp(24px, 3vw, 36px);
font-weight: 900;
letter-spacing: 0;
line-height: 1.08;
}
body.woocommerce-order-received .cs-thankyou-summary__intro p {
margin: 0;
max-width: 58ch;
color: rgba(0,0,0,.66);
font-size: 15px;
font-weight: 600;
line-height: 1.65;
}
body.woocommerce-order-received .cs-thankyou-summary__note {
color: rgba(96,1,101,.78) !important;
}
body.woocommerce-order-received .cs-thankyou-summary__details {
display: grid;
gap: 10px;
margin: 0;
padding: 18px;
border: 1px solid rgba(96,1,101,.1);
border-radius: 18px;
background: rgba(255,255,255,.72);
}
body.woocommerce-order-received .cs-thankyou-summary__details > div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
padding: 0 0 10px;
border-bottom: 1px solid rgba(96,1,101,.08);
}
body.woocommerce-order-received .cs-thankyou-summary__details > div:last-child {
padding-bottom: 0;
border-bottom: 0;
}
body.woocommerce-order-received .cs-thankyou-summary dt {
color: rgba(0,0,0,.56);
font-size: 12px;
font-weight: 800;
line-height: 1.3;
}
body.woocommerce-order-received .cs-thankyou-summary dd {
margin: 0;
color: #170019;
font-size: 13px;
font-weight: 900;
line-height: 1.35;
text-align: right;
overflow-wrap: anywhere;
}
@media (max-width: 767px) {
body.woocommerce-order-received .cs-thankyou-summary {
grid-template-columns: 1fr;
gap: 18px;
padding: 20px;
border-radius: 20px;
}
body.woocommerce-order-received .cs-thankyou-summary__details {
padding: 14px;
}
body.woocommerce-order-received .cs-thankyou-summary__details > div {
align-items: flex-start;
flex-direction: column;
gap: 3px;
}
body.woocommerce-order-received .cs-thankyou-summary dd {
text-align: left;
}
}
/* =====================================================
CS Feedback UI — notices, toasts, modal
===================================================== */
.cs-notice {
box-sizing: border-box;
display: flex;
align-items: flex-start;
gap: 10px;
width: 100%;
max-width: 100%;
margin: 0 0 16px;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(15,23,42,.08);
background: #fff;
color: rgba(34,34,34,.82);
box-shadow: 0 4px 18px rgba(15,23,42,.04);
font-size: 13px;
font-weight: 600;
line-height: 1.45;
}
.cs-notice__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--cs-purple, #600165);
color: #fff;
font-size: 12px;
font-weight: 800;
line-height: 1;
}
.cs-notice__message {
min-width: 0;
overflow-wrap: anywhere;
}
.cs-notice--success {
border-color: rgba(20,184,106,.22);
background: rgba(20,184,106,.09);
}
.cs-notice--success .cs-notice__icon {
background: #14b86a;
}
.cs-notice--warning {
border-color: rgba(202,128,203,.22);
background: #fff;
}
.cs-notice--error {
border-color: rgba(220,38,38,.2);
background: rgba(239,68,68,.08);
}
.cs-notice--error .cs-notice__icon {
background: #dc2626;
}
.cs-toast-region {
position: fixed;
right: max(16px, env(safe-area-inset-right));
bottom: max(16px, env(safe-area-inset-bottom));
z-index: var(--cs-z-toast, 1100);
display: grid;
gap: 10px;
width: min(380px, calc(100vw - 32px));
pointer-events: none;
}
.cs-toast {
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
width: 100%;
padding: 14px 14px 14px 16px;
border: 1px solid rgba(96,1,101,.14);
border-left: 4px solid var(--cs-purple, #600165);
border-radius: 16px;
background: rgba(255,255,255,.98);
box-shadow: 0 16px 45px rgba(17,17,17,.14);
color: rgba(17,17,17,.82);
font-size: 13px;
font-weight: 700;
line-height: 1.4;
pointer-events: auto;
animation: csToastIn .22s ease both;
}
.cs-toast.is-leaving {
animation: csToastOut .18s ease both;
}
.cs-toast--success {
border-left-color: #14b86a;
}
.cs-toast--warning {
border-left-color: var(--cs-purple, #600165);
}
.cs-toast--error {
border-left-color: #dc2626;
}
.cs-toast__message {
min-width: 0;
overflow-wrap: anywhere;
}
.cs-toast__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid rgba(0,0,0,.08);
border-radius: 50%;
background: #fff;
color: rgba(0,0,0,.52);
line-height: 1;
cursor: pointer;
}
.cs-toast__close:hover,
.cs-toast__close:focus-visible {
color: var(--cs-purple, #600165);
border-color: rgba(96,1,101,.24);
}
.cs-toast__close:focus-visible {
outline: 3px solid rgba(96,1,101,.18);
outline-offset: 2px;
}
.cs-modal-open {
overflow: hidden;
}
.cs-modal {
position: fixed;
inset: 0;
z-index: var(--cs-z-modal, 1000);
display: grid;
place-items: center;
padding: 20px;
background: rgba(17,17,17,.36);
}
.cs-modal__dialog {
box-sizing: border-box;
width: min(460px, 100%);
max-height: min(720px, calc(100vh - 40px));
overflow: auto;
padding: 26px;
border-radius: 24px;
border: 1px solid rgba(96,1,101,.12);
background: #fff;
box-shadow: 0 24px 70px rgba(17,17,17,.2);
}
.cs-modal__dialog:focus {
outline: none;
}
.cs-modal__title {
margin: 0;
color: #171717;
font-size: 22px;
font-weight: 800;
line-height: 1.2;
}
.cs-modal__message {
margin: 10px 0 0;
color: rgba(0,0,0,.66);
font-size: 14px;
line-height: 1.6;
}
.cs-modal__actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 24px;
}
.cs-modal__btn {
min-height: 42px;
padding: 0 18px;
border-radius: 999px;
border: 1px solid rgba(96,1,101,.22);
background: #fff;
color: var(--cs-purple, #600165);
font: inherit;
font-size: 13px;
font-weight: 800;
cursor: pointer;
}
.cs-modal__btn--primary {
border-color: var(--cs-purple, #600165);
background: var(--cs-purple, #600165);
color: #fff;
}
.cs-modal__btn:hover,
.cs-modal__btn:focus-visible {
transform: translateY(-1px);
outline: none;
}
@keyframes csToastIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes csToastOut {
to {
opacity: 0;
transform: translateY(8px);
}
}
@media (max-width: 600px) {
.cs-toast-region {
right: max(12px, env(safe-area-inset-right));
bottom: max(12px, env(safe-area-inset-bottom));
width: min(calc(100vw - 24px), 420px);
}
.cs-modal {
align-items: end;
padding: 12px;
}
.cs-modal__dialog {
padding: 22px;
border-radius: 22px;
}
.cs-modal__actions {
display: grid;
grid-template-columns: 1fr;
}
.cs-modal__btn {
width: 100%;
}
}
/* =====================================================
PDP Custom Layout — body.single-product
Override do content-single-product.php
===================================================== */
/* ── 1. Container raiz ───────────────────────────────── */
body.single-product .cs-product-page {
display: block;
margin: 24px 0 64px;
max-width: 100%;
}
body.single-product .cs-product-page::before,
body.single-product .cs-product-page::after { display: none; }
/* ── 2. Bloco principal: galeria + summary ───────────── */
body.single-product .cs-product-main {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
column-gap: 56px;
row-gap: 32px;
align-items: start;
margin-bottom: 48px;
max-width: 100%;
}
/* Defensive: impede que filhos intrínsecamente largos (imagens, , tabelas) forcem o grid */
body.single-product .cs-product-main > * {
min-width: 0;
max-width: 100%;
}
/* ── 3. Galeria (Flexslider + zoom + lightbox WC nativos) ─ */
body.single-product .cs-product-gallery {
position: sticky;
top: 200px;
align-self: start;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
}
/* Card principal — wrapper exterior do WC torna-se o card */
body.single-product .cs-product-gallery .woocommerce-product-gallery {
box-sizing: border-box;
width: 100% !important;
max-width: 100%;
min-width: 0;
float: none;
position: relative;
background: #fff;
border-radius: 22px;
border: 1px solid rgba(0,0,0,.06);
box-shadow: 0 4px 24px rgba(96,1,101,.04);
padding: 22px 22px 18px;
overflow: hidden;
}
/* Wrapper interior — Flexslider injecta inline width:800% aqui. min-width:0 impede
que o intrinsic content force o ancestral; max-width:none preserva o width inline */
body.single-product .cs-product-gallery .woocommerce-product-gallery__wrapper {
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
border-radius: 0;
margin: 0;
list-style: none;
min-width: 0;
max-width: none;
}
/* Viewport (criado pelo Flexslider) — hard containment do width inline do wrapper */
body.single-product .cs-product-gallery .flex-viewport {
box-sizing: border-box;
width: 100% !important;
max-width: 100%;
min-width: 0;
border-radius: 14px;
overflow: hidden !important;
position: relative;
}
/* Cada slide */
body.single-product .cs-product-gallery .woocommerce-product-gallery__image {
box-sizing: border-box;
margin: 0;
list-style: none;
max-width: 100%;
min-width: 0;
}
body.single-product .cs-product-gallery .woocommerce-product-gallery__image > a {
display: block;
}
body.single-product .cs-product-gallery .woocommerce-product-gallery__image img {
width: 100%;
display: block;
max-height: clamp(280px, 32vw, 420px);
object-fit: contain;
object-position: center;
margin: 0 auto;
background: #fff;
}
/* Trigger (lupa para abrir lightbox PhotoSwipe) */
body.single-product .cs-product-gallery .woocommerce-product-gallery__trigger {
position: absolute;
top: 14px;
right: 14px;
z-index: 6;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255,255,255,.92);
border: 1px solid rgba(0,0,0,.08);
box-shadow: 0 2px 8px rgba(0,0,0,.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
color: transparent;
text-decoration: none !important;
opacity: 1;
transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
body.single-product .cs-product-gallery .woocommerce-product-gallery__trigger::before {
content: '';
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23600165' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5.5'/%3E%3Cpath d='M11 11l3.5 3.5'/%3E%3C/svg%3E");
}
body.single-product .cs-product-gallery .woocommerce-product-gallery__trigger:hover {
background: #fff;
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
/* Setas de navegação (Flexslider .flex-direction-nav) */
body.single-product .cs-product-gallery .flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
body.single-product .cs-product-gallery .flex-direction-nav li {
margin: 0;
padding: 0;
}
body.single-product .cs-product-gallery .flex-direction-nav a {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(255,255,255,.92);
border: 1px solid rgba(0,0,0,.08);
box-shadow: 0 2px 10px rgba(0,0,0,.08);
display: flex !important;
align-items: center;
justify-content: center;
text-indent: 0;
font-size: 0;
color: transparent;
opacity: 1;
z-index: 5;
transition: background .2s ease, transform .15s ease, box-shadow .2s ease, opacity .2s ease;
cursor: pointer;
margin: 0;
text-decoration: none;
overflow: hidden;
visibility: visible;
}
body.single-product .cs-product-gallery .flex-direction-nav a::before {
content: '';
width: 14px;
height: 14px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
body.single-product .cs-product-gallery .flex-direction-nav .flex-prev {
left: 14px;
}
body.single-product .cs-product-gallery .flex-direction-nav .flex-next {
right: 14px;
}
body.single-product .cs-product-gallery .flex-direction-nav .flex-prev::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3 5 8l5 5'/%3E%3C/svg%3E");
}
body.single-product .cs-product-gallery .flex-direction-nav .flex-next::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3l5 5-5 5'/%3E%3C/svg%3E");
}
body.single-product .cs-product-gallery .flex-direction-nav a:hover {
background: #fff;
transform: translateY(-50%) scale(1.06);
box-shadow: 0 4px 14px rgba(96,1,101,.12);
}
body.single-product .cs-product-gallery .flex-direction-nav .flex-disabled {
opacity: .35 !important;
pointer-events: none;
cursor: default;
}
/* Sale flash badge (WC nativo) */
body.single-product .cs-product-gallery .onsale {
position: absolute;
top: 20px;
left: 20px;
z-index: 6;
background: var(--cs-purple, #600165);
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
padding: 6px 12px;
border-radius: 999px;
text-transform: uppercase;
border: 0;
min-height: auto;
min-width: auto;
line-height: 1;
display: inline-flex;
align-items: center;
margin: 0;
}
/* Thumbnails (Flexslider .flex-control-thumbs) */
body.single-product .cs-product-gallery .flex-control-nav.flex-control-thumbs,
body.single-product .cs-product-gallery .flex-control-thumbs {
box-sizing: border-box;
display: flex;
gap: 8px;
flex-wrap: nowrap;
max-width: 100%;
min-width: 0;
padding: 14px 0 6px;
margin: 0;
list-style: none;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
body.single-product .cs-product-gallery .flex-control-thumbs::-webkit-scrollbar {
height: 4px;
}
body.single-product .cs-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb {
background: rgba(96,1,101,.18);
border-radius: 999px;
}
body.single-product .cs-product-gallery .flex-control-thumbs li {
width: auto !important;
flex: 0 0 auto;
float: none;
margin: 0;
list-style: none;
}
body.single-product .cs-product-gallery .flex-control-thumbs li img {
border: 2px solid rgba(0,0,0,.06);
border-radius: 10px;
width: 56px;
height: 56px;
object-fit: cover;
cursor: pointer;
display: block;
background: #fff;
opacity: 1;
transition: border-color .15s ease, transform .15s ease;
}
body.single-product .cs-product-gallery .flex-control-thumbs li img:hover {
border-color: rgba(96,1,101,.4);
transform: translateY(-1px);
}
body.single-product .cs-product-gallery .flex-control-thumbs li img.flex-active {
border-color: var(--cs-purple, #600165);
box-shadow: 0 0 0 1px rgba(96,1,101,.15);
}
/* Zoom (WC nativo via jquery-zoom) — apenas garantir cursor */
body.single-product .cs-product-gallery .woocommerce-product-gallery__image a:hover {
cursor: zoom-in;
}
/* ── 4. Painel de compra (summary) ───────────────────── */
body.single-product .cs-product-summary {
background: #fff;
border-radius: 22px;
padding: 28px 28px 22px;
border: 1px solid rgba(15,23,42,.08);
box-shadow: 0 4px 28px rgba(15,23,42,.05);
align-self: start;
float: none !important;
width: 100% !important;
margin: 0 !important;
}
/* Título */
body.single-product .cs-product-summary .product_title.entry-title {
font-size: 22px;
font-weight: 700;
line-height: 1.28;
letter-spacing: -.012em;
margin: 0 0 10px;
color: #1a1a1a;
}
/* Rating */
body.single-product .cs-product-summary .woocommerce-product-rating {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 18px;
}
body.single-product .cs-product-summary .woocommerce-review-link {
font-size: 13px;
color: rgba(0,0,0,.5);
text-decoration: none;
}
body.single-product .cs-product-summary .woocommerce-review-link:hover {
color: var(--cs-purple, #600165);
text-decoration: underline;
}
/* Preço — PDP */
body.single-product .cs-product-summary .price,
body.single-product .cs-product-summary p.price,
body.single-product .cs-product-summary .cs-product-price {
box-sizing: border-box;
max-width: 100%;
font-size: inherit;
font-weight: 400;
color: #171717;
margin: 0 0 16px;
display: flex;
align-items: center;
gap: 10px 14px;
flex-wrap: wrap;
line-height: 1.15;
}
body.single-product .cs-product-summary .price > .woocommerce-Price-amount,
body.single-product .cs-product-summary p.price > .woocommerce-Price-amount,
body.single-product .cs-product-summary .cs-product-price > .woocommerce-Price-amount {
order: 1;
font-size: 26px;
font-weight: 600;
letter-spacing: -0.03em;
color: #171717;
}
body.single-product .cs-product-summary .price ins,
body.single-product .cs-product-summary p.price ins,
body.single-product .cs-product-summary .cs-product-price ins {
order: 1;
display: inline-flex;
align-items: baseline;
text-decoration: none;
background: transparent;
color: #171717;
}
body.single-product .cs-product-summary .price ins .woocommerce-Price-amount,
body.single-product .cs-product-summary p.price ins .woocommerce-Price-amount,
body.single-product .cs-product-summary .cs-product-price ins .woocommerce-Price-amount {
font-size: 26px;
font-weight: 600;
letter-spacing: -0.03em;
color: #171717;
}
body.single-product .cs-product-summary .price del,
body.single-product .cs-product-summary p.price del,
body.single-product .cs-product-summary .cs-product-price del {
order: 2;
display: inline-flex;
align-items: baseline;
font-size: 20px;
font-weight: 600;
color: rgba(0,0,0,.34);
opacity: 1;
text-decoration: line-through;
}
body.single-product .cs-product-summary .price del .woocommerce-Price-amount,
body.single-product .cs-product-summary p.price del .woocommerce-Price-amount,
body.single-product .cs-product-summary .cs-product-price del .woocommerce-Price-amount {
font-size: inherit;
font-weight: inherit;
color: inherit;
}
body.single-product .cs-product-summary .cs-product-price__discount {
order: 3;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
min-height: 20px;
padding: 3px 9px;
border-radius: 999px;
background: #ff1f1f;
color: #fff;
font-size: 11px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.01em;
white-space: nowrap;
}
body.single-product .cs-product-summary .cs-product-price--range {
gap: 8px;
color: rgba(0,0,0,.58);
}
body.single-product .cs-product-summary .cs-product-price__range-prefix {
font-size: 13px;
font-weight: 600;
color: rgba(0,0,0,.52);
}
body.single-product .cs-product-summary .cs-product-price__range-amount .woocommerce-Price-amount {
font-size: 24px;
font-weight: 600;
letter-spacing: -0.03em;
color: #171717;
}
/* Excerpt / descrição curta */
body.single-product .cs-product-summary .woocommerce-product-details__short-description {
font-size: 13.5px;
line-height: 1.65;
color: rgba(0,0,0,.62);
margin: 0 0 18px;
padding-top: 16px;
border-top: 1px solid rgba(96,1,101,.08);
}
body.single-product .cs-product-summary .woocommerce-product-details__short-description p:last-child {
margin-bottom: 0;
}
/* ── 5. Variações ────────────────────────────────────── */
body.single-product .cs-product-summary form.variations_form.cart,
body.single-product .cs-product-summary .single_variation_wrap {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
}
/* De-tabelar: bloco em vez de HTML table */
body.single-product .cs-product-summary .variations_form .variations,
body.single-product .cs-product-summary .variations_form .variations tbody,
body.single-product .cs-product-summary .variations_form .variations tr {
box-sizing: border-box;
display: block;
width: 100% !important;
max-width: 100%;
min-width: 0;
margin: 0;
border: 0;
}
body.single-product .cs-product-summary .variations_form .variations td,
body.single-product .cs-product-summary .variations_form .variations th {
box-sizing: border-box;
display: block;
width: 100% !important;
max-width: 100%;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
}
/* Esconder label WC nas linhas que têm pickers custom (evita duplicado) */
body.single-product .cs-product-summary .variations tr:has(td .cs-swatch-row) > th.label,
body.single-product .cs-product-summary .variations tr:has(td .cs-tone-picker) > th.label {
display: none;
}
/* Labels dos outros atributos */
body.single-product .cs-product-summary .variations_form .variations .label,
body.single-product .cs-product-summary .variations_form .variations .value {
box-sizing: border-box;
width: 100% !important;
max-width: 100%;
min-width: 0;
}
body.single-product .cs-product-summary .variations_form .variations .label {
margin-bottom: 8px;
}
body.single-product .cs-product-summary .variations_form .variations label {
display: inline-block;
max-width: 100%;
font-size: 12px;
font-weight: 600;
color: rgba(0,0,0,.6);
letter-spacing: .01em;
overflow-wrap: anywhere;
}
/* Selects nativos (atributos sem swatches) */
body.single-product .cs-product-summary .variations_form .variations select {
box-sizing: border-box;
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
border: 1.5px solid rgba(0,0,0,.14);
border-radius: 12px;
padding: 12px 14px;
font-size: 14px;
background: #fff;
color: #1a1a1a;
cursor: pointer;
margin-bottom: 18px;
transition: border-color .15s ease, box-shadow .15s ease;
}
body.single-product .cs-product-summary .variations_form .variations select:focus {
outline: none;
border-color: var(--cs-purple, #600165);
box-shadow: 0 0 0 3px rgba(96,1,101,.12);
}
/* Reset variations */
body.single-product .cs-product-summary .reset_variations {
max-width: 100%;
font-size: 12px;
color: rgba(0,0,0,.45);
text-decoration: underline;
display: inline-block;
margin: 4px 0 16px;
white-space: normal;
overflow-wrap: anywhere;
}
body.single-product .cs-product-summary .reset_variations:hover {
color: var(--cs-purple, #600165);
}
body.single-product .cs-product-summary .cs-variation-error .variations.cs-variation-field-error {
padding: 12px;
margin: 0 0 14px;
border: 1px solid rgba(220,38,38,.2);
border-radius: 16px;
background: rgba(239,68,68,.045);
}
body.single-product .cs-product-summary .cs-variation-error .cs-swatch-row.cs-variation-field-error {
margin-bottom: 14px;
}
body.single-product .cs-product-summary .cs-variation-error .cs-product-swatches.cs-variation-field-error {
border-radius: 14px;
box-shadow: 0 0 0 3px rgba(220,38,38,.08);
}
body.single-product .cs-product-summary .cs-variation-error .cs-tone-picker.cs-variation-field-error,
body.single-product .cs-product-summary .cs-variation-error .cs-tone-picker__grid.cs-variation-field-error {
border-radius: 18px;
box-shadow: 0 0 0 3px rgba(220,38,38,.08);
}
body.single-product .cs-product-summary .cs-variation-error .variations select[aria-invalid="true"] {
border-color: rgba(220,38,38,.42);
box-shadow: 0 0 0 3px rgba(220,38,38,.1);
}
body.single-product .cs-product-summary .cs-variation-error .cs-product-swatch:not(.is-active):not(.is-unavailable),
body.single-product .cs-product-summary .cs-variation-error .cs-tone-picker__option:not(.is-active):not(.is-unavailable) {
border-color: rgba(220,38,38,.34);
}
/* ── 6. Variação seleccionada: preço + stock ─────────── */
body.single-product .cs-product-summary .woocommerce-variation.single_variation {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0 0 18px;
text-align: left;
overflow-wrap: anywhere;
}
body.single-product .cs-product-summary .woocommerce-variation-price { display: none; }
body.single-product .cs-product-summary .woocommerce-variation-price .price {
margin: 0;
}
body.single-product .cs-product-summary .woocommerce-variation-availability {
max-width: 100%;
font-size: 13px;
font-weight: 600;
margin: 0 0 18px;
text-align: left;
overflow-wrap: anywhere;
}
/* Stock pill com dot indicator */
body.single-product .cs-product-summary .stock,
body.single-product .cs-product-summary .woocommerce-variation-availability .stock {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
max-width: 100%;
padding: 5px 12px 5px 11px;
border-radius: 999px;
background: rgba(20,184,106,.12);
color: #0f9759;
font-size: 12px;
font-weight: 700;
letter-spacing: .01em;
white-space: normal;
overflow-wrap: anywhere;
}
body.single-product .cs-product-summary .stock::before,
body.single-product .cs-product-summary .woocommerce-variation-availability .stock::before {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
box-shadow: 0 0 0 3px rgba(20,184,106,.18);
}
body.single-product .cs-product-summary .stock.out-of-stock,
body.single-product .cs-product-summary .woocommerce-variation-availability .out-of-stock {
background: rgba(239,68,68,.1);
color: #dc2626;
}
body.single-product .cs-product-summary .stock.out-of-stock::before,
body.single-product .cs-product-summary .woocommerce-variation-availability .out-of-stock::before {
box-shadow: 0 0 0 3px rgba(239,68,68,.18);
}
/* ── 7. Área de compra: qty + ATC + wishlist ─────────── */
/* Produto simples */
body.single-product .cs-product-summary form.cart:not(.variations_form) {
display: flex;
align-items: stretch;
gap: 12px;
flex-wrap: nowrap;
margin: 0 0 8px;
}
/* Produto variável: form envolve tudo — reset flex */
body.single-product .cs-product-summary form.variations_form.cart {
box-sizing: border-box;
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
}
/* Container real do qty + ATC + wishlist em variável */
body.single-product .cs-product-summary .woocommerce-variation-add-to-cart {
box-sizing: border-box;
display: flex;
align-items: stretch;
gap: 12px;
flex-wrap: nowrap;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0 0 8px;
}
/* Qty */
body.single-product .cs-product-summary form.cart:not(.variations_form) .quantity,
body.single-product .cs-product-summary .woocommerce-variation-add-to-cart .quantity {
flex-shrink: 0;
}
body.single-product .cs-product-summary form.cart:not(.variations_form) .quantity .qty,
body.single-product .cs-product-summary .woocommerce-variation-add-to-cart .quantity .qty {
width: 64px;
height: 50px;
border: 1px solid rgba(0,0,0,.14);
border-radius: 12px;
text-align: center;
font-size: 15px;
font-weight: 600;
padding: 0 8px;
background: #fff;
color: #1a1a1a;
transition: border-color .15s ease, box-shadow .15s ease;
}
body.single-product .cs-product-summary form.cart:not(.variations_form) .quantity .qty:focus,
body.single-product .cs-product-summary .woocommerce-variation-add-to-cart .quantity .qty:focus {
outline: none;
border-color: var(--cs-purple, #600165);
box-shadow: 0 0 0 3px rgba(96,1,101,.12);
}
/* Botão Adicionar ao carrinho */
body.single-product .cs-product-summary .single_add_to_cart_button {
flex: 1 1 auto;
min-width: 0;
height: 50px;
background: var(--cs-purple, #600165);
color: #fff;
border: 0;
border-radius: 12px;
font-size: 13px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
cursor: pointer;
padding: 0 22px;
transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-shadow: 0 2px 10px rgba(96,1,101,.14);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
}
/* Ícone do carrinho à direita do texto — match dos cards */
body.single-product .cs-product-summary .single_add_to_cart_button::after {
content: '';
width: 20px;
height: 20px;
flex-shrink: 0;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 32 36' fill='none'%3E%3Cpath d='M14 41.9969V23.9687H17V21.9656H12V42.087C12 42.5944 12.2012 43.0809 12.5594 43.4397C12.9176 43.7985 13.4034 44 13.91 44H26V41.9969H14Z' fill='white'/%3E%3Cpath d='M33 21.9656V19.011C33 18.0903 32.8189 17.1786 32.4672 16.328C32.1154 15.4774 31.5998 14.7045 30.9497 14.0535C30.2997 13.4024 29.5281 12.886 28.6788 12.5337C27.8295 12.1813 26.9193 12 26 12C25.0807 12 24.1705 12.1813 23.3212 12.5337C22.4719 12.886 21.7003 13.4024 21.0503 14.0535C20.4002 14.7045 19.8846 15.4774 19.5328 16.328C19.1811 17.1786 19 18.0903 19 19.011V26.0219C19 26.2875 19.1054 26.5423 19.2929 26.7301C19.4804 26.918 19.7348 27.0235 20 27.0235C20.2652 27.0235 20.5196 26.918 20.7071 26.7301C20.8946 26.5423 21 26.2875 21 26.0219V23.9687H29V21.9656H21V19.011C21 17.6828 21.5268 16.409 22.4645 15.4699C23.4021 14.5307 24.6739 14.0031 26 14.0031C27.3261 14.0031 28.5979 14.5307 29.5355 15.4699C30.4732 16.409 31 17.6828 31 19.011V25.9718C31 26.2375 31.1054 26.4922 31.2929 26.68C31.4804 26.8679 31.7348 26.9734 32 26.9734C32.2652 26.9734 32.5196 26.8679 32.7071 26.68C32.8946 26.4922 33 26.2375 33 25.9718V23.9687H38V32.9828H40V21.9656H33Z' fill='white'/%3E%3Cpath d='M33.55 43.95V33H35.65V43.95H33.55ZM29 39.475V37.5H40.2V39.475H29Z' fill='white'/%3E%3C/svg%3E");
transition: transform .2s ease;
}
/* State .added → checkmark (consistente com cards) */
body.single-product .cs-product-summary .single_add_to_cart_button.added::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0z'/%3E%3C/svg%3E");
}
body.single-product .cs-product-summary .single_add_to_cart_button:hover:not(.disabled):not([disabled]) {
background: #7a0180;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(96,1,101,.22);
}
body.single-product .cs-product-summary .single_add_to_cart_button.disabled,
body.single-product .cs-product-summary .single_add_to_cart_button[disabled] {
opacity: .4;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
body.single-product .cs-product-summary .single_add_to_cart_button.loading { opacity: .7; pointer-events: none; }
body.single-product .cs-product-summary .single_add_to_cart_button.added { background: #14b86a; }
body.single-product .cs-product-summary .single_add_to_cart_button.cs-add-to-cart-pending {
opacity: .82;
cursor: progress;
pointer-events: none;
}
/* Wishlist da PDP: mantém o botão reutilizado fora do contexto do card. */
body.single-product .cs-product-summary .cs-single-wish-wrap {
display: flex;
align-items: stretch;
flex-shrink: 0;
}
body.single-product .cs-product-summary .cs-single-wish-wrap .cs-pcard__wish,
body.single-product .cs-product-summary .cs-product-wish-btn {
position: static;
top: auto;
right: auto;
z-index: auto;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border: 1px solid rgba(0,0,0,.14);
border-radius: 12px;
background: #fff;
cursor: pointer;
color: rgba(0,0,0,.5);
transition: color .2s ease, border-color .2s ease, background .2s ease, transform .15s ease;
flex-shrink: 0;
padding: 0;
}
body.single-product .cs-product-summary .cs-product-wish-btn:hover {
color: var(--cs-purple, #600165);
border-color: var(--cs-purple, #600165);
background: #fdf0ff;
transform: translateY(-1px);
}
body.single-product .cs-product-summary .cs-product-wish-btn.is-active {
color: var(--cs-purple, #600165);
border-color: var(--cs-purple, #600165);
background: #fdf0ff;
}
body.single-product .cs-product-summary .cs-product-wish-btn.is-anim { animation: csWishPulse .4s ease; }
/* ── 8. Trust badges ─────────────────────────────────── */
body.single-product .cs-product-summary .cs-product-trust {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin: 18px 0 0;
padding-top: 18px;
border-top: 1px solid rgba(96,1,101,.08);
}
body.single-product .cs-product-summary .cs-product-trust__item {
display: flex;
align-items: center;
gap: 8px;
font-size: 11.5px;
font-weight: 600;
color: rgba(0,0,0,.62);
padding: 9px 12px;
background: rgba(96,1,101,.035);
border: 1px solid rgba(96,1,101,.1);
border-radius: 10px;
line-height: 1.3;
}
body.single-product .cs-product-summary .cs-product-trust__item svg {
flex-shrink: 0;
color: var(--cs-purple, #600165);
opacity: .9;
width: 14px;
height: 14px;
}
/* PDP Promo Banner */
body.single-product .cs-promo-banner {
box-sizing: border-box;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
width: 100%;
max-width: 100%;
min-width: 0;
padding: 16px;
color: #27112d;
background: #fff;
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 16px;
box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
overflow: hidden;
}
body.single-product .cs-promo-banner__icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 999px;
background: rgba(253, 1, 0, .07);
box-shadow: inset 0 0 0 1px rgba(253, 1, 0, .09);
flex-shrink: 0;
}
body.single-product .cs-promo-banner__icon svg {
display: block;
width: 25px;
height: auto;
max-width: 100%;
}
body.single-product .cs-promo-banner__content {
min-width: 0;
}
body.single-product .cs-promo-banner__title {
display: block;
margin: 0;
color: #1b0f1f;
font-size: 14px;
font-weight: 800;
line-height: 1.25;
letter-spacing: 0;
overflow-wrap: anywhere;
}
body.single-product .cs-promo-banner__text {
margin: 4px 0 0;
color: rgba(0, 0, 0, .62);
font-size: 12.5px;
font-weight: 500;
line-height: 1.55;
overflow-wrap: anywhere;
}
body.single-product .cs-promo-banner__button {
appearance: none;
border: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 0 15px;
color: #fff;
background: var(--cs-purple, #600165);
border-radius: 999px;
font-family: inherit;
font-size: 12px;
font-weight: 800;
line-height: 1;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-shadow: 0 6px 16px rgba(96, 1, 101, .16);
transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
body.single-product .cs-promo-banner__button:hover {
color: #fff;
background: #7a0180;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(96, 1, 101, .22);
}
body.single-product .cs-product-summary .cs-promo-banner--summary {
margin: 16px 0 0;
}
body.single-product .cs-product-details + .cs-promo-banner--before-routine {
margin: -28px 0 44px;
}
body.single-product .cs-promo-modal__dialog {
position: relative;
width: min(560px, 100%);
padding: 28px;
}
body.single-product .cs-promo-modal__close {
appearance: none;
position: absolute;
top: 14px;
right: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid rgba(96, 1, 101, .12);
border-radius: 999px;
color: rgba(39, 17, 45, .68);
background: #fff;
font: inherit;
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
body.single-product .cs-promo-modal__close svg {
display: block;
width: 13px;
height: 13px;
}
body.single-product .cs-promo-modal__close svg path {
fill: currentColor;
}
body.single-product .cs-promo-modal__close:hover,
body.single-product .cs-promo-modal__close:focus-visible {
color: var(--cs-purple, #600165);
border-color: rgba(96, 1, 101, .26);
outline: none;
transform: translateY(-1px);
}
body.single-product .cs-promo-modal__header {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 14px;
row-gap: 4px;
padding-right: 34px;
}
body.single-product .cs-promo-modal__icon {
grid-row: 1 / span 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 999px;
background: rgba(253, 1, 0, .07);
box-shadow: inset 0 0 0 1px rgba(253, 1, 0, .1);
}
body.single-product .cs-promo-modal__icon svg {
display: block;
width: 28px;
height: auto;
}
body.single-product .cs-promo-modal__title {
align-self: end;
font-size: 24px;
}
body.single-product .cs-promo-modal__message {
align-self: start;
margin: 0;
}
body.single-product .cs-promo-modal__product {
display: grid;
grid-template-columns: 82px minmax(0, 1fr);
gap: 14px;
align-items: center;
margin-top: 22px;
padding: 12px;
border: 1px solid rgba(96, 1, 101, .1);
border-radius: 18px;
background: #fffaff;
}
body.single-product .cs-promo-modal__media {
display: grid;
place-items: center;
width: 82px;
aspect-ratio: 1;
overflow: hidden;
border-radius: 14px;
background: #fff;
}
body.single-product .cs-promo-modal__media img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
body.single-product .cs-promo-modal__product-info {
display: grid;
gap: 4px;
min-width: 0;
}
body.single-product .cs-promo-modal__eyebrow,
body.single-product .cs-promo-modal__quantity {
color: rgba(0, 0, 0, .54);
font-size: 12px;
font-weight: 700;
line-height: 1.35;
}
body.single-product .cs-promo-modal__product-name {
color: #1b0f1f;
font-size: 15px;
font-weight: 800;
line-height: 1.35;
overflow-wrap: anywhere;
}
body.single-product .cs-promo-modal__summary {
display: grid;
gap: 8px;
margin: 18px 0 0;
}
body.single-product .cs-promo-modal__summary-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 11px 12px;
border: 1px solid rgba(96, 1, 101, .08);
border-radius: 14px;
background: #fff;
}
body.single-product .cs-promo-modal__summary-row dt,
body.single-product .cs-promo-modal__summary-row dd {
margin: 0;
min-width: 0;
}
body.single-product .cs-promo-modal__summary-row dt {
color: rgba(0, 0, 0, .58);
font-size: 12.5px;
font-weight: 700;
}
body.single-product .cs-promo-modal__summary-row dd {
color: #1b0f1f;
font-size: 14px;
font-weight: 900;
text-align: right;
overflow-wrap: anywhere;
}
body.single-product .cs-promo-modal__summary-row.is-highlight {
border-color: rgba(96, 1, 101, .2);
background: #fbf2fc;
}
body.single-product .cs-promo-modal__actions {
align-items: center;
}
body.single-product .cs-promo-modal__primary:disabled {
opacity: .72;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* ── 9. Meta (SKU, categorias) ───────────────────────── */
body.single-product .cs-product-summary .product_meta {
font-size: 12px;
color: rgba(0,0,0,.45);
margin: 22px 0 0;
padding-top: 18px;
border-top: 1px solid rgba(96,1,101,.06);
}
body.single-product .cs-product-summary .product_meta > span {
display: inline;
margin-right: 10px;
}
body.single-product .cs-product-summary .product_meta a {
color: inherit;
text-decoration: none;
}
body.single-product .cs-product-summary .product_meta a:hover {
color: var(--cs-purple, #600165);
text-decoration: underline;
}
/* ── 10. Tabs / Detalhes ─────────────────────────────── */
body.single-product .cs-product-details {
box-sizing: border-box;
margin: 0 0 56px;
max-width: 100%;
min-width: 0;
overflow: visible;
}
body.single-product .cs-product-details .woocommerce-tabs {
box-sizing: border-box;
max-width: 100%;
min-width: 0;
background: #fff;
border-radius: 24px;
border: 1px solid rgba(0,0,0,.06);
box-shadow: 0 4px 24px rgba(96,1,101,.04);
overflow: visible;
}
body.single-product .cs-product-details .woocommerce-tabs ul.tabs {
box-sizing: border-box;
display: flex;
padding: 0 12px;
margin: 0;
max-width: 100%;
min-width: 0;
list-style: none;
border-bottom: 1px solid rgba(0,0,0,.06);
background: #fff;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
body.single-product .cs-product-details .woocommerce-tabs ul.tabs::-webkit-scrollbar {
display: none;
height: 0;
}
body.single-product .cs-product-details .woocommerce-tabs ul.tabs::-webkit-scrollbar-thumb {
background: rgba(96,1,101,.2);
border-radius: 3px;
}
body.single-product .cs-product-details .woocommerce-tabs ul.tabs li {
flex-shrink: 0;
}
body.single-product .cs-product-details .woocommerce-tabs ul.tabs li a {
white-space: nowrap;
}
body.single-product .cs-product-details .woocommerce-tabs ul.tabs::before,
body.single-product .cs-product-details .woocommerce-tabs ul.tabs::after { display: none; }
body.single-product .cs-product-details .woocommerce-tabs ul.tabs li,
body.single-product .cs-product-details .woocommerce-tabs ul.tabs li.active {
margin: 0;
padding: 0;
border: 0;
background: transparent;
border-radius: 0;
}
body.single-product .cs-product-details .woocommerce-tabs ul.tabs li::before,
body.single-product .cs-product-details .woocommerce-tabs ul.tabs li::after { display: none; }
body.single-product .cs-product-details .woocommerce-tabs ul.tabs li a {
display: block;
padding: 18px 26px;
font-size: 14px;
font-weight: 700;
color: rgba(0,0,0,.5);
text-decoration: none;
border-bottom: 3px solid transparent;
margin-bottom: -1px;
letter-spacing: .01em;
transition: color .15s, border-color .15s;
}
body.single-product .cs-product-details .woocommerce-tabs ul.tabs li.active a,
body.single-product .cs-product-details .woocommerce-tabs ul.tabs li a:hover {
color: var(--cs-purple, #600165);
border-bottom-color: var(--cs-purple, #600165);
}
body.single-product .cs-product-details .woocommerce-tabs .panel {
box-sizing: border-box;
padding: 36px 40px;
font-size: 14.5px;
line-height: 1.85;
color: rgba(0,0,0,.74);
margin: 0;
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: visible;
overflow-y: visible;
overflow-wrap: break-word;
word-wrap: break-word;
}
/* Conteúdo embedded (imagens, iframes, tabelas) nunca ultrapassa o painel */
body.single-product .cs-product-details .woocommerce-tabs .panel img,
body.single-product .cs-product-details .woocommerce-tabs .panel iframe,
body.single-product .cs-product-details .woocommerce-tabs .panel video {
max-width: 100%;
height: auto;
}
body.single-product .cs-product-details .woocommerce-tabs .panel table:not(.shop_attributes) {
box-sizing: border-box;
width: 100%;
max-width: 100%;
table-layout: fixed;
overflow: visible;
}
body.single-product .cs-product-details .woocommerce-tabs .panel h2,
body.single-product .cs-product-details .woocommerce-tabs .panel h3 {
font-size: 18px;
font-weight: 800;
color: #1a1a1a;
margin: 0 0 14px;
letter-spacing: -.01em;
}
body.single-product .cs-product-details .woocommerce-tabs .panel p:last-child { margin-bottom: 0; }
/* Tabela "Informação adicional" */
body.single-product .cs-product-details .woocommerce-tabs .panel table.shop_attributes {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid rgba(96,1,101,.1);
border-radius: 14px;
overflow: hidden;
font-size: 14px;
}
body.single-product .cs-product-details .woocommerce-tabs .panel table.shop_attributes th,
body.single-product .cs-product-details .woocommerce-tabs .panel table.shop_attributes td {
padding: 14px 18px;
text-align: left;
border-bottom: 1px solid rgba(0,0,0,.06);
vertical-align: middle;
font-style: normal;
}
body.single-product .cs-product-details .woocommerce-tabs .panel table.shop_attributes th {
width: 36%;
font-weight: 700;
color: rgba(0,0,0,.55);
background: rgba(96,1,101,.025);
letter-spacing: .01em;
}
body.single-product .cs-product-details .woocommerce-tabs .panel table.shop_attributes td {
color: rgba(0,0,0,.82);
background: #fff;
}
body.single-product .cs-product-details .woocommerce-tabs .panel table.shop_attributes tr:last-child th,
body.single-product .cs-product-details .woocommerce-tabs .panel table.shop_attributes tr:last-child td {
border-bottom: 0;
}
body.single-product .cs-product-details .woocommerce-tabs .panel table.shop_attributes tr:nth-child(even) td {
background: rgba(96,1,101,.015);
}
/* =====================================================
PDP Reviews
===================================================== */
body.single-product .cs-product-details #reviews.woocommerce-Reviews {
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(320px, .9fr) minmax(0, 1fr);
gap: 24px;
align-items: start;
width: 100%;
max-width: 100%;
min-width: 0;
overflow: visible;
}
body.single-product .cs-product-details #reviews #comments,
body.single-product .cs-product-details #reviews #review_form_wrapper,
body.single-product .cs-product-details #reviews #review_form,
body.single-product .cs-product-details #reviews #respond {
box-sizing: border-box;
min-width: 0;
max-width: 100%;
}
body.single-product .cs-product-details #reviews .clear {
display: none;
}
body.single-product .cs-product-details #reviews #comments {
display: grid;
gap: 16px;
order: 2;
}
body.single-product .cs-product-details #reviews .woocommerce-Reviews-title {
margin: 0;
color: #171717;
font-size: 20px;
font-weight: 800;
line-height: 1.25;
letter-spacing: 0;
}
body.single-product .cs-product-details #reviews .woocommerce-Reviews-title span {
color: var(--cs-purple, #600165);
}
body.single-product .cs-product-details #reviews .woocommerce-noreviews,
body.single-product .cs-product-details #reviews .woocommerce-verification-required,
body.single-product .cs-product-details #reviews .must-log-in {
box-sizing: border-box;
margin: 0;
padding: 18px 20px;
border: 1px solid rgba(15,23,42,.08);
border-left: 4px solid rgba(96,1,101,.72);
border-radius: 18px;
background: #fff;
box-shadow: 0 10px 30px rgba(15,23,42,.05);
color: rgba(0,0,0,.62);
font-size: 14px;
font-weight: 600;
line-height: 1.6;
}
body.single-product .cs-product-details #reviews .must-log-in a {
color: var(--cs-purple, #600165);
font-weight: 800;
}
body.single-product .cs-product-details #reviews .commentlist {
box-sizing: border-box;
display: grid;
gap: 14px;
list-style: none;
width: 100%;
max-width: 100%;
min-width: 0;
max-height: 520px;
overflow-x: hidden;
overflow-y: auto;
padding: 12px 8px 12px 0;
margin: 0;
scrollbar-color: rgba(96,1,101,.28) rgba(96,1,101,.06);
scrollbar-gutter: stable;
scrollbar-width: thin;
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0,
#000 24px,
#000 calc(100% - 24px),
transparent 100%
);
mask-image: linear-gradient(
to bottom,
transparent 0,
#000 24px,
#000 calc(100% - 24px),
transparent 100%
);
}
body.single-product .cs-product-details #reviews .commentlist::-webkit-scrollbar {
width: 6px;
}
body.single-product .cs-product-details #reviews .commentlist::-webkit-scrollbar-track {
background: rgba(96,1,101,.06);
border-radius: 999px;
}
body.single-product .cs-product-details #reviews .commentlist::-webkit-scrollbar-thumb {
background: rgba(96,1,101,.28);
border-radius: 999px;
}
body.single-product .cs-product-details #reviews .commentlist li {
box-sizing: border-box;
min-width: 0;
max-width: 100%;
margin: 0;
list-style: none;
}
body.single-product .cs-product-details #reviews .comment_container {
box-sizing: border-box;
display: block;
width: 100%;
max-width: 100%;
padding: 18px;
border: 1px solid rgba(96,1,101,.09);
border-radius: 18px;
background: #fff;
box-shadow: 0 10px 28px rgba(96,1,101,.055);
}
body.single-product .cs-product-details #reviews .avatar {
display: none !important;
float: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
body.single-product .cs-product-details #reviews .comment-text {
box-sizing: border-box;
float: none !important;
clear: none !important;
display: grid;
gap: 8px;
width: 100%;
min-width: 0;
max-width: 100%;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
body.single-product .cs-product-details #reviews .comment-text .star-rating {
margin: 0;
color: #f3b11b;
font-size: 13px;
}
body.single-product .cs-product-details #reviews .comment-text .meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 8px;
margin: 0;
color: rgba(0,0,0,.46);
font-size: 12px;
font-weight: 600;
line-height: 1.35;
}
body.single-product .cs-product-details #reviews .comment-text .woocommerce-review__author {
color: #171717;
font-size: 14px;
font-weight: 800;
}
body.single-product .cs-product-details #reviews .comment-text .woocommerce-review__dash {
display: none;
}
body.single-product .cs-product-details #reviews .comment-text .woocommerce-review__published-date {
color: rgba(0,0,0,.42);
}
body.single-product .cs-product-details #reviews .comment-text .description {
color: rgba(0,0,0,.68);
font-size: 13.5px;
line-height: 1.75;
overflow-wrap: anywhere;
}
body.single-product .cs-product-details #reviews .comment-text .description p {
margin: 0 0 10px;
}
body.single-product .cs-product-details #reviews .comment-text .description p:last-child {
margin-bottom: 0;
}
body.single-product .cs-product-details #reviews #review_form_wrapper {
order: 1;
padding: 22px;
border: 1px solid rgba(15,23,42,.08);
border-radius: 20px;
background: #fff;
box-shadow: 0 12px 32px rgba(15,23,42,.055);
}
body.single-product .cs-product-details #reviews #respond {
margin: 0;
}
body.single-product .cs-product-details #reviews .comment-reply-title {
display: block;
margin: 0;
color: #171717;
font-size: 18px;
font-weight: 800;
line-height: 1.25;
letter-spacing: 0;
}
body.single-product .cs-product-details #reviews .cs-review-form-note {
margin: 8px 0 0;
color: rgba(0,0,0,.58);
font-size: 13px;
font-weight: 600;
line-height: 1.55;
}
body.single-product .cs-product-details #reviews .comment-form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 12px;
margin: 18px 0 0;
}
body.single-product .cs-product-details #reviews .comment-form p {
min-width: 0;
margin: 0;
}
body.single-product .cs-product-details #reviews .comment-form-rating,
body.single-product .cs-product-details #reviews .comment-form-comment,
body.single-product .cs-product-details #reviews .comment-form-cookies-consent,
body.single-product .cs-product-details #reviews .form-submit,
body.single-product .cs-product-details #reviews .comment-notes {
grid-column: 1 / -1;
}
body.single-product .cs-product-details #reviews .comment-form label {
display: block;
margin: 0 0 7px;
color: rgba(0,0,0,.62);
font-size: 12.5px;
font-weight: 800;
line-height: 1.35;
}
body.single-product .cs-product-details #reviews .comment-form .required {
color: #dc2626;
text-decoration: none;
}
body.single-product .cs-product-details #reviews .comment-form input[type="text"],
body.single-product .cs-product-details #reviews .comment-form input[type="email"],
body.single-product .cs-product-details #reviews .comment-form textarea,
body.single-product .cs-product-details #reviews .comment-form select {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-height: 46px;
border: 1px solid rgba(96,1,101,.16);
border-radius: 14px;
background: #fff;
color: #171717;
font: inherit;
font-size: 14px;
font-weight: 500;
line-height: 1.45;
padding: 12px 14px;
box-shadow: none;
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
body.single-product .cs-product-details #reviews .comment-form textarea {
min-height: 142px;
resize: vertical;
}
body.single-product .cs-product-details #reviews .comment-form input[type="text"]:focus,
body.single-product .cs-product-details #reviews .comment-form input[type="email"]:focus,
body.single-product .cs-product-details #reviews .comment-form textarea:focus,
body.single-product .cs-product-details #reviews .comment-form select:focus {
outline: none;
border-color: var(--cs-purple, #600165);
box-shadow: 0 0 0 3px rgba(96,1,101,.12);
}
body.single-product .cs-product-details #reviews .comment-form-rating {
padding: 14px;
border: 1px solid rgba(96,1,101,.1);
border-radius: 16px;
background: rgba(253,240,255,.48);
}
body.single-product .cs-product-details #reviews .comment-form-rating label {
margin-bottom: 10px;
}
body.single-product .cs-product-details #reviews .comment-form-rating select {
max-width: 240px;
margin-top: 8px;
}
body.single-product .cs-product-details #reviews .comment-form-rating p.stars {
margin: 0;
line-height: 1;
}
body.single-product .cs-product-details #reviews .comment-form-rating p.stars span {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
max-width: 100%;
}
body.single-product .cs-product-details #reviews .comment-form-rating p.stars a {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin: 0;
border-radius: 50%;
background: rgba(96,1,101,.06);
color: #f3b11b;
text-indent: -9999px;
text-decoration: none;
box-shadow: none;
transition: background .15s ease, transform .15s ease;
}
body.single-product .cs-product-details #reviews .comment-form-rating p.stars a::before {
content: "\e021";
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
color: rgba(96,1,101,.26);
font-family: WooCommerce;
font-size: 21px;
line-height: 1;
text-indent: 0;
transform: translate(-50%, -50%);
transition: color .15s ease;
}
body.single-product .cs-product-details #reviews .comment-form-rating p.stars:hover a,
body.single-product .cs-product-details #reviews .comment-form-rating p.stars.selected a:not(.active),
body.single-product .cs-product-details #reviews .comment-form-rating p.stars.selected a.active {
background: rgba(243,177,27,.12);
}
body.single-product .cs-product-details #reviews .comment-form-rating p.stars:hover a::before,
body.single-product .cs-product-details #reviews .comment-form-rating p.stars.selected a:not(.active)::before,
body.single-product .cs-product-details #reviews .comment-form-rating p.stars.selected a.active::before {
content: "\e020";
color: #f3b11b;
}
body.single-product .cs-product-details #reviews .comment-form-rating p.stars a:hover ~ a,
body.single-product .cs-product-details #reviews .comment-form-rating p.stars.selected a.active ~ a {
background: rgba(96,1,101,.06);
}
body.single-product .cs-product-details #reviews .comment-form-rating p.stars a:hover ~ a::before,
body.single-product .cs-product-details #reviews .comment-form-rating p.stars.selected a.active ~ a::before {
content: "\e021";
color: rgba(96,1,101,.26);
}
body.single-product .cs-product-details #reviews .comment-form-rating p.stars a:focus-visible {
outline: 2px solid rgba(96,1,101,.42);
outline-offset: 3px;
}
body.single-product .cs-product-details #reviews .comment-form-cookies-consent {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
border: 1px solid rgba(96,1,101,.09);
border-radius: 14px;
background: rgba(255,255,255,.72);
}
body.single-product .cs-product-details #reviews .comment-form-cookies-consent input[type="checkbox"] {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin: 2px 0 0;
accent-color: var(--cs-purple, #600165);
}
body.single-product .cs-product-details #reviews .comment-form-cookies-consent label {
margin: 0;
color: rgba(0,0,0,.58);
font-size: 12.5px;
font-weight: 600;
line-height: 1.5;
}
body.single-product .cs-product-details #reviews .form-submit {
margin-top: 2px;
}
body.single-product .cs-product-details #reviews .form-submit .submit {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 24px;
border: 0;
border-radius: 999px;
background: var(--cs-purple, #600165);
color: #fff;
font: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1;
cursor: pointer;
box-shadow: 0 10px 22px rgba(15,23,42,.12);
transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
body.single-product .cs-product-details #reviews .form-submit .submit:hover,
body.single-product .cs-product-details #reviews .form-submit .submit:focus-visible {
background: #7a0180;
box-shadow: 0 12px 26px rgba(15,23,42,.14);
transform: translateY(-1px);
outline: none;
}
@media (max-width: 900px) {
body.single-product .cs-product-details #reviews.woocommerce-Reviews {
grid-template-columns: minmax(0, 1fr);
}
body.single-product .cs-product-details #reviews #comments {
gap: 14px;
}
body.single-product .cs-product-details #reviews #review_form_wrapper {
padding: 20px;
}
}
@media (max-width: 600px) {
body.single-product .cs-product-details #reviews .woocommerce-Reviews-title {
font-size: 18px;
}
body.single-product .cs-product-details #reviews .comment_container {
display: block;
padding: 14px;
border-radius: 16px;
}
body.single-product .cs-product-details #reviews .commentlist {
max-height: min(620px, 72vh);
padding: 10px 6px 10px 0;
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0,
#000 20px,
#000 calc(100% - 20px),
transparent 100%
);
mask-image: linear-gradient(
to bottom,
transparent 0,
#000 20px,
#000 calc(100% - 20px),
transparent 100%
);
}
body.single-product .cs-product-details #reviews .avatar {
display: none !important;
}
body.single-product .cs-product-details #reviews #review_form_wrapper {
padding: 18px;
border-radius: 18px;
}
body.single-product .cs-product-details #reviews .comment-form {
grid-template-columns: minmax(0, 1fr);
}
body.single-product .cs-product-details #reviews .comment-form-rating p.stars a {
width: 30px;
height: 30px;
}
body.single-product .cs-product-details #reviews .form-submit .submit {
width: 100%;
}
}
/* ── 11. Relacionados / Upsells ──────────────────────── */
body.single-product .cs-product-related {
display: block;
margin: 0;
}
body.single-product .cs-product-related .related.products,
body.single-product .cs-product-related .up-sells.products {
margin: 0 0 48px;
padding: 0;
border-top: 0;
clear: both;
}
body.single-product .cs-product-related .related.products:last-child,
body.single-product .cs-product-related .up-sells.products:last-child {
margin-bottom: 0;
}
body.single-product .cs-product-related .related.products > h2,
body.single-product .cs-product-related .up-sells.products > h2 {
font-size: 24px;
font-weight: 800;
margin: 0 0 24px;
color: #1a1a1a;
letter-spacing: -.015em;
}
body.single-product .cs-product-related ul.products {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
/* ── 12. Responsividade ──────────────────────────────── */
@media (max-width: 1100px) {
body.single-product .cs-product-main {
column-gap: 36px;
}
body.single-product .cs-product-related ul.products {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
body.single-product .cs-product-main {
grid-template-columns: minmax(0, 1fr);
column-gap: 0;
row-gap: 24px;
}
body.single-product .cs-product-gallery {
position: static;
}
body.single-product .cs-product-gallery .woocommerce-product-gallery {
border-radius: 18px;
padding: 18px 18px 14px;
}
/* Setas mais pequenas em tablet */
body.single-product .cs-product-gallery .flex-direction-nav a {
width: 36px;
height: 36px;
}
body.single-product .cs-product-gallery .flex-direction-nav .flex-prev { left: 10px; }
body.single-product .cs-product-gallery .flex-direction-nav .flex-next { right: 10px; }
/* Thumbnails scroll horizontal se houver muitas */
body.single-product .cs-product-gallery .flex-control-thumbs {
padding-bottom: 8px;
}
body.single-product .cs-product-summary {
border-radius: 18px;
padding: 24px 22px 20px;
}
body.single-product .cs-product-details .woocommerce-tabs { border-radius: 18px; }
body.single-product .cs-product-details .woocommerce-tabs .panel { padding: 24px 22px; }
body.single-product .cs-product-related ul.products {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
body.single-product .cs-product-related .related.products > h2,
body.single-product .cs-product-related .up-sells.products > h2 {
font-size: 20px;
}
}
@media (max-width: 600px) {
body.single-product .cs-product-summary .product_title.entry-title { font-size: 22px; }
body.single-product .cs-product-summary .price,
body.single-product .cs-product-summary p.price { font-size: 26px; }
body.single-product .cs-product-summary .cs-product-trust { grid-template-columns: 1fr; }
body.single-product .cs-promo-banner {
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 12px;
padding: 14px;
border-radius: 14px;
}
body.single-product .cs-promo-banner__button {
grid-column: 1 / -1;
width: 100%;
min-height: 40px;
}
body.single-product .cs-product-details + .cs-promo-banner--before-routine {
margin: -22px 0 34px;
}
body.single-product .cs-promo-modal__dialog {
width: 100%;
padding: 24px 18px 18px;
border-radius: 22px 22px 18px 18px;
}
body.single-product .cs-promo-modal__close {
top: 12px;
right: 12px;
}
body.single-product .cs-promo-modal__header {
grid-template-columns: 1fr;
gap: 8px;
padding-right: 38px;
}
body.single-product .cs-promo-modal__icon {
grid-row: auto;
width: 42px;
height: 42px;
}
body.single-product .cs-promo-modal__icon svg {
width: 25px;
}
body.single-product .cs-promo-modal__title {
font-size: 21px;
}
body.single-product .cs-promo-modal__product {
grid-template-columns: 72px minmax(0, 1fr);
gap: 12px;
}
body.single-product .cs-promo-modal__media {
width: 72px;
}
body.single-product .cs-promo-modal__summary-row {
align-items: flex-start;
flex-direction: column;
gap: 4px;
}
body.single-product .cs-promo-modal__summary-row dd {
text-align: left;
}
/* Galeria mobile: padding compacto + imagem maior */
body.single-product .cs-product-gallery .woocommerce-product-gallery {
padding: 10px 10px 8px;
}
body.single-product .cs-product-gallery .woocommerce-product-gallery__image img {
max-height: clamp(280px, 70vw, 380px);
}
body.single-product .cs-product-gallery .flex-direction-nav a {
width: 32px;
height: 32px;
}
body.single-product .cs-product-gallery .flex-direction-nav .flex-prev { left: 8px; }
body.single-product .cs-product-gallery .flex-direction-nav .flex-next { right: 8px; }
body.single-product .cs-product-gallery .flex-direction-nav a::before {
width: 12px;
height: 12px;
}
body.single-product .cs-product-gallery .woocommerce-product-gallery__trigger {
width: 32px;
height: 32px;
top: 10px;
right: 10px;
}
body.single-product .cs-product-gallery .flex-control-thumbs li img {
width: 50px;
height: 50px;
}
/* Layout do botão ATC em mobile: qty + wish em cima, ATC full-width em baixo */
body.single-product .cs-product-summary form.cart:not(.variations_form),
body.single-product .cs-product-summary .woocommerce-variation-add-to-cart {
flex-wrap: wrap;
}
body.single-product .cs-product-summary form.cart:not(.variations_form) .quantity,
body.single-product .cs-product-summary .woocommerce-variation-add-to-cart .quantity { order: 1; }
body.single-product .cs-product-summary .cs-single-wish-wrap { order: 2; margin-left: 0; }
body.single-product .cs-product-summary form.cart:not(.variations_form) .single_add_to_cart_button,
body.single-product .cs-product-summary .woocommerce-variation-add-to-cart .single_add_to_cart_button {
order: 3;
flex: 0 0 100%;
}
body.single-product .cs-product-details .woocommerce-tabs ul.tabs li a {
padding: 14px 16px;
font-size: 13px;
}
body.single-product .cs-product-details .woocommerce-tabs .panel table.shop_attributes th,
body.single-product .cs-product-details .woocommerce-tabs .panel table.shop_attributes td {
padding: 11px 14px;
font-size: 13px;
}
}
@media (max-width: 480px) {
/* Summary mais compacto em telemóvel pequeno (S20, iPhone SE) */
body.single-product .cs-product-summary {
padding: 18px 16px 16px;
border-radius: 16px;
}
body.single-product .cs-product-summary .product_title.entry-title { font-size: 20px; }
body.single-product .cs-product-summary .woocommerce-product-details__short-description {
margin: 0 0 14px;
padding-top: 14px;
}
body.single-product .cs-product-summary .cs-product-trust {
margin: 14px 0 0;
padding-top: 14px;
}
body.single-product .cs-product-summary .product_meta {
margin: 14px 0 0;
padding-top: 12px;
}
/* Qty + wishlist devem caber juntos na 1ª linha (ATC vai p/ linha 2) */
body.single-product .cs-product-summary form.cart:not(.variations_form),
body.single-product .cs-product-summary .woocommerce-variation-add-to-cart {
gap: 8px;
}
body.single-product .cs-product-summary form.cart:not(.variations_form) .quantity .qty,
body.single-product .cs-product-summary .woocommerce-variation-add-to-cart .quantity .qty {
width: 58px;
}
/* Tabs com padding mais reduzido em telemóvel pequeno */
body.single-product .cs-product-details .woocommerce-tabs .panel {
padding: 20px 18px;
}
}
@media (max-width: 420px) {
body.single-product .cs-product-related ul.products {
grid-template-columns: 1fr;
}
}
/* =====================================================
My Account — logged-out authentication
===================================================== */
body.woocommerce-account:not(.logged-in) .site-main .container {
max-width: 1180px;
}
body.woocommerce-account:not(.logged-in) .page-title {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
body.woocommerce-account:not(.logged-in) .page-content {
box-sizing: border-box;
width: 100%;
max-width: 100%;
margin: 24px 0 72px;
min-width: 0;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth {
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr);
gap: 22px;
align-items: start;
width: 100%;
max-width: 100%;
min-width: 0;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__panel,
body.woocommerce-account:not(.logged-in) .cs-account-auth__forms .u-column1,
body.woocommerce-account:not(.logged-in) .cs-account-auth__forms .u-column2,
body.woocommerce-account:not(.logged-in) .cs-account-recovery__card {
box-sizing: border-box;
border: 1px solid rgba(15,23,42,.08);
border-radius: 24px;
background: #fff;
box-shadow: 0 18px 42px rgba(15,23,42,.06);
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__panel {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
padding: 26px;
overflow: hidden;
color: #231028;
background: #fff;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__panel::before {
content: '';
position: absolute;
inset: 0 0 auto;
height: 4px;
background: rgba(202,128,203,.6);
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__eyebrow {
margin: 0 0 10px;
color: var(--cs-purple, #600165);
font-size: 11px;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__title {
margin: 0;
color: #180c1b;
font-size: clamp(28px, 3vw, 38px);
font-weight: 900;
line-height: 1.05;
letter-spacing: 0;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__text {
max-width: 25rem;
margin: 10px 0 0;
color: rgba(0,0,0,.64);
font-size: 14px;
font-weight: 600;
line-height: 1.55;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__signup {
margin: 18px 0 0;
padding: 16px;
border: 1px solid rgba(15,23,42,.08);
border-radius: 18px;
background: #fbfbfc;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__signup h3 {
margin: 0;
color: #180c1b;
font-size: 17px;
font-weight: 900;
line-height: 1.25;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__signup p {
margin: 7px 0 14px;
color: rgba(0,0,0,.58);
font-size: 13px;
font-weight: 600;
line-height: 1.55;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__cta,
body.woocommerce-account:not(.logged-in) .woocommerce form .button,
body.woocommerce-account:not(.logged-in) .woocommerce .button {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 22px;
border: 0;
border-radius: 999px;
background: var(--cs-purple, #600165);
color: #fff;
font: inherit;
font-size: 13px;
font-weight: 900;
line-height: 1;
text-decoration: none;
cursor: pointer;
box-shadow: 0 10px 22px rgba(15,23,42,.12);
transition: background .2s ease, transform .16s ease, box-shadow .2s ease;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__cta:hover,
body.woocommerce-account:not(.logged-in) .cs-account-auth__cta:focus-visible,
body.woocommerce-account:not(.logged-in) .woocommerce form .button:hover,
body.woocommerce-account:not(.logged-in) .woocommerce form .button:focus-visible {
background: #7a0180;
color: #fff;
outline: none;
transform: translateY(-1px);
box-shadow: 0 12px 26px rgba(15,23,42,.14);
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__benefits {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 18px 0 0;
padding: 16px 0 0;
border-top: 1px solid rgba(15,23,42,.08);
list-style: none;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__benefits li {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
min-height: 36px;
padding: 0 10px 0 4px;
border: 1px solid rgba(96,1,101,.1);
border-radius: 999px;
background: #fff;
color: rgba(0,0,0,.7);
font-size: 12.5px;
font-weight: 800;
line-height: 1.35;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__benefit-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: 50%;
color: var(--cs-purple, #600165);
background: rgba(96,1,101,.055);
border: 0;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__benefit-icon svg {
display: block;
width: 15px;
height: 15px;
color: currentColor;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__benefit-icon .cs-account-auth__icon-offers {
width: 15px;
height: auto;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__forms,
body.woocommerce-account:not(.logged-in) .cs-account-auth__forms #customer_login,
body.woocommerce-account:not(.logged-in) .cs-account-recovery {
box-sizing: border-box;
min-width: 0;
max-width: 100%;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__forms #customer_login {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 18px;
margin: 0;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__forms #customer_login::before,
body.woocommerce-account:not(.logged-in) .cs-account-auth__forms #customer_login::after {
display: none;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__forms .u-column1,
body.woocommerce-account:not(.logged-in) .cs-account-auth__forms .u-column2 {
float: none;
width: 100%;
max-width: 100%;
padding: 26px;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__forms h2,
body.woocommerce-account:not(.logged-in) .cs-account-recovery__card h2 {
margin: 0;
color: #180c1b;
font-size: 24px;
font-weight: 900;
line-height: 1.15;
}
body.woocommerce-account:not(.logged-in) .cs-account-form-intro,
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword > p:first-child {
margin: 12px 0 24px;
color: rgba(0,0,0,.58);
font-size: 13.5px;
font-weight: 600;
line-height: 1.6;
}
body.woocommerce-account:not(.logged-in) form.woocommerce-form,
body.woocommerce-account:not(.logged-in) form.lost_reset_password {
margin: 0;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__forms form.woocommerce-form {
margin-top: 16px;
padding: 18px;
border: 1px solid rgba(15,23,42,.08);
border-radius: 18px;
background: #fbfbfc;
}
body.woocommerce-account:not(.logged-in) .form-row {
position: relative;
float: none;
width: 100%;
margin: 0 0 16px;
padding: 0;
}
body.woocommerce-account:not(.logged-in) .form-row label {
display: block;
margin: 0 0 7px;
color: rgba(0,0,0,.68);
font-size: 12.5px;
font-weight: 900;
line-height: 1.35;
}
body.woocommerce-account:not(.logged-in) .required {
color: #dc2626;
text-decoration: none;
}
body.woocommerce-account:not(.logged-in) .woocommerce-Input,
body.woocommerce-account:not(.logged-in) .input-text {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-height: 48px;
padding: 13px 15px;
border: 1px solid rgba(96,1,101,.16);
border-radius: 15px;
background: #fff;
color: #171717;
font: inherit;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
box-shadow: none;
transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
body.woocommerce-account:not(.logged-in) .woocommerce-Input:focus,
body.woocommerce-account:not(.logged-in) .input-text:focus {
border-color: var(--cs-purple, #600165);
background: #fff;
box-shadow: 0 0 0 3px rgba(96,1,101,.11);
outline: none;
}
body.woocommerce-account:not(.logged-in) .cs-account-field-error-row .woocommerce-Input,
body.woocommerce-account:not(.logged-in) .cs-account-field-error-row .input-text {
border-color: rgba(220,38,38,.46);
background: #fff8f8;
box-shadow: 0 0 0 3px rgba(220,38,38,.08);
}
body.woocommerce-account:not(.logged-in) .cs-account-field-error-row label {
color: #9f1239;
}
body.woocommerce-account:not(.logged-in) .cs-account-field-error {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 8px 0 0;
color: #9f1239;
font-size: 12.5px;
font-weight: 800;
line-height: 1.4;
}
body.woocommerce-account:not(.logged-in) .cs-account-field-error::before {
content: '!';
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(220,38,38,.12);
color: #dc2626;
font-size: 11px;
font-weight: 900;
line-height: 1;
}
body.woocommerce-account:not(.logged-in) .cs-password-control {
position: relative;
display: block;
}
body.woocommerce-account:not(.logged-in) .cs-password-control .woocommerce-Input {
padding-right: 48px;
}
body.woocommerce-account:not(.logged-in) .show-password-input {
display: none !important;
}
body.woocommerce-account:not(.logged-in) .cs-password-toggle {
appearance: none;
position: absolute;
top: 50%;
right: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid transparent;
border-radius: 50%;
color: rgba(96,1,101,.72);
background: transparent;
cursor: pointer;
transform: translateY(-50%);
}
body.woocommerce-account:not(.logged-in) .cs-password-toggle:hover,
body.woocommerce-account:not(.logged-in) .cs-password-toggle:focus-visible {
border-color: rgba(96,1,101,.16);
background: rgba(96,1,101,.06);
outline: none;
}
body.woocommerce-account:not(.logged-in) .cs-password-toggle svg {
display: block;
width: 18px;
height: 18px;
}
body.woocommerce-account:not(.logged-in) label.woocommerce-form-login__rememberme,
body.woocommerce-account:not(.logged-in) label.woocommerce-form__label-for-checkbox,
body.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme {
display: inline-flex;
align-items: center;
gap: 9px;
margin: 0 0 14px;
color: rgba(0,0,0,.64);
font-size: 13px;
font-weight: 800;
line-height: 1.2;
vertical-align: middle;
}
body.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme span,
body.woocommerce-account:not(.logged-in) .woocommerce-form__label-for-checkbox span {
display: inline-flex;
align-items: center;
min-height: 17px;
line-height: 1.2;
}
body.woocommerce-account:not(.logged-in) .woocommerce-form__input-checkbox {
flex: 0 0 auto;
width: 17px;
height: 17px;
margin: 0;
accent-color: var(--cs-purple, #600165);
}
body.woocommerce-account:not(.logged-in) .woocommerce-form-login__submit,
body.woocommerce-account:not(.logged-in) .woocommerce-form-register__submit,
body.woocommerce-account:not(.logged-in) form.lost_reset_password .button {
width: 100%;
}
body.woocommerce-account:not(.logged-in) .lost_password {
margin: 12px 0 0;
text-align: center;
}
body.woocommerce-account:not(.logged-in) .lost_password a {
color: var(--cs-purple, #600165);
font-size: 13px;
font-weight: 900;
text-decoration: none;
}
body.woocommerce-account:not(.logged-in) .lost_password a:hover,
body.woocommerce-account:not(.logged-in) .lost_password a:focus-visible {
text-decoration: underline;
outline: none;
}
body.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text {
margin: 14px 0;
color: rgba(0,0,0,.56);
font-size: 12.5px;
font-weight: 600;
line-height: 1.55;
}
body.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text a {
color: var(--cs-purple, #600165);
font-weight: 900;
}
body.woocommerce-account:not(.logged-in) .cs-account-recovery {
max-width: 680px;
margin: 0 auto;
}
body.woocommerce-account:not(.logged-in) .cs-account-recovery__card {
padding: 28px;
}
body.woocommerce-account:not(.logged-in) .cs-account-recovery__title {
margin: 0 0 12px;
color: #220024;
font-size: clamp(26px, 4vw, 34px);
font-weight: 900;
line-height: 1.05;
letter-spacing: 0;
}
body.woocommerce-account:not(.logged-in) .cs-account-recovery__card > p:first-of-type {
margin-top: 0;
}
body.woocommerce-account:not(.logged-in) .woocommerce-error,
body.woocommerce-account:not(.logged-in) .woocommerce-message,
body.woocommerce-account:not(.logged-in) .woocommerce-info {
margin-bottom: 18px;
}
@media (max-width: 900px) {
body.woocommerce-account:not(.logged-in) .cs-account-auth {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__panel {
order: 1;
min-height: 0;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__forms {
order: 2;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__benefits {
margin-top: 16px;
padding-top: 0;
border-top: 0;
}
}
@media (max-width: 600px) {
body.woocommerce-account:not(.logged-in) .page-content {
margin: 14px 0 48px;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth {
gap: 12px;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__panel,
body.woocommerce-account:not(.logged-in) .cs-account-auth__forms .u-column1,
body.woocommerce-account:not(.logged-in) .cs-account-auth__forms .u-column2,
body.woocommerce-account:not(.logged-in) .cs-account-recovery__card {
border-radius: 18px;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__panel,
body.woocommerce-account:not(.logged-in) .cs-account-auth__forms .u-column1,
body.woocommerce-account:not(.logged-in) .cs-account-auth__forms .u-column2,
body.woocommerce-account:not(.logged-in) .cs-account-recovery__card {
padding: 16px;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__forms form.woocommerce-form {
margin-top: 14px;
padding: 14px;
border-radius: 16px;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__title {
font-size: 26px;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__signup {
margin-top: 14px;
padding: 14px;
border-radius: 16px;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__benefits {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
margin-top: 14px;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__benefits li {
justify-content: center;
min-height: 48px;
padding: 6px;
border-radius: 14px;
text-align: center;
font-size: 11.5px;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__benefit-icon {
width: 24px;
height: 24px;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__cta,
body.woocommerce-account:not(.logged-in) .woocommerce form .button,
body.woocommerce-account:not(.logged-in) .woocommerce .button {
width: 100%;
}
}
@media (max-width: 480px) {
body.woocommerce-account:not(.logged-in) .cs-account-auth {
gap: 10px;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__panel {
padding: 13px 14px 14px;
border-color: rgba(15,23,42,.07);
border-radius: 15px;
box-shadow: 0 10px 24px rgba(15,23,42,.035);
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__panel::before {
height: 2px;
background: rgba(202,128,203,.42);
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__eyebrow {
margin-bottom: 7px;
font-size: 10px;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__title {
font-size: 23px;
line-height: 1.08;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__text {
margin-top: 7px;
font-size: 12.75px;
line-height: 1.45;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__signup {
margin-top: 11px;
padding: 11px;
border-color: rgba(15,23,42,.065);
border-radius: 13px;
background: #fff;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__signup h3 {
font-size: 14px;
line-height: 1.22;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__signup p {
margin: 5px 0 10px;
font-size: 12px;
line-height: 1.42;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__cta {
min-height: 44px;
padding: 0 16px;
font-size: 12.5px;
box-shadow: 0 7px 16px rgba(15,23,42,.09);
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__benefits {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 10px;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__benefits li {
flex: 1 1 auto;
min-height: 34px;
padding: 4px 8px 4px 5px;
border-color: rgba(96,1,101,.08);
border-radius: 999px;
font-size: 11px;
line-height: 1.2;
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__benefit-icon {
width: 20px;
height: 20px;
background: rgba(96,1,101,.045);
}
body.woocommerce-account:not(.logged-in) .cs-account-auth__benefit-icon svg {
width: 12px;
height: 12px;
}
}
/* =====================================================
My Account - logged-in dashboard
===================================================== */
body.woocommerce-account.logged-in .site-main .container {
max-width: 1180px;
}
body.woocommerce-account.logged-in .page-title {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
body.woocommerce-account.logged-in .page-content {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 24px 0 76px;
}
body.woocommerce-account.logged-in .cs-account,
body.woocommerce-account.logged-in .cs-account *,
body.woocommerce-account.logged-in .cs-account *::before,
body.woocommerce-account.logged-in .cs-account *::after {
box-sizing: border-box;
}
body.woocommerce-account.logged-in .cs-account {
width: 100%;
max-width: 100%;
min-width: 0;
color: #180c1b;
}
body.woocommerce-account.logged-in .cs-account__layout {
display: grid;
grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
gap: 28px;
align-items: start;
min-width: 0;
}
body.woocommerce-account.logged-in .cs-account__main,
body.woocommerce-account.logged-in .cs-account__content {
min-width: 0;
max-width: 100%;
}
body.woocommerce-account.logged-in .cs-account__nav {
position: sticky;
top: 22px;
min-width: 0;
}
body.woocommerce-account.logged-in .cs-account__nav-card,
body.woocommerce-account.logged-in .cs-account__endpoint-header,
body.woocommerce-account.logged-in .cs-account-dashboard__hero,
body.woocommerce-account.logged-in .woocommerce-EditAccountForm,
body.woocommerce-account.logged-in .woocommerce-address-fields,
body.woocommerce-account.logged-in .woocommerce table.shop_table,
body.woocommerce-account.logged-in .woocommerce-Address {
border: 1px solid rgba(15,23,42,.08);
border-radius: 24px;
background: #fff;
box-shadow: 0 16px 40px rgba(15,23,42,.055);
}
body.woocommerce-account.logged-in .cs-account__nav-card {
padding: 16px;
}
body.woocommerce-account.logged-in .cs-account__nav-eyebrow,
body.woocommerce-account.logged-in .cs-account__eyebrow {
margin: 0;
color: var(--cs-purple, #600165);
font-size: 11px;
font-weight: 900;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
}
body.woocommerce-account.logged-in .cs-account__nav-eyebrow {
padding: 4px 8px 14px;
}
body.woocommerce-account.logged-in .cs-account__nav-list {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
body.woocommerce-account.logged-in .cs-account__nav-link {
display: flex;
align-items: center;
gap: 11px;
min-height: 48px;
padding: 9px 11px;
border: 1px solid transparent;
border-radius: 16px;
color: rgba(0,0,0,.66);
font-size: 13px;
font-weight: 900;
line-height: 1.25;
text-decoration: none;
transition: background .18s ease, border-color .18s ease, color .18s ease, transform .16s ease;
}
body.woocommerce-account.logged-in .cs-account__nav-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 32px;
height: 32px;
border-radius: 50%;
color: var(--cs-purple, #600165);
background: rgba(202,128,203,.1);
border: 1px solid rgba(202,128,203,.18);
}
body.woocommerce-account.logged-in .cs-account__nav-icon svg {
display: block;
width: 18px;
height: 18px;
}
body.woocommerce-account.logged-in .cs-account__nav-link:hover,
body.woocommerce-account.logged-in .cs-account__nav-link:focus-visible,
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation-link.is-active .cs-account__nav-link {
border-color: rgba(202,128,203,.24);
background: #fbfbfc;
color: var(--cs-purple, #600165);
outline: none;
}
body.woocommerce-account.logged-in .cs-account__nav-link:hover,
body.woocommerce-account.logged-in .cs-account__nav-link:focus-visible {
transform: translateY(-1px);
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation-link.is-active .cs-account__nav-icon {
background: var(--cs-purple, #600165);
border-color: var(--cs-purple, #600165);
color: #fff;
}
body.woocommerce-account.logged-in .cs-account__nav-item--customer-logout {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(96,1,101,.08);
}
body.woocommerce-account.logged-in .cs-account__nav-item--customer-logout .cs-account__nav-link {
color: rgba(137,18,48,.78);
}
body.woocommerce-account.logged-in .cs-account__nav-item--customer-logout .cs-account__nav-icon {
color: #9f1239;
background: rgba(159,18,57,.06);
border-color: rgba(159,18,57,.1);
}
body.woocommerce-account.logged-in .cs-account__endpoint-header {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 16px;
align-items: center;
margin: 0 0 18px;
padding: 24px;
background: #fff;
}
body.woocommerce-account.logged-in .cs-account__endpoint-icon,
body.woocommerce-account.logged-in .cs-account-dashboard__card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: var(--cs-purple, #600165);
background: rgba(96,1,101,.07);
border: 1px solid rgba(96,1,101,.12);
}
body.woocommerce-account.logged-in .cs-account__endpoint-icon svg,
body.woocommerce-account.logged-in .cs-account-dashboard__card-icon svg {
display: block;
width: 21px;
height: 21px;
}
body.woocommerce-account.logged-in .cs-account-dashboard__card-icon .cs-account-dashboard__campaign-icon {
width: 18px;
height: 25px;
}
body.woocommerce-account.logged-in .cs-account__endpoint-header h1,
body.woocommerce-account.logged-in .cs-account-dashboard__hero h1 {
margin: 8px 0 0;
color: #180c1b;
font-size: clamp(30px, 4vw, 46px);
font-weight: 900;
line-height: 1.02;
letter-spacing: 0;
}
body.woocommerce-account.logged-in .cs-account__endpoint-header p,
body.woocommerce-account.logged-in .cs-account-dashboard__hero p {
margin: 10px 0 0;
color: rgba(0,0,0,.62);
font-size: 14px;
font-weight: 600;
line-height: 1.65;
}
body.woocommerce-account.logged-in .cs-account-dashboard {
display: grid;
gap: 18px;
}
body.woocommerce-account.logged-in .cs-account-dashboard__hero {
position: relative;
overflow: hidden;
padding: clamp(26px, 4vw, 42px);
background: #fff;
}
body.woocommerce-account.logged-in .cs-account-dashboard__hero::before {
content: '';
position: absolute;
inset: 0 0 auto;
height: 4px;
background: rgba(202,128,203,.6);
}
body.woocommerce-account.logged-in .cs-account-dashboard__hero p:last-child {
max-width: 680px;
}
body.woocommerce-account.logged-in .cs-account-dashboard__cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
body.woocommerce-account.logged-in .cs-account-dashboard__card {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 14px;
align-items: center;
min-width: 0;
min-height: 128px;
padding: 20px;
border: 1px solid rgba(15,23,42,.08);
border-radius: 22px;
background: #fff;
color: inherit;
text-decoration: none;
box-shadow: 0 14px 32px rgba(15,23,42,.045);
transition: border-color .18s ease, background .18s ease, transform .16s ease, box-shadow .18s ease;
}
body.woocommerce-account.logged-in .cs-account-dashboard__card:hover,
body.woocommerce-account.logged-in .cs-account-dashboard__card:focus-visible {
border-color: rgba(202,128,203,.26);
background: #fbfbfc;
color: inherit;
outline: none;
transform: translateY(-2px);
box-shadow: 0 18px 38px rgba(15,23,42,.07);
}
body.woocommerce-account.logged-in .cs-account-dashboard__card-content {
display: grid;
gap: 6px;
min-width: 0;
}
body.woocommerce-account.logged-in .cs-account-dashboard__card-content strong {
color: #180c1b;
font-size: 17px;
font-weight: 900;
line-height: 1.2;
}
body.woocommerce-account.logged-in .cs-account-dashboard__card-content span {
color: rgba(0,0,0,.58);
font-size: 13px;
font-weight: 600;
line-height: 1.5;
}
body.woocommerce-account.logged-in .woocommerce a:not(.button):not(.cs-account-dashboard__card):not(.cs-account__nav-link) {
color: var(--cs-purple, #600165);
font-weight: 800;
text-decoration: none;
}
body.woocommerce-account.logged-in .woocommerce a:not(.button):not(.cs-account-dashboard__card):not(.cs-account__nav-link):hover,
body.woocommerce-account.logged-in .woocommerce a:not(.button):not(.cs-account-dashboard__card):not(.cs-account__nav-link):focus-visible {
color: #7a0180;
text-decoration: underline;
outline: none;
}
body.woocommerce-account.logged-in .woocommerce .button,
body.woocommerce-account.logged-in .woocommerce button.button,
body.woocommerce-account.logged-in .woocommerce input.button {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 18px;
border: 0;
border-radius: 999px;
background: var(--cs-purple, #600165);
color: #fff;
font: inherit;
font-size: 13px;
font-weight: 900;
line-height: 1;
text-decoration: none;
cursor: pointer;
box-shadow: 0 10px 22px rgba(15,23,42,.12);
transition: background .18s ease, transform .16s ease, box-shadow .18s ease;
}
body.woocommerce-account.logged-in .woocommerce .button:hover,
body.woocommerce-account.logged-in .woocommerce .button:focus-visible,
body.woocommerce-account.logged-in .woocommerce button.button:hover,
body.woocommerce-account.logged-in .woocommerce button.button:focus-visible,
body.woocommerce-account.logged-in .woocommerce input.button:hover,
body.woocommerce-account.logged-in .woocommerce input.button:focus-visible {
background: #7a0180;
color: #fff;
outline: none;
transform: translateY(-1px);
box-shadow: 0 12px 26px rgba(15,23,42,.14);
}
body.woocommerce-account.logged-in .woocommerce table.shop_table {
width: 100%;
overflow: hidden;
margin: 0;
border-collapse: separate;
border-spacing: 0;
}
body.woocommerce-account.logged-in .woocommerce table.shop_table th,
body.woocommerce-account.logged-in .woocommerce table.shop_table td {
padding: 16px;
border: 0;
border-bottom: 1px solid rgba(96,1,101,.08);
color: rgba(0,0,0,.68);
font-size: 13px;
font-weight: 700;
line-height: 1.45;
vertical-align: middle;
}
body.woocommerce-account.logged-in .woocommerce table.shop_table th {
color: #180c1b;
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
background: #fbfbfc;
}
body.woocommerce-account.logged-in .woocommerce table.shop_table tr:last-child td,
body.woocommerce-account.logged-in .woocommerce table.shop_table tr:last-child th {
border-bottom: 0;
}
body.woocommerce-account.logged-in .woocommerce table.shop_table .woocommerce-orders-table__cell-order-status {
color: var(--cs-purple, #600165);
font-weight: 900;
}
body.woocommerce-account.logged-in .cs-account .woocommerce-MyAccount-content > .woocommerce-info,
body.woocommerce-account.logged-in .cs-account .woocommerce-MyAccount-content > .woocommerce-message,
body.woocommerce-account.logged-in .cs-account .woocommerce-MyAccount-content > .woocommerce-error {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
align-items: center;
width: 100%;
margin: 0;
padding: 24px 24px 24px 70px;
border: 1px solid rgba(96,1,101,.12);
border-left: 5px solid var(--cs-purple, #600165);
border-radius: 22px;
background: #fff;
color: rgba(0,0,0,.7);
font-size: 15px;
font-weight: 900;
line-height: 1.45;
box-shadow: 0 16px 40px rgba(15,23,42,.055);
}
body.woocommerce-account.logged-in .cs-account .woocommerce-MyAccount-content > .woocommerce-info::before,
body.woocommerce-account.logged-in .cs-account .woocommerce-MyAccount-content > .woocommerce-message::before,
body.woocommerce-account.logged-in .cs-account .woocommerce-MyAccount-content > .woocommerce-error::before {
content: '!';
position: absolute;
left: 24px;
top: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(96,1,101,.08);
color: var(--cs-purple, #600165);
font-size: 14px;
font-weight: 900;
line-height: 1;
transform: translateY(-50%);
}
body.woocommerce-account.logged-in .cs-account .woocommerce-MyAccount-content > .woocommerce-message::before {
content: '✓';
background: rgba(22,163,74,.1);
color: #15803d;
}
body.woocommerce-account.logged-in .cs-account .woocommerce-MyAccount-content > .woocommerce-error::before {
background: rgba(220,38,38,.1);
color: #dc2626;
}
body.woocommerce-account.logged-in .cs-account .woocommerce-MyAccount-content > .woocommerce-info .button,
body.woocommerce-account.logged-in .cs-account .woocommerce-MyAccount-content > .woocommerce-message .button,
body.woocommerce-account.logged-in .cs-account .woocommerce-MyAccount-content > .woocommerce-error .button {
margin: 0;
white-space: nowrap;
}
body.woocommerce-account.logged-in .woocommerce .woocommerce-pagination {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 18px;
}
body.woocommerce-account.logged-in .cs-account .woocommerce-Addresses,
body.woocommerce-account.logged-in .cs-account .u-columns.woocommerce-Addresses,
body.woocommerce-account.logged-in .cs-account .col2-set.addresses {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
align-items: stretch;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 24px 0 0;
}
body.woocommerce-account.logged-in .cs-account .woocommerce-Addresses .col-1,
body.woocommerce-account.logged-in .cs-account .woocommerce-Addresses .col-2,
body.woocommerce-account.logged-in .cs-account .woocommerce-Address,
body.woocommerce-account.logged-in .cs-account .u-column1,
body.woocommerce-account.logged-in .cs-account .u-column2 {
float: none !important;
width: auto !important;
max-width: none;
min-width: 0;
margin: 0;
}
body.woocommerce-account.logged-in .cs-account .woocommerce-Address {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-width: 0;
padding: 22px;
}
body.woocommerce-account.logged-in .cs-account .woocommerce-Address-title {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin: 0 0 14px;
min-width: 0;
}
body.woocommerce-account.logged-in .cs-account .woocommerce-Address-title h2 {
flex: 1 1 auto;
min-width: 0;
margin: 0;
color: #180c1b;
font-size: 18px;
font-weight: 900;
line-height: 1.2;
}
body.woocommerce-account.logged-in .cs-account .woocommerce-Address-title .edit {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-height: 34px;
padding: 0 13px;
border: 1px solid rgba(96,1,101,.16);
border-radius: 999px;
background: #fff;
color: var(--cs-purple, #600165);
font-size: 12px;
font-weight: 900;
line-height: 1;
text-decoration: none;
white-space: nowrap;
}
body.woocommerce-account.logged-in .cs-account .woocommerce-Address address {
margin: auto 0 0;
color: rgba(0,0,0,.62);
font-style: normal;
font-size: 14px;
font-weight: 600;
line-height: 1.65;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-content > p:first-child {
margin-top: 0;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-content > p {
color: rgba(0,0,0,.62);
font-size: 14px;
font-weight: 600;
line-height: 1.65;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-content > p:first-child:not(.woocommerce-info):not(.woocommerce-message):not(.woocommerce-error) {
max-width: 720px;
margin: 0 auto 22px;
text-align: center;
}
body.woocommerce-account.logged-in .woocommerce-EditAccountForm,
body.woocommerce-account.logged-in .woocommerce-address-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 16px;
width: min(100%, 720px);
margin: 0 auto;
padding: 24px;
}
body.woocommerce-account.logged-in .woocommerce-EditAccountForm .clear,
body.woocommerce-account.logged-in .woocommerce-address-fields .clear {
display: none;
}
body.woocommerce-account.logged-in .form-row {
float: none;
width: 100%;
max-width: 100%;
margin: 0 0 16px;
padding: 0;
}
body.woocommerce-account.logged-in .form-row-wide,
body.woocommerce-account.logged-in .woocommerce-EditAccountForm fieldset,
body.woocommerce-account.logged-in .woocommerce-EditAccountForm > p:last-child,
body.woocommerce-account.logged-in .woocommerce-address-fields__field-wrapper,
body.woocommerce-account.logged-in .woocommerce-address-fields > p {
grid-column: 1 / -1;
}
body.woocommerce-account.logged-in .form-row label {
display: block;
margin: 0 0 7px;
color: rgba(0,0,0,.68);
font-size: 12.5px;
font-weight: 900;
line-height: 1.35;
}
body.woocommerce-account.logged-in .required {
color: #dc2626;
text-decoration: none;
}
body.woocommerce-account.logged-in .woocommerce-Input,
body.woocommerce-account.logged-in .input-text,
body.woocommerce-account.logged-in select,
body.woocommerce-account.logged-in textarea {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-height: 48px;
padding: 13px 15px;
border: 1px solid rgba(96,1,101,.16);
border-radius: 15px;
background: #fff;
color: #171717;
font: inherit;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
box-shadow: none;
transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
body.woocommerce-account.logged-in textarea {
min-height: 120px;
resize: vertical;
}
body.woocommerce-account.logged-in .woocommerce-Input:focus,
body.woocommerce-account.logged-in .input-text:focus,
body.woocommerce-account.logged-in select:focus,
body.woocommerce-account.logged-in textarea:focus {
border-color: var(--cs-purple, #600165);
background: #fff;
box-shadow: 0 0 0 3px rgba(96,1,101,.11);
outline: none;
}
body.woocommerce-account.logged-in .woocommerce-EditAccountForm fieldset {
min-width: 0;
margin: 8px 0 20px;
padding: 24px;
border: 1px solid rgba(15,23,42,.08);
border-radius: 20px;
background: #fbfbfc;
}
body.woocommerce-account.logged-in .woocommerce-EditAccountForm legend {
padding: 0 8px;
color: #180c1b;
font-size: 15px;
font-weight: 900;
}
body.woocommerce-account.logged-in .woocommerce-EditAccountForm fieldset .form-row:last-child {
margin-bottom: 0;
}
body.woocommerce-account.logged-in .woocommerce-EditAccountForm > p:last-child {
display: flex;
justify-content: flex-start;
margin: 4px 0 0;
}
body.woocommerce-account.logged-in #account_display_name_description {
display: block;
margin-top: 7px;
color: rgba(0,0,0,.5);
font-size: 12.5px;
font-weight: 600;
line-height: 1.45;
}
body.woocommerce-account.logged-in .woocommerce-error,
body.woocommerce-account.logged-in .woocommerce-message,
body.woocommerce-account.logged-in .woocommerce-info {
display: block;
margin: 0 0 18px;
padding: 16px 18px;
border: 1px solid rgba(96,1,101,.12);
border-left: 4px solid var(--cs-purple, #600165);
border-radius: 18px;
background: #fff;
color: rgba(0,0,0,.68);
font-size: 13px;
font-weight: 700;
line-height: 1.55;
box-shadow: 0 12px 28px rgba(15,23,42,.05);
}
body.woocommerce-account.logged-in .woocommerce-error {
border-left-color: #dc2626;
background: #fff8f8;
}
body.woocommerce-account.logged-in .woocommerce-message {
border-left-color: #16a34a;
}
@media (max-width: 900px) {
body.woocommerce-account.logged-in .cs-account__layout {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
body.woocommerce-account.logged-in .cs-account__nav {
position: relative;
top: auto;
overflow-x: auto;
padding-bottom: 2px;
-webkit-overflow-scrolling: touch;
}
body.woocommerce-account.logged-in .cs-account__nav-card {
width: max-content;
min-width: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body.woocommerce-account.logged-in .cs-account__nav-eyebrow {
display: none;
}
body.woocommerce-account.logged-in .cs-account__nav-list {
display: flex;
gap: 10px;
padding: 2px 0 10px;
}
body.woocommerce-account.logged-in .cs-account__nav-item {
flex: 0 0 auto;
}
body.woocommerce-account.logged-in .cs-account__nav-item--customer-logout {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
body.woocommerce-account.logged-in .cs-account__nav-link {
min-width: 150px;
background: #fff;
border-color: rgba(96,1,101,.1);
}
body.woocommerce-account.logged-in .cs-account-dashboard__cards,
body.woocommerce-account.logged-in .cs-account .woocommerce-Addresses,
body.woocommerce-account.logged-in .cs-account .u-columns.woocommerce-Addresses,
body.woocommerce-account.logged-in .cs-account .col2-set.addresses {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 700px) {
body.woocommerce-account.logged-in .page-content {
margin: 14px 0 52px;
}
body.woocommerce-account.logged-in .cs-account__endpoint-header,
body.woocommerce-account.logged-in .cs-account-dashboard__hero,
body.woocommerce-account.logged-in .woocommerce-EditAccountForm,
body.woocommerce-account.logged-in .woocommerce-address-fields,
body.woocommerce-account.logged-in .woocommerce-Address {
border-radius: 18px;
}
body.woocommerce-account.logged-in .cs-account__endpoint-header,
body.woocommerce-account.logged-in .cs-account-dashboard__hero,
body.woocommerce-account.logged-in .woocommerce-EditAccountForm,
body.woocommerce-account.logged-in .woocommerce-address-fields,
body.woocommerce-account.logged-in .woocommerce-Address {
padding: 20px;
}
body.woocommerce-account.logged-in .cs-account__endpoint-header {
grid-template-columns: minmax(0, 1fr);
}
body.woocommerce-account.logged-in .cs-account__endpoint-header h1,
body.woocommerce-account.logged-in .cs-account-dashboard__hero h1 {
font-size: 30px;
}
body.woocommerce-account.logged-in .cs-account-dashboard__card {
min-height: 0;
padding: 18px;
}
body.woocommerce-account.logged-in .woocommerce-EditAccountForm,
body.woocommerce-account.logged-in .woocommerce-address-fields {
grid-template-columns: minmax(0, 1fr);
}
body.woocommerce-account.logged-in .woocommerce table.shop_table_responsive,
body.woocommerce-account.logged-in .woocommerce table.shop_table_responsive tbody,
body.woocommerce-account.logged-in .woocommerce table.shop_table_responsive tr,
body.woocommerce-account.logged-in .woocommerce table.shop_table_responsive td,
body.woocommerce-account.logged-in .woocommerce table.shop_table_responsive th {
display: block;
width: 100%;
}
body.woocommerce-account.logged-in .woocommerce table.shop_table_responsive thead {
display: none;
}
body.woocommerce-account.logged-in .woocommerce table.shop_table_responsive {
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body.woocommerce-account.logged-in .woocommerce table.shop_table_responsive tr {
margin: 0 0 14px;
padding: 14px;
border: 1px solid rgba(15,23,42,.08);
border-radius: 18px;
background: #fff;
box-shadow: 0 12px 28px rgba(15,23,42,.045);
}
body.woocommerce-account.logged-in .woocommerce table.shop_table_responsive td,
body.woocommerce-account.logged-in .woocommerce table.shop_table_responsive th {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 10px 0;
border-bottom: 1px solid rgba(96,1,101,.07);
text-align: right;
}
body.woocommerce-account.logged-in .woocommerce table.shop_table_responsive td::before,
body.woocommerce-account.logged-in .woocommerce table.shop_table_responsive th::before {
content: attr(data-title);
flex: 0 0 auto;
color: rgba(0,0,0,.54);
font-size: 12px;
font-weight: 900;
text-align: left;
text-transform: uppercase;
}
body.woocommerce-account.logged-in .woocommerce table.shop_table_responsive td:last-child,
body.woocommerce-account.logged-in .woocommerce table.shop_table_responsive th:last-child {
border-bottom: 0;
}
body.woocommerce-account.logged-in .woocommerce table.shop_table_responsive .woocommerce-orders-table__cell-order-actions,
body.woocommerce-account.logged-in .woocommerce table.shop_table_responsive .woocommerce-orders-table__cell-order-actions::before {
display: block;
text-align: left;
}
body.woocommerce-account.logged-in .woocommerce table.shop_table_responsive .woocommerce-orders-table__cell-order-actions .button {
width: 100%;
margin-top: 8px;
}
body.woocommerce-account.logged-in .woocommerce .button,
body.woocommerce-account.logged-in .woocommerce button.button,
body.woocommerce-account.logged-in .woocommerce input.button {
width: 100%;
}
}
/* My Account - logged-in premium rebuild */
body.woocommerce-account.logged-in .site-main .container {
max-width: 1240px;
}
body.woocommerce-account.logged-in .cs-account__layout {
grid-template-columns: 198px minmax(0, 1fr);
gap: 22px;
align-items: start;
}
body.woocommerce-account.logged-in .cs-account__main {
width: 100%;
min-width: 0;
}
body.woocommerce-account.logged-in .cs-account__content {
width: 100%;
min-width: 0;
}
body.woocommerce-account.logged-in .cs-account__nav {
width: 198px;
}
body.woocommerce-account.logged-in .cs-account__nav-card {
padding: 12px;
border-radius: 20px;
box-shadow: 0 12px 30px rgba(15,23,42,.045);
}
body.woocommerce-account.logged-in .cs-account__nav-eyebrow {
padding: 4px 8px 12px;
font-size: 10.5px;
}
body.woocommerce-account.logged-in .cs-account__nav-list {
gap: 6px;
}
body.woocommerce-account.logged-in .cs-account__nav-link {
min-height: 42px;
padding: 7px 9px;
border-radius: 14px;
gap: 9px;
font-size: 12.5px;
line-height: 1.22;
}
body.woocommerce-account.logged-in .cs-account__nav-icon {
width: 29px;
height: 29px;
}
body.woocommerce-account.logged-in .cs-account__nav-icon svg {
width: 16px;
height: 16px;
}
body.woocommerce-account.logged-in .cs-account__nav-item--customer-logout {
margin-top: 7px;
padding-top: 7px;
}
body.woocommerce-account.logged-in .cs-account__endpoint-header,
body.woocommerce-account.logged-in .cs-account-dashboard__hero {
margin-bottom: 20px;
padding: clamp(26px, 3vw, 36px);
border-radius: 22px;
box-shadow: 0 14px 34px rgba(15,23,42,.045);
}
body.woocommerce-account.logged-in .cs-account__endpoint-header h1,
body.woocommerce-account.logged-in .cs-account-dashboard__hero h1 {
font-size: clamp(34px, 4vw, 48px);
}
body.woocommerce-account.logged-in .cs-account-dashboard {
gap: 20px;
}
body.woocommerce-account.logged-in .cs-account-dashboard__cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
body.woocommerce-account.logged-in .cs-account-dashboard__card {
min-height: 118px;
padding: 22px;
border-radius: 20px;
box-shadow: none;
}
body.woocommerce-account.logged-in .cs-account-dashboard__card:hover,
body.woocommerce-account.logged-in .cs-account-dashboard__card:focus-visible {
box-shadow: 0 12px 28px rgba(15,23,42,.055);
}
body.woocommerce-account.logged-in .cs-account-panel,
body.woocommerce-account.logged-in .cs-account-form-section,
body.woocommerce-account.logged-in .cs-account-empty,
body.woocommerce-account.logged-in .cs-account-address-card {
border: 1px solid rgba(15,23,42,.08);
border-radius: 22px;
background: #fff;
box-shadow: 0 12px 30px rgba(15,23,42,.045);
}
body.woocommerce-account.logged-in .cs-account-section-intro {
max-width: 760px;
margin: 0 0 20px;
color: rgba(0,0,0,.62);
font-size: 14px;
font-weight: 700;
line-height: 1.65;
text-align: left;
}
body.woocommerce-account.logged-in .cs-account-addresses-section {
width: 100%;
}
body.woocommerce-account.logged-in .cs-account-addresses {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
align-items: stretch;
width: 100%;
min-width: 0;
}
body.woocommerce-account.logged-in .cs-account-address-card {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 190px;
padding: 24px;
}
body.woocommerce-account.logged-in .cs-account-address-card__header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
align-items: start;
min-width: 0;
}
body.woocommerce-account.logged-in .cs-account-address-card__header h2 {
margin: 0;
color: #180c1b;
font-size: 21px;
font-weight: 900;
line-height: 1.12;
}
body.woocommerce-account.logged-in .cs-account-address-card__action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 0 14px;
border: 1px solid rgba(96,1,101,.16);
border-radius: 999px;
background: #fff;
color: var(--cs-purple, #600165);
font-size: 12px;
font-weight: 900;
line-height: 1;
text-align: center;
text-decoration: none;
white-space: nowrap;
}
body.woocommerce-account.logged-in .cs-account-address-card__action:hover,
body.woocommerce-account.logged-in .cs-account-address-card__action:focus-visible {
border-color: rgba(202,128,203,.28);
background: #fbfbfc;
color: var(--cs-purple, #600165);
outline: none;
}
body.woocommerce-account.logged-in .cs-account-address-card__body {
margin-top: 20px;
color: rgba(0,0,0,.62);
font-size: 14px;
font-weight: 650;
line-height: 1.65;
}
body.woocommerce-account.logged-in .cs-account-address-card__body address {
margin: 0;
color: inherit;
font: inherit;
}
body.woocommerce-account.logged-in .cs-account-edit-form {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 18px;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body.woocommerce-account.logged-in .cs-account-form-section {
padding: 26px;
}
body.woocommerce-account.logged-in .cs-account-form-section__header {
margin-bottom: 20px;
}
body.woocommerce-account.logged-in .cs-account-form-section__header h2 {
margin: 0;
color: #180c1b;
font-size: 21px;
font-weight: 900;
line-height: 1.16;
}
body.woocommerce-account.logged-in .cs-account-form-section__header p {
max-width: 620px;
margin: 8px 0 0;
color: rgba(0,0,0,.58);
font-size: 13.5px;
font-weight: 650;
line-height: 1.55;
}
body.woocommerce-account.logged-in .cs-account-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 18px;
}
body.woocommerce-account.logged-in .cs-account-edit-form .form-row-wide {
grid-column: 1 / -1;
}
body.woocommerce-account.logged-in .cs-account-edit-form .form-row {
margin-bottom: 18px;
}
body.woocommerce-account.logged-in .cs-account-edit-form .form-row:last-child {
margin-bottom: 0;
}
body.woocommerce-account.logged-in .cs-account-form-section--password fieldset {
display: grid;
gap: 16px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
body.woocommerce-account.logged-in .cs-account-form-section--password legend {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
body.woocommerce-account.logged-in .cs-account-form-actions {
display: flex;
justify-content: flex-start;
margin: 0;
padding: 2px 0 0;
}
body.woocommerce-account.logged-in .cs-account-empty {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 18px;
align-items: center;
width: 100%;
min-width: 0;
padding: 26px;
}
body.woocommerce-account.logged-in .cs-account-empty__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 50%;
color: var(--cs-purple, #600165);
background: rgba(96,1,101,.07);
border: 1px solid rgba(96,1,101,.12);
}
body.woocommerce-account.logged-in .cs-account-empty__icon svg {
display: block;
width: 22px;
height: 22px;
}
body.woocommerce-account.logged-in .cs-account-empty__content {
min-width: 0;
}
body.woocommerce-account.logged-in .cs-account-empty__content h2 {
margin: 0;
color: #180c1b;
font-size: 19px;
font-weight: 900;
line-height: 1.2;
}
body.woocommerce-account.logged-in .cs-account-empty__content p {
margin: 7px 0 0;
color: rgba(0,0,0,.58);
font-size: 13.5px;
font-weight: 650;
line-height: 1.55;
}
body.woocommerce-account.logged-in .cs-account-orders-panel,
body.woocommerce-account.logged-in .cs-account-downloads-panel {
overflow: hidden;
}
body.woocommerce-account.logged-in .cs-account-orders-panel table.shop_table,
body.woocommerce-account.logged-in .cs-account-downloads-panel table.shop_table {
border: 0;
border-radius: 0;
box-shadow: none;
}
body.woocommerce-account.logged-in .woocommerce table.shop_table {
box-shadow: none;
}
@media (max-width: 1100px) {
body.woocommerce-account.logged-in .cs-account__layout {
grid-template-columns: 188px minmax(0, 1fr);
gap: 18px;
}
body.woocommerce-account.logged-in .cs-account__nav {
width: 188px;
}
body.woocommerce-account.logged-in .cs-account-address-card__header {
grid-template-columns: minmax(0, 1fr);
}
body.woocommerce-account.logged-in .cs-account-address-card__action {
justify-self: start;
}
}
@media (max-width: 900px) {
body.woocommerce-account.logged-in .cs-account__layout {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
}
body.woocommerce-account.logged-in .cs-account__nav {
width: 100%;
max-width: 100%;
}
body.woocommerce-account.logged-in .cs-account__nav-card {
width: 100%;
min-width: 0;
}
body.woocommerce-account.logged-in .cs-account__nav-list {
overflow-x: auto;
scrollbar-width: none;
}
body.woocommerce-account.logged-in .cs-account__nav-list::-webkit-scrollbar {
display: none;
}
body.woocommerce-account.logged-in .cs-account__nav-link {
min-width: 144px;
}
body.woocommerce-account.logged-in .cs-account-dashboard__cards,
body.woocommerce-account.logged-in .cs-account-addresses {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 700px) {
body.woocommerce-account.logged-in .cs-account__endpoint-header,
body.woocommerce-account.logged-in .cs-account-dashboard__hero,
body.woocommerce-account.logged-in .cs-account-form-section,
body.woocommerce-account.logged-in .cs-account-empty,
body.woocommerce-account.logged-in .cs-account-address-card {
border-radius: 18px;
padding: 20px;
}
body.woocommerce-account.logged-in .cs-account__endpoint-header h1,
body.woocommerce-account.logged-in .cs-account-dashboard__hero h1 {
font-size: 31px;
}
body.woocommerce-account.logged-in .cs-account-form-grid {
grid-template-columns: minmax(0, 1fr);
}
body.woocommerce-account.logged-in .cs-account-address-card__action,
body.woocommerce-account.logged-in .cs-account-empty .button,
body.woocommerce-account.logged-in .cs-account-form-actions .button {
width: 100%;
}
body.woocommerce-account.logged-in .cs-account-empty {
grid-template-columns: minmax(0, 1fr);
text-align: left;
}
body.woocommerce-account.logged-in .cs-account-empty__icon {
width: 42px;
height: 42px;
}
}
/* My Account - sticky sidebar and mobile nav alignment fixes */
@media (min-width: 901px) {
body.woocommerce-account.logged-in .cs-account__nav {
position: sticky;
top: 146px;
align-self: flex-start;
max-height: calc(100vh - 170px);
overflow-x: visible;
overflow-y: auto;
padding: 2px 0 12px;
scrollbar-width: thin;
scrollbar-color: rgba(96,1,101,.22) transparent;
}
body.admin-bar.woocommerce-account.logged-in .cs-account__nav {
top: 198px;
max-height: calc(100vh - 202px);
}
body.woocommerce-account.logged-in .cs-account__nav::-webkit-scrollbar {
width: 6px;
}
body.woocommerce-account.logged-in .cs-account__nav::-webkit-scrollbar-track {
background: transparent;
}
body.woocommerce-account.logged-in .cs-account__nav::-webkit-scrollbar-thumb {
border-radius: 999px;
background: rgba(96,1,101,.22);
}
}
@media (max-width: 900px) {
body.woocommerce-account.logged-in .cs-account__nav {
position: relative;
top: auto;
max-height: none;
overflow: visible;
padding: 0 0 8px;
}
body.woocommerce-account.logged-in .cs-account__nav-card {
width: 100%;
min-width: 0;
}
body.woocommerce-account.logged-in .cs-account__nav-list {
display: flex;
align-items: stretch;
gap: 10px;
padding: 2px 0 10px;
overflow-x: auto;
scrollbar-width: none;
}
body.woocommerce-account.logged-in .cs-account__nav-list::-webkit-scrollbar {
display: none;
}
body.woocommerce-account.logged-in .cs-account__nav-item,
body.woocommerce-account.logged-in .cs-account__nav-item--customer-logout {
flex: 0 0 auto;
margin: 0;
padding: 0;
border: 0;
}
body.woocommerce-account.logged-in .cs-account__nav-link,
body.woocommerce-account.logged-in .cs-account__nav-item--customer-logout .cs-account__nav-link {
align-items: center;
min-width: 148px;
min-height: 46px;
height: 46px;
padding: 8px 10px;
}
body.woocommerce-account.logged-in .cs-account__nav-icon,
body.woocommerce-account.logged-in .cs-account__nav-item--customer-logout .cs-account__nav-icon {
width: 29px;
height: 29px;
}
body.woocommerce-account.logged-in .cs-account__nav-label {
display: inline-flex;
align-items: center;
min-height: 1.2em;
}
}
/* My Account - edit address form refinements */
body.woocommerce-account.logged-in .cs-account .woocommerce-MyAccount-content > form > h2 {
width: min(100%, 820px);
margin: 0 0 16px;
color: #180c1b;
font-size: clamp(24px, 3vw, 32px);
font-weight: 900;
line-height: 1.12;
}
body.woocommerce-account.logged-in .cs-account .woocommerce-address-fields {
justify-self: start;
width: min(100%, 820px);
margin: 0;
padding: clamp(22px, 3vw, 30px);
}
body.woocommerce-account.logged-in .cs-account .woocommerce-address-fields__field-wrapper {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 18px;
width: 100%;
min-width: 0;
}
body.woocommerce-account.logged-in .cs-account .woocommerce-address-fields__field-wrapper .form-row-wide {
grid-column: 1 / -1;
}
body.woocommerce-account.logged-in .cs-account .woocommerce-address-fields select {
appearance: none;
padding-right: 44px;
background-image:
linear-gradient(45deg, transparent 50%, rgba(96,1,101,.72) 50%),
linear-gradient(135deg, rgba(96,1,101,.72) 50%, transparent 50%);
background-position:
calc(100% - 22px) 52%,
calc(100% - 16px) 52%;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
}
body.woocommerce-account.logged-in .cs-account .woocommerce-address-fields .select2-container {
width: 100% !important;
max-width: 100%;
}
body.woocommerce-account.logged-in .cs-account .woocommerce-address-fields .select2-container .select2-selection--single {
box-sizing: border-box;
display: flex;
align-items: center;
width: 100%;
min-height: 48px;
height: auto;
border: 1px solid rgba(96,1,101,.16);
border-radius: 15px;
background: #fff;
box-shadow: none;
transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
body.woocommerce-account.logged-in .cs-account .woocommerce-address-fields .select2-container--focus .select2-selection--single,
body.woocommerce-account.logged-in .cs-account .woocommerce-address-fields .select2-container--open .select2-selection--single {
border-color: var(--cs-purple, #600165);
box-shadow: 0 0 0 3px rgba(96,1,101,.11);
}
body.woocommerce-account.logged-in .cs-account .woocommerce-address-fields .select2-selection__rendered {
display: block;
width: 100%;
padding: 12px 44px 12px 15px;
color: #171717;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
}
body.woocommerce-account.logged-in .cs-account .woocommerce-address-fields .select2-selection__placeholder {
color: rgba(0,0,0,.44);
}
body.woocommerce-account.logged-in .cs-account .woocommerce-address-fields .select2-selection__arrow {
top: 0;
right: 14px;
width: 18px;
height: 100%;
}
body.woocommerce-account.logged-in .cs-account .woocommerce-address-fields .select2-selection__arrow b {
width: 8px;
height: 8px;
margin: -6px 0 0 -4px;
border: 0;
border-right: 2px solid rgba(96,1,101,.72);
border-bottom: 2px solid rgba(96,1,101,.72);
transform: rotate(45deg);
}
body.woocommerce-account.logged-in .select2-container--open .select2-dropdown {
overflow: hidden;
border: 1px solid rgba(15,23,42,.1);
border-radius: 16px;
background: #fff;
box-shadow: 0 18px 40px rgba(15,23,42,.12);
}
body.woocommerce-account.logged-in .select2-container--open .select2-dropdown--above {
margin-top: -8px;
}
body.woocommerce-account.logged-in .select2-container--open .select2-dropdown--below {
margin-top: 8px;
}
body.woocommerce-account.logged-in .select2-container--default .select2-search--dropdown {
padding: 10px;
background: #fbfbfc;
}
body.woocommerce-account.logged-in .select2-container--default .select2-search--dropdown .select2-search__field {
min-height: 42px;
padding: 10px 12px;
border: 1px solid rgba(96,1,101,.16);
border-radius: 12px;
color: #171717;
font: inherit;
font-size: 13.5px;
font-weight: 600;
outline: none;
}
body.woocommerce-account.logged-in .select2-container--default .select2-search--dropdown .select2-search__field:focus {
border-color: var(--cs-purple, #600165);
box-shadow: 0 0 0 3px rgba(96,1,101,.1);
}
body.woocommerce-account.logged-in .select2-container--default .select2-results > .select2-results__options {
max-height: 260px;
padding: 6px;
}
body.woocommerce-account.logged-in .select2-container--default .select2-results__option {
margin: 2px 0;
padding: 10px 12px;
border-radius: 10px;
color: rgba(0,0,0,.72);
font-size: 13.5px;
font-weight: 650;
line-height: 1.35;
}
body.woocommerce-account.logged-in .select2-container--default .select2-results__option--highlighted[aria-selected],
body.woocommerce-account.logged-in .select2-container--default .select2-results__option--highlighted[data-selected] {
background: rgba(96,1,101,.08);
color: var(--cs-purple, #600165);
}
body.woocommerce-account.logged-in .select2-container--default .select2-results__option[aria-selected="true"],
body.woocommerce-account.logged-in .select2-container--default .select2-results__option[data-selected="true"] {
background: var(--cs-purple, #600165);
color: #fff;
}
@media (max-width: 700px) {
body.woocommerce-account.logged-in .cs-account .woocommerce-MyAccount-content > form > h2,
body.woocommerce-account.logged-in .cs-account .woocommerce-address-fields {
width: 100%;
}
body.woocommerce-account.logged-in .cs-account .woocommerce-address-fields__field-wrapper {
grid-template-columns: minmax(0, 1fr);
}
}
/* =====================================================
Color Swatches — pa_cor
===================================================== */
/* ── Select nativo oculto (acessível e ainda funcional para o WC) ─── */
body.single-product .cs-product-summary .variations_form .variations select[name="attribute_pa_cor"] {
position: absolute !important;
top: 0;
left: 0;
width: 1px !important;
height: 1px !important;
max-width: 1px;
min-width: 0;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0 !important;
box-shadow: none !important;
appearance: none;
}
body.single-product .cs-product-summary .variations_form .variations select[name="attribute_pa_tom"] {
position: absolute !important;
top: 0;
left: 0;
width: 1px !important;
height: 1px !important;
max-width: 1px;
min-width: 0;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0 !important;
box-shadow: none !important;
appearance: none;
}
/* ── Label de cor ────────────────────────────────────── */
body.single-product .cs-swatch-row {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0 0 16px;
}
body.single-product .cs-swatch-label {
max-width: 100%;
font-size: 13px;
font-weight: 600;
color: rgba(0,0,0,.6);
margin: 0 0 10px;
overflow-wrap: anywhere;
}
body.single-product .cs-swatch-name {
color: #1a1a1a;
font-weight: 700;
overflow-wrap: anywhere;
}
/* ── Grid de swatches ────────────────────────────────── */
body.single-product .cs-product-swatches {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
gap: 8px;
width: 100%;
max-width: 100%;
min-width: 0;
padding: 3px;
}
/* ── Swatch base ─────────────────────────────────────── */
body.single-product .cs-product-swatch {
box-sizing: border-box;
position: relative;
width: 38px;
height: 38px;
border-radius: 50%;
border: 2px solid rgba(0,0,0,.12);
background-color: var(--sw-color, #e0e0e0);
cursor: pointer;
padding: 0;
overflow: hidden;
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
flex-shrink: 0;
}
body.single-product .cs-product-swatch img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
/* ── Hover ───────────────────────────────────────────── */
body.single-product .cs-product-swatch:hover:not(.is-unavailable) {
border-color: var(--cs-purple, #600165);
box-shadow: 0 0 0 2px rgba(96,1,101,.12);
}
/* ── Ativo ───────────────────────────────────────────── */
body.single-product .cs-product-swatch.is-active {
border-color: var(--cs-purple, #600165);
box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px rgba(96,1,101,.18);
}
/* ── Indisponível ────────────────────────────────────── */
body.single-product .cs-product-swatch.is-unavailable {
opacity: .35;
cursor: default;
}
body.single-product .cs-product-swatch.is-unavailable::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
transparent 42%,
rgba(0,0,0,.5) 42%,
rgba(0,0,0,.5) 58%,
transparent 58%
);
border-radius: 50%;
pointer-events: none;
}
/* ── Mobile ──────────────────────────────────────────── */
@media (max-width: 600px) {
body.single-product .cs-product-swatch {
width: 34px;
height: 34px;
}
}
/* =====================================================
Tone Picker — pa_tom
===================================================== */
body.single-product .cs-tone-picker {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0 0 18px;
padding: 14px;
border: 1px solid rgba(96,1,101,.11);
border-radius: 18px;
background:
linear-gradient(135deg, rgba(96,1,101,.045), rgba(255,255,255,.94) 52%),
#fff;
}
body.single-product .cs-tone-picker__head {
display: grid;
gap: 8px;
margin: 0 0 12px;
}
body.single-product .cs-tone-picker__label,
body.single-product .cs-tone-picker__selected,
body.single-product .cs-tone-picker__note {
margin: 0;
}
body.single-product .cs-tone-picker__label {
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(96,1,101,.72);
}
body.single-product .cs-tone-picker__selected {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
min-width: 0;
color: rgba(0,0,0,.58);
font-size: 13px;
line-height: 1.35;
}
body.single-product .cs-tone-picker__selected-prefix {
font-weight: 650;
}
body.single-product .cs-tone-picker__selected-name {
color: #171217;
font-weight: 800;
overflow-wrap: anywhere;
}
body.single-product .cs-tone-picker__selected-swatch,
body.single-product .cs-tone-picker__swatch {
display: inline-block;
flex: 0 0 auto;
border-radius: 50%;
background:
linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,0) 48%),
var(--tone-color, #f4eef5);
border: 1px solid rgba(96,1,101,.18);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.48);
}
body.single-product .cs-tone-picker__selected-swatch {
width: 18px;
height: 18px;
}
body.single-product .cs-tone-picker__selected-swatch:not(.has-color) {
background:
repeating-linear-gradient(45deg, rgba(96,1,101,.09) 0 5px, rgba(255,255,255,.9) 5px 10px),
#fff;
}
body.single-product .cs-tone-picker__grid {
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
width: 100%;
max-width: 100%;
min-width: 0;
}
body.single-product .cs-tone-picker__option {
box-sizing: border-box;
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
align-items: center;
gap: 9px;
min-width: 0;
min-height: 48px;
padding: 9px 10px;
border: 1px solid rgba(0,0,0,.09);
border-radius: 15px;
background: rgba(255,255,255,.88);
color: #171217;
text-align: left;
cursor: pointer;
transition:
border-color .16s ease,
background-color .16s ease,
box-shadow .16s ease,
transform .16s ease;
}
body.single-product .cs-tone-picker__option:hover:not(.is-unavailable):not([disabled]) {
border-color: rgba(96,1,101,.25);
background: #fff;
box-shadow: 0 10px 24px rgba(96,1,101,.07);
transform: translateY(-1px);
}
body.single-product .cs-tone-picker__option:focus-visible {
outline: none;
border-color: var(--cs-purple, #600165);
box-shadow: 0 0 0 3px rgba(96,1,101,.14);
}
body.single-product .cs-tone-picker__option.is-active {
border-color: rgba(96,1,101,.46);
background: rgba(96,1,101,.07);
box-shadow:
inset 0 0 0 1px rgba(96,1,101,.08),
0 8px 22px rgba(96,1,101,.08);
}
body.single-product .cs-tone-picker__option.is-active::after {
content: '✓';
position: absolute;
top: 7px;
right: 8px;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--cs-purple, #600165);
color: #fff;
font-size: 11px;
font-weight: 900;
line-height: 1;
}
body.single-product .cs-tone-picker__option {
position: relative;
}
body.single-product .cs-tone-picker__option.is-unavailable,
body.single-product .cs-tone-picker__option[disabled] {
opacity: .42;
cursor: default;
}
body.single-product .cs-tone-picker__option.is-hidden,
body.single-product .cs-tone-picker__option[hidden] {
display: none !important;
}
body.single-product .cs-tone-picker__swatch {
width: 30px;
height: 30px;
}
body.single-product .cs-tone-picker__option:not([data-color]) .cs-tone-picker__swatch,
body.single-product .cs-tone-picker__option[data-color=""] .cs-tone-picker__swatch {
background:
repeating-linear-gradient(45deg, rgba(96,1,101,.09) 0 5px, rgba(255,255,255,.9) 5px 10px),
#fff;
}
body.single-product .cs-tone-picker__name {
min-width: 0;
display: grid;
gap: 2px;
line-height: 1.25;
}
body.single-product .cs-tone-picker__number {
color: var(--cs-purple, #600165);
font-size: 13px;
font-weight: 900;
}
body.single-product .cs-tone-picker__text {
color: rgba(0,0,0,.72);
font-size: 12.5px;
font-weight: 650;
overflow-wrap: anywhere;
}
body.single-product .cs-tone-picker__note {
margin-top: 12px;
font-size: 11.5px;
line-height: 1.5;
color: rgba(0,0,0,.52);
}
body.single-product .cs-tone-picker__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
margin-top: 12px;
padding: 8px 15px;
border: 1px solid rgba(96,1,101,.18);
border-radius: 999px;
background: rgba(255,255,255,.82);
color: var(--cs-purple, #600165);
cursor: pointer;
font-size: 12px;
font-weight: 850;
line-height: 1.2;
text-decoration: none;
transition:
border-color .16s ease,
background-color .16s ease,
box-shadow .16s ease,
transform .16s ease;
}
body.single-product .cs-tone-picker__toggle:hover,
body.single-product .cs-tone-picker__toggle:focus-visible {
border-color: rgba(96,1,101,.34);
background: rgba(96,1,101,.06);
box-shadow: 0 8px 18px rgba(96,1,101,.08);
outline: none;
}
body.single-product .cs-tone-picker__toggle:active {
transform: translateY(1px);
}
@media (max-width: 600px) {
body.single-product .cs-tone-picker {
padding: 12px;
border-radius: 16px;
}
body.single-product .cs-tone-picker__grid {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
body.single-product .cs-tone-picker__option {
min-height: 46px;
padding: 9px;
}
body.single-product .cs-tone-picker__toggle {
width: 100%;
}
}
/* Compact square swatches — pa_cor + pa_tom */
body.single-product .cs-product-summary .cs-tone-picker {
margin: 0 0 16px;
padding: 13px;
border-radius: 16px;
background: rgba(255,255,255,.92);
}
body.single-product .cs-product-summary .cs-tone-picker__head {
display: block;
margin: 0 0 11px;
}
body.single-product .cs-product-summary .cs-tone-picker__selected {
display: flex;
align-items: baseline;
gap: 5px;
color: #171217;
font-size: 13.5px;
line-height: 1.35;
}
body.single-product .cs-product-summary .cs-tone-picker__selected-prefix {
color: rgba(0,0,0,.82);
font-weight: 850;
}
body.single-product .cs-product-summary .cs-tone-picker__selected-name {
color: #171217;
font-weight: 750;
}
body.single-product .cs-product-summary .cs-tone-picker__grid,
body.single-product .cs-product-summary .cs-product-swatches {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
padding: 2px;
}
body.single-product .cs-product-summary .cs-tone-picker__option,
body.single-product .cs-product-summary .cs-product-swatch {
display: inline-grid;
place-items: center;
width: 42px;
height: 42px;
min-width: 0;
min-height: 0;
grid-template-columns: none;
gap: 0;
padding: 0;
border: 1px solid rgba(0,0,0,.14);
border-radius: 10px;
background:
linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,0) 52%),
var(--tone-color, var(--sw-color, #f6f1f7));
color: transparent;
text-align: center;
overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
transform: none;
transition:
border-color .16s ease,
box-shadow .16s ease,
opacity .16s ease,
transform .16s ease;
}
body.single-product .cs-product-summary .cs-tone-picker__option:hover:not(.is-unavailable):not([disabled]),
body.single-product .cs-product-summary .cs-product-swatch:hover:not(.is-unavailable):not([disabled]) {
border-color: rgba(23,18,23,.42);
background:
linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,0) 52%),
var(--tone-color, var(--sw-color, #f6f1f7));
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.58),
0 0 0 1px rgba(96,1,101,.14);
transform: none;
}
body.single-product .cs-product-summary .cs-tone-picker__option:focus-visible,
body.single-product .cs-product-summary .cs-product-swatch:focus-visible {
outline: none;
border-color: #171217;
box-shadow:
inset 0 0 0 3px #fff,
0 0 0 3px rgba(96,1,101,.2);
}
body.single-product .cs-product-summary .cs-tone-picker__option.is-active,
body.single-product .cs-product-summary .cs-tone-picker__option[aria-pressed="true"],
body.single-product .cs-product-summary .cs-product-swatch.is-active,
body.single-product .cs-product-summary .cs-product-swatch[aria-pressed="true"] {
border: 2px solid #171217;
background:
linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,0) 52%),
var(--tone-color, var(--sw-color, #f6f1f7));
box-shadow:
0 0 0 2px #fff,
0 0 0 3px rgba(23,23,23,.82),
0 6px 14px rgba(23,18,23,.08);
z-index: 2;
}
body.single-product .cs-product-summary .cs-tone-picker__option.is-active::after,
body.single-product .cs-product-summary .cs-tone-picker__option[aria-pressed="true"]::after,
body.single-product .cs-product-summary .cs-tone-picker__option[aria-checked="true"]::after,
body.single-product .cs-product-summary .cs-tone-picker__option.is-selected::after,
body.single-product .cs-product-summary .cs-product-swatch.is-active::after,
body.single-product .cs-product-summary .cs-product-swatch[aria-pressed="true"]::after,
body.single-product .cs-product-summary .cs-product-swatch[aria-checked="true"]::after,
body.single-product .cs-product-summary .cs-product-swatch.is-selected::after {
content: "";
position: absolute;
top: 3px;
right: 3px;
width: 17px;
height: 17px;
border-radius: 999px;
background-color: var(--cs-purple, #600165);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M1 6.48387L4 11L11 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 10px 10px;
box-shadow: 0 0 0 1.5px #fff;
z-index: 3;
pointer-events: none;
}
body.single-product .cs-product-summary .cs-tone-picker__option.is-active::before,
body.single-product .cs-product-summary .cs-tone-picker__option[aria-pressed="true"]::before,
body.single-product .cs-product-summary .cs-tone-picker__option[aria-checked="true"]::before,
body.single-product .cs-product-summary .cs-tone-picker__option.is-selected::before,
body.single-product .cs-product-summary .cs-product-swatch.is-active::before,
body.single-product .cs-product-summary .cs-product-swatch[aria-pressed="true"]::before,
body.single-product .cs-product-summary .cs-product-swatch[aria-checked="true"]::before,
body.single-product .cs-product-summary .cs-product-swatch.is-selected::before {
content: none;
}
body.single-product .cs-product-summary .cs-tone-picker__swatch {
display: block;
width: 100%;
height: 100%;
border: 0;
border-radius: 8px;
background:
linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,0) 52%),
var(--tone-color, var(--sw-color, #f6f1f7));
box-shadow: none;
}
body.single-product .cs-product-summary .cs-tone-picker__option img,
body.single-product .cs-product-summary .cs-product-swatch img {
width: 100%;
height: 100%;
border-radius: 8px;
object-fit: cover;
display: block;
}
body.single-product .cs-product-summary .cs-tone-picker__option:not([data-color]) .cs-tone-picker__swatch,
body.single-product .cs-product-summary .cs-tone-picker__option[data-color=""] .cs-tone-picker__swatch,
body.single-product .cs-product-summary .cs-product-swatch:not([data-color]) .cs-tone-picker__swatch,
body.single-product .cs-product-summary .cs-product-swatch[data-color=""] .cs-tone-picker__swatch {
background:
repeating-linear-gradient(45deg, rgba(96,1,101,.08) 0 5px, rgba(255,255,255,.92) 5px 10px),
#fff;
}
body.single-product .cs-product-summary .cs-tone-picker__option.is-unavailable,
body.single-product .cs-product-summary .cs-tone-picker__option[disabled],
body.single-product .cs-product-summary .cs-product-swatch.is-unavailable,
body.single-product .cs-product-summary .cs-product-swatch[disabled] {
opacity: .34;
cursor: default;
}
body.single-product .cs-product-summary .cs-product-swatch.is-unavailable::after {
border-radius: 8px;
}
body.single-product .cs-product-summary .cs-tone-picker__name,
body.single-product .cs-product-summary .cs-tone-picker__number,
body.single-product .cs-product-summary .cs-tone-picker__text {
display: none;
}
body.single-product .cs-product-summary .cs-tone-picker__note {
margin-top: 11px;
max-width: 58ch;
}
body.single-product .cs-product-summary .cs-tone-picker__toggle {
min-height: 34px;
margin-top: 12px;
padding: 8px 14px;
}
@media (max-width: 600px) {
body.single-product .cs-product-summary .cs-tone-picker {
padding: 12px;
}
body.single-product .cs-product-summary .cs-tone-picker__grid,
body.single-product .cs-product-summary .cs-product-swatches {
gap: 10px;
}
body.single-product .cs-product-summary .cs-tone-picker__option,
body.single-product .cs-product-summary .cs-product-swatch {
width: 46px;
height: 46px;
border-radius: 9px;
}
body.single-product .cs-product-summary .cs-tone-picker__swatch,
body.single-product .cs-product-summary .cs-tone-picker__option img,
body.single-product .cs-product-summary .cs-product-swatch img {
border-radius: 7px;
}
}
/* =====================================================
Cart Page
===================================================== */
body.woocommerce-cart .page-title,
body.woocommerce-cart .entry-title {
display: none;
}
body.woocommerce-cart .page-content {
max-width: none;
}
body.woocommerce-cart .woocommerce,
body.woocommerce-cart .cs-cart-page,
body.woocommerce-cart .cs-cart-page * {
box-sizing: border-box;
}
body.woocommerce-cart .woocommerce {
width: 100%;
max-width: var(--container, 1440px);
margin: 0 auto;
padding-right: var(--pad, 16px);
padding-left: var(--pad, 16px);
}
body.woocommerce-cart .woocommerce a {
color: inherit;
}
body.woocommerce-cart .cs-cart-promo-note,
body.woocommerce-checkout .cs-cart-promo-note {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 13px;
align-items: center;
margin: 18px 0 20px;
padding: 14px 16px;
border: 1px solid rgba(34, 139, 87, .16);
border-radius: 18px;
background: rgba(34, 139, 87, .055);
}
body.woocommerce-cart .cs-cart-promo-note__icon,
body.woocommerce-checkout .cs-cart-promo-note__icon {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(34, 139, 87, .16);
border-radius: 50%;
background: #fff;
color: #166534;
}
body.woocommerce-cart .cs-cart-promo-note__icon svg,
body.woocommerce-checkout .cs-cart-promo-note__icon svg {
width: 25px;
height: auto;
display: block;
}
body.woocommerce-cart .cs-cart-promo-note__icon svg path,
body.woocommerce-checkout .cs-cart-promo-note__icon svg path {
fill: #166534;
}
body.woocommerce-cart .cs-cart-promo-note__content,
body.woocommerce-checkout .cs-cart-promo-note__content {
min-width: 0;
display: grid;
gap: 2px;
}
body.woocommerce-cart .cs-cart-promo-note__eyebrow,
body.woocommerce-cart .cs-cart-promo-note__title,
body.woocommerce-cart .cs-cart-promo-note__saving,
body.woocommerce-checkout .cs-cart-promo-note__eyebrow,
body.woocommerce-checkout .cs-cart-promo-note__title,
body.woocommerce-checkout .cs-cart-promo-note__saving {
margin: 0;
letter-spacing: 0;
line-height: 1.25;
}
body.woocommerce-cart .cs-cart-promo-note__eyebrow,
body.woocommerce-checkout .cs-cart-promo-note__eyebrow {
color: rgba(22, 101, 52, .76);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
}
body.woocommerce-cart .cs-cart-promo-note__title,
body.woocommerce-checkout .cs-cart-promo-note__title {
color: #160018;
font-size: 14px;
font-weight: 900;
}
body.woocommerce-cart .cs-cart-promo-note__saving,
body.woocommerce-checkout .cs-cart-promo-note__saving {
color: #166534;
font-size: 13px;
font-weight: 850;
}
body.woocommerce-cart .cs-cart-promo-note__saving .amount,
body.woocommerce-checkout .cs-cart-promo-note__saving .amount {
color: inherit;
font-weight: 950;
}
body.woocommerce-cart .cs-cart-page {
margin: clamp(24px, 3vw, 40px) 0 clamp(60px, 7vw, 96px);
}
body.woocommerce-cart .cs-cart-page__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(380px, 420px);
gap: clamp(32px, 3.6vw, 52px);
align-items: start;
width: 100%;
}
body.woocommerce-cart .cs-cart-page__main,
body.woocommerce-cart .cs-cart-form,
body.woocommerce-cart .cs-cart-form__contents,
body.woocommerce-cart .cs-cart-page__collaterals,
body.woocommerce-cart .cs-cart-item,
body.woocommerce-cart .cs-cart-item > * {
min-width: 0;
}
body.woocommerce-cart .cs-cart-page__collaterals {
display: contents;
}
body.woocommerce-cart .cart-collaterals .cart_totals,
body.woocommerce-cart.woocommerce-page .cart-collaterals .cart_totals {
float: none;
width: 100%;
}
body.woocommerce-cart .cs-cart-form__contents {
display: grid;
gap: 18px;
}
body.woocommerce-cart .cs-cart-hero {
padding-bottom: 18px;
border-bottom: 1px solid rgba(22, 0, 24, .08);
}
body.woocommerce-cart .cs-cart-hero__eyebrow,
body.woocommerce-cart .cs-cart-empty__eyebrow,
body.woocommerce-cart .cs-cart-totals__eyebrow {
margin: 0 0 6px;
color: rgba(96, 1, 101, .76);
font-size: 11px;
font-weight: 900;
letter-spacing: 0;
line-height: 1.2;
text-transform: uppercase;
}
body.woocommerce-cart .cs-cart-hero h1,
body.woocommerce-cart .cs-cart-empty__card h1 {
margin: 0;
color: #160018;
font-size: clamp(31px, 3vw, 40px);
font-weight: 950;
letter-spacing: 0;
line-height: 1.08;
}
body.woocommerce-cart .cs-cart-hero p:not(.cs-cart-hero__eyebrow),
body.woocommerce-cart .cs-cart-empty__card p:not(.cs-cart-empty__eyebrow) {
max-width: 580px;
margin: 8px 0 0;
color: rgba(0, 0, 0, .58);
font-size: 14px;
font-weight: 650;
line-height: 1.5;
}
body.woocommerce-cart .cs-cart-items {
display: grid;
overflow: hidden;
border: 1px solid rgba(154, 89, 156, .16);
border-radius: 22px;
background: #fff;
}
body.woocommerce-cart .cs-cart-item {
display: grid;
grid-template-columns: 96px minmax(0, 1fr) 116px 104px 128px;
gap: 16px;
align-items: center;
padding: 18px 20px;
border-bottom: 1px solid rgba(22, 0, 24, .08);
background: #fff;
}
body.woocommerce-cart .cs-cart-item:last-of-type {
border-bottom: 0;
}
body.woocommerce-cart .cs-cart-item__media {
width: 96px;
height: 96px;
overflow: hidden;
border: 1px solid rgba(154, 89, 156, .08);
border-radius: 16px;
background: rgba(154, 89, 156, .045);
}
body.woocommerce-cart .cs-cart-item__media a,
body.woocommerce-cart .cs-cart-item__media img {
display: block;
width: 100%;
height: 100%;
}
body.woocommerce-cart .cs-cart-item__media img {
object-fit: cover;
}
body.woocommerce-cart .cs-cart-item__content {
display: grid;
gap: 7px;
}
body.woocommerce-cart .cs-cart-item__title {
margin: 0;
color: #160018;
font-size: 16px;
font-weight: 900;
letter-spacing: 0;
line-height: 1.25;
overflow-wrap: anywhere;
}
body.woocommerce-cart .cs-cart-item__title a {
color: inherit;
text-decoration: none;
}
body.woocommerce-cart .cs-cart-item__title a:hover,
body.woocommerce-cart .cs-cart-item__title a:focus-visible {
color: #600165;
outline: none;
}
body.woocommerce-cart .cs-cart-item dl.variation {
display: flex;
flex-wrap: wrap;
gap: 4px 8px;
margin: 0;
color: rgba(0, 0, 0, .58);
font-size: 12px;
line-height: 1.35;
}
body.woocommerce-cart .cs-cart-item dl.variation dt,
body.woocommerce-cart .cs-cart-item dl.variation dd,
body.woocommerce-cart .cs-cart-item dl.variation p {
margin: 0;
}
body.woocommerce-cart .cs-cart-item dl.variation dt {
font-weight: 850;
}
body.woocommerce-cart .cs-cart-item .backorder_notification {
margin: 0;
color: #9a3412;
font-size: 12px;
font-weight: 750;
}
body.woocommerce-cart .cs-cart-item__pricing,
body.woocommerce-cart .cs-cart-item__quantity,
body.woocommerce-cart .cs-cart-item__subtotal {
display: grid;
gap: 4px;
}
body.woocommerce-cart .cs-cart-item__pricing,
body.woocommerce-cart .cs-cart-item__quantity {
justify-items: center;
text-align: center;
}
body.woocommerce-cart .cs-cart-item__summary {
display: grid;
gap: 7px;
justify-items: end;
text-align: right;
}
body.woocommerce-cart .cs-cart-item__price span,
body.woocommerce-cart .cs-cart-item__label {
color: rgba(0, 0, 0, .62);
font-size: 11px;
font-weight: 500;
line-height: 1.2;
}
body.woocommerce-cart .cs-cart-item__subtotal span {
color: rgba(22, 0, 24, .66);
font-size: 11px;
font-weight: 800;
line-height: 1.2;
}
body.woocommerce-cart .cs-cart-item__price strong,
body.woocommerce-cart .cs-cart-item__price .amount {
color: rgba(0, 0, 0, .72);
font-size: 12.5px;
font-weight: 500;
line-height: 1.2;
}
body.woocommerce-cart .cs-cart-item__subtotal strong,
body.woocommerce-cart .cs-cart-item__subtotal .amount {
color: #160018;
font-size: 17px;
font-weight: 900;
line-height: 1.2;
}
body.woocommerce-cart .cs-cart-item .quantity .qty {
width: 78px;
height: 40px;
padding: 0 10px;
border: 1px solid rgba(154, 89, 156, .22);
border-radius: 12px;
background: #fff;
color: rgba(0, 0, 0, .72);
font-size: 13.5px;
font-weight: 500;
text-align: center;
outline: none;
}
body.woocommerce-cart .cs-cart-item .quantity .qty:focus {
border-color: rgba(96, 1, 101, .58);
box-shadow: 0 0 0 3px rgba(154, 89, 156, .12);
}
body.woocommerce-cart .cs-cart-item__remove > a.remove {
width: auto;
height: auto;
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 0;
border: 0;
border-radius: 0;
background: transparent;
color: rgba(96, 1, 101, .82) !important;
font-size: 12px;
font-weight: 850;
line-height: 1.2;
text-decoration: underline;
text-underline-offset: 3px;
white-space: nowrap;
}
body.woocommerce-cart .cs-cart-item__remove > a.remove:hover,
body.woocommerce-cart .cs-cart-item__remove > a.remove:focus-visible {
color: #600165 !important;
text-decoration-thickness: 2px;
outline: none;
}
body.woocommerce-cart .cs-cart-actions {
display: grid;
gap: 12px;
}
body.woocommerce-cart .cs-cart-coupon {
display: grid;
gap: 10px;
padding: 15px 18px;
border: 1px solid rgba(154, 89, 156, .14);
border-radius: 16px;
background: rgba(250, 247, 250, .62);
}
body.woocommerce-cart .cs-cart-coupon__label {
color: #160018;
font-size: 13px;
font-weight: 900;
line-height: 1.2;
}
body.woocommerce-cart .cs-cart-coupon__row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
}
body.woocommerce-cart #coupon_code {
width: 100%;
min-width: 0;
height: 42px;
padding: 0 14px;
border: 1px solid rgba(154, 89, 156, .22);
border-radius: 12px;
background: #fff;
color: #160018;
font-size: 13px;
font-weight: 700;
outline: none;
}
body.woocommerce-cart #coupon_code:focus {
border-color: rgba(96, 1, 101, .58);
box-shadow: 0 0 0 3px rgba(154, 89, 156, .12);
}
body.woocommerce-cart .cs-cart-actions__footer {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
flex-wrap: wrap;
}
body.woocommerce-cart .cs-cart-button,
body.woocommerce-cart .cs-cart-checkout-button {
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 16px;
border-radius: 13px;
font-size: 13px;
font-weight: 900;
line-height: 1.2;
text-align: center;
text-decoration: none;
text-transform: none;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
body.woocommerce-cart .cs-cart-button--primary,
body.woocommerce-cart .cs-cart-checkout-button {
border: 1px solid #600165;
background: #600165;
color: #fff;
}
body.woocommerce-cart .cs-cart-button--secondary,
body.woocommerce-cart .cs-cart-button--ghost {
border: 1px solid rgba(96, 1, 101, .22);
background: #fff;
color: #600165;
}
body.woocommerce-cart .cs-cart-button--primary:hover,
body.woocommerce-cart .cs-cart-button--primary:focus-visible,
body.woocommerce-cart .cs-cart-checkout-button:hover,
body.woocommerce-cart .cs-cart-checkout-button:focus-visible {
border-color: #47014b;
background: #47014b;
color: #fff;
outline: none;
}
body.woocommerce-cart .cs-cart-button--secondary:hover,
body.woocommerce-cart .cs-cart-button--secondary:focus-visible,
body.woocommerce-cart .cs-cart-button--ghost:hover,
body.woocommerce-cart .cs-cart-button--ghost:focus-visible {
border-color: rgba(96, 1, 101, .38);
background: rgba(154, 89, 156, .08);
color: #600165;
outline: none;
}
body.woocommerce-cart .cs-cart-button[disabled],
body.woocommerce-cart .cs-cart-button:disabled,
body.woocommerce-cart button[name="update_cart"]:disabled {
opacity: .45;
cursor: not-allowed;
}
body.woocommerce-cart .cs-cart-totals {
grid-column: 2;
grid-row: 1;
align-self: start;
width: 100%;
min-width: 0;
padding: 22px;
border: 1px solid rgba(154, 89, 156, .16);
border-radius: 22px;
background: #fff;
box-shadow: none;
}
@media (min-width: 1181px) {
body.woocommerce-cart .cs-cart-totals {
position: sticky;
top: 112px;
}
body.woocommerce-cart.admin-bar .cs-cart-totals {
top: 200px;
}
}
body.woocommerce-cart .cs-cart-totals__header {
margin-bottom: 16px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(22, 0, 24, .08);
}
body.woocommerce-cart .cs-cart-totals__header h2 {
margin: 0;
color: #160018;
font-size: 26px;
font-weight: 950;
letter-spacing: 0;
line-height: 1.12;
}
body.woocommerce-cart .cs-cart-totals__description {
margin: 8px 0 0;
color: rgba(0, 0, 0, .56);
font-size: 13px;
font-weight: 650;
line-height: 1.45;
}
body.woocommerce-cart .cs-cart-totals table.shop_table {
display: block;
width: 100%;
margin: 0;
border: 0;
border-collapse: separate;
background: transparent;
}
body.woocommerce-cart .cs-cart-totals table.shop_table tbody {
display: grid;
gap: 0;
}
body.woocommerce-cart .cs-cart-totals table.shop_table tr {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 11px 11px;
border-bottom: 1px solid rgba(22, 0, 24, .08);
}
body.woocommerce-cart .cs-cart-totals table.shop_table th,
body.woocommerce-cart .cs-cart-totals table.shop_table td {
width: auto;
min-width: 0;
display: block;
padding: 0;
border: 0;
background: transparent;
color: rgba(0, 0, 0, .64);
font-size: 14px;
font-weight: 750;
line-height: 1.4;
text-align: right;
}
body.woocommerce-cart .cs-cart-totals table.shop_table th {
max-width: 62%;
text-align: left;
}
body.woocommerce-cart .cs-cart-totals table.shop_table td::before {
display: none;
}
body.woocommerce-cart .cs-cart-totals table.shop_table td,
body.woocommerce-cart .cs-cart-totals table.shop_table td .amount,
body.woocommerce-cart .cs-cart-totals table.shop_table td strong {
color: #160018;
font-weight: 900;
}
body.woocommerce-cart .cs-cart-totals table.shop_table tr.cs-cart-summary-section-title {
display: block;
padding: 16px 0 5px;
border-bottom: 0;
}
body.woocommerce-cart .cs-cart-totals table.shop_table tr.cs-cart-summary-section-title th {
display: block;
max-width: none;
padding: 0;
color: #160018;
font-size: 16px;
font-weight: 950;
line-height: 1.2;
}
body.woocommerce-cart .cs-cart-totals .cart-discount,
body.woocommerce-cart .cs-cart-totals .cs-cart-total-row--promo {
margin: 6px 0;
padding: 10px 12px;
border: 1px solid rgba(34, 139, 87, .18);
border-radius: 14px;
background: rgba(34, 139, 87, .06);
}
body.woocommerce-cart .cs-cart-totals .cart-discount th,
body.woocommerce-cart .cs-cart-totals .cart-discount td,
body.woocommerce-cart .cs-cart-totals .cart-discount .amount,
body.woocommerce-cart .cs-cart-totals .cs-cart-total-row--promo th,
body.woocommerce-cart .cs-cart-totals .cs-cart-total-row--promo td,
body.woocommerce-cart .cs-cart-totals .cs-cart-total-row--promo .amount {
color: #166534;
}
body.woocommerce-cart .cs-cart-totals .cart-discount td {
display: block;
justify-items: initial;
}
body.woocommerce-cart .cs-cart-summary-value {
display: block;
color: #166534;
font-weight: 900;
line-height: 1.2;
}
body.woocommerce-cart .cs-cart-summary-coupon-label {
display: grid;
gap: 5px;
}
body.woocommerce-cart .cs-cart-summary-remove-coupon {
display: inline-flex;
align-items: center;
justify-self: start;
color: rgba(96, 1, 101, .76);
font-size: 11.5px;
font-weight: 850;
line-height: 1.2;
text-decoration: underline;
text-underline-offset: 3px;
}
body.woocommerce-cart .cs-cart-summary-remove-coupon:hover,
body.woocommerce-cart .cs-cart-summary-remove-coupon:focus-visible {
color: #600165;
outline: none;
}
body.woocommerce-cart .cs-cart-totals .cs-cart-shipping-summary {
align-items: flex-start;
}
body.woocommerce-cart .cs-cart-totals .cs-cart-shipping-summary > td {
display: grid;
justify-items: end;
gap: 8px;
text-align: right;
}
body.woocommerce-cart .cs-cart-totals .woocommerce-shipping-methods {
display: grid;
gap: 8px;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
body.woocommerce-cart .cs-cart-totals .woocommerce-shipping-methods li {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
min-width: 0;
}
body.woocommerce-cart .cs-cart-totals .woocommerce-shipping-methods input[type="radio"] {
flex: 0 0 auto;
width: 16px;
height: 16px;
margin: 0;
accent-color: #600165;
}
body.woocommerce-cart .cs-cart-totals .woocommerce-shipping-methods label {
min-width: 0;
color: #160018;
font-size: 13px;
font-weight: 850;
line-height: 1.35;
}
body.woocommerce-cart .cs-cart-totals .woocommerce-shipping-methods label .amount {
color: #160018;
font-weight: 950;
}
body.woocommerce-cart .cs-cart-totals .woocommerce-shipping-destination,
body.woocommerce-cart .cs-cart-totals .woocommerce-shipping-contents {
max-width: 240px;
margin: 0;
color: rgba(0, 0, 0, .52);
font-size: 11.5px;
font-weight: 700;
line-height: 1.45;
}
body.woocommerce-cart .cs-cart-totals .woocommerce-shipping-destination strong {
color: rgba(0, 0, 0, .68);
font-weight: 850;
}
body.woocommerce-cart .cs-cart-totals .shipping-calculator-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
margin: 0;
padding: 7px 12px;
border: 1px solid rgba(96, 1, 101, .18);
border-radius: 999px;
background: rgba(154, 89, 156, .06);
color: #600165;
font-size: 12px;
font-weight: 900;
line-height: 1.2;
text-decoration: none;
}
body.woocommerce-cart .cs-cart-totals .shipping-calculator-button:hover,
body.woocommerce-cart .cs-cart-totals .shipping-calculator-button:focus-visible {
border-color: rgba(96, 1, 101, .32);
background: rgba(154, 89, 156, .1);
color: #600165;
outline: none;
}
body.woocommerce-cart .cs-cart-shipping-calculator {
width: min(100%, 280px);
display: grid;
justify-items: end;
gap: 10px;
}
body.woocommerce-cart .cs-cart-shipping-calculator .shipping-calculator-form {
width: 100%;
display: grid;
gap: 10px;
margin-top: 2px;
padding: 12px;
border: 1px solid rgba(154, 89, 156, .14);
border-radius: 16px;
background: rgba(250, 247, 250, .62);
text-align: left;
}
body.woocommerce-cart .cs-cart-shipping-calculator .form-row,
body.woocommerce-cart .cs-cart-shipping-calculator .shipping-calculator-form > p {
width: 100%;
margin: 0;
padding: 0;
}
body.woocommerce-cart .cs-cart-shipping-calculator label {
display: block;
margin: 0 0 5px;
color: rgba(0, 0, 0, .58);
font-size: 11px;
font-weight: 850;
line-height: 1.2;
}
body.woocommerce-cart .cs-cart-shipping-calculator input.input-text,
body.woocommerce-cart .cs-cart-shipping-calculator select {
width: 100%;
min-height: 40px;
padding: 0 12px;
border: 1px solid rgba(154, 89, 156, .22);
border-radius: 12px;
background: #fff;
color: #160018;
font-size: 13px;
font-weight: 750;
line-height: 1.2;
outline: none;
}
body.woocommerce-cart .cs-cart-shipping-calculator select {
appearance: none;
padding-right: 34px;
background-image: linear-gradient(45deg, transparent 50%, #600165 50%), linear-gradient(135deg, #600165 50%, transparent 50%);
background-position: calc(100% - 18px) 17px, calc(100% - 12px) 17px;
background-repeat: no-repeat;
background-size: 6px 6px, 6px 6px;
}
body.woocommerce-cart .cs-cart-shipping-calculator input.input-text:focus,
body.woocommerce-cart .cs-cart-shipping-calculator select:focus {
border-color: rgba(96, 1, 101, .58);
box-shadow: 0 0 0 3px rgba(154, 89, 156, .12);
}
body.woocommerce-cart .cs-cart-shipping-calculator .select2-container,
body.woocommerce-cart .cs-cart-shipping-calculator .select2-container--default {
width: 100% !important;
}
body.woocommerce-cart .cs-cart-shipping-calculator .select2-container .select2-selection--single {
min-height: 40px;
display: flex;
align-items: center;
border: 1px solid rgba(154, 89, 156, .22);
border-radius: 12px;
background: #fff;
}
body.woocommerce-cart .cs-cart-shipping-calculator .select2-selection__rendered {
width: 100%;
padding: 0 34px 0 12px;
color: #160018;
font-size: 13px;
font-weight: 750;
line-height: 40px;
text-align: left;
}
body.woocommerce-cart .cs-cart-shipping-calculator .select2-selection__arrow {
height: 40px;
right: 10px;
}
body.woocommerce-cart .cs-cart-shipping-calculator .select2-container--focus .select2-selection--single,
body.woocommerce-cart .cs-cart-shipping-calculator .select2-container--open .select2-selection--single {
border-color: rgba(96, 1, 101, .58);
box-shadow: 0 0 0 3px rgba(154, 89, 156, .12);
}
body.woocommerce-cart .select2-container--open .select2-dropdown {
border: 1px solid rgba(154, 89, 156, .22);
border-radius: 12px;
background: #fff;
box-shadow: 0 18px 46px rgba(22, 0, 24, .13);
overflow: hidden;
}
body.woocommerce-cart .select2-container--default .select2-search--dropdown {
padding: 10px;
}
body.woocommerce-cart .select2-container--default .select2-search--dropdown .select2-search__field {
min-height: 38px;
border: 1px solid rgba(154, 89, 156, .22);
border-radius: 10px;
color: #160018;
font-size: 13px;
font-weight: 700;
outline: none;
}
body.woocommerce-cart .select2-container--default .select2-results__option {
padding: 9px 12px;
color: rgba(0, 0, 0, .72);
font-size: 13px;
font-weight: 700;
}
body.woocommerce-cart .select2-container--default .select2-results__option--highlighted[aria-selected],
body.woocommerce-cart .select2-container--default .select2-results__option--highlighted[data-selected] {
background: rgba(154, 89, 156, .1);
color: #600165;
}
body.woocommerce-cart .select2-container--default .select2-results__option[aria-selected="true"],
body.woocommerce-cart .select2-container--default .select2-results__option[data-selected="true"] {
background: rgba(154, 89, 156, .14);
color: #600165;
}
body.woocommerce-cart .cs-cart-shipping-calculator__submit {
width: 100%;
min-height: 40px;
padding: 10px 14px;
border: 1px solid #600165;
border-radius: 12px;
background: #600165;
color: #fff;
font-size: 13px;
font-weight: 900;
line-height: 1.2;
text-align: center;
}
body.woocommerce-cart .cs-cart-shipping-calculator__submit:hover,
body.woocommerce-cart .cs-cart-shipping-calculator__submit:focus-visible {
border-color: #47014b;
background: #47014b;
color: #fff;
outline: none;
}
body.woocommerce-cart .cs-cart-totals .order-total {
align-items: center;
margin-top: 8px;
padding: 16px 0 0;
border-bottom: 0;
}
body.woocommerce-cart .cs-cart-totals .order-total th {
color: #160018;
font-size: 16px;
font-weight: 950;
}
body.woocommerce-cart .cs-cart-total-label {
display: inline-flex;
align-items: baseline;
gap: 7px;
min-width: 0;
}
body.woocommerce-cart .cs-cart-total-label__main {
color: #160018;
font-size: 16px;
font-weight: 950;
line-height: 1.2;
}
body.woocommerce-cart .cs-cart-total-label__tax {
color: rgba(0, 0, 0, .48);
font-size: 11.5px;
font-weight: 750;
line-height: 1.2;
white-space: nowrap;
}
body.woocommerce-cart .cs-cart-totals .order-total td,
body.woocommerce-cart .cs-cart-totals .order-total .amount {
color: #160018;
font-size: 24px;
font-weight: 950;
line-height: 1.1;
}
body.woocommerce-cart .cs-cart-totals__checkout {
display: grid;
gap: 10px;
margin-top: 18px;
padding-top: 17px;
border-top: 1px solid rgba(22, 0, 24, .08);
}
body.woocommerce-cart .cs-cart-checkout-button {
width: 100%;
min-height: 48px;
padding: 12px 18px;
border-radius: 14px;
font-size: 14px;
font-weight: 900;
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.cs-cart-checkout-button {
font-size: 14px;
line-height: 1.2;
}
body.woocommerce-cart .cs-cart-totals__continue {
width: 100%;
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(96, 1, 101, .18);
border-radius: 13px;
background: #fff;
color: rgba(96, 1, 101, .82);
font-size: 13px;
font-weight: 900;
text-align: center;
text-decoration: none;
}
body.woocommerce-cart .cs-cart-totals__continue:hover,
body.woocommerce-cart .cs-cart-totals__continue:focus-visible {
border-color: rgba(96, 1, 101, .34);
background: rgba(154, 89, 156, .08);
color: #600165;
outline: none;
}
body.woocommerce-cart .cs-cart-payments {
display: grid;
gap: 10px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(22, 0, 24, .08);
}
body.woocommerce-cart .cs-cart-payments__title {
margin: 0;
color: rgba(0, 0, 0, .58);
font-size: 12px;
font-weight: 850;
line-height: 1.2;
}
body.woocommerce-cart .cs-cart-payments__list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
body.woocommerce-cart .cs-cart-payments__list li {
min-width: 62px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 9px;
border: 1px solid rgba(154, 89, 156, .14);
border-radius: 11px;
background: rgba(250, 247, 250, .55);
}
body.woocommerce-cart .cs-cart-payments__list img {
display: block;
width: auto;
max-width: 48px;
max-height: 18px;
}
body.woocommerce-cart .cross-sells {
grid-column: 1 / -1;
grid-row: 2;
margin-top: 10px;
}
body.woocommerce-cart .cross-sells > h2 {
margin: 0 0 16px;
color: #160018;
font-size: 22px;
font-weight: 950;
letter-spacing: 0;
}
body.woocommerce-cart .cs-cart-empty {
display: grid;
place-items: center;
margin: clamp(24px, 4vw, 40px) 0 clamp(62px, 8vw, 96px);
}
body.woocommerce-cart .cs-cart-empty__native {
display: none;
}
body.woocommerce-cart .cs-cart-empty__card {
width: min(100%, 560px);
display: grid;
justify-items: center;
padding: clamp(28px, 5vw, 44px);
border: 1px solid rgba(154, 89, 156, .16);
border-radius: 22px;
background: #fff;
text-align: center;
}
body.woocommerce-cart .cs-cart-empty__icon {
width: 66px;
height: 66px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
border: 1px solid rgba(154, 89, 156, .22);
border-radius: 50%;
background: rgba(154, 89, 156, .08);
color: #600165;
}
body.woocommerce-cart .cs-cart-empty__card .cs-cart-button {
min-width: 160px;
margin-top: 20px;
}
@media (max-width: 1180px) {
body.woocommerce-cart .woocommerce {
max-width: 980px;
}
body.woocommerce-cart .cs-cart-page__layout {
grid-template-columns: minmax(0, 1fr);
gap: 26px;
}
body.woocommerce-cart .cs-cart-page__collaterals {
display: block;
}
body.woocommerce-cart .cs-cart-totals {
grid-column: auto;
grid-row: auto;
position: static;
max-width: 100%;
}
body.woocommerce-cart .cross-sells {
grid-column: auto;
grid-row: auto;
}
}
@media (max-width: 920px) {
body.woocommerce-cart .cs-cart-item {
grid-template-columns: 88px minmax(0, 1fr) auto;
grid-template-areas:
"media content summary"
"media pricing summary"
"media controls summary";
gap: 10px 14px;
padding: 16px;
}
body.woocommerce-cart .cs-cart-item__media {
grid-area: media;
width: 88px;
height: 88px;
}
body.woocommerce-cart .cs-cart-item__content {
grid-area: content;
}
body.woocommerce-cart .cs-cart-item__pricing {
grid-area: pricing;
justify-items: start;
text-align: left;
}
body.woocommerce-cart .cs-cart-item__controls {
grid-area: controls;
}
body.woocommerce-cart .cs-cart-item__quantity {
display: flex;
align-items: center;
justify-items: start;
gap: 10px;
text-align: left;
}
body.woocommerce-cart .cs-cart-item__summary {
grid-area: summary;
align-self: stretch;
justify-content: space-between;
}
}
@media (max-width: 700px) {
body.woocommerce-cart .woocommerce {
padding-right: 14px;
padding-left: 14px;
}
body.woocommerce-cart .cs-cart-promo-note,
body.woocommerce-checkout .cs-cart-promo-note {
grid-template-columns: 40px minmax(0, 1fr);
gap: 11px;
margin: 14px 0 16px;
padding: 12px;
border-radius: 16px;
}
body.woocommerce-cart .cs-cart-promo-note__icon,
body.woocommerce-checkout .cs-cart-promo-note__icon {
width: 40px;
height: 40px;
}
body.woocommerce-cart .cs-cart-promo-note__icon svg,
body.woocommerce-checkout .cs-cart-promo-note__icon svg {
width: 23px;
}
body.woocommerce-cart .cs-cart-promo-note__title,
body.woocommerce-checkout .cs-cart-promo-note__title {
font-size: 13.5px;
}
body.woocommerce-cart .cs-cart-promo-note__saving,
body.woocommerce-checkout .cs-cart-promo-note__saving {
font-size: 12.5px;
}
body.woocommerce-cart .cs-cart-page {
margin-top: 16px;
}
body.woocommerce-cart .cs-cart-hero h1 {
font-size: 30px;
}
body.woocommerce-cart .cs-cart-items {
gap: 0;
overflow: hidden;
border: 1px solid rgba(154, 89, 156, .14);
border-radius: 18px;
background: #fff;
}
body.woocommerce-cart .cs-cart-item {
grid-template-columns: 82px minmax(0, 1fr) minmax(78px, auto);
grid-template-areas:
"media content summary"
"media pricing summary"
"media controls summary";
gap: 8px 12px;
align-items: start;
padding: 15px 14px;
border: 0;
border-bottom: 1px solid rgba(22, 0, 24, .08);
border-radius: 0;
}
body.woocommerce-cart .cs-cart-item:last-of-type {
border-bottom: 0;
}
body.woocommerce-cart .cs-cart-item__media {
width: 82px;
height: 82px;
border-radius: 14px;
}
body.woocommerce-cart .cs-cart-item__content {
align-self: start;
}
body.woocommerce-cart .cs-cart-item__title {
font-size: 15px;
line-height: 1.22;
}
body.woocommerce-cart .cs-cart-item dl.variation {
font-size: 11.5px;
}
body.woocommerce-cart .cs-cart-item__summary {
display: flex;
flex-direction: column;
align-items: flex-end;
align-self: stretch;
gap: 8px;
min-height: 100%;
padding-top: 0;
border-top: 0;
text-align: right;
}
body.woocommerce-cart .cs-cart-item__subtotal {
justify-items: end;
}
body.woocommerce-cart .cs-cart-item__pricing {
margin-top: 1px;
}
body.woocommerce-cart .cs-cart-item__price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 6px;
}
body.woocommerce-cart .cs-cart-item__controls {
padding-top: 7px;
}
body.woocommerce-cart .cs-cart-item__quantity {
display: grid;
justify-items: start;
gap: 6px;
text-align: left;
}
body.woocommerce-cart .cs-cart-item .quantity .qty {
width: 74px;
height: 38px;
border-radius: 11px;
}
body.woocommerce-cart .cs-cart-item__remove {
margin-top: auto;
}
body.woocommerce-cart .cs-cart-item__remove > a.remove {
font-size: 11.5px;
}
body.woocommerce-cart .cs-cart-coupon__row,
body.woocommerce-cart .cs-cart-actions__footer {
grid-template-columns: 1fr;
}
body.woocommerce-cart .cs-cart-button,
body.woocommerce-cart .cs-cart-checkout-button {
width: 100%;
}
body.woocommerce-cart .cs-cart-totals {
max-width: none;
padding: 20px;
border-radius: 18px;
}
}
@media (max-width: 440px) {
body.woocommerce-cart .cs-cart-item {
grid-template-columns: 72px minmax(0, 1fr) minmax(66px, auto);
gap: 8px 10px;
padding: 14px 12px;
}
body.woocommerce-cart .cs-cart-item__media {
width: 72px;
height: 72px;
}
body.woocommerce-cart .cs-cart-item__title {
font-size: 14px;
}
body.woocommerce-cart .cs-cart-item__price span,
body.woocommerce-cart .cs-cart-item__label,
body.woocommerce-cart .cs-cart-item__subtotal span {
font-size: 10.5px;
}
body.woocommerce-cart .cs-cart-item__price strong,
body.woocommerce-cart .cs-cart-item__price .amount {
font-size: 12px;
}
body.woocommerce-cart .cs-cart-item__subtotal strong,
body.woocommerce-cart .cs-cart-item__subtotal .amount {
font-size: 15px;
}
body.woocommerce-cart .cs-cart-item__summary {
align-items: flex-end;
}
body.woocommerce-cart .cs-cart-item__remove > a.remove {
white-space: nowrap;
}
body.woocommerce-cart .cs-cart-item .quantity .qty {
width: 68px;
}
body.woocommerce-cart .cs-cart-totals__header h2 {
font-size: 23px;
}
body.woocommerce-cart .cs-cart-totals table.shop_table tr {
gap: 10px;
}
body.woocommerce-cart .cs-cart-totals table.shop_table th {
max-width: 58%;
}
body.woocommerce-cart .cs-cart-totals .order-total td,
body.woocommerce-cart .cs-cart-totals .order-total .amount {
font-size: 21px;
}
}
/* =====================================================
Checkout Page
===================================================== */
body.woocommerce-checkout .page-title,
body.woocommerce-checkout .entry-title {
display: none;
}
body.woocommerce-checkout .page-content {
max-width: none;
}
body.woocommerce-checkout .woocommerce,
body.woocommerce-checkout .cs-checkout-page,
body.woocommerce-checkout .cs-checkout-page * {
box-sizing: border-box;
}
body.woocommerce-checkout .woocommerce {
width: 100%;
max-width: var(--container, 1440px);
margin: 0 auto;
padding-right: var(--pad, 16px);
padding-left: var(--pad, 16px);
}
body.woocommerce-checkout .woocommerce a {
color: inherit;
}
body.woocommerce-checkout .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-checkout form.checkout_coupon,
body.woocommerce-checkout form.login {
max-width: var(--container, 1440px);
margin-right: auto;
margin-left: auto;
}
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
box-sizing: border-box;
display: grid;
grid-template-columns: 20px minmax(0, 1fr) auto;
align-items: center;
column-gap: 10px;
row-gap: 0;
margin: 10px 0 0;
min-height: 52px;
padding: 4px 12px 4px 11px;
border: 1px solid rgba(22, 0, 24, .10);
border-top: 1px solid rgba(22, 0, 24, .10);
border-radius: 12px;
background: #fff;
color: rgba(22, 0, 24, .72);
font-size: 13px;
font-weight: 650;
line-height: 1.35;
}
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
content: "";
position: static;
top: auto;
left: auto;
width: 20px;
height: 20px;
transform: none;
border-radius: 0;
background-color: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 14px;
opacity: .72;
}
body.woocommerce-checkout .woocommerce-form-login-toggle .showlogin,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon {
display: inline-flex;
align-items: center;
justify-self: end;
min-height: 44px;
min-width: 0;
padding: 0 3px;
border: 0;
border-radius: 0;
background: transparent;
color: #600165;
font-size: 12.5px;
font-weight: 750;
line-height: 1.25;
text-align: center;
text-decoration-line: underline;
text-decoration-color: rgba(96, 1, 101, .42);
text-decoration-thickness: 1px;
text-underline-offset: .28em;
touch-action: manipulation;
transition: color .16s ease, text-decoration-color .16s ease, text-decoration-thickness .16s ease;
}
body.woocommerce-checkout .woocommerce-form-login-toggle .showlogin:hover,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon:hover {
color: #47014b;
text-decoration-color: currentColor;
text-decoration-thickness: 2px;
}
body.woocommerce-checkout .woocommerce-form-login-toggle .showlogin:focus-visible,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon:focus-visible {
color: #47014b;
outline: 2px solid rgba(96, 1, 101, .74);
outline-offset: 4px;
text-decoration-color: currentColor;
}
body.woocommerce-checkout form.checkout_coupon,
body.woocommerce-checkout form.login {
margin-top: 8px;
margin-bottom: 16px;
padding: 14px;
border: 1px solid rgba(22, 0, 24, .10);
border-radius: 12px;
background: #fff;
}
body.woocommerce-checkout form.checkout_coupon {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: end;
}
body.woocommerce-checkout form.checkout_coupon p {
margin: 0;
}
body.woocommerce-checkout form.checkout_coupon p:first-child {
grid-column: 1 / -1;
color: rgba(0, 0, 0, .58);
font-size: 13px;
font-weight: 650;
line-height: 1.45;
}
body.woocommerce-checkout form.checkout_coupon .form-row-first,
body.woocommerce-checkout form.checkout_coupon .form-row-last {
width: auto;
float: none;
}
body.woocommerce-checkout form.checkout_coupon input.input-text,
body.woocommerce-checkout form.checkout_coupon input[type="text"],
body.woocommerce-checkout form.checkout_coupon #coupon_code,
body.woocommerce-checkout .checkout_coupon input.input-text,
body.woocommerce-checkout .checkout_coupon input[type="text"],
body.woocommerce-checkout .woocommerce-form-coupon input.input-text,
body.woocommerce-checkout .woocommerce-form-coupon input[type="text"],
body.woocommerce-checkout #coupon_code {
box-sizing: border-box;
width: 100%;
min-width: 0;
min-height: 50px;
margin: 0;
padding: 0 16px;
border: 1px solid rgba(154, 89, 156, .24) !important;
border-radius: 14px !important;
background: #fff !important;
color: #160018;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.35;
box-shadow: none !important;
outline: 0;
-webkit-appearance: none;
appearance: none;
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
body.woocommerce-checkout form.checkout_coupon input.input-text:hover,
body.woocommerce-checkout form.checkout_coupon input[type="text"]:hover,
body.woocommerce-checkout form.checkout_coupon #coupon_code:hover,
body.woocommerce-checkout .checkout_coupon input.input-text:hover,
body.woocommerce-checkout .checkout_coupon input[type="text"]:hover,
body.woocommerce-checkout .woocommerce-form-coupon input.input-text:hover,
body.woocommerce-checkout .woocommerce-form-coupon input[type="text"]:hover,
body.woocommerce-checkout #coupon_code:hover {
border-color: rgba(154, 89, 156, .42) !important;
background: #fff !important;
}
body.woocommerce-checkout form.checkout_coupon input.input-text:focus,
body.woocommerce-checkout form.checkout_coupon input[type="text"]:focus,
body.woocommerce-checkout form.checkout_coupon #coupon_code:focus,
body.woocommerce-checkout .checkout_coupon input.input-text:focus,
body.woocommerce-checkout .checkout_coupon input[type="text"]:focus,
body.woocommerce-checkout .woocommerce-form-coupon input.input-text:focus,
body.woocommerce-checkout .woocommerce-form-coupon input[type="text"]:focus,
body.woocommerce-checkout #coupon_code:focus {
border-color: rgba(96, 1, 101, .62) !important;
background: #fff !important;
box-shadow: 0 0 0 4px rgba(154, 89, 156, .12) !important;
}
body.woocommerce-checkout form.checkout_coupon input.input-text::placeholder,
body.woocommerce-checkout form.checkout_coupon input[type="text"]::placeholder,
body.woocommerce-checkout form.checkout_coupon #coupon_code::placeholder,
body.woocommerce-checkout .checkout_coupon input.input-text::placeholder,
body.woocommerce-checkout .checkout_coupon input[type="text"]::placeholder,
body.woocommerce-checkout .woocommerce-form-coupon input.input-text::placeholder,
body.woocommerce-checkout .woocommerce-form-coupon input[type="text"]::placeholder,
body.woocommerce-checkout #coupon_code::placeholder {
color: rgba(22, 0, 24, .34);
opacity: 1;
}
body.woocommerce-checkout form.checkout_coupon button,
body.woocommerce-checkout form.login button {
min-height: 44px;
border: 1px solid #600165;
border-radius: 13px;
background: #600165;
color: #fff;
font-size: 13px;
font-weight: 900;
line-height: 1.2;
}
body.woocommerce-checkout form.checkout_coupon button:hover,
body.woocommerce-checkout form.checkout_coupon button:focus-visible,
body.woocommerce-checkout form.login button:hover,
body.woocommerce-checkout form.login button:focus-visible {
border-color: #47014b;
background: #47014b;
color: #fff;
outline: none;
}
body.woocommerce-checkout .cs-checkout-page {
margin: clamp(24px, 3vw, 42px) 0 clamp(64px, 8vw, 104px);
}
body.woocommerce-checkout .cs-checkout-hero {
max-width: 760px;
margin-bottom: clamp(20px, 2.4vw, 30px);
padding-bottom: 18px;
border-bottom: 1px solid rgba(22, 0, 24, .08);
}
body.woocommerce-checkout .cs-checkout-hero__eyebrow,
body.woocommerce-checkout .cs-checkout-panel__eyebrow,
body.woocommerce-checkout .cs-checkout-review-card__eyebrow {
margin: 0 0 6px;
color: rgba(96, 1, 101, .76);
font-size: 11px;
font-weight: 900;
letter-spacing: 0;
line-height: 1.2;
text-transform: uppercase;
}
body.woocommerce-checkout .cs-checkout-hero h1 {
margin: 0;
color: #160018;
font-size: clamp(32px, 3.2vw, 44px);
font-weight: 950;
letter-spacing: 0;
line-height: 1.06;
}
body.woocommerce-checkout .cs-checkout-hero p:not(.cs-checkout-hero__eyebrow) {
max-width: 620px;
margin: 9px 0 0;
color: rgba(0, 0, 0, .58);
font-size: 14px;
font-weight: 650;
line-height: 1.5;
}
body.woocommerce-checkout .cs-checkout-form {
margin: 0;
}
body.woocommerce-checkout .cs-checkout-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(380px, 420px);
gap: clamp(30px, 3.5vw, 52px);
align-items: start;
}
body.woocommerce-checkout .cs-checkout-main {
display: grid;
grid-column: 1;
grid-row: 1;
gap: 20px;
min-width: 0;
}
body.woocommerce-checkout .cs-checkout-order-review {
display: contents;
}
body.woocommerce-checkout .cs-checkout-panel,
body.woocommerce-checkout .cs-checkout-review-card {
min-width: 0;
border: 1px solid rgba(154, 89, 156, .16);
border-radius: 22px;
background: #fff;
box-shadow: none;
}
body.woocommerce-checkout .cs-checkout-panel {
padding: clamp(20px, 2.2vw, 28px);
}
body.woocommerce-checkout .cs-checkout-panel--details {
grid-column: 1;
}
body.woocommerce-checkout .cs-checkout-payment {
grid-column: 1;
grid-row: 2;
}
body.woocommerce-checkout .cs-checkout-panel__header {
margin-bottom: 18px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(22, 0, 24, .08);
}
body.woocommerce-checkout .cs-checkout-review-card__header {
display: block;
}
body.woocommerce-checkout .cs-checkout-panel__header h2,
body.woocommerce-checkout .cs-checkout-review-card__header h2 {
margin: 0;
color: #160018;
font-size: clamp(22px, 2vw, 28px);
font-weight: 950;
letter-spacing: 0;
line-height: 1.12;
}
body.woocommerce-checkout .cs-checkout-panel__header p:not(.cs-checkout-panel__eyebrow) {
margin: 7px 0 0;
color: rgba(0, 0, 0, .56);
font-size: 13px;
font-weight: 650;
line-height: 1.45;
}
body.woocommerce-checkout .cs-checkout-review-card__header p:not(.cs-checkout-review-card__eyebrow) {
margin: 7px 0 0;
color: rgba(0, 0, 0, .52);
font-size: 12.5px;
font-weight: 750;
line-height: 1.35;
}
body.woocommerce-checkout .cs-checkout-customer-details {
display: grid;
gap: 18px;
}
body.woocommerce-checkout .cs-checkout-billing,
body.woocommerce-checkout .cs-checkout-shipping {
min-width: 0;
}
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3,
body.woocommerce-checkout #ship-to-different-address {
margin: 0 0 14px;
color: #160018;
font-size: 17px;
font-weight: 950;
letter-spacing: 0;
line-height: 1.2;
}
body.woocommerce-checkout #ship-to-different-address label {
display: inline-flex;
align-items: center;
gap: 9px;
margin: 0;
cursor: pointer;
}
body.woocommerce-checkout #ship-to-different-address input {
margin: 0;
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 16px;
}
body.woocommerce-checkout #billing_address_1_field,
body.woocommerce-checkout #billing_address_2_field,
body.woocommerce-checkout #billing_city_field,
body.woocommerce-checkout #billing_postcode_field,
body.woocommerce-checkout #billing_phone_field,
body.woocommerce-checkout #billing_email_field,
body.woocommerce-checkout #shipping_address_1_field,
body.woocommerce-checkout #shipping_address_2_field,
body.woocommerce-checkout #shipping_city_field,
body.woocommerce-checkout #shipping_postcode_field,
body.woocommerce-checkout #order_comments_field {
grid-column: 1 / -1;
}
body.woocommerce-checkout .form-row {
width: auto;
float: none;
margin: 0;
padding: 0;
}
body.woocommerce-checkout .form-row label {
display: block;
margin: 0 0 7px;
color: rgba(22, 0, 24, .72);
font-size: 12px;
font-weight: 850;
line-height: 1.25;
}
body.woocommerce-checkout .form-row label .required {
color: #b42318;
text-decoration: none;
}
body.woocommerce-checkout .woocommerce-input-wrapper {
display: block;
width: 100%;
}
body.woocommerce-checkout input.input-text,
body.woocommerce-checkout textarea.input-text,
body.woocommerce-checkout select,
body.woocommerce-checkout .select2-container .select2-selection--single {
width: 100%;
min-height: 48px;
border: 1px solid rgba(154, 89, 156, .2);
border-radius: 14px;
background: rgba(255, 255, 255, .98);
color: #160018;
font-size: 14px;
font-weight: 700;
outline: none;
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
body.woocommerce-checkout input.input-text:hover,
body.woocommerce-checkout textarea.input-text:hover,
body.woocommerce-checkout select:hover,
body.woocommerce-checkout .select2-container .select2-selection--single:hover {
border-color: rgba(154, 89, 156, .34);
background: #fff;
}
body.woocommerce-checkout input.input-text,
body.woocommerce-checkout textarea.input-text,
body.woocommerce-checkout select {
padding: 0 15px;
}
body.woocommerce-checkout textarea.input-text {
min-height: 112px;
padding-top: 13px;
resize: vertical;
}
body.woocommerce-checkout input.input-text::placeholder,
body.woocommerce-checkout textarea.input-text::placeholder {
color: rgba(22, 0, 24, .34);
opacity: 1;
}
body.woocommerce-checkout input.input-text:-webkit-autofill,
body.woocommerce-checkout textarea.input-text:-webkit-autofill {
-webkit-text-fill-color: #160018;
box-shadow: 0 0 0 1000px #fff inset;
}
body.woocommerce-checkout input.input-text:focus,
body.woocommerce-checkout textarea.input-text:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout .select2-container--open .select2-selection--single,
body.woocommerce-checkout .select2-container--focus .select2-selection--single {
border-color: rgba(96, 1, 101, .58);
background: #fff;
box-shadow: 0 0 0 4px rgba(154, 89, 156, .1);
}
body.woocommerce-checkout .select2-container .select2-selection--single {
display: flex;
align-items: center;
height: 48px;
padding: 0 42px 0 15px;
}
body.woocommerce-checkout input.input-text,
body.woocommerce-checkout textarea.input-text {
box-sizing: border-box;
min-height: 50px;
border-color: rgba(154, 89, 156, .22);
border-radius: 15px;
background: #fff;
color: #160018;
font-size: 14px;
font-weight: 750;
line-height: 1.35;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
-webkit-appearance: none;
appearance: none;
}
body.woocommerce-checkout input.input-text {
padding: 0 16px;
}
body.woocommerce-checkout textarea.input-text {
min-height: 118px;
padding: 14px 16px;
}
body.woocommerce-checkout input.input-text:hover,
body.woocommerce-checkout textarea.input-text:hover {
border-color: rgba(154, 89, 156, .38);
background: #fff;
}
body.woocommerce-checkout input.input-text:focus,
body.woocommerce-checkout textarea.input-text:focus {
border-color: rgba(96, 1, 101, .58);
background: #fff;
box-shadow: 0 0 0 4px rgba(154, 89, 156, .11);
}
body.woocommerce-checkout input.input-text:disabled,
body.woocommerce-checkout textarea.input-text:disabled,
body.woocommerce-checkout input.input-text[readonly],
body.woocommerce-checkout textarea.input-text[readonly] {
border-color: rgba(154, 89, 156, .14);
background: rgba(250, 247, 250, .68);
color: rgba(22, 0, 24, .56);
cursor: not-allowed;
}
body.woocommerce-checkout .select2-container .select2-selection__rendered {
padding: 0;
color: #160018;
line-height: 1.2;
}
body.woocommerce-checkout .select2-container .select2-selection__arrow {
top: 50%;
right: 13px;
width: 20px;
height: 20px;
transform: translateY(-50%);
}
body.woocommerce-checkout .select2-container .select2-selection__arrow b {
width: 9px;
height: 9px;
margin: -6px 0 0 -5px;
border: 0;
border-right: 2px solid rgba(96, 1, 101, .72);
border-bottom: 2px solid rgba(96, 1, 101, .72);
transform: rotate(45deg);
}
body.woocommerce-checkout .select2-container--open .select2-selection__arrow b {
margin-top: -2px;
transform: rotate(225deg);
}
body.woocommerce-checkout .woocommerce form .form-row .select2-container {
width: 100% !important;
}
body.woocommerce-checkout .select2-dropdown {
overflow: hidden;
border: 1px solid rgba(154, 89, 156, .22);
border-radius: 14px;
box-shadow: 0 18px 44px rgba(22, 0, 24, .12);
}
body.woocommerce-checkout .select2-dropdown--above {
border-bottom-right-radius: 14px;
border-bottom-left-radius: 14px;
}
body.woocommerce-checkout .select2-dropdown--below {
border-top-right-radius: 14px;
border-top-left-radius: 14px;
}
body.woocommerce-checkout .select2-search--dropdown {
padding: 10px;
}
body.woocommerce-checkout .select2-search--dropdown .select2-search__field {
min-height: 40px;
border: 1px solid rgba(154, 89, 156, .22);
border-radius: 10px;
outline: none;
color: #160018;
font-weight: 700;
}
body.woocommerce-checkout .select2-search--dropdown .select2-search__field:focus {
border-color: rgba(96, 1, 101, .58);
box-shadow: 0 0 0 3px rgba(154, 89, 156, .1);
}
body.woocommerce-checkout .select2-results__option {
padding: 9px 12px;
font-size: 13px;
font-weight: 650;
}
body.woocommerce-checkout .select2-results__option--highlighted[aria-selected],
body.woocommerce-checkout .select2-results__option--highlighted[data-selected] {
background: #600165;
color: #fff;
}
body.woocommerce-checkout .select2-results__option[aria-selected="true"],
body.woocommerce-checkout .select2-results__option[data-selected="true"] {
background: rgba(154, 89, 156, .09);
color: #600165;
}
body.woocommerce-checkout input[type="checkbox"],
body.woocommerce-checkout input[type="radio"] {
accent-color: #600165;
}
/* Checkout account creation: preserve WooCommerce markup, refine only its presentation. */
body.woocommerce-checkout .woocommerce-account-fields {
min-width: 0;
margin: 2px 0 0;
padding: 16px 17px;
border: 1px solid rgba(154, 89, 156, .18);
border-radius: 16px;
background: #fff;
}
body.woocommerce-checkout .woocommerce-account-fields > .form-row.create-account {
width: 100%;
margin: 0;
padding: 0;
}
body.woocommerce-checkout .woocommerce-account-fields .woocommerce-form__label-for-checkbox.checkbox {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
align-items: center;
gap: 11px;
min-height: 44px;
margin: 0;
padding: 4px 0;
color: #160018;
cursor: pointer;
font-size: 14px;
font-weight: 900;
line-height: 1.35;
touch-action: manipulation;
}
body.woocommerce-checkout .woocommerce-account-fields #createaccount {
width: 20px;
height: 20px;
margin: 0;
accent-color: #600165;
cursor: pointer;
}
body.woocommerce-checkout .woocommerce-account-fields #createaccount:focus-visible {
outline: 3px solid rgba(96, 1, 101, .24);
outline-offset: 3px;
}
body.woocommerce-checkout .woocommerce-account-fields .woocommerce-form__label-for-checkbox.checkbox:has(#createaccount:focus-visible) {
outline: 2px solid rgba(96, 1, 101, .22);
outline-offset: 4px;
}
body.woocommerce-checkout .woocommerce-account-fields .woocommerce-form__label-for-checkbox.checkbox:has(#createaccount:checked) {
color: #600165;
}
body.woocommerce-checkout .woocommerce-account-fields > .create-account:not(.form-row) {
min-width: 0;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid rgba(22, 0, 24, .08);
}
body.woocommerce-checkout .woocommerce-account-fields > .create-account:not(.form-row) .form-row {
width: 100%;
margin: 0 0 14px;
padding: 0;
}
body.woocommerce-checkout .woocommerce-account-fields > .create-account:not(.form-row) .form-row:last-of-type {
margin-bottom: 0;
}
body.woocommerce-checkout .cs-checkout-review-card {
grid-column: 2;
grid-row: 1 / span 2;
align-self: start;
width: 100%;
padding: 22px;
}
@media (min-width: 1181px) {
body.woocommerce-checkout .cs-checkout-review-card {
position: sticky;
top: 112px;
}
body.woocommerce-checkout.admin-bar .cs-checkout-review-card {
top: 200px;
}
}
body.woocommerce-checkout .cs-checkout-review-card__header {
margin-bottom: 16px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(22, 0, 24, .08);
}
body.woocommerce-checkout .cs-checkout-review-products {
display: grid;
gap: 0;
max-height: clamp(180px, 20vh, 260px);
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
margin-bottom: 16px;
padding-right: 0;
border: 1px solid rgba(154, 89, 156, .12);
border-radius: 10px;
background: rgba(250, 247, 250, .5);
}
body.woocommerce-checkout .cs-checkout-review-products::-webkit-scrollbar {
display: none;
}
body.woocommerce-checkout .cs-checkout-review-product {
display: grid;
grid-template-columns: 54px minmax(0, 1fr) auto;
gap: 14px;
align-items: start;
padding: 13px 14px;
border-bottom: 1px solid rgba(22, 0, 24, .07);
}
body.woocommerce-checkout .cs-checkout-review-product:last-child {
border-bottom: 0;
}
body.woocommerce-checkout .cs-checkout-review-product__media {
width: 54px;
height: 54px;
overflow: hidden;
border: 1px solid rgba(154, 89, 156, .12);
border-radius: 13px;
background: #fff;
}
body.woocommerce-checkout .cs-checkout-review-product__media a,
body.woocommerce-checkout .cs-checkout-review-product__media img {
display: block;
width: 100%;
height: 100%;
}
body.woocommerce-checkout .cs-checkout-review-product__media img {
object-fit: cover;
}
body.woocommerce-checkout .cs-checkout-review-product__body {
min-width: 0;
}
body.woocommerce-checkout .cs-checkout-review-product__name {
margin: 0;
color: #160018;
font-size: 14px;
font-weight: 900;
letter-spacing: 0;
line-height: 1.28;
overflow-wrap: anywhere;
}
body.woocommerce-checkout .cs-checkout-review-product__quantity {
display: inline-flex;
margin-top: 5px;
color: rgba(0, 0, 0, .52);
font-size: 12px;
font-weight: 800;
line-height: 1.2;
}
body.woocommerce-checkout .cs-checkout-review-product dl.variation {
display: flex;
flex-wrap: wrap;
gap: 3px 7px;
margin: 6px 0 0;
color: rgba(0, 0, 0, .52);
font-size: 11.5px;
line-height: 1.3;
}
body.woocommerce-checkout .cs-checkout-review-product dl.variation dt,
body.woocommerce-checkout .cs-checkout-review-product dl.variation dd,
body.woocommerce-checkout .cs-checkout-review-product dl.variation p {
margin: 0;
}
body.woocommerce-checkout .cs-checkout-review-product__subtotal,
body.woocommerce-checkout .cs-checkout-review-product__subtotal .amount {
color: #160018;
font-size: 14px;
font-weight: 950;
line-height: 1.25;
text-align: right;
white-space: nowrap;
}
body.woocommerce-checkout .cs-checkout-review-totals {
display: grid;
gap: 0;
}
body.woocommerce-checkout .cs-checkout-summary-row,
body.woocommerce-checkout .cs-checkout-summary-shipping .woocommerce-shipping-totals {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 11px 0;
border-bottom: 1px solid rgba(22, 0, 24, .08);
}
body.woocommerce-checkout .cs-checkout-summary-row > span,
body.woocommerce-checkout .cs-checkout-summary-row__label,
body.woocommerce-checkout .cs-checkout-summary-shipping th {
min-width: 0;
color: rgba(0, 0, 0, .64);
font-size: 14px;
font-weight: 750;
line-height: 1.4;
text-align: left;
}
body.woocommerce-checkout .cs-checkout-summary-row > strong,
body.woocommerce-checkout .cs-checkout-summary-row > strong .amount,
body.woocommerce-checkout .cs-checkout-summary-shipping td,
body.woocommerce-checkout .cs-checkout-summary-shipping td .amount {
color: #160018;
font-size: 14px;
font-weight: 900;
line-height: 1.4;
text-align: right;
}
body.woocommerce-checkout .cs-checkout-summary-shipping table,
body.woocommerce-checkout .cs-checkout-summary-shipping tbody,
body.woocommerce-checkout .cs-checkout-summary-shipping tr,
body.woocommerce-checkout .cs-checkout-summary-shipping th,
body.woocommerce-checkout .cs-checkout-summary-shipping td {
width: 100%;
margin: 0;
padding-right: 0;
padding-left: 0;
border: 0;
background: transparent;
}
body.woocommerce-checkout .cs-checkout-summary-shipping table {
display: block;
}
body.woocommerce-checkout .cs-checkout-summary-shipping tbody {
display: block;
}
body.woocommerce-checkout .cs-checkout-summary-shipping td {
max-width: 62%;
}
body.woocommerce-checkout .cs-checkout-summary-shipping #shipping_method {
display: grid;
gap: 7px;
margin: 0;
padding: 0;
list-style: none;
}
body.woocommerce-checkout .cs-checkout-summary-shipping #shipping_method li {
margin: 0;
}
body.woocommerce-checkout .cs-checkout-summary-shipping #shipping_method label {
color: #160018;
font-weight: 900;
}
body.woocommerce-checkout .cs-checkout-summary-section {
margin: 12px 0;
padding: 12px;
border: 1px solid rgba(34, 139, 87, .16);
border-radius: 16px;
background: rgba(34, 139, 87, .055);
}
body.woocommerce-checkout .cs-checkout-summary-section h3 {
margin: 0 0 5px;
color: #166534;
font-size: 14px;
font-weight: 950;
letter-spacing: 0;
line-height: 1.2;
}
body.woocommerce-checkout .cs-checkout-summary-row--discount {
border-bottom-color: rgba(34, 139, 87, .12);
}
body.woocommerce-checkout .cs-checkout-summary-row--discount:last-child {
border-bottom: 0;
padding-bottom: 0;
}
body.woocommerce-checkout .cs-checkout-summary-row--discount > span,
body.woocommerce-checkout .cs-checkout-summary-row--discount > strong,
body.woocommerce-checkout .cs-checkout-summary-row--discount .amount {
color: #166534;
}
body.woocommerce-checkout .cs-checkout-summary-row__label {
display: grid;
gap: 5px;
}
body.woocommerce-checkout .cs-checkout-remove-coupon {
justify-self: start;
color: rgba(96, 1, 101, .76);
font-size: 11.5px;
font-weight: 850;
line-height: 1.2;
text-decoration: underline;
text-underline-offset: 3px;
}
body.woocommerce-checkout .cs-checkout-remove-coupon:hover,
body.woocommerce-checkout .cs-checkout-remove-coupon:focus-visible {
color: #600165;
outline: none;
}
body.woocommerce-checkout .cs-checkout-summary-row--total {
align-items: center;
margin-top: 4px;
padding-top: 16px;
border-bottom: 0;
}
body.woocommerce-checkout .cs-checkout-total-label {
display: inline-flex;
align-items: baseline;
gap: 8px;
min-width: 0;
}
body.woocommerce-checkout .cs-checkout-total-label__main {
color: #160018;
font-size: 17px;
font-weight: 950;
}
body.woocommerce-checkout .cs-checkout-total-label__tax {
color: rgba(0, 0, 0, .5);
font-size: 12px;
font-weight: 800;
}
body.woocommerce-checkout .cs-checkout-summary-row--total > strong,
body.woocommerce-checkout .cs-checkout-summary-row--total .amount {
color: #160018;
font-size: 24px;
font-weight: 950;
line-height: 1.1;
}
body.woocommerce-checkout .cs-checkout-payments-note {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid rgba(22, 0, 24, .08);
}
body.woocommerce-checkout .cs-checkout-payments-note p {
margin: 0 0 10px;
color: rgba(0, 0, 0, .56);
font-size: 12px;
font-weight: 850;
}
body.woocommerce-checkout .cs-checkout-payments-note ul {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin: 0;
padding: 0;
list-style: none;
}
body.woocommerce-checkout .cs-checkout-payments-note li {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
min-height: 34px;
padding: 6px 8px;
border: 1px solid rgba(154, 89, 156, .12);
border-radius: 10px;
background: #fff;
}
body.woocommerce-checkout .cs-checkout-payments-note img {
display: block;
max-width: 42px;
max-height: 21px;
}
body.woocommerce-checkout .cs-checkout-payment__methods {
display: grid;
gap: 12px;
margin: 0 0 18px;
padding: 0;
list-style: none;
}
body.woocommerce-checkout .cs-checkout-payment__methods > li {
margin: 0;
padding: 15px;
border: 1px solid rgba(154, 89, 156, .14);
border-radius: 16px;
background: rgba(250, 247, 250, .54);
}
body.woocommerce-checkout .cs-checkout-payment__methods input.input-radio {
margin: 0 9px 0 0;
accent-color: #600165;
}
body.woocommerce-checkout .cs-checkout-payment__methods label {
color: #160018;
font-size: 14px;
font-weight: 900;
line-height: 1.25;
}
body.woocommerce-checkout .cs-checkout-payment__methods .payment_box {
margin: 12px 0 0;
padding: 13px 14px;
border: 1px solid rgba(154, 89, 156, .12);
border-radius: 14px;
background: #fff;
color: rgba(0, 0, 0, .62);
font-size: 13px;
font-weight: 650;
line-height: 1.45;
}
body.woocommerce-checkout .cs-checkout-payment__methods .payment_box::before {
display: none;
}
body.woocommerce-checkout .cs-checkout-place-order {
display: grid;
gap: 14px;
margin: 0;
padding: 0;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
color: rgba(0, 0, 0, .58);
font-size: 12px;
font-weight: 650;
line-height: 1.45;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a {
color: #600165;
font-weight: 850;
text-decoration: underline;
text-underline-offset: 3px;
}
body.woocommerce-checkout #place_order,
body.woocommerce-checkout .cs-checkout-submit {
width: 100%;
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px 18px;
border: 1px solid #600165;
border-radius: 14px;
background: #600165;
color: #fff;
font-size: 14px;
font-weight: 950;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout #place_order:focus-visible,
body.woocommerce-checkout .cs-checkout-submit:hover,
body.woocommerce-checkout .cs-checkout-submit:focus-visible {
border-color: #47014b;
background: #47014b;
color: #fff;
outline: none;
}
body.woocommerce-checkout #place_order:active,
body.woocommerce-checkout .cs-checkout-submit:active {
transform: translateY(1px);
}
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message {
position: relative;
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
align-items: center;
gap: 10px 14px;
max-width: var(--container, 1440px);
margin-right: auto;
margin-left: auto;
min-height: 58px;
padding: 14px 16px;
border: 1px solid rgba(154, 89, 156, .16);
border-radius: 18px;
background: #fff;
color: rgba(22, 0, 24, .72);
font-size: 13px;
font-weight: 700;
line-height: 1.45;
box-shadow: none;
}
body.woocommerce-checkout .woocommerce-message {
border-color: rgba(34, 139, 87, .16);
background: rgba(34, 139, 87, .055);
}
body.woocommerce-checkout .woocommerce-info {
border-color: rgba(154, 89, 156, .16);
background: rgba(250, 247, 250, .72);
}
body.woocommerce-checkout ul.woocommerce-error {
align-items: start;
gap: 7px 14px;
list-style: none;
border-color: rgba(180, 35, 24, .18);
background: rgba(180, 35, 24, .045);
}
body.woocommerce-checkout ul.woocommerce-error li {
grid-column: 2 / -1;
margin: 0;
padding: 0;
}
body.woocommerce-checkout .woocommerce-error::before,
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-message::before {
content: "";
position: static;
top: auto;
left: auto;
width: 38px;
height: 38px;
transform: none;
grid-column: 1;
grid-row: 1;
border-radius: 50%;
background-color: #600165;
background-repeat: no-repeat;
background-position: center;
background-size: 15px;
color: #fff;
}
body.woocommerce-checkout ul.woocommerce-error::before {
align-self: start;
grid-row: 1 / span 20;
}
body.woocommerce-checkout .woocommerce-message::before {
background-color: #166534;
background-image: url("data:image/svg+xml;utf8,");
}
body.woocommerce-checkout .woocommerce-info::before {
background-color: rgba(96, 1, 101, .78);
background-image: url("data:image/svg+xml;utf8,");
}
body.woocommerce-checkout .woocommerce-error::before {
background-color: #b42318;
background-image: url("data:image/svg+xml;utf8,");
}
body.woocommerce-checkout .woocommerce-message .button,
body.woocommerce-checkout .woocommerce-info .button,
body.woocommerce-checkout .woocommerce-error .button {
grid-column: 3;
justify-self: end;
margin: 0;
min-height: 36px;
padding: 0 15px;
border: 1px solid #600165;
border-radius: 999px;
background: #600165;
color: #fff;
font-size: 12px;
font-weight: 900;
line-height: 1.2;
text-align: center;
text-decoration: none;
}
body.woocommerce-checkout .woocommerce-message .button:hover,
body.woocommerce-checkout .woocommerce-info .button:hover,
body.woocommerce-checkout .woocommerce-error .button:hover,
body.woocommerce-checkout .woocommerce-message .button:focus-visible,
body.woocommerce-checkout .woocommerce-info .button:focus-visible,
body.woocommerce-checkout .woocommerce-error .button:focus-visible {
border-color: #47014b;
background: #47014b;
color: #fff;
outline: none;
}
body.woocommerce-checkout .woocommerce-NoticeGroup,
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout {
grid-column: 1 / -1;
}
body.woocommerce-checkout .woocommerce-invalid input.input-text,
body.woocommerce-checkout .woocommerce-invalid textarea.input-text,
body.woocommerce-checkout .woocommerce-invalid select,
body.woocommerce-checkout .woocommerce-invalid .select2-selection {
border-color: rgba(180, 35, 24, .62);
background: rgba(180, 35, 24, .025);
box-shadow: 0 0 0 3px rgba(180, 35, 24, .08);
}
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper input.input-text,
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper textarea.input-text,
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper input[type="text"],
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper input[type="email"],
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper input[type="tel"],
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper textarea,
body.woocommerce-checkout form.checkout #billing_first_name,
body.woocommerce-checkout form.checkout #billing_last_name,
body.woocommerce-checkout form.checkout #billing_address_1,
body.woocommerce-checkout form.checkout #billing_address_2,
body.woocommerce-checkout form.checkout #billing_city,
body.woocommerce-checkout form.checkout #billing_postcode,
body.woocommerce-checkout form.checkout #billing_phone,
body.woocommerce-checkout form.checkout #billing_email,
body.woocommerce-checkout form.checkout #shipping_first_name,
body.woocommerce-checkout form.checkout #shipping_last_name,
body.woocommerce-checkout form.checkout #shipping_address_1,
body.woocommerce-checkout form.checkout #shipping_address_2,
body.woocommerce-checkout form.checkout #shipping_city,
body.woocommerce-checkout form.checkout #shipping_postcode,
body.woocommerce-checkout form.checkout #order_comments {
box-sizing: border-box;
width: 100%;
min-height: 50px;
margin: 0;
padding: 0 16px;
border: 1px solid rgba(154, 89, 156, .24) !important;
border-radius: 14px !important;
background: #fff !important;
color: #160018;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.35;
box-shadow: none !important;
outline: 0;
-webkit-appearance: none;
appearance: none;
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper textarea.input-text,
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper textarea,
body.woocommerce-checkout form.checkout #order_comments {
min-height: 118px;
padding: 14px 16px;
resize: vertical;
}
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper input.input-text:hover,
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper textarea.input-text:hover,
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper input[type="text"]:hover,
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper input[type="email"]:hover,
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper input[type="tel"]:hover,
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper textarea:hover {
border-color: rgba(154, 89, 156, .42) !important;
background: #fff !important;
}
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper input.input-text:focus,
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper textarea.input-text:focus,
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper input[type="text"]:focus,
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper input[type="email"]:focus,
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper input[type="tel"]:focus,
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper textarea:focus {
border-color: rgba(96, 1, 101, .62) !important;
background: #fff !important;
box-shadow: 0 0 0 4px rgba(154, 89, 156, .12) !important;
}
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper input.input-text::placeholder,
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper textarea.input-text::placeholder,
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper input[type="text"]::placeholder,
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper input[type="email"]::placeholder,
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper input[type="tel"]::placeholder,
body.woocommerce-checkout form.checkout .form-row .woocommerce-input-wrapper textarea::placeholder {
color: rgba(22, 0, 24, .34);
opacity: 1;
}
body.woocommerce-checkout form.checkout .woocommerce-invalid .woocommerce-input-wrapper input.input-text,
body.woocommerce-checkout form.checkout .woocommerce-invalid .woocommerce-input-wrapper textarea.input-text,
body.woocommerce-checkout form.checkout .woocommerce-invalid .woocommerce-input-wrapper input[type="text"],
body.woocommerce-checkout form.checkout .woocommerce-invalid .woocommerce-input-wrapper input[type="email"],
body.woocommerce-checkout form.checkout .woocommerce-invalid .woocommerce-input-wrapper input[type="tel"],
body.woocommerce-checkout form.checkout .woocommerce-invalid .woocommerce-input-wrapper textarea {
border-color: rgba(180, 35, 24, .62) !important;
background: rgba(180, 35, 24, .025) !important;
box-shadow: 0 0 0 3px rgba(180, 35, 24, .08) !important;
}
@media (max-width: 1180px) {
body.woocommerce-checkout .cs-checkout-layout {
grid-template-columns: minmax(0, 1fr) minmax(340px, 380px);
gap: 28px;
}
}
@media (max-width: 980px) {
body.woocommerce-checkout .cs-checkout-layout {
display: grid;
grid-template-columns: 1fr;
}
body.woocommerce-checkout .cs-checkout-main,
body.woocommerce-checkout .cs-checkout-payment,
body.woocommerce-checkout .cs-checkout-review-card {
grid-column: 1;
grid-row: auto;
}
body.woocommerce-checkout .cs-checkout-order-review {
display: grid;
gap: 20px;
}
body.woocommerce-checkout .cs-checkout-review-card {
order: -1;
position: static;
}
}
@media (max-width: 680px) {
body.woocommerce-checkout .woocommerce {
padding-right: 14px;
padding-left: 14px;
}
body.woocommerce-checkout form.checkout_coupon {
grid-template-columns: 1fr;
}
body.woocommerce-checkout form.checkout_coupon button,
body.woocommerce-checkout form.login button {
width: 100%;
}
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
grid-template-columns: 20px minmax(0, 1fr);
gap: 0 10px;
min-height: 0;
margin-top: 8px;
padding: 4px 12px 4px 10px;
border-radius: 12px;
}
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
width: 20px;
height: 20px;
align-self: start;
}
body.woocommerce-checkout .woocommerce-form-login-toggle .showlogin,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon {
grid-column: 2;
justify-self: start;
width: auto;
max-inline-size: 100%;
min-height: 44px;
overflow-wrap: anywhere;
text-align: left;
}
body.woocommerce-checkout .cs-checkout-page {
margin-top: 22px;
}
body.woocommerce-checkout .cs-checkout-hero h1 {
font-size: 31px;
}
body.woocommerce-checkout .cs-checkout-panel,
body.woocommerce-checkout .cs-checkout-review-card {
padding: 18px;
border-radius: 18px;
}
body.woocommerce-checkout .woocommerce-account-fields {
margin-top: 0;
padding: 14px;
border-radius: 15px;
}
body.woocommerce-checkout .woocommerce-account-fields .woocommerce-form__label-for-checkbox.checkbox {
gap: 10px;
min-height: 44px;
font-size: 13.5px;
}
body.woocommerce-checkout .woocommerce-account-fields > .create-account:not(.form-row) {
margin-top: 13px;
padding-top: 13px;
}
body.woocommerce-checkout .cs-checkout-review-products {
max-height: clamp(220px, 34vh, 340px);
padding-right: 0;
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
grid-template-columns: 1fr;
}
body.woocommerce-checkout .cs-checkout-review-product {
grid-template-columns: 48px minmax(0, 1fr) auto;
gap: 12px;
padding: 12px;
}
body.woocommerce-checkout .cs-checkout-review-product__media {
width: 48px;
height: 48px;
}
body.woocommerce-checkout .cs-checkout-review-product__subtotal {
text-align: right;
}
body.woocommerce-checkout .cs-checkout-summary-row,
body.woocommerce-checkout .cs-checkout-summary-shipping .woocommerce-shipping-totals {
gap: 10px;
}
body.woocommerce-checkout .cs-checkout-summary-shipping td {
max-width: 60%;
}
body.woocommerce-checkout .cs-checkout-summary-row--total > strong,
body.woocommerce-checkout .cs-checkout-summary-row--total .amount {
font-size: 22px;
}
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message {
grid-template-columns: 34px minmax(0, 1fr);
align-items: start;
gap: 10px 12px;
min-height: 54px;
padding: 13px 14px;
border-radius: 15px;
font-size: 12.5px;
}
body.woocommerce-checkout .woocommerce-error::before,
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-message::before {
width: 34px;
height: 34px;
}
body.woocommerce-checkout ul.woocommerce-error li {
grid-column: 2;
}
body.woocommerce-checkout .woocommerce-message .button,
body.woocommerce-checkout .woocommerce-info .button,
body.woocommerce-checkout .woocommerce-error .button {
grid-column: 1 / -1;
width: 100%;
justify-self: stretch;
}
}
@media (max-width: 440px) {
body.woocommerce-checkout .cs-checkout-panel,
body.woocommerce-checkout .cs-checkout-review-card {
padding: 16px;
}
body.woocommerce-checkout .cs-checkout-review-card__header h2,
body.woocommerce-checkout .cs-checkout-panel__header h2 {
font-size: 22px;
}
body.woocommerce-checkout .cs-checkout-summary-row > span,
body.woocommerce-checkout .cs-checkout-summary-row__label,
body.woocommerce-checkout .cs-checkout-summary-shipping th {
font-size: 13px;
}
}
@media (max-width: 380px) {
body.woocommerce-checkout .cs-checkout-review-product {
grid-template-columns: 44px minmax(0, 1fr);
}
body.woocommerce-checkout .cs-checkout-review-product__media {
width: 44px;
height: 44px;
}
body.woocommerce-checkout .cs-checkout-review-product__subtotal {
grid-column: 2;
text-align: left;
}
}
/* CS quantity stepper - premium +/- controls */
.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
.quantity .qty {
-moz-appearance: textfield;
}
.woocommerce .quantity.cs-qty,
.quantity.cs-qty {
box-sizing: border-box;
display: inline-grid;
grid-template-columns: 42px minmax(48px, 1fr) 42px;
align-items: center;
width: 148px;
min-height: 50px;
overflow: hidden;
border: 1px solid rgba(96, 1, 101, .18);
border-radius: 14px;
background: #fff;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}
.woocommerce .quantity.cs-qty .qty,
.quantity.cs-qty .qty,
body.single-product .cs-product-summary form.cart:not(.variations_form) .quantity.cs-qty .qty,
body.single-product .cs-product-summary .woocommerce-variation-add-to-cart .quantity.cs-qty .qty,
body.woocommerce-cart .cs-cart-item .quantity.cs-qty .qty {
box-sizing: border-box;
width: 100%;
height: 48px;
min-height: 0;
min-width: 0;
margin: 0;
padding: 0 4px;
border: 0;
border-radius: 0;
background: transparent;
color: #171717;
font-family: inherit;
font-size: 15px;
font-weight: 800;
line-height: 1;
text-align: center;
box-shadow: none;
outline: 0;
appearance: textfield;
-moz-appearance: textfield;
}
.cs-qty__btn {
box-sizing: border-box;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 48px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--cs-purple, #600165);
cursor: pointer;
font-family: inherit;
font-size: 0;
line-height: 1;
transition: background .18s ease, color .18s ease, opacity .18s ease;
}
.cs-qty__btn::before,
.cs-qty__btn--plus::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 13px;
height: 2px;
border-radius: 999px;
background: currentColor;
transform: translate(-50%, -50%);
transition: opacity .2s ease, transform .2s ease, background .18s ease;
}
.cs-qty__btn--plus::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.cs-qty__btn:hover,
.cs-qty__btn:focus-visible {
background: rgba(96, 1, 101, .055);
color: #410045;
outline: 0;
}
.cs-qty__btn:focus-visible {
box-shadow: inset 0 0 0 2px rgba(96, 1, 101, .22);
}
.cs-qty__btn:disabled {
cursor: not-allowed;
color: rgba(0,0,0,.24);
opacity: .58;
}
.quantity.cs-qty:focus-within {
border-color: var(--cs-purple, #600165);
box-shadow: 0 0 0 3px rgba(96, 1, 101, .12);
}
@media (max-width: 600px) {
.woocommerce .quantity.cs-qty,
.quantity.cs-qty {
grid-template-columns: 38px minmax(44px, 1fr) 38px;
width: 132px;
min-height: 48px;
border-radius: 13px;
}
.woocommerce .quantity.cs-qty .qty,
.quantity.cs-qty .qty,
body.single-product .cs-product-summary form.cart:not(.variations_form) .quantity.cs-qty .qty,
body.single-product .cs-product-summary .woocommerce-variation-add-to-cart .quantity.cs-qty .qty,
body.woocommerce-cart .cs-cart-item .quantity.cs-qty .qty {
height: 46px;
font-size: 14px;
}
.cs-qty__btn {
width: 38px;
height: 46px;
}
}
/* Home campaigns: preserve clipping without introducing a second card hover. */
@media (hover: hover) and (pointer: fine) {
.cs-home-campaigns .woocommerce ul.products li.product:hover,
.cs-home-campaigns ul.products li.product:hover,
.cs-home-campaigns .woocommerce ul.products li.product:hover .cs-pcard,
.cs-home-campaigns ul.products li.product:hover .cs-pcard,
.cs-home-campaigns .cs-pcard:hover {
transform: none !important;
}
}
/* =====================================================
CS global feedback system
Keep feedback light and specific: a semantic edge, quiet surface,
and a textual action instead of a second primary button.
===================================================== */
.woocommerce-notices-wrapper {
margin-bottom: 20px;
}
.woocommerce-message:not(:has(.cs-cart-notice__content)),
.woocommerce-error,
.woocommerce-info,
.woocommerce-notice--success {
--cs-feedback-notice-accent: var(--cs-feedback-info-accent, #715976);
--cs-feedback-notice-surface: var(--cs-feedback-info-surface, #fcfafc);
--cs-feedback-notice-border: var(--cs-feedback-info-border, #e3d9e4);
position: relative;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 8px 12px;
min-height: 0;
margin: 0 0 10px;
padding: 12px 14px 12px 42px;
border: 1px solid var(--cs-feedback-notice-border);
border-left: 3px solid var(--cs-feedback-notice-accent);
border-radius: var(--cs-feedback-radius, 12px);
background: var(--cs-feedback-notice-surface);
box-shadow: none;
color: var(--cs-feedback-ink, #28172a);
font-size: 13px;
font-weight: 600;
line-height: 1.5;
list-style: none;
overflow-wrap: anywhere;
}
.woocommerce-message:not(:has(.cs-cart-notice__content)),
.woocommerce-notice--success {
--cs-feedback-notice-accent: var(--cs-feedback-success-accent, #1f6b49);
--cs-feedback-notice-surface: var(--cs-feedback-success-surface, #f7fcf8);
--cs-feedback-notice-border: var(--cs-feedback-success-border, #cce6d5);
}
.woocommerce-error {
--cs-feedback-notice-accent: var(--cs-feedback-error-accent, #b42318);
--cs-feedback-notice-surface: var(--cs-feedback-error-surface, #fff8f7);
--cs-feedback-notice-border: var(--cs-feedback-error-border, #f0cfc9);
}
.woocommerce-info {
--cs-feedback-notice-accent: var(--cs-feedback-info-accent, #715976);
--cs-feedback-notice-surface: var(--cs-feedback-info-surface, #fcfafc);
--cs-feedback-notice-border: var(--cs-feedback-info-border, #e3d9e4);
}
.woocommerce-message:not(:has(.cs-cart-notice__content))::before,
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-notice--success::before {
position: absolute;
top: 14px;
left: 13px;
width: 18px;
height: 18px;
border-radius: 4px;
transform: none;
background-color: var(--cs-feedback-notice-accent);
background-size: 10px;
}
.woocommerce-notice--success::before {
content: "✓";
display: inline-grid;
place-items: center;
background-image: none;
color: #fff;
font-size: 12px;
font-weight: 800;
line-height: 1;
}
ul.woocommerce-error {
display: block;
}
ul.woocommerce-error li {
margin: 0;
padding: 0;
}
ul.woocommerce-error li + li {
margin-top: 4px;
}
.woocommerce-message:not(:has(.cs-cart-notice__content)):focus,
.woocommerce-error:focus,
.woocommerce-info:focus,
.woocommerce-notice--success:focus {
outline: 2px solid var(--cs-feedback-focus, rgba(96, 1, 101, .28));
outline-offset: 3px;
}
.woocommerce-message:not(:has(.cs-cart-notice__content)) :is(.button, .restore-item),
.woocommerce-error :is(.button, .restore-item),
.woocommerce-info :is(.button, .restore-item),
.woocommerce-notice--success :is(.button, .restore-item) {
order: 2;
width: auto;
min-height: 36px;
margin: 0 0 0 auto;
padding: 8px 0;
border: 0;
border-bottom: 1px solid currentColor;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--cs-feedback-notice-accent);
font-size: 12.5px;
font-weight: 800;
line-height: 1.2;
text-decoration: none;
text-transform: none;
white-space: nowrap;
transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.woocommerce-message:not(:has(.cs-cart-notice__content)) :is(.button, .restore-item):hover,
.woocommerce-error :is(.button, .restore-item):hover,
.woocommerce-info :is(.button, .restore-item):hover,
.woocommerce-notice--success :is(.button, .restore-item):hover {
border-color: currentColor;
background: transparent;
box-shadow: none;
color: var(--cs-feedback-ink, #28172a);
transform: none;
}
.woocommerce-message:not(:has(.cs-cart-notice__content)) :is(.button, .restore-item):focus-visible,
.woocommerce-error :is(.button, .restore-item):focus-visible,
.woocommerce-info :is(.button, .restore-item):focus-visible,
.woocommerce-notice--success :is(.button, .restore-item):focus-visible {
outline: 2px solid var(--cs-feedback-focus, rgba(96, 1, 101, .28));
outline-offset: 3px;
}
/* Inline feedback keeps its placement near the control, not in a global card. */
.cs-notice {
--cs-feedback-notice-accent: var(--cs-feedback-warning-accent, #76550f);
--cs-feedback-notice-surface: var(--cs-feedback-warning-surface, #fffaf0);
--cs-feedback-notice-border: var(--cs-feedback-warning-border, #eadfbf);
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
align-items: start;
gap: 10px;
margin: 0 0 12px;
padding: 10px 12px;
border: 1px solid var(--cs-feedback-notice-border);
border-left: 3px solid var(--cs-feedback-notice-accent);
border-radius: 10px;
background: var(--cs-feedback-notice-surface);
box-shadow: none;
color: var(--cs-feedback-ink, #28172a);
font-size: 13px;
font-weight: 600;
line-height: 1.45;
}
.cs-notice--success {
--cs-feedback-notice-accent: var(--cs-feedback-success-accent, #1f6b49);
--cs-feedback-notice-surface: var(--cs-feedback-success-surface, #f7fcf8);
--cs-feedback-notice-border: var(--cs-feedback-success-border, #cce6d5);
}
.cs-notice--error {
--cs-feedback-notice-accent: var(--cs-feedback-error-accent, #b42318);
--cs-feedback-notice-surface: var(--cs-feedback-error-surface, #fff8f7);
--cs-feedback-notice-border: var(--cs-feedback-error-border, #f0cfc9);
}
.cs-notice--warning {
--cs-feedback-notice-accent: var(--cs-feedback-warning-accent, #76550f);
--cs-feedback-notice-surface: var(--cs-feedback-warning-surface, #fffaf0);
--cs-feedback-notice-border: var(--cs-feedback-warning-border, #eadfbf);
}
.cs-notice--info {
--cs-feedback-notice-accent: var(--cs-feedback-info-accent, #715976);
--cs-feedback-notice-surface: var(--cs-feedback-info-surface, #fcfafc);
--cs-feedback-notice-border: var(--cs-feedback-info-border, #e3d9e4);
}
.cs-notice__icon {
width: 18px;
height: 18px;
border-radius: 4px;
background: var(--cs-feedback-notice-accent);
color: #fff;
font-size: 11px;
}
.cs-notice__message {
color: inherit;
}
/* Toasts remain transient, compact and safely tappable. */
.cs-toast-region {
right: max(12px, env(safe-area-inset-right));
bottom: max(12px, env(safe-area-inset-bottom));
gap: 8px;
width: min(360px, calc(100vw - 24px));
}
.cs-toast {
--cs-feedback-notice-accent: var(--cs-feedback-warning-accent, #76550f);
--cs-feedback-notice-surface: var(--cs-feedback-warning-surface, #fffaf0);
--cs-feedback-notice-border: var(--cs-feedback-warning-border, #eadfbf);
grid-template-columns: minmax(0, 1fr) 44px;
gap: 6px;
padding: 8px 6px 8px 12px;
border: 1px solid var(--cs-feedback-notice-border);
border-left: 3px solid var(--cs-feedback-notice-accent);
border-radius: var(--cs-feedback-radius, 12px);
background: var(--cs-feedback-notice-surface);
box-shadow: 0 8px 20px rgba(40, 23, 42, .09);
color: var(--cs-feedback-ink, #28172a);
font-size: 13px;
font-weight: 600;
line-height: 1.42;
}
.cs-toast--success {
--cs-feedback-notice-accent: var(--cs-feedback-success-accent, #1f6b49);
--cs-feedback-notice-surface: var(--cs-feedback-success-surface, #f7fcf8);
--cs-feedback-notice-border: var(--cs-feedback-success-border, #cce6d5);
}
.cs-toast--error {
--cs-feedback-notice-accent: var(--cs-feedback-error-accent, #b42318);
--cs-feedback-notice-surface: var(--cs-feedback-error-surface, #fff8f7);
--cs-feedback-notice-border: var(--cs-feedback-error-border, #f0cfc9);
}
.cs-toast--info {
--cs-feedback-notice-accent: var(--cs-feedback-info-accent, #715976);
--cs-feedback-notice-surface: var(--cs-feedback-info-surface, #fcfafc);
--cs-feedback-notice-border: var(--cs-feedback-info-border, #e3d9e4);
}
.cs-toast--warning {
--cs-feedback-notice-accent: var(--cs-feedback-warning-accent, #76550f);
--cs-feedback-notice-surface: var(--cs-feedback-warning-surface, #fffaf0);
--cs-feedback-notice-border: var(--cs-feedback-warning-border, #eadfbf);
}
.cs-toast__close {
width: 44px;
height: 44px;
margin: -2px 0;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--cs-feedback-notice-accent);
}
.cs-toast__close:hover {
border-color: transparent;
background: rgba(40, 23, 42, .055);
color: var(--cs-feedback-notice-accent);
}
.cs-toast__close:focus-visible {
border-color: transparent;
background: transparent;
color: var(--cs-feedback-notice-accent);
outline: 2px solid var(--cs-feedback-focus, rgba(96, 1, 101, .28));
outline-offset: 1px;
}
/* Account notices previously changed style depending on DOM depth. */
body.woocommerce-account.logged-in :is(.woocommerce-error, .woocommerce-message, .woocommerce-info),
body.woocommerce-account.logged-in .cs-account .woocommerce-MyAccount-content > :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) {
display: flex;
align-items: flex-start;
gap: 8px 12px;
min-height: 0;
margin: 0 0 12px;
padding: 12px 14px 12px 42px;
border: 1px solid var(--cs-feedback-notice-border);
border-left: 3px solid var(--cs-feedback-notice-accent);
border-radius: var(--cs-feedback-radius, 12px);
background: var(--cs-feedback-notice-surface);
box-shadow: none;
color: var(--cs-feedback-ink, #28172a);
font-size: 13px;
font-weight: 600;
line-height: 1.5;
}
body.woocommerce-account.logged-in .cs-account .woocommerce-MyAccount-content > :is(.woocommerce-error, .woocommerce-message, .woocommerce-info)::before {
top: 14px;
left: 13px;
width: 18px;
height: 18px;
border-radius: 4px;
transform: none;
background-color: var(--cs-feedback-notice-accent);
background-size: 10px;
}
body.woocommerce-account.logged-in .cs-account .woocommerce-MyAccount-content > .woocommerce-message,
body.woocommerce-account.logged-in .cs-account .woocommerce-MyAccount-content > .woocommerce-message::before {
--cs-feedback-notice-accent: var(--cs-feedback-success-accent, #1f6b49);
--cs-feedback-notice-surface: var(--cs-feedback-success-surface, #f7fcf8);
--cs-feedback-notice-border: var(--cs-feedback-success-border, #cce6d5);
}
body.woocommerce-account.logged-in .cs-account .woocommerce-MyAccount-content > .woocommerce-error,
body.woocommerce-account.logged-in .cs-account .woocommerce-MyAccount-content > .woocommerce-error::before {
--cs-feedback-notice-accent: var(--cs-feedback-error-accent, #b42318);
--cs-feedback-notice-surface: var(--cs-feedback-error-surface, #fff8f7);
--cs-feedback-notice-border: var(--cs-feedback-error-border, #f0cfc9);
}
body.woocommerce-account:not(.logged-in) .cs-account-field-error {
color: var(--cs-feedback-error-accent, #b42318);
font-weight: 700;
}
body.woocommerce-account:not(.logged-in) .cs-account-field-error::before {
width: 16px;
height: 16px;
border: 1px solid var(--cs-feedback-error-border, #f0cfc9);
border-radius: 4px;
background: var(--cs-feedback-error-surface, #fff8f7);
color: var(--cs-feedback-error-accent, #b42318);
}
/* Checkout keeps its two refined disclosure notices separate from this stack. */
body.woocommerce-checkout .woocommerce-notices-wrapper > :is(.woocommerce-error, .woocommerce-message, .woocommerce-info),
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout > :is(.woocommerce-error, .woocommerce-message, .woocommerce-info),
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout > [role="alert"] > .woocommerce-error,
body.woocommerce-checkout .cs-checkout-payment__notice > .woocommerce-info {
display: flex;
align-items: flex-start;
gap: 8px 12px;
min-height: 0;
margin: 0 0 10px;
padding: 12px 14px 12px 42px;
border: 1px solid var(--cs-feedback-notice-border);
border-left: 3px solid var(--cs-feedback-notice-accent);
border-radius: var(--cs-feedback-radius, 12px);
background: var(--cs-feedback-notice-surface);
box-shadow: none;
color: var(--cs-feedback-ink, #28172a);
font-size: 13px;
font-weight: 600;
line-height: 1.5;
}
body.woocommerce-checkout .woocommerce-notices-wrapper > :is(.woocommerce-error, .woocommerce-message, .woocommerce-info)::before,
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout > :is(.woocommerce-error, .woocommerce-message, .woocommerce-info)::before,
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout > [role="alert"] > .woocommerce-error::before,
body.woocommerce-checkout .cs-checkout-payment__notice > .woocommerce-info::before {
top: 14px;
left: 13px;
width: 18px;
height: 18px;
border-radius: 4px;
transform: none;
background-color: var(--cs-feedback-notice-accent);
background-size: 10px;
}
body.woocommerce-checkout .woocommerce-notices-wrapper > ul.woocommerce-error,
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout > ul.woocommerce-error,
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout > [role="alert"] > ul.woocommerce-error {
display: block;
}
body.woocommerce-checkout .woocommerce-notices-wrapper > ul.woocommerce-error li,
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout > ul.woocommerce-error li,
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout > [role="alert"] > ul.woocommerce-error li {
grid-column: auto;
}
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout > [role="alert"] > .woocommerce-error:focus {
outline: 2px solid var(--cs-feedback-focus, rgba(96, 1, 101, .28));
outline-offset: 3px;
}
body.woocommerce-checkout .woocommerce-notices-wrapper > :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) :is(.button, .restore-item),
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout > :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) :is(.button, .restore-item),
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout > [role="alert"] > .woocommerce-error :is(.button, .restore-item),
body.woocommerce-checkout .cs-checkout-payment__notice > .woocommerce-info :is(.button, .restore-item) {
width: auto;
min-height: 36px;
margin: 0 0 0 auto;
padding: 8px 0;
border: 0;
border-bottom: 1px solid currentColor;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--cs-feedback-notice-accent);
}
body.woocommerce-checkout .woocommerce-notices-wrapper > :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) :is(.button, .restore-item):focus-visible,
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout > :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) :is(.button, .restore-item):focus-visible,
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout > [role="alert"] > .woocommerce-error :is(.button, .restore-item):focus-visible,
body.woocommerce-checkout .cs-checkout-payment__notice > .woocommerce-info :is(.button, .restore-item):focus-visible {
outline: 2px solid var(--cs-feedback-focus, rgba(96, 1, 101, .28));
outline-offset: 3px;
}
/* A promotion is richer than a one-line success, but shares the same restraint. */
body.woocommerce-cart .cs-cart-promo-note,
body.woocommerce-checkout .cs-cart-promo-note {
grid-template-columns: 24px minmax(0, 1fr);
gap: 10px;
padding: 12px 14px;
border: 1px solid var(--cs-feedback-success-border, #cce6d5);
border-left: 3px solid var(--cs-feedback-success-accent, #1f6b49);
border-radius: var(--cs-feedback-radius, 12px);
background: var(--cs-feedback-success-surface, #f7fcf8);
}
body.woocommerce-cart .cs-cart-promo-note__icon,
body.woocommerce-checkout .cs-cart-promo-note__icon {
width: 24px;
height: 24px;
border: 0;
border-radius: 4px;
background: transparent;
color: var(--cs-feedback-success-accent, #1f6b49);
}
body.woocommerce-cart .cs-cart-promo-note__icon svg,
body.woocommerce-checkout .cs-cart-promo-note__icon svg {
width: 20px;
}
body.woocommerce-cart .cs-cart-promo-note__icon svg path,
body.woocommerce-checkout .cs-cart-promo-note__icon svg path {
fill: currentColor;
}
body.woocommerce-cart .cs-cart-promo-note__eyebrow,
body.woocommerce-checkout .cs-cart-promo-note__eyebrow,
body.woocommerce-cart .cs-cart-promo-note__saving,
body.woocommerce-checkout .cs-cart-promo-note__saving {
color: var(--cs-feedback-success-accent, #1f6b49);
}
body.woocommerce-cart .cs-cart-promo-note__title,
body.woocommerce-checkout .cs-cart-promo-note__title {
color: var(--cs-feedback-ink, #28172a);
}
/* The custom empty-state card replaces the redundant empty-copy, not undo/error feedback. */
body.woocommerce-cart .cs-cart-empty__native:has(.woocommerce-message, .woocommerce-error) {
display: block;
}
body.woocommerce-cart .cs-cart-empty__native .cart-empty.woocommerce-info {
display: none;
}
@media (max-width: 600px) {
.woocommerce-message:not(:has(.cs-cart-notice__content)),
.woocommerce-error,
.woocommerce-info,
.woocommerce-notice--success {
padding: 11px 12px 11px 38px;
font-size: 12.5px;
}
.woocommerce-message:not(:has(.cs-cart-notice__content))::before,
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-notice--success::before {
top: 12px;
left: 11px;
width: 17px;
height: 17px;
}
.woocommerce-message:not(:has(.cs-cart-notice__content)) :is(.button, .restore-item),
.woocommerce-error :is(.button, .restore-item),
.woocommerce-info :is(.button, .restore-item),
.woocommerce-notice--success :is(.button, .restore-item),
body.woocommerce-checkout .woocommerce-notices-wrapper > :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) :is(.button, .restore-item),
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout > :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) :is(.button, .restore-item),
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout > [role="alert"] > .woocommerce-error :is(.button, .restore-item),
body.woocommerce-checkout .cs-checkout-payment__notice > .woocommerce-info :is(.button, .restore-item) {
flex: 0 0 auto;
width: auto;
min-height: 44px;
margin-left: auto;
padding: 12px 0;
}
.cs-toast {
grid-template-columns: minmax(0, 1fr) 44px;
padding-left: 11px;
}
}
@media (prefers-reduced-motion: reduce) {
.cs-toast,
.cs-toast.is-leaving,
body.single-product .woocommerce-message.cs-cart-notice-toast.is-leaving {
animation: none;
transform: none;
}
}