/* =========================================================
   Cat Corner — WooCommerce Single Product custom styles.
   Loaded only on single product pages (see functions.php).
   NO Tailwind — plain CSS using design tokens below.

   Layout adapted from the Bee it PDP reference, re-skinned to the
   Cat Corner Design System:
     1 Hero (cyan band) · 2 Discover · 3 Editorial · 4 Stamps
     5 Promise · 6 Details (tabs) · 7 CTA
   ========================================================= */

/* ---- Design tokens — Cat Corner Design System ---- */
:root {
	/* Core 4: Electric Cyan primary, Goldenrod CTA, Oatmeal base, Pitch Black text */
	--cc-primary:           #00B4D8;               /* Electric Cyan */
	--cc-primary-hover-bg:  #0090AD;               /* cyan-700 — pressed/hovered primary */
	--cc-primary-hover-ink: #ffffff;
	--cc-on-primary:        #ffffff;
	--cc-cyan-300:          #7FDCEC;               /* soft cyan — highlighter accent */
	--cc-yellow:            #FFC300;               /* Goldenrod — ATC button surface */
	--cc-yellow-hover:      #E0A500;               /* gold-700 — pressed/hovered CTA */
	--cc-charcoal:          #000000;               /* Pitch Black — borders, text */
	--cc-tertiary:          #C0603A;               /* Terracotta — sale badges, urgency */
	--cc-cream:             #F3E9D5;               /* warm editorial surface */
	--cc-surface:           #F8FAFC;               /* Oatmeal base */
	--cc-surface-low:       #F1F5F8;               /* surface-container-low */
	--cc-surface-container: #F1F5F8;
	--cc-on-surface:        #000000;               /* Pitch Black */
	--cc-on-surface-var:    #2A2A2A;               /* ink-soft */
	--cc-outline:           #6B7280;               /* muted */
	--cc-outline-focus:     rgba(0, 180, 216, 0.35); /* cyan focus ring */
	--cc-error:             #ba1a1a;
	--cc-font-display:      'Outfit', system-ui, sans-serif; /* display/headings */
	--cc-font-body:         'Plus Jakarta Sans', system-ui, sans-serif;
	--cc-font-sticker:      'Chewy', cursive;              /* promo/sale stickers ONLY */
	--cc-radius-card:       16px;
	--cc-radius-thumb:      12px;
	--cc-radius-pill:       9999px;
	--cc-container-max:     1320px;
	--cc-px-mobile:         16px;
	--cc-px-desktop:        48px;
}

/* ---- Page wrapper ---- */
.cc-single-product-page {
	font-family: var(--cc-font-body);
	color: var(--cc-on-surface);
	background: var(--cc-surface);
}

/* ---- Shared container ---- */
.cc-sp-container {
	max-width: var(--cc-container-max);
	margin-left:  auto;
	margin-right: auto;
	padding-left:  var(--cc-px-mobile);
	padding-right: var(--cc-px-mobile);
}
.cc-sp-container--narrow {
	max-width: 880px;
}
@media (min-width: 768px) {
	.cc-sp-container {
		padding-left:  40px;
		padding-right: 40px;
	}
}
@media (min-width: 1200px) {
	.cc-sp-container {
		padding-left:  var(--cc-px-desktop);
		padding-right: var(--cc-px-desktop);
	}
}


/* ================================================================
   SECTION 1 — HERO (cyan wavy band)
   ================================================================ */

.cc-pdp-hero {
	position: relative;
	background-color: var(--cc-primary); /* fallback */
	/* Brand cyan depth gradient (soft cyan → electric → deep) + a fine
	   two-tone dot grain — the playful sticker texture that echoes the
	   hero doodles. Black text/breadcrumb still reads on the light top. */
	background-image:
		radial-gradient(rgba(255, 255, 255, 0.16) 1.3px, transparent 1.5px),
		radial-gradient(rgba(0, 70, 90, 0.10) 1.3px, transparent 1.5px),
		linear-gradient(165deg, #7FDCEC 0%, #00B4D8 45%, #0090AD 100%);
	background-size: 26px 26px, 26px 26px, 100% 100%;
	background-position: 0 0, 13px 13px, 0 0;
	padding-top: 52px;
	padding-bottom: 0;
	/* NB: no `overflow: hidden` here — it would break the sticky gallery.
	   The glow ::before is inset:0 so it can't overflow anyway. */
	--cc-hero-mx: 28%;  /* mouse-tracked glow position (JS updates) */
	--cc-hero-my: 30%;
	--cc-hero-mx2: 72%; /* trailing gold glow */
	--cc-hero-my2: 65%;
}

/* Cursor-following glow — two parallax layers behind the hero content.
   JS eases --cc-hero-mx/my each frame; defaults keep it pleasant with JS off. */
.cc-pdp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(46% 52% at var(--cc-hero-mx) var(--cc-hero-my),
			rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0) 62%),
		radial-gradient(40% 46% at var(--cc-hero-mx2) var(--cc-hero-my2),
			rgba(255, 199, 0, 0.22), rgba(255, 199, 0, 0) 60%),
		radial-gradient(60% 70% at 50% 120%,
			rgba(0, 95, 120, 0.28), rgba(0, 95, 120, 0) 70%);
}

/* Lift hero content above the glow layer. */
.cc-pdp-hero > * {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	/* Keep the glow but never let JS move it — handled in JS too. */
	.cc-pdp-hero::before {
		--cc-hero-mx: 30%;
		--cc-hero-my: 28%;
	}
}

/* ---- Breadcrumb (dark ink reads on cyan) ---- */
.cc-sp-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--cc-charcoal);
	margin-bottom: 44px;
}
.cc-sp-breadcrumb a,
.cc-sp-breadcrumb__cats a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--cc-charcoal);
	text-decoration: none;
	transition: color 150ms ease;
}
.cc-sp-breadcrumb a:hover,
.cc-sp-breadcrumb__cats a:hover {
	color: #ffffff;
}
.cc-sp-breadcrumb a .material-symbols-outlined {
	font-size: 16px;
}
.cc-sp-breadcrumb__sep {
	font-size: 14px;
	color: rgba(0, 0, 0, 0.45);
}
.cc-sp-breadcrumb__current {
	color: var(--cc-charcoal);
	font-weight: 700;
}

