/* ==========================================================================
   Graceful Gifts - Single product
   Place at: your-child-theme/assets/css/gg-single.css
   ========================================================================== */

.gg-single,
.gg-orders,
.gg-related {
	--gg-teal-dk: #0c5257;
	--gg-teal: #0f6a70;
	--gg-teal-lt: #17758f;
	--gg-ink: #123a4b;
	--gg-text: #4a5560;
	--gg-muted: #6e7a83;
	--gg-border: #e5e7e4;
	--gg-light: #f8f8f6;
	--gg-serif: "Playfair Display", Georgia, serif;
	--gg-sans: "Poppins", -apple-system, "Segoe UI", sans-serif;
}

.gg-single {
	font-family: var(--gg-sans);
	color: var(--gg-text);
	padding-bottom: 10px;
}

/* --------------------------------------------------------- BREADCRUMB --- */

.woocommerce-breadcrumb,
.gg-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0 0 22px !important;
	color: var(--gg-ink);
	font-family: var(--gg-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
}

.gg-breadcrumb a {
	color: var(--gg-teal);
	text-decoration: none;
	transition: color .2s ease;
}

.gg-breadcrumb a:hover { color: var(--gg-teal-dk); text-decoration: underline; }

.gg-crumb-sep {
	display: inline-block;
	margin: 0 8px;
	color: #9aa8a5;
	font-size: 15px;
	line-height: 1;
}

/* -------------------------------------------------------- TOP SECTION --- */

.gg-single__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 34px;
	align-items: start;
}

.gg-single__gallery,
.gg-single__summary { min-width: 0; }

/* WooCommerce floats and halves .summary and .images by default.
   Inside the grid that made each column 48% of its own cell, so both
   need resetting or the summary collapses to a quarter width. */
.gg-single .gg-single__summary,
.gg-single .summary,
.gg-single .entry-summary,
.gg-single .gg-single__gallery,
.gg-single div.images,
.gg-single .woocommerce-product-gallery {
	float: none !important;
	clear: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.gg-single::before,
.gg-single::after { content: none !important; }

/* Gallery */

.gg-single .woocommerce-product-gallery { float: none !important; width: 100% !important; margin: 0 !important; }
.gg-single .woocommerce-product-gallery__wrapper { border-radius: 8px; overflow: hidden; }
.gg-single .woocommerce-product-gallery img { border-radius: 8px; }

.gg-single .flex-control-thumbs {
	display: flex !important;
	gap: 10px;
	margin: 12px 0 0 !important;
	padding: 0 !important;
	list-style: none;
}

.gg-single .flex-control-thumbs li {
	flex: 0 0 calc(25% - 8px);
	width: auto !important;
	margin: 0 !important;
	list-style: none;
}

.gg-single .flex-control-thumbs img {
	border: 1px solid var(--gg-border);
	border-radius: 6px;
	opacity: 1;
	transition: border-color .2s ease;
}

.gg-single .flex-control-thumbs img.flex-active,
.gg-single .flex-control-thumbs img:hover { border-color: var(--gg-teal); }

.gg-single .woocommerce-product-gallery__trigger {
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	color: var(--gg-teal);
	box-shadow: 0 4px 14px rgba(18, 58, 75, .14);
}

/* Summary */

.gg-single__title {
	margin: 0 0 6px;
	color: var(--gg-ink);
	font-family: var(--gg-serif);
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 600;
	line-height: 1.1;
}

.gg-single__price {
	margin-bottom: 14px;
	color: var(--gg-teal);
	font-size: 21px;
	font-weight: 600;
}

.gg-single__price del { color: var(--gg-muted); font-weight: 400; margin-right: 8px; }
.gg-single__price ins { text-decoration: none; }

.gg-feature-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.gg-feature-pills__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--gg-text);
	font-size: 12.5px;
}

.gg-feature-pills__item svg { color: var(--gg-teal); flex: 0 0 auto; }
.gg-feature-pills__item span { line-height: 1.4; }

.gg-leaf-rule {
	display: block;
	width: 100%;
	height: 1px;
	margin: 4px 0 16px;
	background: var(--gg-border);
}

.gg-single__excerpt { color: var(--gg-text); font-size: 13.5px; line-height: 1.75; }
.gg-single__excerpt p { margin: 0 0 10px; }

