/* ==========================================================
   Koshura Custom Product Page Styles  (v1.1 — layout fixes)
   Place at: your-child-theme/assets/css/koshura-product.css
   ========================================================== */

:root{
	--koshura-green:#1f3d2b;
	--koshura-green-dark:#152a1e;
	--koshura-gold:#c9973f;
	--koshura-cream:#faf6ee;
	--koshura-text:#2a2a2a;
	--koshura-border:#e6ded0;
}

/* ----------------------------------------------------------
   0. KILL THE SIDEBAR ON THE PRODUCT PAGE
   twentyfifteen isn't WooCommerce-aware so it still renders
   get_sidebar() on single-product — this reclaims that space.
   Adjust the selectors here if your theme uses different
   IDs/classes for its content/sidebar wrappers.
   ---------------------------------------------------------- */
body.single-product #secondary,
body.single-product .widget-area{
	display:none !important;
}
body.single-product #primary,
body.single-product .content-area{
	width:100% !important;
	max-width:100% !important;
	float:none !important;
	margin:0 !important;
}

/* ----------------------------------------------------------
   0b. UNIFY BACKGROUND COLOR
   Fixes the "3 different backgrounds" issue: page body, the
   theme's white content wrapper, and the product box were all
   different shades stacked on top of each other. This makes
   everything one consistent cream tone, and removes the
   double-background/double-padding "box within a box" look.
   ---------------------------------------------------------- */
body.single-product,
body.single-product #primary,
body.single-product .content-area,
body.single-product #main,
body.single-product .site-content{
	background:var(--koshura-cream) !important;
}
body.single-product .woocommerce-breadcrumb{
	background:transparent;
	padding:20px 30px 0;
	margin:0;
}

/* ----------------------------------------------------------
   0c. REMOVE TOP GAP / BORDER ABOVE CONTENT
   twentyfifteen reserves vertical space + a border on its
   article/content wrapper for things like the page title,
   post meta, etc. WooCommerce hides its own title area here,
   leaving an empty bordered gap above the breadcrumb. Strip it.
   Adjust selectors if your theme's markup differs.
   ---------------------------------------------------------- */
body.single-product #primary,
body.single-product .content-area,
body.single-product article,
body.single-product .site-content,
body.single-product .entry-content,
body.single-product #site-main,
body.single-product .t15wc{
	padding-top:0 !important;
	margin-top:0 !important;
	border:none !important;
}
body.single-product .entry-header{
	display:none !important;
}

/* ----------------------------------------------------------
   1. PRODUCT WRAPPER
   ---------------------------------------------------------- */
.single-product div.product{
	background:transparent;
	padding:30px;
	max-width:1200px;
	margin:0 auto;
	box-sizing:border-box;
}
.single-product div.product *,
.single-product div.product *::before,
.single-product div.product *::after{
	box-sizing:border-box;
}

/* ----------------------------------------------------------
   2. TWO-COLUMN LAYOUT (content-single-product.php override)
   Extra specificity + !important because twentyfifteen's own
   WooCommerce compat CSS floats .images/.summary at 48% width,
   which otherwise wins over a plain class selector.
   ---------------------------------------------------------- */
.single-product div.product .koshura-product-columns{
	display:grid !important;
	grid-template-columns:1fr 1fr;
	gap:40px;
	align-items:start;
	width:100%;
}
.single-product div.product .koshura-product-gallery-col{
	position:sticky;
	top:20px;
	float:none !important;
	width:100% !important;
	margin:0 !important;
}
.single-product div.product .koshura-product-summary-col{
	float:none !important;
	width:100% !important;
	margin:0 !important;
}
.single-product div.product .koshura-product-summary-col .summary{
	max-width:none !important;
	float:none !important;
	width:100% !important;
	margin:0 !important;
}
.koshura-product-full-width{
	clear:both;
	margin-top:40px;
	width:100%;
}
@media (max-width: 900px){
	.single-product div.product .koshura-product-columns{ grid-template-columns:1fr; gap:24px; }
	.single-product div.product .koshura-product-gallery-col{ position:static; }
}