/* ---- Hero grid: gallery (left) | summary (right) ---- */
.cc-pdp-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	padding-bottom: 56px;
}
@media (min-width: 768px) {
	.cc-pdp-hero__grid {
		grid-template-columns: 1fr 1fr;
		gap: 64px; /* roomier split between gallery and summary */
		align-items: start; /* let the gallery stick while the summary scrolls */
		padding-bottom: 72px;
	}
}


/* ================================================================
   GALLERY — floating product image on the cyan band
   ================================================================ */

.cc-sp-gallery {
	position: relative;
	min-width: 0;
	width: 100%;
}
/* Sticky gallery (desktop) — pinned while the summary scrolls past, releasing
   at the end of the hero. Declared AFTER the base rule above so its
   `position: sticky` isn't overridden by the base `position: relative`.
   top clears the 78px sticky site header (.cc-header) + a little gap. */
@media (min-width: 768px) {
	.cc-sp-gallery {
		position: sticky;
		top: 96px;
		align-self: start;
	}
}

/* woocommerce-layout.css floats .images left at 48%; override so it fills the
   grid cell and reads as a floating card on the cyan band. */
.cc-single-product-page .woocommerce-product-gallery {
	position: relative;
	float: none !important;
	width: 100% !important;
	max-width: 100%;
	opacity: 1 !important; /* WC sets opacity:0 until flexslider inits */
}

.cc-single-product-page .woocommerce-product-gallery__wrapper {
	width: 100%;
}
.cc-single-product-page .woocommerce-product-gallery .flex-viewport {
	width: 100% !important;
}
.cc-single-product-page .woocommerce-product-gallery__image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	display: block;
	/* Gentle, smooth float — replaces the hover-zoom (disabled in functions.php).
	   Makes the transparent product image drift on the cyan band. */
	animation: cc-gallery-float 4.5s ease-in-out infinite;
	will-change: transform;
}
@keyframes cc-gallery-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
	.cc-single-product-page .woocommerce-product-gallery__image img {
		animation: none;
	}
}

/* Thumbnail strip — hidden; replaced by dot nav below */
.cc-single-product-page .flex-control-nav.flex-control-thumbs {
	display: none;
}

/* Dot navigation (FlexSlider paging, shown only when 2+ images exist) */
.cc-single-product-page .flex-control-nav.flex-control-paging {
	display: flex;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}
.cc-single-product-page .flex-control-paging li a {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.2);
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
	transition: background 150ms ease;
}
.cc-single-product-page .flex-control-paging li a.flex-active,
.cc-single-product-page .flex-control-paging li a:hover {
	background: var(--cc-primary);
}

/* Die-cut sale sticker — rendered in the template (functions.php drops the
   default WC sale_flash hook). Positioned over the gallery card corner. */
.cc-sp-sale-badge {
	position: absolute;
	top: -8px;
	left: -8px;
	z-index: 2;
	display: inline-block;
	padding: 5px 16px 7px;
	background: var(--cc-tertiary);
	color: #ffffff;
	font-family: var(--cc-font-sticker);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.01em;
	border: 3px solid #ffffff;            /* die-cut white stroke */
	border-radius: var(--cc-radius-pill);
	transform: rotate(-5deg);             /* playful sticker tilt */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
	pointer-events: none;
}


/* ================================================================
   SUMMARY (on the cyan band)
   ================================================================ */

.cc-sp-summary {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
}

/* ---- Title chip — Goldenrod premium badge ---- */
.cc-sp-title-chip {
	align-self: flex-start;
	background: var(--cc-yellow);
	border: 2.5px solid #000000;
	border-radius: 20px;
	padding: 14px 22px;
	margin-bottom: 20px;
	box-shadow: 5px 5px 0 #000000;
	position: relative;
}
body.single-product .cc-sp-title-chip .product_title.entry-title {
	margin: 0;
}
body.single-product .product_title.entry-title {
	font-family: var(--cc-font-display);
	font-size: clamp(1.4rem, 2.5vw, 2rem);
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #000000;
	text-transform: none !important; /* override Elementor kit-74 h2 uppercase */
}

/* ---- Star rating (dark ink reads on cyan) ---- */
body.single-product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	font-size: 13px;
	color: var(--cc-charcoal);
}
body.single-product .woocommerce-product-rating .star-rating {
	color: var(--cc-charcoal);
}
body.single-product .woocommerce-product-rating .woocommerce-review-link {
	color: var(--cc-charcoal);
	text-decoration: underline dotted;
}
body.single-product .woocommerce-product-rating .woocommerce-review-link:hover {
	color: #ffffff;
}

/* ---- Short description → premium white card floating on the cyan band ---- */
body.single-product .woocommerce-product-details__short-description {
	font-size: 15px;
	line-height: 1.7;
	color: var(--cc-charcoal);
	margin-bottom: 18px;
	background: #ffffff;
	border: 2px solid var(--cc-charcoal);
	border-radius: 18px;
	padding: 22px 24px;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.12);
}
body.single-product .woocommerce-product-details__short-description > :first-child {
	margin-top: 0;
}
body.single-product .woocommerce-product-details__short-description > :last-child {
	margin-bottom: 0;
}
body.single-product .woocommerce-product-details__short-description p {
	margin: 0 0 8px;
}
/* Headings authored inside the short description → brand display font (Outfit).
   !important beats the leftover Elementor kit-74 global heading rule, which
   forces all headings to Chewy + uppercase. Chewy is sticker-accent only. */
