/* ==========================================================================
   Yupoo Catalog — Frontend Styles
   ========================================================================== */

:root {
	--yp-primary:    #1a73e8;
	--yp-primary-dk: #1557b0;
	--yp-bg:         #ffffff;
	--yp-bg-light:   #f8f9fa;
	--yp-text:       #1d2327;
	--yp-text-muted: #6b7280;
	--yp-border:     #e5e7eb;
	--yp-shadow:     0 2px 8px rgba(0, 0, 0, .08);
	--yp-radius:     6px;
	--yp-spacing:    20px;
	--yp-nav-h:      64px;
}

*,
*::before,
*::after { box-sizing: border-box; }

/* Always reserve scrollbar space so the layout doesn't shift between pages. */
html { scrollbar-gutter: stable; }

/* --------------------------------------------------------------------------
   Hide the theme's header on catalog pages — we use top-navigation.php instead.
   Targets Astra (#masthead) and any theme using .site-header.
   -------------------------------------------------------------------------- */

/* .yp-catalog-page #masthead, */
/* .yp-catalog-page .site-header, */
/* .yp-catalog-page .ast-above-header-wrap,
.yp-catalog-page .ast-header-wrap,
.yp-catalog-page .ast-main-header-wrap { display: none !important; } */

/* Remove the top-padding Astra adds to offset its sticky header */
.yp-catalog-page .ast-above-header-section,
.yp-catalog-page #ast-fixed-header { display: none !important; }

/* --------------------------------------------------------------------------
   Astra theme reset — prevent .entry-content a from bleeding into plugin UI
   -------------------------------------------------------------------------- */
.yp-header a,
.yp-header a:hover,
.yp-header a:focus,
.yp-nav-list a,
.yp-nav-list a:focus,
.yp-nav-list li:focus,
.yp-nav-list a:hover,
.yp-homepage-wrap a,
.yp-page-wrap a,
.yp-product-card a,
.yp-card-link,
.yp-card-link:hover,
.yp-cat-card,
.yp-cat-card:hover,
.yp-sidebar-cats a,
.yp-sidebar-cats a:hover,
.yp-breadcrumb a,
.yp-breadcrumb a:hover,
.yp-cat-tag,
.yp-view-all,
.yp-pagination a,
.yp-pagination .page-numbers {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.yp-page-wrap,
.yp-homepage-wrap { 
	background: var(--yp-bg);
	width: 	100%;
 }

.yp-container {
	max-width: 1440px;
	margin:    0 auto;
	padding:   0 var(--yp-spacing) var(--yp-spacing);
}

.yp-catalog-layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 32px;
	padding-top: 24px;
}

/* --------------------------------------------------------------------------
   Header  (3-row Yupoo-style layout)
   -------------------------------------------------------------------------- */

:root {
	--yp-green:      #25a244;
	--yp-green-dk:   #1d8a38;
	--yp-header-bg:  #f5f5f5;   /* light gray — matches Yupoo.store reference */
}

.yp-header {
	background: var(--yp-header-bg);
	width:      100%;
	position:   sticky;
	top:        0;
	z-index:    100;
	/* box-shadow: 0 2px 6px rgba(0,0,0,.08); */
}

/* Shared inner wrapper — full-width background, centred content */
.yp-header-inner {
	width:       100%;
	max-width:   1440px;
	margin:      0 auto;
	padding:     0 24px;
	display:     flex;
	align-items: center;
}

/* ── Row 1: brand + search ─────────────────────────────────────────────── */

.yp-header-top {
	background:    var(--yp-header-bg);
	width:         100%;
	/* border-bottom: 1px solid #e0e0e0; */
}

.yp-header-top .yp-header-inner {
	padding-top:    40px;
	padding-bottom: 16px;
	justify-content: space-between;
	gap:            20px;
}

.yp-brand {
	font-size:       1.3rem;
	font-weight:     700;
	color:           var(--yp-text);
	text-decoration: none;
	white-space:     nowrap;
	flex-shrink:     0;
}

.yp-brand img { height: 44px; width: auto; }