/* ----------------------------------------------------------
   3. GALLERY — make the image fill its column
   IMPORTANT: When there are multiple images, WooCommerce's flexslider
   script calculates its own inline widths on the slide wrapper
   (.woocommerce-product-gallery__image, the <li>) to make the
   thumbnail-click slide transition work. Forcing width:100% !important
   on that <li> breaks the slide track — all slides overlap and
   clicking a thumbnail doesn't visibly change the image. So we only
   style the actual <img> tag, and only constrain overall wrapper
   width (not the individual slides).
   ---------------------------------------------------------- */
.koshura-product-gallery-col .woocommerce-product-gallery{
	width:100% !important;
	max-width:100% !important;
}
.koshura-product-gallery-col img{
	width:100% !important;
	height:auto !important;
	max-width:100% !important;
	display:block;
}
.koshura-product-gallery-col .flex-control-thumbs{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-top:10px;
	padding:0;
	list-style:none;
}
.koshura-product-gallery-col .flex-control-thumbs li{
	width:70px;
}
.koshura-product-gallery-col .flex-control-thumbs img{
	border:1px solid var(--koshura-border);
	border-radius:3px;
	cursor:pointer;
}
.koshura-product-gallery-col .flex-control-thumbs img.flex-active{
	border-color:var(--koshura-gold);
}

/* ----------------------------------------------------------
   4. TITLE / RATING / PRICE
   ---------------------------------------------------------- */
.single-product div.product .product_title{
	font-family: Georgia, 'Times New Roman', serif;
	font-size:32px;
	color:var(--koshura-text);
	margin-bottom:6px;
}
.single-product .koshura-subtitle{
	color:var(--koshura-gold);
	font-weight:600;
	letter-spacing:.5px;
	margin-bottom:10px;
}
.single-product .woocommerce-product-rating{
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:12px;
}
.koshura-recommend-pct{
	font-size:13px;
	color:#4a4a4a;
	border-left:1px solid var(--koshura-border);
	padding-left:10px;
	margin-left:4px;
}
.single-product p.price{
	font-size:28px;
	color:var(--koshura-text);
	font-weight:600;
	margin-bottom:4px;
}
.single-product .stock.in-stock{
	color:#2e7d32;
	font-weight:600;
}

/* ----------------------------------------------------------
   5. FEATURE ICON ROW
   ---------------------------------------------------------- */
.koshura-feature-row{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:14px;
	margin:22px 0;
	padding:18px 0;
	border-top:1px solid var(--koshura-border);
	border-bottom:1px solid var(--koshura-border);
}
.koshura-feature{
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	gap:8px;
}
.koshura-feature-icon{
	width:46px;
	height:46px;
	border:1px solid var(--koshura-gold);
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--koshura-gold);
	flex-shrink:0;
}
.koshura-feature-icon svg{ width:22px; height:22px; }
.koshura-feature-label{
	font-size:12.5px;
	color:#3f3f3f;
	line-height:1.3;
}

/* ----------------------------------------------------------
   6. VARIATIONS — leave WooCommerce's native dropdown alone,
   just tidy the spacing/alignment.
   ---------------------------------------------------------- */
.single-product table.variations{
	width:100%;
	margin-bottom:16px;
}
.single-product table.variations tr{
	display:flex;
	align-items:center;
	gap:14px;
	margin-bottom:10px;
}
.single-product table.variations th,
.single-product table.variations td{
	border:none !important;
	padding:0 !important;
}
.single-product table.variations th.label{
	width:auto;
	white-space:nowrap;
}
.single-product a.reset_variations{
	font-size:13px;
}

/* ----------------------------------------------------------
   7. QUANTITY STEPPER
   ---------------------------------------------------------- */
.single-product div.product .quantity{
	display:flex !important;
	align-items:center;
	border:1px solid var(--koshura-border);
	border-radius:3px;
	width:fit-content;
	overflow:hidden;
	float:none !important;
	margin:0 0 14px 0 !important;
}
.single-product div.product .quantity .qty{
	width:50px;
	text-align:center;
	border:none !important;
	padding:8px 0 !important;
	margin:0 !important;
}
.koshura-qty-btn{
	background:#fff;
	border:none;
	width:34px;
	height:36px;
	cursor:pointer;
	font-size:16px;
	color:var(--koshura-text);
	flex-shrink:0;
}
.koshura-qty-btn:hover{ background:var(--koshura-border); }