body.single-product .woocommerce-product-details__short-description h1,
body.single-product .woocommerce-product-details__short-description h2,
body.single-product .woocommerce-product-details__short-description h3,
body.single-product .woocommerce-product-details__short-description h4 {
	font-family: var(--cc-font-display) !important;
	font-weight: 800 !important;
	text-transform: none !important;
	color: var(--cc-on-surface) !important;
	line-height: 1.08 !important;
	letter-spacing: -0.025em;
	margin: 0 0 14px;
}
body.single-product .woocommerce-product-details__short-description h1,
body.single-product .woocommerce-product-details__short-description h2 {
	font-size: clamp(1.7rem, 3.4vw, 2.3rem) !important; /* punchy hook headline */
	text-wrap: balance;
}
body.single-product .woocommerce-product-details__short-description h3,
body.single-product .woocommerce-product-details__short-description h4 {
	font-size: 1.05rem !important;
}
/* Highlight utility — wrap a key phrase in <span class="cc-hl"> to pop it cyan.
   Reusable in any PDP heading/copy; keeps the rest of the headline black. */
.cc-single-product-page .cc-hl {
	color: var(--cc-primary) !important;
}
/* Benefit list (e.g. "Inside the E-book") → cyan check bullets. */
body.single-product .woocommerce-product-details__short-description ul {
	margin: 0 0 8px;
	padding-left: 0;
	list-style: none;
}
body.single-product .woocommerce-product-details__short-description ul li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 6px;
}
body.single-product .woocommerce-product-details__short-description ul li::before {
	content: "check_circle";
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-feature-settings: 'liga';
	-webkit-font-feature-settings: 'liga';
	position: absolute;
	left: 0;
	top: 2px;
	font-size: 18px;
	line-height: 1;
	color: var(--cc-primary);
}

/* ================================================================
   BUY-BOX — white card floating on cyan (price + selector + ATC)
   ================================================================ */

.cc-sp-buybox {
	background: #ffffff;
	border: 2px solid var(--cc-charcoal);
	border-radius: 18px;
	padding: 20px;
	margin-bottom: 18px;
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.12);
}

/* ---- Price — Plus Jakarta Sans, cyan to signal value ---- */
body.single-product p.price,
body.single-product span.price {
	font-family: var(--cc-font-body);
	font-weight: 700;
	font-size: 28px;
	line-height: 1;
	margin-bottom: 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}
body.single-product p.price ins,
body.single-product span.price ins {
	font-weight: 400;
	text-decoration: none;
	color: var(--cc-primary);
}
body.single-product p.price del,
body.single-product span.price del {
	font-size: 20px;
	color: var(--cc-on-surface-var);
	opacity: 0.65;
}
body.single-product p.price > .woocommerce-Price-amount,
body.single-product span.price > .woocommerce-Price-amount {
	color: var(--cc-primary);
}

/* ---- Shipping reassurance line ---- */
.cc-sp-shipping-note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--cc-on-surface-var);
}
.cc-sp-shipping-note .material-symbols-outlined {
	font-size: 18px;
	color: var(--cc-primary);
	flex-shrink: 0;
}

/* ---- Category eyebrow above the title ---- */
.cc-sp-eyebrow {
	display: inline-block;
	align-self: flex-start;
	margin-bottom: 10px;
	font-family: var(--cc-font-body);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cc-charcoal);
	text-decoration: none;
	border-bottom: 2px solid var(--cc-charcoal);
	padding-bottom: 2px;
	transition: color 150ms ease, border-color 150ms ease;
}
.cc-sp-eyebrow:hover {
	color: #ffffff;
	border-color: #ffffff;
}

/* ---- Price row + discount badge ---- */
.cc-sp-price-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}
.cc-sp-price-row p.price,
.cc-sp-price-row span.price {
	margin-bottom: 0; /* row owns the spacing now */
}
.cc-sp-discount {
	display: inline-flex;
	align-items: center;
	font-family: var(--cc-font-body);
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	color: #ffffff;
	background: var(--cc-tertiary); /* Terracotta = urgency, matches sale sticker */
	border: 2px solid var(--cc-charcoal);
	border-radius: var(--cc-radius-pill);
	padding: 5px 11px;
}

/* ---- Guaranteed safe checkout + payment methods ---- */
.cc-sp-safe {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1.5px dashed rgba(0, 0, 0, 0.18);
}
.cc-sp-safe__title {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--cc-on-surface);
}
.cc-sp-safe__title .material-symbols-outlined {
	font-size: 18px;
	color: var(--cc-primary);
}
.cc-sp-pay {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cc-sp-pay__chip {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 12px;
	font-family: var(--cc-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--cc-on-surface);
	background: var(--cc-surface);
	border: 1.5px solid var(--cc-charcoal);
	border-radius: 8px;
}

/* Neutralise the variations form's own card — the buy-box is the card now */
body.single-product .cc-sp-buybox .variations_form {
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	background: transparent;
}

/* ---- Variations table → flex column ---- */
body.single-product .variations_form .variations {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	margin-bottom: 12px;
}
body.single-product .variations_form .variations tr {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}
body.single-product .variations_form .variations tr:last-child {
	margin-bottom: 0;
}
body.single-product .variations_form .variations td {
	padding: 0;
	display: block;
}
body.single-product .variations_form .variations td.label {
	flex-shrink: 0;
}
body.single-product .variations_form .variations td.value {
	flex: 1;
	min-width: 0;
}
body.single-product .variations_form .variations td.label label {
	font-family: var(--cc-font-body);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cc-on-surface-var);
}

/* Aroma/attribute dropdown */
body.single-product .variations_form .variations td.value select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	padding: 11px 40px 11px 14px;
	background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234b4734' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	border: 2px solid var(--cc-charcoal);
	border-radius: 10px;
	font-family: var(--cc-font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--cc-on-surface);
	cursor: pointer;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
body.single-product .variations_form .variations td.value select:focus {
	outline: none;
	border-color: var(--cc-primary);
	box-shadow: 0 0 0 3px var(--cc-outline-focus);
}

/* Clear variation link */
body.single-product .variations_form .reset_variations {
	display: inline-block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--cc-on-surface-var);
	text-decoration: underline dotted;
}
body.single-product .variations_form .reset_variations:hover {
	color: var(--cc-primary);
}