/* Search bar */
.yp-search-form {
	display:       flex;
	border:        1px solid var(--yp-green);
	border-radius: 50px;
	overflow:      hidden;
	width:         380px;
	flex-shrink:   0;
	background:    #fff;
}

.yp-search-input {
	flex:       1;
	min-width:  0;
	border:     none;
	outline:    none;
	padding:    9px 14px;
	font-size:  .875rem;
	color:      var(--yp-text);
	background: transparent;
}

.yp-search-input,
.yp-search-input:focus,
.yp-search-input:active { 
	border: none !important;
}

.yp-search-btn {
	background:    var(--yp-green);
	color:         #fff;
	border:        none;
	padding:       9px 22px;
	font-size:     .875rem;
	font-weight:   600;
	cursor:        pointer;
	white-space:   nowrap;
	transition:    background .15s;
	border-radius: 0 50px 50px 0;
	flex-shrink:   0;
}

.yp-search-btn:hover { background: var(--yp-green-dk); }

/* ── Row 2: navigation ──────────────────────────────────────────────────── */

.yp-header-nav-row {
	background:    var(--yp-header-bg);
	width:         100%;
	border-bottom: 1px solid #e0e0e0;
}

.yp-header-nav-row .yp-header-inner {
	padding-top:    0;
	padding-bottom: 0;
	justify-content: space-between;
}

.yp-header-nav { flex: 1; }

.yp-nav-list {
	display:    flex;
	flex-wrap:  wrap;
	list-style: none;
	margin:     0;
	padding:    0;
}

.yp-nav-list > li > a {
	display:         block;
	padding:         13px 0;
	margin-right:    2em;
	font-size:       .875rem;
	font-weight:     500;
	color:           var(--yp-text);
	text-decoration: none;
	border-bottom:   2px solid transparent;
	transition:      color .15s, border-color .15s;
	white-space:     nowrap;
	outline:         none;  /* remove browser focus ring on mouse click */
}

.yp-nav-list > li > a:hover,
.yp-nav-list > li.current-menu-item > a {
	color:        var(--yp-green);
	border-color: var(--yp-green);
}

/* Dropdown */
.yp-nav-list .menu-item-has-children { position: relative; }

.yp-nav-list .sub-menu {
	display:       none;
	position:      absolute;
	top:           calc(100% + 1px);
	left:          0;
	background:    var(--yp-bg);
	border:        1px solid var(--yp-border);
	border-radius: var(--yp-radius);
	box-shadow:    0 4px 16px rgba(0,0,0,.1);
	min-width:     200px;
	padding:       6px 0;
	z-index:       200;
	list-style:    none;
	margin:        0;
}

.yp-nav-list .menu-item-has-children:hover .sub-menu,
.yp-nav-list .menu-item-has-children:focus-within .sub-menu { display: block; }

.yp-nav-list .sub-menu a {
	display:         block;
	padding:         9px 18px;
	font-size:       .82rem;
	color:           var(--yp-text);
	text-decoration: none;
	transition:      background .1s, color .1s;
}

.yp-nav-list .sub-menu a:hover { background: var(--yp-bg-light); color: var(--yp-green); }

/* Hamburger */
.yp-hamburger {
	display:        none;
	flex-direction: column;
	gap:            5px;
	background:     none;
	border:         none;
	cursor:         pointer;
	padding:        8px;
	flex-shrink:    0;
}

.yp-hamburger span {
	display:    block;
	width:      24px;
	height:     2px;
	background: var(--yp-text);
	transition: transform .2s, opacity .2s;
}

/* ── Row 3: tagline strip ───────────────────────────────────────────────── */

.yp-header-tagline {
	background:    #f7f7f7;
	/* border-bottom: 1px solid #ddd; */
	text-align:    center;
	padding:       20px 24px;
	width:         100%;
}

.yp-header-tagline p {
	margin:    0;
	font-size: .82rem;
	color:     #555;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.yp-sidebar {
	position: sticky;
	top:      calc(var(--yp-nav-h) + 16px);
	height:   fit-content;
}

.yp-sidebar-heading {
	font-size:     .7rem;
	font-weight:   700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color:          var(--yp-text-muted);
	margin:         0 0 12px;
}