/* ----------------------------------------------------------
   8. ADD TO CART / BUY NOW ROW
   High specificity + !important: twentyfifteen's WooCommerce
   compat stylesheet sets form.cart .button / input[type=submit]
   to display:block; width:100%, which stacks the buttons full
   width unless explicitly overridden here.
   ---------------------------------------------------------- */
.single-product div.product form.cart{
	display:flex !important;
	flex-wrap:wrap;
	gap:14px;
	align-items:center;
	margin-top:18px;
}
.single-product div.product form.cart .quantity{
	margin:0 !important;
}
.single-product div.product form.cart .single_add_to_cart_button,
.single-product div.product form.cart button[type="submit"]{
	display:inline-block !important;
	flex:1 1 200px !important;
	width:auto !important;
	min-width:170px;
	padding:14px 20px !important;
	border-radius:3px !important;
	font-weight:600 !important;
	letter-spacing:.5px;
	text-transform:uppercase;
	font-size:13px !important;
	text-align:center;
	margin:0 !important;
}
.single-product div.product form.cart button.single_add_to_cart_button:not(.koshura-buy-now-button){
	background:var(--koshura-green) !important;
	border-color:var(--koshura-green) !important;
	color:#fff !important;
}
.single-product div.product form.cart .koshura-buy-now-button{
	background:#fff !important;
	color:var(--koshura-green) !important;
	border:1px solid var(--koshura-green) !important;
}

/* ----------------------------------------------------------
   9. TRUST BADGE ROW
   Switched to flex-wrap with a sane min-width per item so
   phrases like "Easy 7 Day Returns" don't split awkwardly.
   ---------------------------------------------------------- */
.koshura-trust-row{
	display:flex;
	flex-wrap:wrap;
	gap:16px 24px;
	margin-top:22px;
	padding-top:18px;
	border-top:1px solid var(--koshura-border);
}
.koshura-trust-item{
	flex:1 1 160px;
	min-width:150px;
	font-size:12.5px;
	display:flex;
	align-items:center;
	gap:6px;
	color:#4a4a4a;
	white-space:nowrap;
}
.koshura-trust-item .dashicons{ color:var(--koshura-gold); font-size:16px; width:16px; height:16px; flex-shrink:0; }

/* ----------------------------------------------------------
   10. TABS
   ---------------------------------------------------------- */
.woocommerce-tabs ul.tabs{
	border-bottom:1px solid var(--koshura-border);
	display:flex;
	gap:26px;
	padding-left:0;
	flex-wrap:wrap;
}
.woocommerce-tabs ul.tabs li{
	list-style:none;
	margin:0;
}
.woocommerce-tabs ul.tabs li a{
	color:#777;
	text-decoration:none;
	padding-bottom:12px;
	display:inline-block;
	font-size:14px;
}
.woocommerce-tabs ul.tabs li.active a{
	color:var(--koshura-gold);
	border-bottom:2px solid var(--koshura-gold);
	font-weight:600;
}
.koshura-tab-content{ padding-top:18px; line-height:1.7; }

/* Additional information (spec) table styling */
table.woocommerce-product-attributes{
	width:100%;
	background:#f2ede1;
	border-radius:4px;
}
table.woocommerce-product-attributes th{
	width:180px;
	color:#555;
	font-weight:600;
	padding:10px 16px;
}
table.woocommerce-product-attributes td{
	padding:10px 16px;
}

/* ----------------------------------------------------------
   11. RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 782px){
	.koshura-feature-row{ grid-template-columns:repeat(2,1fr); }
	.single-product div.product form.cart{ flex-direction:column; align-items:stretch; }
	.single-product div.product form.cart .single_add_to_cart_button,
	.single-product div.product form.cart button[type="submit"]{ width:100% !important;}
}
/* Hide Product category */
.posted_in {
    display: none !important;
}
.sku_wrapper {
    display: none !important;
}