/* Variation price / availability */
body.single-product .woocommerce-variation-price,
body.single-product .woocommerce-variation-availability {
	margin-bottom: 8px;
	font-size: 14px;
}
body.single-product .woocommerce-variation-price .woocommerce-Price-amount {
	font-family: var(--cc-font-body);
	font-weight: 700;
	font-size: 22px;
	color: var(--cc-primary);
}

/* ---- Quantity + ATC button row ---- */
body.single-product .woocommerce-variation-add-to-cart,
body.single-product form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
}

body.single-product .quantity {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

/* Stepper container — pill shape, primary teal */
.cc-single-product-page .cc-qty-stepper {
	display: inline-flex;
	align-items: center;
	border: 2px solid var(--cc-primary);
	border-radius: 9999px;
	overflow: hidden;
	background: #ffffff;
	flex-shrink: 0;
}
.cc-single-product-page .cc-qty-minus,
.cc-single-product-page .cc-qty-plus {
	width: 40px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	color: var(--cc-primary);
	background: transparent;
	border: none;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease;
	padding: 0;
	box-shadow: none;
}
.cc-single-product-page .cc-qty-minus:hover,
.cc-single-product-page .cc-qty-plus:hover {
	background: var(--cc-primary);
	color: #ffffff;
}
.cc-single-product-page .cc-qty-stepper input.qty {
	width: 40px;
	height: 48px;
	padding: 6px 2px;
	text-align: center;
	font-family: var(--cc-font-body);
	font-size: 16px;
	font-weight: 700;
	color: var(--cc-on-surface);
	background: #ffffff;
	border: none;
	border-left: 1.5px solid rgba(0, 180, 216, 0.3);
	border-right: 1.5px solid rgba(0, 180, 216, 0.3);
	border-radius: 0;
	outline: none;
	-moz-appearance: textfield;
	appearance: textfield;
}
.cc-single-product-page .cc-qty-stepper input.qty::-webkit-outer-spin-button,
.cc-single-product-page .cc-qty-stepper input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ---- Add to cart button — neobrutalist sticker style ---- */
.cc-single-product-page .single_add_to_cart_button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 32px;
	background-color: var(--cc-yellow);
	color: var(--cc-charcoal) !important;
	border: 2px solid var(--cc-charcoal);
	border-radius: 1rem;
	font-family: var(--cc-font-body);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	text-decoration: none !important;
	transition: transform 150ms ease, box-shadow 150ms ease;
	white-space: nowrap;
	box-shadow: none;
	flex: 1;
}
.cc-single-product-page .single_add_to_cart_button.button:hover,
.cc-single-product-page .single_add_to_cart_button.button:focus {
	background-color: var(--cc-yellow);
	color: var(--cc-charcoal) !important;
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 var(--cc-charcoal);
}
.cc-single-product-page .single_add_to_cart_button.button:focus-visible {
	outline: 3px solid var(--cc-outline-focus);
	outline-offset: 2px;
}
.cc-single-product-page .single_add_to_cart_button.button.disabled,
.cc-single-product-page .single_add_to_cart_button.button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ---- Quick-share button beside Add to Cart ----
   Reuses the product-card .cc-pc-share visual (cyan-on-hover neobrutalist
   circle, base CSS from catcorner_product_card_styles()); this modifier makes
   it an inline square sized to sit at the end of the add-to-cart row. */
.cc-single-product-page .cc-sp-cart-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
}
.cc-single-product-page .cc-sp-cart-row > form.cart {
	flex: 1 1 auto;
	min-width: 0;
	margin-top: 0;
}
body.single-product .cc-sp-cart-row form.cart:not(.variations_form) {
	margin-top: 0;
}
.cc-single-product-page .cc-sp-share-cta {
	position: static;
	width: 54px;
	min-width: 54px;
	height: 54px;
	border-radius: 14px;
	align-self: center;
	flex-shrink: 0;
}
.cc-single-product-page .cc-sp-share-cta svg {
	width: 20px;
	height: 20px;
}


/* ================================================================
   SHARE BUTTONS (on the cyan band, under the buy-box)
   ================================================================ */

.cc-sp-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 14px;
}
.cc-sp-share__label {
	font-family: 'Chewy', cursive;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.2;
	color: #000;
}
.cc-sp-share__links {
	display: flex;
	gap: 10px;
}
/* Uniform white "sticker" buttons matching the social icons elsewhere on the
   site (e.g. the Contact page "Ikuti kami" row): white rounded-square, black
   icon, black border, hard offset shadow. They sit on the cyan hero band, so
   hover fills black (not cyan, which would blend into the band). */
.cc-sp-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #fff;
	color: #000;
	text-decoration: none;
	border: 2px solid #000;
	box-shadow: 3px 3px 0 #000;
	transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 180ms ease, background 160ms ease, color 160ms ease;
}
.cc-sp-share__btn:hover {
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 #000;
	background: #000;
	color: #fff;
}
.cc-sp-share__btn:active {
	transform: translate(1px, 1px);
	box-shadow: 1px 1px 0 #000;
}
.cc-sp-share__btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}


/* ================================================================
   WAVE DIVIDER — cyan band → Oatmeal page
   ================================================================ */

.cc-sp-wave {
	line-height: 0;
	overflow: hidden;
	pointer-events: none;
	color: var(--cc-surface); /* drives SVG currentColor fill = Oatmeal */
}
.cc-sp-wave--bottom {
	margin-top: -1px;
}
.cc-sp-wave svg {
	display: block;
	width: 100%;
	height: 60px;
}
@media (min-width: 768px) {
	.cc-sp-wave svg {
		height: 80px;
	}
}


/* ================================================================
   SECTION 2 — DISCOVER ALSO (related products, 4-up)
   ================================================================ */

.cc-pdp-discover {
	background-color: var(--cc-surface);
	padding-top: 52px;
	padding-bottom: 8px;
}