.yp-cat-group { border-bottom: 1px solid var(--yp-border); }

.yp-cat-group-cb { display: none; }

.yp-sidebar-cats .yp-cat-group-header {
	display:     flex !important;
	align-items: center;
}

.yp-sidebar-cats .yp-cat-group-link {
	flex:            1;
	padding:         10px 0;
	font-weight:     600;
	font-size:       .85rem;
	color:           var(--yp-text) !important;
	text-decoration: none !important;
	transition:      color .15s;
}

.yp-sidebar-cats .yp-cat-group-link:hover,
.yp-sidebar-cats .yp-cat-group-link.is-current { color: var(--yp-primary) !important; }

.yp-sidebar-cats .yp-cat-group-toggle {
	padding:     10px 0 10px 14px;
	cursor:      pointer;
	user-select: none;
	flex-shrink: 0;
}

.yp-toggle-icon {
	display: block;
	width:  10px;
	height: 10px;
	border-right:  2px solid var(--yp-text-muted);
	border-bottom: 2px solid var(--yp-text-muted);
	transform:     rotate(45deg);
	transition:    transform .2s;
}

.yp-cat-group-cb:checked ~ .yp-cat-group-list { display: block; }
.yp-cat-group-cb:checked ~ .yp-sidebar-cats .yp-cat-group-header .yp-toggle-icon,
.yp-cat-group-cb:checked ~ .yp-cat-group-header .yp-toggle-icon { transform: rotate(-135deg); }

.yp-cat-group-list {
	display:     none;
	list-style:  none;
	margin:      0 0 8px;
	padding:     0 0 0 8px;
}

/* Dropdown is controlled by the checkbox state only.
   The .is-open class on the parent is set when on a category page (so the relevant group starts open
   via the checkbox being :checked) — but the user can still toggle it closed. */

.yp-cat-group-list a {
	display:         flex;
	justify-content: space-between;
	padding:         5px 0;
	font-size:       .85rem;
	color:           var(--yp-text-muted);
	text-decoration: none;
	transition:      color .15s;
}

.yp-cat-group-list a:hover,
.yp-cat-group-list .current-cat a { color: var(--yp-primary); }

.yp-cat-count { font-size: .75rem; }

/* --------------------------------------------------------------------------
   Product grid
   -------------------------------------------------------------------------- */

.yp-grid {
	display: grid;
	gap:     var(--yp-spacing);
}

.yp-grid-4 { grid-template-columns: repeat(4, 1fr); }
.yp-grid-8 { grid-template-columns: repeat(8, 1fr); gap: 12px; }

/* --------------------------------------------------------------------------
   Product card  (album style — image + count badge + swatches + title)
   -------------------------------------------------------------------------- */

.yp-product-card {
	border-radius: var(--yp-radius);
	overflow:      visible;
	background:    var(--yp-bg);
	transition:    transform .2s, box-shadow .2s;
}

.yp-product-card:hover { transform: translateY(-2px); box-shadow: var(--yp-shadow); }

.yp-card-link { text-decoration: none; color: inherit; display: block; }

/* Main image area */
.yp-card-image {
	position:     relative;
	aspect-ratio: 1 / 1;
	overflow:     hidden;
	background:   var(--yp-bg-light);
	border:       1px solid var(--yp-border);
	/* border-radius: var(--yp-radius); */
}

.yp-card-image img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform .3s;
	display:    block;
}

.yp-product-card:hover .yp-card-image img { transform: scale(1.05); }

/* Image count badge — bottom right corner */
.yp-img-count {
	position:      absolute;
	bottom:        6px;
	right:         6px;
	background:    rgba(255,255,255,.92);
	color:         var(--yp-text);
	font-size:     .72rem;
	font-weight:   600;
	line-height:   1;
	padding:       3px 6px;
	border-radius: 3px;
	min-width:     20px;
	text-align:    center;
}

/* Non-interactive swatch strip — hidden (album, all-cats, taxonomy pages) */
.yp-card-swatches { display: none; }

