/* =========================================================================
* CatalogoSorriso — Shop 3-column layout (classic 2014 baseline):
* LEFT 16.66% : Categorie tree (accordion)
* CENTER 66.66%: Products grid
* RIGHT 16.66% : Mini-cart + Account + Info
*
* Mobile (<=600px): single column (sidebars hidden, drawer takes over).
* ========================================================================= */
/* Selector group that activates the 3-col layout — applies to ALL archives
* (shop, category, tag, brand, generic archive) + home, excluding single product. */
@media (min-width: 901px) {
body.cs-classic.archive:not(.single-product) #content.site-content,
body.cs-classic.woocommerce:not(.single-product) #content.site-content,
body.cs-classic.home #content.site-content {
display: grid !important;
grid-template-columns: 1fr 4fr 1fr !important;
gap: 24px !important;
max-width: var(--cs-content-max) !important;
padding-left: var(--cs-content-gutter) !important;
padding-right: var(--cs-content-gutter) !important;
align-items: start !important;
}
body.cs-classic.archive:not(.single-product) #primary.content-area,
body.cs-classic.woocommerce:not(.single-product) #primary.content-area,
body.cs-classic.home #primary.content-area {
grid-column: 2 !important;
grid-row: 1 !important;
min-width: 0;
max-width: none !important;
width: 100% !important;
padding: 0 !important;
box-sizing: border-box;
}
body.cs-classic.archive:not(.single-product) #cs-shop-sidebar-left,
body.cs-classic.woocommerce:not(.single-product) #cs-shop-sidebar-left,
body.cs-classic.home #cs-shop-sidebar-left {
grid-column: 1 !important;
grid-row: 1 !important;
}
body.cs-classic.archive:not(.single-product) #cs-shop-sidebar-right,
body.cs-classic.woocommerce:not(.single-product) #cs-shop-sidebar-right,
body.cs-classic.home #cs-shop-sidebar-right {
grid-column: 3 !important;
grid-row: 1 !important;
}
}
/* Tablet 601-900: 2-col fallback (only left sidebar visible) */
@media (min-width: 601px) and (max-width: 900px) {
body.cs-classic.archive:not(.single-product) #content.site-content,
body.cs-classic.woocommerce:not(.single-product) #content.site-content,
body.cs-classic.home #content.site-content {
display: grid !important;
grid-template-columns: 22% 1fr !important;
gap: 16px !important;
}
body.cs-classic.archive:not(.single-product) #primary.content-area,
body.cs-classic.woocommerce:not(.single-product) #primary.content-area,
body.cs-classic.home #primary.content-area {
grid-column: 2 !important;
min-width: 0;
padding: 0 !important;
}
body.cs-classic.archive:not(.single-product) #cs-shop-sidebar-left,
body.cs-classic.woocommerce:not(.single-product) #cs-shop-sidebar-left,
body.cs-classic.home #cs-shop-sidebar-left {
grid-column: 1 !important;
grid-row: 1 !important;
}
body.cs-classic.archive:not(.single-product) #cs-shop-sidebar-right,
body.cs-classic.woocommerce:not(.single-product) #cs-shop-sidebar-right,
body.cs-classic.home #cs-shop-sidebar-right {
display: none !important;
}
}
/* Hide any leftover sidebars on single product just in case */
body.cs-classic.single-product #cs-shop-sidebar-left,
body.cs-classic.single-product #cs-shop-sidebar-right {
display: none !important;
}
/* Constrain RevSlider full-width to grid column 2 on home/shop layouts */
body.cs-classic.home #primary rs-fullwidth-wrap,
body.cs-classic.home #primary rs-module-wrap,
body.cs-classic.home #primary [id$="_forcefullwidth"],
body.cs-classic.woocommerce:not(.single-product) #primary rs-fullwidth-wrap,
body.cs-classic.woocommerce:not(.single-product) #primary rs-module-wrap,
body.cs-classic.woocommerce:not(.single-product) #primary [id$="_forcefullwidth"] {
position: relative !important;
width: 100% !important;
max-width: 100% !important;
left: auto !important;
right: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body.cs-classic.home #primary rs-module,
body.cs-classic.woocommerce:not(.single-product) #primary rs-module {
width: 100% !important;
max-width: 100% !important;
}
/* Sidebar container styling */
.cs-shop-sidebar {
font-family: var(--cs-font);
color: var(--cs-text);
background: #fff;
border: 1px solid var(--cs-gray-border);
border-radius: var(--cs-radius-md);
overflow: hidden;
font-size: 13px;
}
.cs-shop-sidebar + .cs-shop-sidebar {
margin-top: 0;
}
.cs-shop-sidebar .cs-sidebar-section {
border-bottom: 1px solid var(--cs-gray-border);
padding: 8px 0;
}
.cs-shop-sidebar .cs-sidebar-section:last-of-type {
border-bottom: none;
}
.cs-shop-sidebar .cs-sidebar-h {
margin: 0;
padding: 8px 12px;
font-size: 11px;
font-weight: bold;
color: var(--cs-gray-mid);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.cs-shop-sidebar .cs-sidebar-list {
list-style: none;
margin: 0;
padding: 0;
}
.cs-shop-sidebar .cs-sidebar-list li {
border-top: 1px solid var(--cs-gray-light);
}
.cs-shop-sidebar .cs-sidebar-list li:first-child {
border-top: none;
}
.cs-shop-sidebar .cs-sidebar-list a {
display: block;
padding: 8px 12px;
color: var(--cs-text);
text-decoration: none;
font-size: 12px;
line-height: 1.4;
box-sizing: border-box;
transition: background 0.12s, color 0.12s;
}
.cs-shop-sidebar .cs-sidebar-list a:hover,
.cs-shop-sidebar .cs-sidebar-list a:focus {
background: var(--cs-green-tint);
color: var(--cs-green-darker);
text-decoration: none;
}
.cs-shop-sidebar .cs-sidebar-all a {
font-weight: bold;
color: var(--cs-green-dark);
}
/* Accordion for cats with sub-children */
.cs-shop-sidebar .cs-sidebar-cat-item.has-children {
display: grid;
grid-template-columns: 1fr auto;
align-items: stretch;
}
.cs-shop-sidebar .cs-sidebar-cat-item.has-children .cs-sidebar-cat-link {
grid-column: 1;
}
.cs-shop-sidebar .cs-sidebar-cat-toggle {
grid-column: 2;
background: transparent;
border: none;
font-size: 12px;
color: var(--cs-text-light);
cursor: pointer;
padding: 0 12px;
min-width: 30px;
border-left: 1px solid var(--cs-gray-light);
transition: transform 0.18s ease, background 0.12s;
}
.cs-shop-sidebar .cs-sidebar-cat-toggle[aria-expanded="true"] {
transform: rotate(180deg);
background: var(--cs-green-tint);
color: var(--cs-green-darker);
}
.cs-shop-sidebar .cs-sidebar-cat-children {
grid-column: 1 / -1;
list-style: none;
margin: 0;
padding: 0;
background: var(--cs-gray-light);
border-top: 1px solid var(--cs-gray-light);
}
.cs-shop-sidebar .cs-sidebar-cat-children[hidden] {
display: none;
}
.cs-shop-sidebar .cs-sidebar-cat-children li {
border-top: 1px solid #eee;
}
.cs-shop-sidebar .cs-sidebar-cat-children li:first-child {
border-top: none;
}
.cs-shop-sidebar .cs-sidebar-cat-children a {
padding: 6px 12px 6px 24px;
font-size: 11px;
color: var(--cs-text-light);
}
.cs-shop-sidebar .cs-sidebar-cat-children a:hover {
background: var(--cs-green-tint);
color: var(--cs-green-darker);
}
/* === Mini cart (right sidebar top section) === */
.cs-mini-cart {
padding: 10px 12px 12px;
}
.cs-mini-cart-summary {
display: flex;
align-items: baseline;
gap: 6px;
font-size: 14px;
font-weight: bold;
color: var(--cs-text);
}
.cs-mini-cart-count {
background: var(--cs-green-dark);
color: #fff;
font-size: 13px;
font-weight: bold;
padding: 2px 8px;
border-radius: var(--cs-radius-md);
min-width: 22px;
text-align: center;
}
.cs-mini-cart-label {
color: var(--cs-text-light);
font-weight: normal;
}
.cs-mini-cart-total {
margin-top: 8px;
font-size: 13px;
color: var(--cs-text);
}
.cs-mini-cart-total .woocommerce-Price-amount {
font-weight: bold;
color: var(--cs-green-darker);
}
.cs-mini-cart-btn {
display: block;
margin-top: 10px;
padding: 8px 12px;
background: var(--cs-green);
color: #fff !important;
text-align: center;
text-decoration: none;
font-weight: bold;
font-size: 12px;
border-radius: var(--cs-radius-md);
transition: background 0.12s;
}
.cs-mini-cart-btn:hover {
background: var(--cs-green-dark);
color: #fff !important;
}
.cs-mini-cart-empty {
margin: 8px 0 0;
font-size: 12px;
color: var(--cs-text-light);
font-style: italic;
}
/* Hide Shoptimizer mobile "Show Filters" toggle — sidebar always visible. */
body.cs-classic .mobile-filter.shoptimizer-mobile-toggle,
body.cs-classic .shoptimizer-mobile-toggle {
display: none !important;
}
/* Hide parent Shoptimizer category banner (title rendered inside content column) */
body.cs-classic .shoptimizer-category-banner,
body.cs-classic .shoptimizer-archive .page-title,
body.cs-classic .woocommerce-products-header {
display: none !important;
}
/* Breadcrumb — PS-prod arrow-ribbon (each segment has white rotated arrow tip).
* Scoped to body.cs-classic (archives) AND body.single-product (PDP): product
* pages get an EMPTY body class (header.php:26), so single-product must be
* listed explicitly for the breadcrumb hooked on PDP to inherit the same look. */
body.cs-classic .cs-breadcrumb-wrap,
body.single-product .cs-breadcrumb-wrap {
margin: 0 0 16px;
}
body.cs-classic .cs-breadcrumb,
body.single-product .cs-breadcrumb {
display: inline-block;
padding: 0 11px;
background: #fff;
border: 1px solid #d6d4d4;
border-radius: 3px;
font-size: 12px;
font-weight: 700;
line-height: 24px;
min-height: 26px;
overflow: hidden;
position: relative;
white-space: nowrap;
color: #333;
}
/* Pipe separator: hidden visually (text-indent), present in DOM as semantic delimiter */
body.cs-classic .cs-breadcrumb .cs-bc-pipe,
body.single-product .cs-breadcrumb .cs-bc-pipe {
display: inline-block;
width: 20px;
text-indent: -5000px;
overflow: hidden;
vertical-align: top;
}
/* Common: links + home + current item — white bg with rotated-square arrow tip on right */
body.cs-classic .cs-breadcrumb a,
body.cs-classic .cs-breadcrumb .cs-bc-current,
body.single-product .cs-breadcrumb a,
body.single-product .cs-breadcrumb .cs-bc-current {
display: inline-block;
background: #fff;
padding: 0 15px;
color: #333;
text-decoration: none;
position: relative;
height: 24px;
line-height: 24px;
vertical-align: top;
z-index: 2;
}
body.cs-classic .cs-breadcrumb a:hover,
body.single-product .cs-breadcrumb a:hover { color: #777; }
/* Arrow-tip on right side of each segment: white rotated square with top+right border
* = visible chevron divider between segments. */
body.cs-classic .cs-breadcrumb a::after,
body.single-product .cs-breadcrumb a::after {
content: "";
position: absolute;
width: 18px;
height: 18px;
background: #fff;
border-top: 1px solid #d6d4d4;
border-right: 1px solid #d6d4d4;
right: -10px;
top: 3px;
transform: rotate(45deg);
z-index: 3;
}
/* Last (current) segment: NO arrow tip on its right (end of trail).
* Render the LEFT chevron via ::before so the previous arrow shows up against it. */
body.cs-classic .cs-breadcrumb .cs-bc-current,
body.single-product .cs-breadcrumb .cs-bc-current {
background: transparent;
color: #999;
}
/* Home anchor: only icon, no text */
body.cs-classic .cs-breadcrumb .cs-bc-home,
body.single-product .cs-breadcrumb .cs-bc-home {
background: transparent;
margin-left: -11px;
padding: 0;
width: 38px;
text-align: center;
color: #777;
font-size: 17px;
height: 25px;
line-height: 22px;
}
body.cs-classic .cs-breadcrumb .cs-bc-home::before,
body.cs-classic .cs-breadcrumb .cs-bc-home::after,
body.single-product .cs-breadcrumb .cs-bc-home::before,
body.single-product .cs-breadcrumb .cs-bc-home::after {
background: transparent;
}
body.cs-classic .cs-breadcrumb .cs-bc-home::before,
body.single-product .cs-breadcrumb .cs-bc-home::before {
border-top: 1px solid #d6d4d4;
border-right: 1px solid #d6d4d4;
}
/* Home SVG icon (replaces FontAwesome icon-home) */
body.cs-classic .cs-breadcrumb .cs-bc-home-icon,
body.single-product .cs-breadcrumb .cs-bc-home-icon {
display: inline-block;
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
vertical-align: middle;
position: relative;
top: -1px;
}
/* Mobile (≤600px): breadcrumb wraps to multiple rows separated by a hairline.
* The arrow-tip cards (white bg + rotated squares) would cover a continuous
* divider, so on mobile we drop them and render a plain trail with visible "›"
* pipes. A repeating-linear-gradient paints a 1px line at every row boundary:
* interior boundaries become the mid divider(s); the final boundary coincides
* with the box border so single-row breadcrumbs show no spurious line. */
@media (max-width: 600px) {
body.cs-classic .cs-breadcrumb,
body.single-product .cs-breadcrumb {
box-sizing: border-box;
display: block;
white-space: normal;
overflow: visible;
min-height: 0;
line-height: 36px;
padding: 0 11px;
background-color: #fff;
/* Real top border (inherited 1px #d6d4d4 from the desktop rule) so the pill
* has its own clean top edge. The gradient's first painted line is at 35px
* (period 36px), i.e. NOT at 0 — so it never doubles the top border; it
* handles the interior row dividers + the bottom line. Hence border-bottom:0.
* Side borders stay real (inherited). */
border-bottom: 0;
background-image: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 35px,
#d6d4d4 35px,
#d6d4d4 36px
);
background-position: 0 0;
}
/* Uniform height on ALL children so row pitch == gradient period (theme forces
* a 48px height on .cs-breadcrumb a, hence !important). vertical-align:top keeps
* every child's box flush so wrapped rows line up with the painted divider. */
body.cs-classic .cs-breadcrumb a,
body.cs-classic .cs-breadcrumb .cs-bc-current,
body.cs-classic .cs-breadcrumb .cs-bc-pipe,
body.cs-classic .cs-breadcrumb .cs-bc-home,
body.single-product .cs-breadcrumb a,
body.single-product .cs-breadcrumb .cs-bc-current,
body.single-product .cs-breadcrumb .cs-bc-pipe,
body.single-product .cs-breadcrumb .cs-bc-home {
/* height auto + max-height:none so a long segment (e.g. the product name)
* can wrap to multiple lines instead of being clipped at 36px. line-height
* stays 36px so each wrapped line still snaps to the gradient-divider grid. */
height: auto !important;
min-height: 36px !important;
max-height: none !important;
line-height: 36px !important;
vertical-align: top;
}
body.cs-classic .cs-breadcrumb a,
body.cs-classic .cs-breadcrumb .cs-bc-current,
body.single-product .cs-breadcrumb a,
body.single-product .cs-breadcrumb .cs-bc-current {
background: transparent;
padding: 0 2px;
}
body.cs-classic .cs-breadcrumb a::after,
body.single-product .cs-breadcrumb a::after {
display: none;
}
body.cs-classic .cs-breadcrumb .cs-bc-pipe,
body.single-product .cs-breadcrumb .cs-bc-pipe {
width: auto;
text-indent: 0;
overflow: visible;
padding: 0 5px;
color: #bbb;
}
}
/* Archive header (title + thumbnail right) — inside central content column.
* Divider above (between breadcrumb and title) and below (separates from grid). */
body.cs-classic .cs-archive-header {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 24px;
margin: 0 0 16px;
padding: 16px 0;
border-top: 1px solid #d6d4d4;
border-bottom: 1px solid #d6d4d4;
}
body.cs-classic .cs-archive-title {
grid-column: 1;
font-family: var(--cs-font-display);
font-size: 28px;
font-weight: 700;
color: var(--cs-text);
margin: 0;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.5px;
}
body.cs-classic .cs-archive-thumb {
grid-column: 2;
grid-row: 1 / span 2;
max-width: 180px;
}
body.cs-classic .cs-archive-thumb img {
display: block;
width: 100%;
height: auto;
}
body.cs-classic .cs-archive-description {
grid-column: 1;
font-size: 14px;
color: var(--cs-text-body);
line-height: 1.5;
margin-top: 8px;
}
body.cs-classic .cs-archive-description p:last-child {
margin-bottom: 0;
}
/* "Sotto-categorie" section: heading + 3-col grid (image + label below) */
body.cs-classic .cs-subcat-section {
margin: 0 0 20px;
}
body.cs-classic .cs-subcat-heading {
font-family: var(--cs-font-display);
font-size: 16px;
font-weight: 700;
color: var(--cs-text);
margin: 0 0 12px;
padding: 0 0 8px;
border-bottom: 1px solid #e6e6e6;
}
/* PS-prod parity: 4-col grid, image-in-box + uppercase label below, hover thick border */
body.cs-classic .cs-subcat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin: 0;
}
body.cs-classic .cs-subcat-tile {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
gap: 10px;
}
body.cs-classic .cs-subcat-tile:hover { text-decoration: none; }
body.cs-classic .cs-subcat-tile-img {
background: #fff;
border: 1px solid #d6d4d4;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
padding: 9px;
overflow: hidden;
transition: border 0.15s ease, padding 0.15s ease;
box-sizing: border-box;
}
body.cs-classic .cs-subcat-tile:hover .cs-subcat-tile-img {
border: 5px solid #ddd;
padding: 5px;
}
body.cs-classic .cs-subcat-tile-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
body.cs-classic .cs-subcat-tile-img:empty::after {
content: "";
display: block;
width: 60%;
height: 60%;
background: #f5f5f5;
}
body.cs-classic .cs-subcat-tile-label {
text-align: center;
font-family: var(--cs-font-display);
font-size: 14px;
font-weight: 600;
color: #555454;
text-transform: uppercase;
letter-spacing: 0.3px;
line-height: 1.25;
}
body.cs-classic .cs-subcat-tile:hover .cs-subcat-tile-label {
color: #515151;
}
@media (max-width: 900px) {
body.cs-classic .cs-subcat-grid { grid-template-columns: repeat(3, 1fr); }
body.cs-classic .cs-archive-thumb { max-width: 120px; }
}
@media (max-width: 600px) {
body.cs-classic .cs-subcat-grid { grid-template-columns: repeat(2, 1fr); }
body.cs-classic .cs-archive-header { grid-template-columns: 1fr; }
body.cs-classic .cs-archive-thumb { grid-column: 1; grid-row: auto; max-width: 100px; }
}
/* Hide parent default sidebar widgets */
body.cs-classic .widget_price_filter,
body.cs-classic .widget_product_categories,
body.cs-classic .woocommerce-widget-layered-nav,
body.cs-classic .woocommerce-widget-layered-nav-filters,
body.cs-classic #secondary .widget:not(.cs-shop-sidebar-widget),
body.cs-classic .shop-sidebar > .widget {
display: none !important;
}
/* Mobile: hide shop sidebars (drawer handles navigation) */
@media (max-width: 600px) {
#cs-shop-sidebar-left,
#cs-shop-sidebar-right {
display: none !important;
}
}
/* =========================================================================
* MOCKUP CLASSIC ALIGNMENT — sidebar sx (categorie)
* Flat list, gap 0, plus/minus toggle, light-green submenu.
* ========================================================================= */
@media (min-width: 901px) {
body.cs-classic.woocommerce:not(.single-product) #content.site-content,
body.cs-classic.home #content.site-content {
gap: 0 !important;
grid-template-columns: 16.66% 66.66% 16.66% !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
/* Center content: vertical 0 / horizontal 8px padding per mockup #center-content */
body.cs-classic.woocommerce:not(.single-product) #primary.content-area,
body.cs-classic.home #primary.content-area {
padding: 0 8px !important;
}
/* Extra padding on archive pages (category, brand, tag) — NOT on home */
body.cs-classic.archive:not(.single-product) #primary.content-area,
body.cs-classic.woocommerce.archive:not(.single-product) #primary.content-area {
padding: 16px 24px !important;
}
}
/* =========================================================================
* Left sidebar (categorie) — PS-prod parity:
* - White bg, light gray separator between items
* - Top-level: bold dark text (~600), 14px, padding 12px 14px
* - +/- toggle in a tinted box on the right (#f5f5f5), gray icon
* - Items without children: no toggle box
* - Sub-items: light bg, ">" gray prefix, regular weight ~13px gray text
* - Multi-line items wrap with consistent padding (no jumping)
* ========================================================================= */
#cs-shop-sidebar-left {
border: 1px solid #e6e6e6;
border-radius: 0;
font-size: 14px;
background: #fff;
}
/* Hide "Categorie" h3 — toolbar CATEGORIE pill already labels column */
#cs-shop-sidebar-left .cs-sidebar-h {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
padding: 0;
margin: -1px;
}
#cs-shop-sidebar-left .cs-sidebar-section {
padding: 0;
border-bottom: none;
}
/* Top-level list */
#cs-shop-sidebar-left .cs-sidebar-list {
display: block;
}
#cs-shop-sidebar-left .cs-sidebar-list > li {
border-top: none;
border-bottom: 1px solid #e6e6e6;
}
#cs-shop-sidebar-left .cs-sidebar-list > li:last-child {
border-bottom: none;
}
#cs-shop-sidebar-left .cs-sidebar-list > li > a,
#cs-shop-sidebar-left .cs-sidebar-cat-link {
display: block;
padding: 12px 14px;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
color: #333;
text-decoration: none;
background: #fff;
transition: background 0.12s, color 0.12s;
}
#cs-shop-sidebar-left .cs-sidebar-list > li > a:hover,
#cs-shop-sidebar-left .cs-sidebar-cat-link:hover {
background: #fafafa;
color: var(--cs-green-dark);
}
/* Items with children: grid layout — link left, toggle box right */
#cs-shop-sidebar-left .cs-sidebar-cat-item.has-children {
display: grid;
grid-template-columns: 1fr 44px;
align-items: stretch;
}
#cs-shop-sidebar-left .cs-sidebar-cat-item.has-children .cs-sidebar-cat-link {
grid-column: 1;
padding-right: 10px;
}
#cs-shop-sidebar-left .cs-sidebar-cat-toggle {
grid-column: 2;
background: #f5f5f5 !important;
border: none;
border-left: 1px solid #e6e6e6;
color: #999;
cursor: pointer;
padding: 0;
min-width: 44px;
font-size: 0;
line-height: 1;
transform: none !important;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.12s, color 0.12s;
}
#cs-shop-sidebar-left .cs-sidebar-cat-toggle::after {
content: "+";
font-size: 18px;
font-weight: 400;
color: #999;
line-height: 1;
display: inline-block;
}
#cs-shop-sidebar-left .cs-sidebar-cat-toggle[aria-expanded="true"]::after {
content: "−";
}
#cs-shop-sidebar-left .cs-sidebar-cat-toggle:hover {
background: #eaeaea !important;
}
#cs-shop-sidebar-left .cs-sidebar-cat-toggle:hover::after {
color: #555;
}
/* Sub-children panel */
#cs-shop-sidebar-left .cs-sidebar-cat-children {
grid-column: 1 / -1;
background: #fff;
border-top: 1px solid #e6e6e6;
list-style: none;
margin: 0;
padding: 0;
}
#cs-shop-sidebar-left .cs-sidebar-cat-children[hidden] {
display: none;
}
#cs-shop-sidebar-left .cs-sidebar-cat-children li {
border-top: none;
border-bottom: 1px solid #f0f0f0;
}
#cs-shop-sidebar-left .cs-sidebar-cat-children li:last-child {
border-bottom: none;
}
#cs-shop-sidebar-left .cs-sidebar-cat-children a {
display: block;
padding: 10px 14px 10px 26px;
font-size: 13px;
font-weight: 400;
line-height: 1.35;
color: #555;
text-decoration: none;
position: relative;
transition: background 0.12s, color 0.12s;
}
#cs-shop-sidebar-left .cs-sidebar-cat-children a::before {
content: "›";
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 14px;
font-weight: 400;
line-height: 1;
}
#cs-shop-sidebar-left .cs-sidebar-cat-children a:hover {
background: #fafafa;
color: var(--cs-green-dark);
}
/* "Tutto il catalogo →" CTA at bottom */
#cs-shop-sidebar-left .cs-sidebar-all a {
padding: 12px 14px;
font-size: 14px;
font-weight: 600;
color: var(--cs-green-dark);
}
#cs-shop-sidebar-left .cs-sidebar-all a:hover {
background: #fafafa;
color: var(--cs-green-darker);
}
/* =========================================================================
* MOCKUP CLASSIC ALIGNMENT — sidebar dx (mini-cart + account + info)
* Stacked boxes, gray-bg banner h3, chevron-prefixed list, flat containers.
* ========================================================================= */
#cs-shop-sidebar-right {
border: none;
border-radius: 0;
background: transparent;
padding: 0;
gap: 8px;
display: flex;
flex-direction: column;
overflow: visible;
}
/* Sidebar Carrello hidden — Shoptimizer drawer handles cart display now. */
#cs-shop-sidebar-right .cs-sidebar-cart {
display: none !important;
}
#cs-shop-sidebar-right .cs-sidebar-section {
background: #fff;
border: 1px solid #e6e6e6;
padding: 0;
border-bottom: 1px solid #e6e6e6;
}
#cs-shop-sidebar-right .cs-sidebar-h {
background: #f0f0f0;
border-bottom: 1px solid #e6e6e6;
padding: 14px 18px;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #333;
}
/* Mini-cart compact */
#cs-shop-sidebar-right .cs-mini-cart {
padding: 8px;
font-size: 11px;
}
#cs-shop-sidebar-right .cs-mini-cart-summary {
align-items: center;
gap: 6px;
font-size: 12px;
}
#cs-shop-sidebar-right .cs-mini-cart-count {
background: var(--cs-green-dark);
color: #fff;
padding: 1px 6px;
border-radius: 10px;
font-size: 11px;
min-width: auto;
}
#cs-shop-sidebar-right .cs-mini-cart-empty {
font-size: 11px;
color: #999;
font-style: italic;
margin: 4px 0 0;
}
/* Mini-cart item list (populated state) */
#cs-shop-sidebar-right .cs-mc-items {
list-style: none;
margin: 0 -8px 0;
padding: 0;
}
#cs-shop-sidebar-right .cs-mc-item {
position: relative;
padding: 8px 24px 8px 8px;
border-bottom: 1px solid #eee;
border-top: none;
}
#cs-shop-sidebar-right .cs-mc-item:first-child {
border-top: 1px solid #eee;
}
#cs-shop-sidebar-right .cs-mc-item-name {
font-size: 11px;
color: var(--cs-text);
margin-bottom: 2px;
line-height: 1.35;
}
#cs-shop-sidebar-right .cs-mc-item-brand {
font-size: 11px;
font-weight: bold;
color: var(--cs-text);
text-transform: uppercase;
letter-spacing: 0.3px;
margin-top: 2px;
}
#cs-shop-sidebar-right .cs-mc-item-price {
font-size: 11px;
color: var(--cs-text);
margin-top: 2px;
}
#cs-shop-sidebar-right .cs-mc-remove {
position: absolute;
top: 6px;
right: 8px;
color: #999;
font-size: 16px;
line-height: 1;
text-decoration: none;
font-weight: normal;
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
#cs-shop-sidebar-right .cs-mc-remove:hover {
color: #c00;
}
#cs-shop-sidebar-right .cs-mc-shipping {
padding: 6px 8px;
margin: 0 -8px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #eee;
color: var(--cs-text-light);
font-size: 11px;
}
#cs-shop-sidebar-right .cs-mini-cart-total {
margin-top: 6px;
font-size: 12px;
font-weight: bold;
padding-top: 6px;
border-top: 1px solid #eee;
display: flex;
justify-content: space-between;
}
#cs-shop-sidebar-right .cs-mini-cart-vat {
margin: 4px 0 0;
font-size: 10px;
color: #999;
font-style: italic;
}
#cs-shop-sidebar-right .cs-mini-cart-btn {
margin-top: 8px;
padding: 7px 12px;
font-size: 12px;
border-radius: 2px;
background: var(--cs-green);
width: 100%;
box-sizing: border-box;
text-align: center;
}
/* Account + Info list: PS-prod parity — gray chevron, generous padding, dark text */
#cs-shop-sidebar-right .cs-sidebar-list li {
border-top: none;
border-bottom: 1px solid #e6e6e6;
}
#cs-shop-sidebar-right .cs-sidebar-list li:last-child {
border-bottom: none;
}
#cs-shop-sidebar-right .cs-sidebar-list a {
padding: 12px 18px 12px 36px;
font-size: 15px;
font-weight: 400;
color: #555;
display: block;
line-height: 1.35;
position: relative;
transition: background 0.12s, color 0.12s;
}
#cs-shop-sidebar-right .cs-sidebar-list a::before {
content: "›";
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 16px;
font-weight: 400;
line-height: 1;
}
#cs-shop-sidebar-right .cs-sidebar-list a:hover {
background: #fafafa;
color: var(--cs-green-dark);
}
/* =========================================================================
* HELPDESK landing — same 3-col layout as shop/home + child-page box grid.
* Body gets `cs-helpdesk` via inc/cs-helpdesk.php. Issue 2026-0529-008.
* ========================================================================= */
@media (min-width: 901px) {
body.cs-classic.cs-helpdesk #content.site-content {
display: grid !important;
grid-template-columns: 1fr 4fr 1fr !important;
gap: 24px !important;
max-width: var(--cs-content-max) !important;
padding-left: var(--cs-content-gutter) !important;
padding-right: var(--cs-content-gutter) !important;
align-items: start !important;
}
body.cs-classic.cs-helpdesk #primary.content-area {
grid-column: 2 !important;
grid-row: 1 !important;
min-width: 0;
max-width: none !important;
width: 100% !important;
padding: 0 !important;
box-sizing: border-box;
}
body.cs-classic.cs-helpdesk #cs-shop-sidebar-left { grid-column: 1 !important; grid-row: 1 !important; }
body.cs-classic.cs-helpdesk #cs-shop-sidebar-right { grid-column: 3 !important; grid-row: 1 !important; }
}
@media (min-width: 601px) and (max-width: 900px) {
body.cs-classic.cs-helpdesk #content.site-content {
display: grid !important;
grid-template-columns: 22% 1fr !important;
gap: 16px !important;
}
body.cs-classic.cs-helpdesk #primary.content-area { grid-column: 2 !important; min-width: 0; padding: 0 !important; }
body.cs-classic.cs-helpdesk #cs-shop-sidebar-left { grid-column: 1 !important; grid-row: 1 !important; }
body.cs-classic.cs-helpdesk #cs-shop-sidebar-right { display: none !important; }
}
/* Helpdesk box grid — one bordered box per child page (old-site index look) */
.cs-help-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 24px;
}
.cs-help-box {
display: block;
border: 1px solid #d8d8d8;
border-radius: 4px;
padding: 16px;
text-decoration: none;
color: inherit;
background: #fff;
transition: box-shadow .15s, border-color .15s;
}
.cs-help-box:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); border-color: #b9b9b9; }
.cs-help-box-title { margin: 0 0 6px; font-size: 1rem; color: #333; }
.cs-help-box-excerpt { margin: 0; font-size: .85rem; line-height: 1.45; color: #666; }
@media (max-width: 900px) { .cs-help-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cs-help-grid { grid-template-columns: 1fr; } }
/* =========================================================================
* HELPDESK index — style the AUTHORED page-content card grid (PS-prod model).
* The page content ships the 11-card grid + intro/closing copy with Tailwind
* utility classes (not loaded on this theme) plus stable hooks `.ix-group`
* (card link) and `.ix-text` (label). These rules replicate the model: a
* 4-col grid of bordered square cards with centered grey labels that turn
* green on hover. The grid container is matched via :has(> a.ix-group) so we
* don't depend on the Tailwind class names. Issue 2026-06-01. */
body.cs-helpdesk .entry-content div:has(> a.ix-group) {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin: 28px 0;
}
body.cs-helpdesk a.ix-group {
display: flex;
align-items: center;
justify-content: center;
min-height: 130px;
padding: 24px 16px;
border: 1px solid #d3d3d3;
background: #fff;
text-decoration: none;
box-sizing: border-box;
transition: border-color .2s, box-shadow .2s;
}
/* Hover: thicker-looking border (inset 1px avoids reflow) + green label, like
* the active "Privacy" card in the model. */
body.cs-helpdesk a.ix-group:hover {
border-color: #c4c4c4;
box-shadow: inset 0 0 0 1px #c4c4c4, 0 2px 10px rgba(0, 0, 0, .06);
}
body.cs-helpdesk .ix-text {
color: #6b7280;
text-align: center;
font-weight: 500;
font-size: 1rem;
line-height: 1.3;
transition: color .2s;
}
body.cs-helpdesk a.ix-group:hover .ix-text {
color: var(--cs-green-dark);
}
/* Intro line ("Benvenuti…") — the green on "sorriso" is inline in the content. */
body.cs-helpdesk .entry-content .text-black {
font-size: 1.05rem;
margin-bottom: 4px;
}
/* Closing copy: "contatti" link in green (the only link in the content). */
body.cs-helpdesk .entry-content p a {
color: var(--cs-green-dark);
font-weight: 700;
}
body.cs-helpdesk .entry-content p a:hover {
color: var(--cs-green);
}
/* Content tables (e.g. the shipping cost table) — the imported wp:table block
* ships borderless; give it visible 1px borders + padding like the PS original. */
body.cs-helpdesk .entry-content table {
border-collapse: collapse;
margin: 8px 0 16px;
max-width: 100%;
}
body.cs-helpdesk .entry-content table th,
body.cs-helpdesk .entry-content table td {
border: 1px solid #c9c9c9;
padding: 8px 12px;
text-align: left;
}
/* Page title green (model). */
body.cs-helpdesk .entry-title {
color: var(--cs-green-dark) !important;
}
/* Hide Shoptimizer's stray page-title header (direct child of #content). With
* #content turned into a 3-col grid it gets auto-placed at the bottom; the real
* title is rendered inside #primary by template-helpdesk.php. */
body.cs-helpdesk #content.site-content > header.entry-header {
display: none !important;
}
@media (max-width: 900px) {
body.cs-helpdesk .entry-content div:has(> a.ix-group) { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 600px) {
body.cs-helpdesk .entry-content div:has(> a.ix-group) { grid-template-columns: repeat(2, 1fr); gap: 12px; }
body.cs-helpdesk a.ix-group { min-height: 96px; padding: 16px 10px; }
}