.cc-sp-related .related.products > h2,
.cc-sp-related .related > h2 {
	font-family: var(--cc-font-display);
	font-size: clamp(1.625rem, 3vw, 2.125rem);
	font-weight: 800; /* DS: Outfit 700/800 for section headings */
	color: var(--cc-on-surface);
	letter-spacing: -0.01em;
	margin: 0 0 24px;
	text-transform: none !important;
}

.cc-sp-related .related.products,
.cc-sp-related .related {
	width: 100%;
	display: block;
}
.cc-sp-related .related.products ul.products,
.cc-sp-related ul.products {
	display: grid !important;
	width: 100% !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}
/* WooCommerce adds a clearfix (content:" "; display:table) to ul.products via
   ::before/::after. In a grid container those pseudo-elements become grid items,
   producing phantom empty cells (an empty "card" + a shifted layout). The float
   layout they clear is overridden above, so suppress them. */
.cc-sp-related .related.products ul.products::before,
.cc-sp-related .related.products ul.products::after,
.cc-sp-related ul.products::before,
.cc-sp-related ul.products::after {
	content: none !important;
	display: none !important;
}
@media (min-width: 640px) {
	.cc-sp-related .related.products ul.products,
	.cc-sp-related ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}




/* ================================================================
   SECTION 3 — EDITORIAL (story + Benefits/Ingredients/Directions)
   ================================================================ */

.cc-pdp-editorial {
	background-color: var(--cc-surface);
	padding-top: 40px;
	padding-bottom: 64px;
}

.cc-pdp-editorial__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}
.cc-pdp-highlight {
	display: inline-block;
	font-family: var(--cc-font-body);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cc-charcoal);
	background: var(--cc-cyan-300);      /* soft-cyan highlighter (accent, not CTA) */
	padding: 5px 12px;
	transform: rotate(-1.5deg);
}
.cc-pdp-editorial__doodle {
	font-size: 40px;
	color: var(--cc-primary);
	font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 40;
	transform: rotate(10deg);
	flex-shrink: 0;
}

.cc-pdp-editorial__headline {
	/* !important beats the Elementor kit-74 global h2 rule (Chewy/uppercase),
	   which out-specificities a bare class selector. A heading in Chewy is a bug. */
	font-family: var(--cc-font-display) !important;
	font-weight: 800 !important;
	font-size: clamp(1.75rem, 4vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--cc-charcoal);
	margin: 0 0 28px;
	text-transform: none !important;
}

.cc-pdp-editorial__body {
	font-family: var(--cc-font-body);
	font-size: 16px;
	line-height: 1.8;
	color: var(--cc-on-surface-var);
}
/* Author sub-headings (Benefits / Ingredients / Directions) → cyan eyebrow labels */
.cc-pdp-editorial__body h2,
.cc-pdp-editorial__body h3,
.cc-pdp-editorial__body h4 {
	font-family: var(--cc-font-body) !important;
	font-size: 12px !important;
	font-weight: 800;
	text-transform: uppercase !important;
	letter-spacing: 0.1em;
	color: var(--cc-primary) !important; /* beat kit-74 heading color */
	margin: 32px 0 12px;
}
.cc-pdp-editorial__body p {
	margin: 0 0 16px;
}
.cc-pdp-editorial__body ul,
.cc-pdp-editorial__body ol {
	margin: 0 0 16px;
	padding-left: 20px;
}
.cc-pdp-editorial__body li {
	margin-bottom: 6px;
}
.cc-pdp-editorial__body strong {
	color: var(--cc-on-surface);
}
.cc-pdp-editorial__body a {
	color: var(--cc-primary);
	text-decoration: underline;
}


/* ================================================================
   SECTION 4 — CERTIFICATION STAMPS (die-cut circles)
   ================================================================ */

.cc-pdp-stamps {
	background-color: var(--cc-surface);
	padding-top: 8px;
	padding-bottom: 56px;
}
.cc-pdp-stamps__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cc-pdp-stamp {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 130px;
	text-align: center;
}
.cc-pdp-stamp .material-symbols-outlined {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border: 2.5px solid var(--cc-charcoal);
	border-radius: 50%;
	font-size: 38px;
	color: var(--cc-charcoal); /* black linework reads as the brand ink */
	background: var(--cc-stamp-bg, var(--cc-primary));
	box-shadow: 4px 4px 0 var(--cc-charcoal); /* hard sticker depth = premium */
	transition: transform 180ms ease, box-shadow 180ms ease;
}
/* Cheerful on-brand colors, keyed to the claim so each always wears the same
   color (set in PHP via catcorner_stamp_registry), not its row position. */
.cc-pdp-stamp--cyan .material-symbols-outlined       { --cc-stamp-bg: var(--cc-primary); }
.cc-pdp-stamp--gold .material-symbols-outlined       { --cc-stamp-bg: var(--cc-yellow); }
.cc-pdp-stamp--terracotta .material-symbols-outlined { --cc-stamp-bg: var(--cc-tertiary); }
.cc-pdp-stamp--soft .material-symbols-outlined       { --cc-stamp-bg: var(--cc-cyan-300); }
/* Playful tilt at rest. */
.cc-pdp-stamp:nth-child(odd) .material-symbols-outlined {
	transform: rotate(-5deg);
}
.cc-pdp-stamp:nth-child(even) .material-symbols-outlined {
	transform: rotate(5deg);
}
/* Straighten + lift on hover. */
.cc-pdp-stamp:hover .material-symbols-outlined {
	transform: translateY(-4px) rotate(0deg);
	box-shadow: 6px 7px 0 var(--cc-charcoal);
}
@media (prefers-reduced-motion: reduce) {
	.cc-pdp-stamp .material-symbols-outlined {
		transition: none;
	}
}
.cc-pdp-stamp__label {
	font-family: var(--cc-font-body);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cc-on-surface);
	line-height: 1.3;
}


/* ================================================================
   SECTION 5 — PROMISE (trust band + feature stamp)
   ================================================================ */