.gg-scripture {
	margin: 14px 0 0;
	padding: 0;
	border: 0;
	color: var(--gg-teal-lt);
	font-family: var(--gg-serif);
	font-size: 14.5px;
	font-style: italic;
	line-height: 1.6;
}

.gg-scripture p { margin: 0; }

.gg-single__hr {
	margin: 20px 0;
	border: 0;
	border-top: 1px solid var(--gg-border);
}

/* Quantity and add to cart */

.gg-single form.cart {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 12px !important;
}

.gg-single form.cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--gg-border);
	border-radius: 6px;
	overflow: hidden;
}

.gg-single form.cart .quantity input.qty {
	width: 56px;
	height: 44px;
	border: 0;
	text-align: center;
	font-family: var(--gg-sans);
	font-size: 14px;
	color: var(--gg-ink);
	background: #fff;
}

.gg-single form.cart button.single_add_to_cart_button {
	flex: 1 1 200px;
	max-width: 100%;
	min-height: 44px;
	padding: 12px 26px !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: var(--gg-teal-dk) !important;
	color: #fff !important;
	font-family: var(--gg-sans) !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	transition: background .2s ease;
}

.gg-single form.cart button.single_add_to_cart_button:hover { background: var(--gg-teal-lt) !important; }

.gg-wishlist { margin-bottom: 6px; font-size: 12.5px; }
.gg-wishlist a { color: var(--gg-teal); text-decoration: none; }

/* Benefit columns */

.gg-benefits {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: 22px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--gg-border);
	list-style: none;
}

.gg-benefits__item {
	min-width: 0;
	padding: 0 10px;
	border-right: 1px solid var(--gg-border);
	text-align: center;
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: none;
}

.gg-benefits__item:last-child { border-right: 0; }
.gg-benefits__item svg {
	color: var(--gg-teal);
	margin: 0 auto 10px;
	display: block;
}

.gg-benefits__item strong {
	display: block;
	margin-bottom: 6px;
	color: var(--gg-teal);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.35;
}

.gg-benefits__item span { display: block; color: var(--gg-text); font-size: 11.5px; line-height: 1.6; }

/* -------------------------------------------------------- INFO STRIP --- */

.gg-info-strip {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin: 34px 0 0;
	padding: 22px;
	background: var(--gg-light);
	border: 1px solid var(--gg-border);
	border-radius: 8px;
}

.gg-info-strip__col {
	display: flex;
	gap: 14px;
	padding: 0 24px;
	border-right: 1px solid var(--gg-border);
}

.gg-info-strip__col:last-child { border-right: 0; }
.gg-info-strip__icon { color: var(--gg-teal); flex: 0 0 auto; padding-top: 2px; }

.gg-info-strip h2 {
	margin: 0 0 6px;
	color: var(--gg-ink);
	font-family: var(--gg-sans);
	font-size: 14px;
	font-weight: 600;
}

.gg-info-strip p { margin: 0 0 6px; color: var(--gg-text); font-size: 12.5px; line-height: 1.7; }
.gg-info-strip a { color: var(--gg-teal); font-size: 12.5px; text-decoration: none; }
.gg-info-strip a:hover { text-decoration: underline; }

/* -------------------------------------------------------------- TABS --- */

.gg-single__tabs { margin-top: 40px; }

.gg-single .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 6px;
	margin: 0 0 22px !important;
	padding: 0 0 0 0 !important;
	border-bottom: 1px solid var(--gg-border);
	list-style: none;
}

.gg-single .woocommerce-tabs ul.tabs::before,
.gg-single .woocommerce-tabs ul.tabs::after { display: none !important; }

.gg-single .woocommerce-tabs ul.tabs li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
}

.gg-single .woocommerce-tabs ul.tabs li::before,
.gg-single .woocommerce-tabs ul.tabs li::after { display: none !important; }

.gg-single .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 16px !important;
	border-bottom: 2px solid transparent;
	color: var(--gg-text) !important;
	font-family: var(--gg-sans);
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none;
}

.gg-single .woocommerce-tabs ul.tabs li.active a,
.gg-single .woocommerce-tabs ul.tabs li a:hover {
	border-bottom-color: var(--gg-teal);
	color: var(--gg-teal) !important;
}