/* Interactive swatch strip — homepage cards only */
.yp-swatches-interactive {
	display:   flex;
	gap:       5px;
	margin:    5px 0 3px;
	flex-wrap: nowrap;
	overflow:  hidden;
}

.yp-swatch {
	width:         36px;
	height:        36px;
	object-fit:    cover;
	border:        2px solid transparent;
	border-radius: 2px;
	flex-shrink:   0;
	cursor:        pointer;
	transition:    border-color .15s;
}

.yp-swatch.is-active { border-color: var(--yp-green); }
.yp-swatch:hover     { border-color: #aaa; }

/* Title link outside the image <a> */
.yp-card-title-link {
	text-decoration: none;
	display:         block;
	color:           inherit;
}

/* Title */
.yp-card-body { padding: 2px 5px 0; }

.yp-card-title {
	font-size:   12px;
	font-weight: 500;
	margin:      .5em 0;
	line-height: 1.3;
	max-height:  2.5em;
	overflow:    hidden;
	color:       var(--yp-text);
}

.yp-no-image {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
	height:          100%;
	color:           var(--yp-text-muted);
	font-size:       1.5rem;
	font-weight:     700;
}

/* --------------------------------------------------------------------------
   Homepage sections
   -------------------------------------------------------------------------- */

.yp-hp-container { padding-top: 24px; }

.yp-hp-section { margin-bottom: 40px; }

.yp-hp-section-header {
	display:         flex;
	align-items:     baseline;
	justify-content: space-between;
	margin-bottom:   14px;
}

.yp-hp-heading {
	margin:        0;
	font-size:     1.1rem;
	font-weight:   700;
	color:         var(--yp-text);
	padding-left:  12px;
	border-left:   4px solid var(--yp-green);
	line-height:   1.3;
}

/* --------------------------------------------------------------------------
   All Categories page — category cards grid
   -------------------------------------------------------------------------- */

.yp-cat-section { margin-bottom: 36px; }

.yp-cat-cards-grid {
	display:               grid;
	grid-template-columns: repeat(6, 1fr);
	gap:                   12px;
}

.yp-cat-card { text-decoration: none; color: inherit; display: block; }

.yp-cat-card-img {
	position:      relative;
	aspect-ratio:  1;
	overflow:      hidden;
	background:    var(--yp-bg-light);
	border:        1px solid var(--yp-border);
	border-radius: var(--yp-radius);
}

.yp-cat-card-img img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .3s;
}

.yp-cat-card:hover .yp-cat-card-img img { transform: scale(1.05); }

.yp-cat-card-name {
	margin:    5px 0 0;
	font-size: .78rem;
	font-weight: 500;
	color:     var(--yp-text);
	text-align: center;
}

/* Down arrow on "All Categories" nav item */
.yp-nav-arrow { font-size: .65rem; margin-left: 4px; vertical-align: middle; }

/* ==========================================================================
   Single product page — Yupoo.store style
   ========================================================================== */

/* Breadcrumb */
.yp-breadcrumb {
	display:     flex;
	align-items: center;
	gap:         6px;
	padding:     14px 0 10px;
	font-size:   .82rem;
	color:       var(--yp-text-muted);
}
.yp-breadcrumb a { color: var(--yp-text-muted); text-decoration: none; }
.yp-breadcrumb a:hover { color: var(--yp-green); }

/* ── Header section: small thumb + info ── */

.yp-detail-header {
	display:   flex;
	gap:       24px;
	padding:   16px 0 20px;
	align-items: flex-start;
}

.yp-detail-thumb {
	flex-shrink: 0;
	width:       140px;
}

.yp-detail-thumb img {
	width:         100%;
	aspect-ratio:  1;
	object-fit:    cover;
	border:        1px solid var(--yp-border);
	border-radius: var(--yp-radius);
	display:       block;
}

.yp-detail-info { flex: 1; min-width: 0; }

.yp-detail-title {
	font-size:   1.2rem;
	font-weight: 700;
	margin:      0 0 10px;
	line-height: 1.4;
	color:       var(--yp-text);
	display:     flex;
	align-items: baseline;
	gap:         10px;
	flex-wrap:   wrap;
}