.cc-pdp-promise {
	background-color: var(--cc-surface);
	padding-bottom: 64px;
}
.cc-pdp-promise__card {
	position: relative;
	background: var(--cc-cream);
	border: 2px solid var(--cc-charcoal);
	border-radius: 24px;
	padding: 40px;
	box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.12);
}
.cc-pdp-promise__title {
	font-family: var(--cc-font-display) !important; /* beat kit-74 global h2 (Chewy) */
	font-weight: 800 !important;
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--cc-charcoal);
	margin: 0 0 10px;
	text-transform: none !important;
}
.cc-pdp-promise__text {
	font-family: var(--cc-font-body);
	font-size: 15px;
	line-height: 1.7;
	color: var(--cc-on-surface-var);
	max-width: 620px;
	margin: 0 0 28px;
}
.cc-pdp-promise__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 768px) {
	.cc-pdp-promise__list {
		grid-template-columns: repeat(3, 1fr);
		gap: 28px;
	}
}
.cc-pdp-promise__item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	min-width: 0;
}
.cc-pdp-promise__icon {
	font-size: 30px;
	line-height: 1;
	color: var(--cc-primary);
	flex-shrink: 0;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 30;
}
.cc-pdp-promise__item-title {
	display: block;
	font-family: var(--cc-font-body);
	font-size: 14px;
	font-weight: 800;
	color: var(--cc-on-surface);
	margin-bottom: 4px;
}
.cc-pdp-promise__item-desc {
	font-family: var(--cc-font-body);
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--cc-on-surface-var);
	margin: 0;
}

/* Feature stamp — die-cut cyan circle peeled onto the card */
.cc-pdp-promise__stamp {
	position: absolute;
	top: -26px;
	right: 28px;
	width: 98px;
	height: 98px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--cc-primary);
	color: #ffffff;
	border: 3px solid #ffffff;
	border-radius: 50%;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.20);
	transform: rotate(-8deg);
	text-align: center;
}
.cc-pdp-promise__stamp-top,
.cc-pdp-promise__stamp-bottom {
	font-family: var(--cc-font-body);
	font-size: 9px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.3;
}
.cc-pdp-promise__stamp-big {
	font-family: var(--cc-font-display);
	font-weight: 800;
	font-size: 26px;
	line-height: 1;
	margin: 1px 0;
}


/* ================================================================
   SECTION 6 — DETAILS (Additional Information + Reviews tabs)
   ================================================================ */

.cc-pdp-details {
	background-color: var(--cc-surface-container);
	padding-top: 56px;
	padding-bottom: 40px;
}

.cc-sp-tabs .woocommerce-tabs {
	min-width: 0;
	width: 100%;
}
/* Tabs — segmented pill control floating above the panel */
.cc-sp-tabs .wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}
.cc-sp-tabs .wc-tabs li,
.cc-sp-tabs .wc-tabs li.active {
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
	overflow: visible;
	position: relative;
}
/* Kill WooCommerce's decorative tab-corner pseudo-elements */
.cc-sp-tabs .wc-tabs li::before,
.cc-sp-tabs .wc-tabs li::after {
	content: none !important;
	display: none !important;
	border: 0 !important;
	box-shadow: none !important;
}
/* Each tab is a standalone button (neobrutalist: outline + hard offset shadow
   that lifts on hover and presses on click). */
.cc-sp-tabs .wc-tabs li a {
	display: inline-block;
	padding: 11px 24px !important;
	font-family: var(--cc-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--cc-on-surface);
	background: #ffffff;
	border: 2px solid var(--cc-charcoal) !important;
	border-radius: 12px;
	box-shadow: 3px 3px 0 var(--cc-charcoal);
	text-decoration: none;
	transition: transform 120ms ease, box-shadow 120ms ease, background 160ms ease, color 160ms ease;
}
.cc-sp-tabs .wc-tabs li a:hover {
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 var(--cc-charcoal);
}
.cc-sp-tabs .wc-tabs li a:active {
	transform: translate(1px, 1px);
	box-shadow: 1px 1px 0 var(--cc-charcoal);
}
.cc-sp-tabs .wc-tabs li.active a {
	background: var(--cc-primary);
	color: var(--cc-on-primary);
}

/* Panel — premium card: bold outline + hard offset + gradient accent ribbon */
.cc-sp-tabs .woocommerce-Tabs-panel {
	margin-top: 0;
	padding: 34px 38px !important;
	background: #ffffff;
	border: 2px solid var(--cc-charcoal);
	border-radius: 20px;
	box-shadow: 6px 6px 0 var(--cc-charcoal);
	position: relative;
	overflow: hidden;
	word-break: break-word;
	max-width: 100%;
	box-sizing: border-box;
}
.cc-sp-tabs .woocommerce-Tabs-panel::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	background: linear-gradient(90deg, var(--cc-primary), var(--cc-cyan-300) 45%, var(--cc-yellow));
}
.cc-sp-tabs .woocommerce-Tabs-panel h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--cc-font-display) !important;
	font-size: 20px !important;
	font-weight: 800;
	text-transform: none !important;
	letter-spacing: -0.01em;
	color: var(--cc-on-surface);
	margin: 4px 0 24px;
}
.cc-sp-tabs .woocommerce-Tabs-panel--additional_information h2::before {
	content: 'description';
	font-family: 'Material Symbols Outlined';
	font-size: 24px;
	font-weight: normal;
	color: var(--cc-primary);
	line-height: 1;
}
.cc-sp-tabs .woocommerce-Tabs-panel p,
.cc-sp-tabs .woocommerce-Tabs-panel li {
	font-size: 14px;
	line-height: 1.7;
	color: var(--cc-on-surface-var);
}