.gg-single .woocommerce-Tabs-panel {
	color: var(--gg-text);
	font-size: 13.5px;
	line-height: 1.8;
}

.gg-single .woocommerce-Tabs-panel h2 { display: none; }

.gg-single .woocommerce-Tabs-panel ul {
	margin: 12px 0;
	padding: 0;
	list-style: none;
}

.gg-single .woocommerce-Tabs-panel ul li {
	position: relative;
	margin-bottom: 8px;
	padding-left: 24px;
}

.gg-single .woocommerce-Tabs-panel ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 7px;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--gg-teal);
	border-bottom: 2px solid var(--gg-teal);
	transform: rotate(-45deg);
}

/* ----------------------------------------------------------- RELATED --- */

.gg-related { margin-top: 46px; text-align: center; }

.gg-related__title {
	position: relative;
	margin: 0 0 22px;
	color: var(--gg-teal);
	font-family: var(--gg-serif);
	font-size: 25px;
	font-weight: 600;
}

.gg-related__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	text-align: left;
}

.gg-rcard {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--gg-border);
	border-radius: 8px;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}

.gg-rcard:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(18, 58, 75, .12); }

.gg-rcard__media { display: block; aspect-ratio: 1 / 0.8; background: var(--gg-light); }
.gg-rcard__media img { width: 100%; height: 100%; object-fit: contain; object-position: center; }

.gg-rcard__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }

.gg-rcard__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}

.gg-rcard__title { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.gg-rcard__title a { color: var(--gg-ink); text-decoration: none; }
.gg-rcard__title a:hover { color: var(--gg-teal); }

.gg-rcard__price { color: var(--gg-teal); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.gg-rcard__desc { margin: 0; color: var(--gg-text); font-size: 11.5px; line-height: 1.6; }

.gg-related .gg-btn,
.gg-related a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 34px;
	margin-top: 6px;
	padding: 9px 10px !important;
	border: 1px solid var(--gg-teal-dk) !important;
	border-radius: 4px !important;
	background: var(--gg-teal-dk) !important;
	color: #fff !important;
	font-family: var(--gg-sans) !important;
	font-size: 11.5px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	text-transform: none !important;
	transition: background .2s ease;
}

.gg-related .gg-btn:hover { background: var(--gg-teal-lt) !important; border-color: var(--gg-teal-lt) !important; }
.gg-related .added_to_cart { display: none !important; }

/* ------------------------------------------------------------ ORDERS --- */

.gg-orders {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	margin: 40px 0 10px;
	padding: 22px 26px;
	background: var(--gg-light);
	border: 1px solid var(--gg-border);
	border-radius: 8px;
	font-family: var(--gg-sans);
}

.gg-orders__main { display: flex; gap: 16px; align-items: flex-start; }
.gg-orders__icon { color: var(--gg-teal); flex: 0 0 auto; }

.gg-orders h2 {
	margin: 0 0 4px;
	color: var(--gg-ink);
	font-family: var(--gg-serif);
	font-size: 19px;
	font-weight: 600;
}

.gg-orders p { margin: 0; color: var(--gg-text); font-size: 12.5px; line-height: 1.7; }
.gg-orders a { color: var(--gg-teal); font-size: 13.5px; text-decoration: none; }
.gg-orders a:hover { text-decoration: underline; }

.gg-orders__note {
	padding-left: 24px;
	border-left: 1px solid var(--gg-border);
	color: var(--gg-text);
	font-size: 12.5px;
}

/* -------------------------------------------------------- RESPONSIVE --- */

@media (max-width: 1080px) {
	.gg-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.gg-single__top { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.gg-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
	.gg-benefits__item:nth-child(2n) { border-right: 0; }
	.gg-info-strip { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
	.gg-info-strip__col { border-right: 0; padding: 0; }
	.gg-orders { grid-template-columns: minmax(0, 1fr); }
	.gg-orders__note { padding-left: 0; border-left: 0; }
}

@media (max-width: 560px) {
	.gg-related__grid { grid-template-columns: minmax(0, 1fr); }
	.gg-single .woocommerce-tabs ul.tabs { overflow-x: auto; }
	.gg-single form.cart button.single_add_to_cart_button { flex: 1 1 100%; }
}