.yp-detail-count {
	font-size:   1rem;
	font-weight: 400;
	color:       var(--yp-text-muted);
}

.yp-detail-description {
	font-size:   .85rem;
	line-height: 1.7;
	color:       var(--yp-text);
	max-height:  200px;
	overflow-y:  auto;
}

/* ── Image gallery row ── */

.yp-detail-gallery {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap:                   20px;
	margin-top:            16px;
	padding-bottom:        24px;
}

.yp-gallery-item {
	cursor:  pointer;
	display: flex;
	flex-direction: column;
}

.yp-gallery-item img {
	width:         100%;
	aspect-ratio:  1;
	object-fit:    cover;
	border:        1px solid var(--yp-border);
	border-radius: 3px;
	display:       block;
	transition:    opacity .15s;
}

.yp-gallery-item:hover img { opacity: .85; }
.yp-gallery-item:focus     { outline: 2px solid var(--yp-green); border-radius: 3px; }

.yp-gallery-fname {
	display:       block;
	font-size:     .72rem;
	color:         var(--yp-text-muted);
	margin-top:    4px;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

/* ==========================================================================
   Lightbox
   ========================================================================== */

.yp-lightbox {
	display:         none;
	position:        fixed;
	inset:           0;
	background:      rgba(0,0,0,.92);
	z-index:         9999;
	align-items:     center;
	justify-content: center;
	flex-direction:  row;
}

.yp-lightbox.is-open { display: flex; }

.yp-lb-stage {
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex:            1;
	max-height:      90vh;
	padding:         0 16px;
}

.yp-lb-stage img {
	max-width:  100%;
	max-height: 85vh;
	object-fit: contain;
	display:    block;
	border-radius: 3px;
	transition: opacity .2s;
}

.yp-lb-close {
	position:    absolute;
	top:         16px;
	right:       20px;
	background:  none;
	border:      none;
	color:       #fff;
	font-size:   2rem;
	line-height: 1;
	cursor:      pointer;
	padding:     4px 10px;
	opacity:     .8;
	transition:  opacity .15s;
	z-index:     10001;
}
.yp-lb-close:hover { opacity: 1; }

.yp-lb-prev,
.yp-lb-next {
	background:    rgba(255,255,255,.12);
	border:        none;
	color:         #fff;
	font-size:     2rem;
	line-height:   1;
	padding:       20px 14px;
	cursor:        pointer;
	transition:    background .15s;
	flex-shrink:   0;
	border-radius: 4px;
	user-select:   none;
}

.yp-lb-prev:hover,
.yp-lb-next:hover { background: rgba(255,255,255,.25); }

.yp-lb-footer {
	position:    absolute;
	bottom:      16px;
	left:        0;
	right:       0;
	display:     flex;
	justify-content: space-between;
	align-items: center;
	padding:     0 24px;
	color:       rgba(255,255,255,.8);
	font-size:   .85rem;
}

#yp-lb-title   { flex: 1; }
#yp-lb-counter { flex-shrink: 0; margin-left: 16px; color: rgba(255,255,255,.5); }


/* --------------------------------------------------------------------------
   Archive / Taxonomy header
   -------------------------------------------------------------------------- */

.yp-archive-title {
	font-size:     1.5rem;
	margin:        0 0 20px;
	color:         var(--yp-text);
}

.yp-cat-header { margin-bottom: 20px; }

.yp-cat-description { color: var(--yp-text-muted); margin-top: 6px; }

.yp-no-products { color: var(--yp-text-muted); }

/* --------------------------------------------------------------------------
   Yupoo-style pagination
   -------------------------------------------------------------------------- */

.yp-pagination-wrap {
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-wrap:       wrap;
	gap:             16px;
	margin-top:      32px;
	padding:         16px 0;
}

.yp-pagination {
	display:     flex;
	align-items: center;
	gap:         4px;
}

.yp-pagination .page-numbers {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-width:       34px;
	height:          34px;
	padding:         0 10px;
	border:          1px solid var(--yp-border);
	border-radius:   4px;
	text-decoration: none;
	font-size:       .875rem;
	color:           var(--yp-text);
	background:      var(--yp-bg);
	transition:      background .15s, color .15s, border-color .15s;
	line-height:     1;
}

.yp-pagination .page-numbers:hover { border-color: var(--yp-green); color: var(--yp-green); }

.yp-pagination .current {
	background:   var(--yp-green);
	color:        #fff !important;
	border-color: var(--yp-green);
	font-weight:  700;
}

.yp-pagination .prev,
.yp-pagination .next {
	font-size: 1.1rem;
	font-weight: 500;
}

.yp-pagination .dots { border: none; background: none; cursor: default; }
.yp-pagination .dots:hover { color: var(--yp-text); border-color: transparent; }

/* Page-jump widget */
.yp-page-jump {
	display:     flex;
	align-items: center;
	flex-wrap:   nowrap;
	gap:         6px;
	font-size:   .82rem;
	color:       var(--yp-text-muted);
	white-space: nowrap;
}

.yp-jump-input {
	width:         52px;
	height:        32px;
	padding:       0 6px;
	border:        1px solid var(--yp-border);
	border-radius: 4px;
	font-size:     .82rem;
	text-align:    center;
	outline:       none;
}

.yp-jump-input:focus { border-color: var(--yp-green); }

.yp-jump-btn {
	height:        32px;
	padding:       0 12px;
	background:    var(--yp-bg);
	border:        1px solid var(--yp-border);
	border-radius: 4px;
	font-size:     .82rem;
	cursor:        pointer;
	transition:    background .15s, border-color .15s;
}

.yp-jump-btn:hover { background: var(--yp-bg-light); border-color: var(--yp-green); color: var(--yp-green); }

/* --------------------------------------------------------------------------
   Single product
   -------------------------------------------------------------------------- */

.yp-breadcrumb {
	display:     flex;
	flex-wrap:   wrap;
	align-items: center;
	gap:         6px;
	padding:     16px 0;
	font-size:   .82rem;
	color:       var(--yp-text-muted);
}

.yp-breadcrumb a { color: var(--yp-text-muted); text-decoration: none; }
.yp-breadcrumb a:hover { color: var(--yp-primary); }
.yp-breadcrumb [aria-current] { color: var(--yp-text); }

.yp-product-layout {
	display: grid;
	grid-template-columns: 60% 1fr;
	gap: 40px;
	align-items: start;
}

/* Gallery */
.yp-gallery-main {
	border-radius: var(--yp-radius);
	overflow:      hidden;
	background:    var(--yp-bg-light);
}

.yp-gallery-main img {
	width:      100%;
	height:     auto;
	display:    block;
	object-fit: contain;
	max-height: 520px;
	transition: opacity .2s;
}

.yp-gallery-thumbs {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap:                   8px;
	margin-top:            12px;
}

.yp-thumb {
	width:         100%;
	aspect-ratio:  1;
	object-fit:    cover;
	border-radius: 4px;
	border:        2px solid transparent;
	cursor:        pointer;
	opacity:       .7;
	transition:    opacity .15s, border-color .15s;
}

.yp-thumb:hover,
.yp-thumb.active { opacity: 1; border-color: var(--yp-primary); }

.yp-gallery-placeholder {
	aspect-ratio:    4/3;
	background:      var(--yp-bg-light);
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           var(--yp-text-muted);
	border-radius:   var(--yp-radius);
}

/* Product info */
.yp-product-info { position: sticky; top: calc(var(--yp-nav-h) + 16px); }

.yp-product-title {
	font-size:   1.6rem;
	font-weight: 700;
	margin:      0 0 12px;
	line-height: 1.3;
}

.yp-product-cats {
	display:     flex;
	flex-wrap:   wrap;
	gap:         6px;
	margin-bottom: 16px;
}

.yp-cat-tag {
	display:         inline-block;
	padding:         3px 10px;
	background:      var(--yp-bg-light);
	border:          1px solid var(--yp-border);
	border-radius:   20px;
	font-size:       .78rem;
	color:           var(--yp-text-muted);
	text-decoration: none;
	transition:      background .15s, color .15s;
}

.yp-cat-tag:hover { background: var(--yp-primary); color: #fff; border-color: var(--yp-primary); }

.yp-product-description { color: var(--yp-text); line-height: 1.7; margin-bottom: 24px; }

.yp-whatsapp-wrap { margin-top: 8px; }

/* WhatsApp button */
.yp-whatsapp-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	background:      #25D366;
	color:           #fff;
	padding:         7px 14px;
	border-radius:   var(--yp-radius);
	text-decoration: none;
	font-weight:     600;
	font-size:       .8rem;
	transition:      background .2s;
}

.yp-whatsapp-btn:hover { background: #1ea952; color: #fff; }
.yp-whatsapp-btn svg   { fill: #fff; flex-shrink: 0; width: 15px; height: 15px; }

/* Related section */
.yp-related { margin-top: 56px; }

/* --------------------------------------------------------------------------
   Homepage sections
   -------------------------------------------------------------------------- */

.yp-home-section { margin-bottom: 56px; }

.yp-section-header {
	display:         flex;
	align-items:     baseline;
	justify-content: space-between;
	border-bottom:   2px solid var(--yp-primary);
	padding-bottom:  10px;
	margin-bottom:   20px;
}

.yp-section-heading {
	font-size:   1.25rem;
	font-weight: 700;
	margin:      0;
	color:       var(--yp-text);
}

.yp-view-all {
	font-size:       .82rem;
	color:           var(--yp-primary);
	text-decoration: none;
	font-weight:     500;
	white-space:     nowrap;
}

.yp-view-all:hover { text-decoration: underline; }

/* Lazy-load fade in */
.yp-product-card {
	opacity:    0;
	transition: opacity .4s ease, transform .2s, box-shadow .2s;
}

.yp-product-card.yp-visible { opacity: 1; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1440px) {
	.yp-grid-8         { grid-template-columns: repeat(6, 1fr); }
	.yp-cat-cards-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1024px) {
	.yp-grid-4         { grid-template-columns: repeat(3, 1fr); }
	.yp-grid-8         { grid-template-columns: repeat(5, 1fr); }
	.yp-cat-cards-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
	/* Header */
	.yp-header-top .yp-header-inner { flex-wrap: wrap; gap: 10px; }
	.yp-search-form { width: 100%; }
	.yp-hamburger { display: flex; }

	.yp-header-nav { display: none; width: 100%; }
	.yp-header-nav.is-open { display: block; }
	.yp-header-nav-row .yp-header-inner { flex-wrap: wrap; align-items: flex-start; padding-bottom: 0; }

	.yp-nav-list { flex-direction: column; width: 100%; }
	.yp-nav-list > li > a { padding: 12px 8px; border-bottom: 1px solid var(--yp-border); }
	.yp-nav-list > li > a:hover,
	.yp-nav-list > li.current-menu-item > a { border-bottom-color: var(--yp-border); }

	.yp-nav-list .sub-menu { position: static; box-shadow: none; border: none; padding: 0 0 4px 16px; }
	.yp-nav-list .menu-item-has-children:hover .sub-menu { display: none; }
	.yp-nav-list .menu-item-has-children.is-open .sub-menu { display: block; }

	/* Layout */
	.yp-catalog-layout { grid-template-columns: 1fr; }
	.yp-sidebar { position: static; border: 1px solid var(--yp-border); border-radius: var(--yp-radius); padding: 12px; }
	.yp-grid-4         { grid-template-columns: repeat(2, 1fr); }
	.yp-grid-8         { grid-template-columns: repeat(3, 1fr); }
	.yp-cat-cards-grid { grid-template-columns: repeat(3, 1fr); }
	.yp-product-layout { grid-template-columns: 1fr; }
	.yp-product-info { position: static; }
	.yp-whatsapp-btn { display: flex; width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
	.yp-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }

	.yp-product-layout { gap: 20px; }

	.yp-product-title { font-size: 1.2rem; }
}

@media (min-width: 922px) {
    .ast-container {
        max-width: 100%;
		padding: 0 ;
    }
}