/* Additional info — borderless spec rows with icon badges + hover */
.cc-sp-tabs .shop_attributes {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	font-family: var(--cc-font-body);
}
.cc-sp-tabs .shop_attributes tr {
	border: 0;
	border-bottom: 1px solid #ECEFF3;
	transition: background 160ms ease;
}
.cc-sp-tabs .shop_attributes tr:last-child { border-bottom: 0; }
.cc-sp-tabs .shop_attributes tr:hover { background: var(--cc-surface-low); }
.cc-sp-tabs .shop_attributes th,
.cc-sp-tabs .shop_attributes td {
	border: 0;
	padding: 16px 14px;
	text-align: left;
	vertical-align: middle;
	background: transparent;
}
.cc-sp-tabs .shop_attributes th {
	width: 34%;
	min-width: 160px;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cc-on-surface);
}
/* Icon badge before each attribute label (Material Symbols ligatures) */
.cc-sp-tabs .shop_attributes th::before {
	content: 'label';
	font-family: 'Material Symbols Outlined';
	font-size: 20px;
	font-weight: normal;
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin-right: 12px;
	vertical-align: middle;
	color: var(--cc-primary);
	background: rgba(0, 180, 216, 0.10);
	border-radius: 11px;
	transition: transform 160ms ease, background 160ms ease;
}
.cc-sp-tabs .shop_attributes tr:hover th::before {
	transform: scale(1.08) rotate(-4deg);
	background: rgba(0, 180, 216, 0.18);
}
.cc-sp-tabs .shop_attributes tr.woocommerce-product-attributes-item--weight th::before { content: 'monitor_weight'; }
.cc-sp-tabs .shop_attributes tr.woocommerce-product-attributes-item--dimensions th::before { content: 'straighten'; }
.cc-sp-tabs .shop_attributes tr[class*="--attribute_"] th::before { content: 'sell'; }
.cc-sp-tabs .shop_attributes td {
	font-size: 15px;
	font-weight: 500;
	color: var(--cc-on-surface-var);
}
.cc-sp-tabs .shop_attributes td p { margin: 0; }

/* Attribute values rendered as interactive chips (built in single-product.js) */
.cc-sp-tabs .cc-attr-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}
.cc-sp-tabs .cc-attr-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	font-family: var(--cc-font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--cc-on-surface);
	background: var(--cc-surface-low);
	border: 1.5px solid var(--cc-charcoal);
	border-radius: var(--cc-radius-pill);
	text-decoration: none;
	cursor: default;
	transition: transform 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.cc-sp-tabs .cc-attr-chip:hover {
	transform: translateY(-2px);
	color: var(--cc-on-primary);
	background: var(--cc-primary);
	border-color: var(--cc-primary);
	box-shadow: 0 4px 10px rgba(0, 180, 216, 0.35);
}

/* Reviews */
.cc-sp-tabs #reviews #comments ol.commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cc-sp-tabs #reviews #comments .comment_container {
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
}
.cc-sp-tabs #reviews #comments .comment-text {
	flex: 1;
}
.cc-sp-tabs #reviews #reply-title {
	font-family: var(--cc-font-body);
	font-size: 16px;
	font-weight: 700;
}
.cc-sp-tabs #reviews #review_form .comment-form-rating label,
.cc-sp-tabs #reviews #review_form label {
	font-size: 13px;
	font-weight: 700;
}
.cc-sp-tabs #reviews #review_form input[type="text"],
.cc-sp-tabs #reviews #review_form input[type="email"],
.cc-sp-tabs #reviews #review_form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 2px solid var(--cc-outline);
	border-radius: 8px;
	font-family: var(--cc-font-body);
	font-size: 14px;
	color: var(--cc-on-surface);
	background: #ffffff;
	transition: border-color 150ms ease;
}
.cc-sp-tabs #reviews #review_form input:focus,
.cc-sp-tabs #reviews #review_form textarea:focus {
	outline: none;
	border-color: var(--cc-primary);
	box-shadow: 0 0 0 3px var(--cc-outline-focus);
}
.cc-sp-tabs #reviews #review_form .form-submit input[type="submit"] {
	padding: 10px 24px;
	background: var(--cc-primary);
	color: var(--cc-on-primary);
	border: none;
	border-radius: var(--cc-radius-pill);
	font-family: var(--cc-font-body);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background 150ms ease;
}
.cc-sp-tabs #reviews #review_form .form-submit input[type="submit"]:hover {
	background: var(--cc-primary-hover-bg);
	color: var(--cc-primary-hover-ink);
}


/* ================================================================
   SECTION 7 — CTA (shop button)
   ================================================================ */

.cc-pdp-cta {
	background-color: var(--cc-surface-container);
	padding-top: 48px;
	padding-bottom: 72px;
	text-align: center;
}
.cc-pdp-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 36px;
	background: var(--cc-yellow);
	color: var(--cc-charcoal);
	border: 2px solid var(--cc-charcoal);
	border-radius: var(--cc-radius-pill);
	font-family: var(--cc-font-body);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-decoration: none;
	box-shadow: 4px 4px 0 var(--cc-charcoal);
	transition: transform 150ms ease, box-shadow 150ms ease;
}
.cc-pdp-cta__btn:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--cc-charcoal);
	color: var(--cc-charcoal);
}
.cc-pdp-cta__btn .material-symbols-outlined {
	font-size: 20px;
}


/* ================================================================
   WOOCOMMERCE NOTICES
   ================================================================ */

.cc-single-product-page .woocommerce-message,
.cc-single-product-page .woocommerce-info,
.cc-single-product-page .woocommerce-error {
	list-style: none;
	padding: 14px 18px;
	margin: 0 0 20px;
	border-radius: 10px;
	border: 2px solid var(--cc-outline);
	background: var(--cc-surface-low);
	font-size: 14px;
	font-weight: 500;
	color: var(--cc-on-surface);
}
.cc-single-product-page .woocommerce-message {
	border-color: rgba(0, 104, 119, 0.5);
	background: #e6f4f6;
}
.cc-single-product-page .woocommerce-error {
	border-color: rgba(186, 26, 26, 0.4);
	background: #ffdad6;
	color: var(--cc-error);
}


/* ================================================================
   ELEMENTOR OVERRIDES (lingering global styles before Pro removal)
   ================================================================ */

.cc-single-product-page a:hover {
	text-decoration: none;
}
.cc-single-product-page .variations_form .single_add_to_cart_button {
	border-color: var(--cc-charcoal) !important;
}
.cc-single-product-page button.single_add_to_cart_button,
.cc-single-product-page a.single_add_to_cart_button {
	background-color: var(--cc-yellow) !important;
	color: var(--cc-charcoal) !important;
	border: 2px solid var(--cc-charcoal) !important;
}
.cc-single-product-page button.single_add_to_cart_button:hover,
.cc-single-product-page a.single_add_to_cart_button:hover {
	background-color: var(--cc-yellow) !important;
	color: var(--cc-charcoal) !important;
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 var(--cc-charcoal);
}


/* ================================================================
   MOBILE SPECIFICS
   ================================================================ */

@media (max-width: 767px) {
	.cc-pdp-hero {
		padding-top: 20px;
	}
	.cc-pdp-hero__grid {
		padding-bottom: 36px;
		gap: 24px;
	}
	body.single-product p.price,
	body.single-product span.price {
		font-size: 24px;
	}

	.cc-pdp-discover {
		padding-top: 40px;
	}
	.cc-pdp-editorial {
		padding-top: 32px;
		padding-bottom: 48px;
	}

	.cc-pdp-stamp {
		width: 108px;
	}
	.cc-pdp-stamp .material-symbols-outlined {
		width: 72px;
		height: 72px;
		font-size: 32px;
	}

	.cc-pdp-promise__card {
		padding: 28px 20px;
	}
	.cc-pdp-promise__stamp {
		width: 76px;
		height: 76px;
		top: -18px;
		right: 16px;
	}
	.cc-pdp-promise__stamp-big {
		font-size: 20px;
	}

	.cc-pdp-details {
		padding-top: 40px;
		padding-bottom: 32px;
	}
	.cc-sp-tabs .wc-tabs {
		display: flex;
		width: 100%;
	}
	.cc-sp-tabs .wc-tabs li { flex: 1 1 auto; }
	.cc-sp-tabs .wc-tabs li a {
		padding: 9px 14px;
		font-size: 13px;
		text-align: center;
	}
	.cc-sp-tabs .woocommerce-Tabs-panel {
		padding: 24px 18px !important;
		box-shadow: 4px 4px 0 var(--cc-charcoal);
	}
	/* Stack each spec into label-over-value on narrow screens */
	.cc-sp-tabs .shop_attributes tr,
	.cc-sp-tabs .shop_attributes th,
	.cc-sp-tabs .shop_attributes td {
		display: block;
		width: auto;
	}
	.cc-sp-tabs .shop_attributes th {
		min-width: 0;
		padding: 16px 6px 6px;
	}
	.cc-sp-tabs .shop_attributes td {
		padding: 0 6px 18px 56px;
	}
	.cc-pdp-cta {
		padding-bottom: 56px;
	}
}

/* ============================================================
   Sticky mobile add-to-cart bar (.cc-sp-sticky)
   Hidden on desktop; shown on mobile only once JS adds .is-visible
   (fired when the buy-box add-to-cart scrolls out of view).
   ============================================================ */
.cc-sp-sticky {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45; /* above the floating WhatsApp button (z-40) */
	align-items: center;
	gap: 12px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: #fff;
	border-top: 2px solid #000;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}
.cc-sp-sticky.is-visible {
	/* Revealed by JS — but still mobile-only via the media query below. */
}
.cc-sp-sticky__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}
.cc-sp-sticky__name {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #2A2A2A;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cc-sp-sticky__price {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #00B4D8;
	line-height: 1.2;
}
.cc-sp-sticky__price del { color: #9CA3AF; font-weight: 400; font-size: 13px; margin-right: 4px; }
.cc-sp-sticky__price ins { text-decoration: none; }
.cc-sp-sticky__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-shrink: 0;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #000;
	background: #FFC300;
	padding: 12px 22px;
	border: 2px solid #000;
	border-radius: 100px;
	box-shadow: 3px 3px 0 #000;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.18s ease;
}
.cc-sp-sticky__btn:active {
	transform: translateY(1px);
	box-shadow: 1px 1px 0 #000;
}
.cc-sp-sticky__btn .material-symbols-outlined { font-size: 20px; }

/* Mobile only: reveal the bar when JS has flagged it visible. */
@media (max-width: 768px) {
	.cc-sp-sticky.is-visible { display: flex; }
}

/* ============================================================
   Baca Juga — PDP internal links to blog guides + kalkulator
   ============================================================ */
.cc-pdp-reads { padding: 8px 0 48px; }
.cc-pdp-reads__title {
	font-family: 'Outfit', sans-serif;
	font-size: 24px;
	font-weight: 800;
	color: #000;
	margin: 0 0 22px;
}
.cc-pdp-reads__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.cc-pdp-read {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 2px solid #000;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 3px 3px 0 #000;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cc-pdp-read:hover { transform: translateY(-3px); box-shadow: 5px 5px 0 #000; }
.cc-pdp-read__media { display: block; aspect-ratio: 16 / 10; background: #D6F2F8; overflow: hidden; }
.cc-pdp-read__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-pdp-read__body { padding: 14px 16px; }
.cc-pdp-read__label {
	display: inline-block;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	color: #00B4D8; margin-bottom: 6px;
}
.cc-pdp-read__t {
	display: block;
	font-family: 'Outfit', sans-serif;
	font-size: 16px; font-weight: 700; line-height: 1.3; color: #000;
}
.cc-pdp-reads__calc {
	display: flex; align-items: center; gap: 10px;
	margin-top: 20px; padding: 14px 20px;
	background: #00B4D8; color: #000;
	font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15px;
	border: 2px solid #000; border-radius: 100px; box-shadow: 3px 3px 0 #000;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cc-pdp-reads__calc:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #000; }
.cc-pdp-reads__calc .material-symbols-outlined:last-child { margin-left: auto; }
@media (max-width: 760px) {
	.cc-pdp-reads__grid { grid-template-columns: 1fr; }
}