📄 woocommerce.css

/*
Theme Name: News Night

WooCommerce styles override
*/

/**
 * Shop tables
 */
table.shop_table_responsive thead {
	display: none;
}

table.shop_table_responsive tbody th {
	display: none;
}

table.shop_table_responsive tr td {
	display: block;
	text-align: right;
	clear: both;
}

table.shop_table_responsive tr td::before {
	content: attr(data-title) ": ";
	float: left;
}

table.shop_table_responsive tr td.product-remove a {
	text-align: left;
}

table.shop_table_responsive tr td.product-remove::before {
	display: none;
}

table.shop_table_responsive tr td.actions::before,
table.shop_table_responsive tr td.download-actions::before {
	display: none;
}

table.shop_table_responsive tr td.download-actions .button {
	display: block;
	text-align: center;
}

@media screen and (min-width: 48em) {

	table.shop_table_responsive thead {
		display: table-header-group;
	}

	table.shop_table_responsive tbody th {
		display: table-cell;
	}

	table.shop_table_responsive tr th,
	table.shop_table_responsive tr td {
		text-align: left;
	}

	table.shop_table_responsive tr td {
		display: table-cell;
	}

	table.shop_table_responsive tr td::before {
		display: none;
	}
}

/**
 * Products
 */
ul.products {
	margin: 0;
	padding: 0;
}

ul.products li.product {
	list-style: none;
	position: relative;
	margin-bottom: 2em;
}

ul.products li.product img {
	display: block;
}


ul.products li.product .button{
    position: relative;
    z-index: 2;
    vertical-align: middle;
    display: inline-block;
    border: none;
    text-align: center;
	background-color: #ff3d83;
	color: #fff;
    font-family: var(--body-font);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    padding: 15px;
    border-radius: 5px;
    overflow: hidden;
}

button.single_add_to_cart_button.button.alt{
	position: relative;
    z-index: 2;
    vertical-align: middle;
    display: inline-block;
    border: none;
    text-align: center;
	background-color: #ff3d83;
	color: #fff;
    font-family: var(--body-font);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
   
    border-radius: 5px;
    overflow: hidden;
}
ul.products li.product .button .actions {
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    transform: translateY(50%);
    z-index: 3;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
}


.button{ 
	background: none; 
	border: 2px solid #008; 
	font-family: "montserrat", sans-serif; 
	text-transform: uppercase; 
	padding: 15px; 
	min-width: 120px; 
	margin-left: 10px;
	cursor: pointer; 
	transition: color 0.4s linear; 
	position: relative;
	
} 
	

.space-bottom{
	margin-top: 30px;
}


a.button.product_type_variable.add_to_cart_button,button.single_add_to_cart_button.button.alt, a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    position: relative;
    overflow: hidden;
    color: #fff; /* Default text color */
}

a.button.product_type_variable.add_to_cart_button:hover,button.single_add_to_cart_button.button.alt:hover, a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart:hover {
    color: #fff; /* Text color on hover */
}

a.button.product_type_variable.add_to_cart_button::before, button.single_add_to_cart_button.button.alt::before, a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 160%;
    background: #008;
    z-index: -1;
    transform: scaleX(0); /* Initially hidden */
    transform-origin: 0 0;
    transition: transform 0.5s cubic-bezier(0.6, 1.5, 0.4, 0.7);
}

a.button.product_type_variable.add_to_cart_button:hover::before,button.single_add_to_cart_button.button.alt:hover::before,a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart:hover::before {
    transform: scaleX(1); /* Expand on hover */
}








.quantity .input-text{
    width: 40px !important;
	display: inline;
	color: #000;
}

.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled {
	display: inline-flex;
}

@media screen and (min-width: 48em) {

	ul.products li.product {
		width: 30.79667%;
		float: left;
		margin-right: 3.8%;
	}

	ul.products li.product.first {
		clear: both;
	}

	ul.products li.product.last {
		margin-right: 0;
	}

	ul.products.columns-1 li.product {
		float: none;
		width: 100%;
	}

	ul.products.columns-2 li.product {
		width: 48.1%;
	}

	ul.products.columns-3 li.product {
		width: 30.79667%;
	}

	ul.products.columns-4 li.product {
		width: 22.15%;
	}

	ul.products.columns-5 li.product {
		width: 16.96%;
	}

	ul.products.columns-6 li.product {
		width: 13.49333%;
	}
}









/**
 * Single product
 */
.single-product div.product {
	position: relative;
}

.single-product div.product .woocommerce-product-gallery {
	position: relative;
	float: left;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 2em;
	right: 1em;
	display: block;
	z-index: 99;
}

.single-product div.product .woocommerce-product-gallery .flex-viewport {
	margin-bottom: 1em;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
	margin: 0;
	padding: 0;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
	list-style: none;
	cursor: pointer;
	float: left;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
	opacity: 0.5;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
	opacity: 1;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li:hover img {
	opacity: 1;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li {
	width: 48.1%;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n) {
	margin-right: 0;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n+1) {
	clear: both;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
	width: 30.79667%;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n) {
	margin-right: 0;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n+1) {
	clear: both;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
	width: 22.15%;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n) {
	margin-right: 0;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) {
	clear: both;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
	width: 16.96%;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n) {
	margin-right: 0;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n+1) {
	clear: both;
}

.stock:empty::before {
	display: none;
}

.stock.in-stock {
	color: #0f834d;
}

.stock.out-of-stock {
	color: #e2401c;
}

/**
 * Checkout
 */
@media screen and (min-width: 768px) {

	.col2-set .form-row-first {
		float: left;
		margin-right: 3.8%;
	}

	.col2-set .form-row-last {
		float: right;
		margin-right: 0;
	}

	.col2-set .form-row-first,
	.col2-set .form-row-last {
		width: 48.1%;
	}
}

/**
 * General WooCommerce components
 */

/**
 * Header cart
 */
.site-header-cart {
	position: relative;
	margin: 0;
	padding: 0;
}

.site-header-cart .cart-contents {
	text-decoration: none;
}

.site-header-cart .widget_shopping_cart {
	display: none;
}

.site-header-cart .product_list_widget {
	margin: 0;
	padding: 0;
}

/**
 * Star rating
 */
.star-rating {
	overflow: hidden;
	position: relative;
	height: 1.618em;
	line-height: 1.618;
	width: 5.3em;
	font-family: star;
	font-weight: 400;
}

.star-rating::before {
	content: "\53\53\53\53\53";
	opacity: 0.25;
	float: left;
	top: 0;
	left: 0;
	position: absolute;
}

.star-rating span {
	overflow: hidden;
	float: left;
	top: 0;
	left: 0;
	position: absolute;
	padding-top: 1.5em;
}

.star-rating span::before {
	content: "\53\53\53\53\53";
	top: 0;
	position: absolute;
	left: 0;
	color: #feb62a;
}

p.stars a {
	position: relative;
	height: 1em;
	width: 1em;
	text-indent: -999em;
	display: inline-block;
	text-decoration: none;
	margin-right: 1px;
	font-weight: 400;
}

p.stars a::before {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 1em;
	height: 1em;
	line-height: 1;
	font-family: star;
	content: "\53";
	color: #404040;
	text-indent: 0;
	opacity: 0.25;
}

p.stars a:hover ~ a::before {
	content: "\53";
	color: #404040;
	opacity: 0.25;
}

p.stars:hover a::before {
	content: "\53";
	color: #feb62a;
	opacity: 1;
}

p.stars.selected a.active::before {
	content: "\53";
	color: #feb62a;
	opacity: 1;
}

p.stars.selected a.active ~ a::before {
	content: "\53";
	color: #404040;
	opacity: 0.25;
}

p.stars.selected a:not(.active)::before {
	content: "\53";
	color: #feb62a;
	opacity: 1;
}
.comments-wrap .children {
    margin: 0;
    padding: 0;
    list-style-type: none;
    margin-left: 135px;
}

/**
 * Tabs
 */
.woocommerce-tabs ul.tabs {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
	display: flex;
	position: relative;
    left: 30%;
}
@media (max-width: 778px) {
	.woocommerce-tabs ul.tabs {
		list-style: none;
		margin: 0;
		padding: 0;
		text-align: left;
		display: flex;
		left: 5px;
		
	}
	.woocommerce-tabs ul.tabs li {
		display: block;
		margin: 0;
		position: relative;
		margin-right: 10px;
		font-size: 16px;
	}
}
.woocommerce-tabs ul.tabs li {
	display: block;
	margin: 0;
	position: relative;
	margin-right: 50px;
    font-size: 25px;
}

.woocommerce-tabs ul.tabs li a {
	padding: 1em 0;
    display: block;
    color: #ff3d83;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}


.woocommerce-tabs .panel h2:first-of-type {
	margin-bottom: 1em;
	font-size: 18px;
	display: none;
}

/**
 * Password strength meter
 */
.woocommerce-password-strength {
	text-align: right;
}

.woocommerce-password-strength.strong {
	color: #0f834d;
}

.woocommerce-password-strength.short {
	color: #e2401c;
}

.woocommerce-password-strength.bad {
	color: #e2401c;
}

.woocommerce-password-strength.good {
	color: #3d9cd2;
}

/**
 * Forms
 */
.form-row.woocommerce-validated input.input-text {
	box-shadow: inset 2px 0 0 #0f834d;
}

.form-row.woocommerce-invalid input.input-text {
	box-shadow: inset 2px 0 0 #e2401c;
}

.required {
	color: #f00;
}

/**
 * Notices
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	background-color: #0f834d;
	clear: both;
}

.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
	background-color: #3d9cd2;
	color: #fff;
}

.woocommerce-error {
	background-color: #e2401c;
}

.demo_store {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	margin: 0;
	padding: 1em;
	background-color: #3d9cd2;
	z-index: 9999;
}

@media screen and (min-width: 48em) {

	/**
	 * Header cart
	 */
	.site-header-cart .widget_shopping_cart {
		position: absolute;
		top: 100%;
		width: 100%;
		z-index: 999999;
		left: -999em;
		display: block;
		box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	}

	.site-header-cart:hover .widget_shopping_cart,
	.site-header-cart.focus .widget_shopping_cart {
		left: 0;
		display: block;
	}
}

/**
 * WooCommerce widgets
 */

/**
 * WooCommerce Price Filter
 */
.widget_price_filter .price_slider {
	margin-bottom: 1.5em;
}

.widget_price_filter .price_slider_amount {
	text-align: right;
	line-height: 2.4;
}

.widget_price_filter .price_slider_amount .button {
	float: left;
}

.widget_price_filter .ui-slider {
	position: relative;
	text-align: left;
}

.widget_price_filter .ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1em;
	height: 1em;
	cursor: ew-resize;
	outline: none;
	background: #4169e1;
	box-sizing: border-box;
	margin-top: -0.25em;
	opacity: 1;
}

.widget_price_filter .ui-slider .ui-slider-handle:last-child {
	margin-left: -1em;
}

.widget_price_filter .ui-slider .ui-slider-handle:hover,
.widget_price_filter .ui-slider .ui-slider-handle.ui-state-active {
	box-shadow: 0 0 0 0.25em rgba(0, 0, 0, 0.1);
}

.widget_price_filter .ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	display: block;
	border: 0;
	background: #4169e1;
}

.widget_price_filter .price_slider_wrapper .ui-widget-content {
	background: rgba(0, 0, 0, 0.1);
}

.widget_price_filter .ui-slider-horizontal {
	height: 0.5em;
}

.widget_price_filter .ui-slider-horizontal .ui-slider-range {
	height: 100%;
}


.woocommerce-info, .woocommerce-noreviews, p.no-comments{
	background-color: var(--theme-color);
}

.woocommerce-message a {
	color: var(--title-color);
	border: none;
	text-decoration: none;
	margin: 0;
}

.woocommerce-message a:hover {
	color: var(--white-color);
}

.woocommerce-tabs ul.tabs li a{
	text-decoration: none;
}

div#review_form> .comment-respond > .comment-form{
	box-shadow: none;
	border: none;
}

ol.commentlist {
	border-radius: 10px;
	padding-top: 10px;
	background-color: var(--smoke-color2);
	margin: 0;
}

.quantity {
	margin-left: 10px;
}

.woocommerce-notices-wrapper {
	margin-top: 40px;
}

.wc-block-cart__submit-container > a {
	text-decoration: none;
	font-weight: 600;
}

.wc-block-components-button:not(.is-link) .wc-block-components-button__text {
    border: 1px solid var(--theme-color);
	border-radius: 7px;
    padding: 10px;
	background-color: var(--theme-color);
	color: var(--white-color);
}

.wc-block-components-button:not(.is-link) .wc-block-components-button__text:hover {
    background-color: var(--title-color);
	border: 1px solid var(--title-color) ;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name{
	color: var(--title-color);
}
  .dark-theme .wc-block-cart-item__quantity>button,
  .dark-theme table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name,
  .dark-theme span.wc-block-components-checkbox__label,
  .dark-theme .wp-block-woocommerce-checkout-order-summary-block ,
  .dark-theme .wc-block-checkout__terms.wc-block-checkout__terms--with-separator.wp-block-woocommerce-checkout-terms-block {
    color: white !important;
}

.dark-theme .wc-block-checkout__terms.wc-block-checkout__terms--with-separator {
    border-top: 1px solid hsla(0, 11%, 95%, 0.11);
}

.dark-theme .wc-block-components-address-form__address_2-toggle {
	color: var(--white-color);
	}
	/* .wc-block-components-checkbox label span.wc-block-components-checkbox__label {
	  margin-left: 20px !important;
	} */

/* .wc-block-components-button:not(.is-link) .wc-block-components-button__text:hover {
	background-color: transparent;
} */

.dark-theme .wc-block-components-checkbox .wc-block-components-checkbox__mark{
	fill: var(--white-color) !important;

}
/* 
span.wc-block-components-checkbox__label:before {
	border: 1px solid var(--title-color);
	content: '';
	padding: 0px 8px;
	margin-left: -18px;
	margin-right: 10px;
} */
/* .dark-theme span.wc-block-components-checkbox__label:before {
	border: 1px solid var(--white-color);
} */
.dark-theme .comment-respond form .comment-form-rating label,
.dark-theme .wc-block-components-product-badge.wc-block-components-sale-badge {
    color: var(--white-color);
}
.dark-theme .comment-respond form .comment-form-rating p.stars {
    background: var(--theme-color);
    padding: 15px 10px 5px 10px;
}
.dark-theme .wc-block-components-checkout-return-to-cart-button{
	color: var(--white-color);
}
/* List view template fix */
ul.products li.newsnight-list-item{
    width:100% !important;
    max-width:100% !important;
}

ul.products li.newsnight-list-item .product-card.list-view{
    display:flex;
    gap:24px;
    align-items:flex-start;
}

ul.products li.newsnight-list-item .product-img{
    width:240px;
    flex-shrink:0;
}

ul.products li.newsnight-list-item .product-content{
    flex:1;
}
.shop-list-area .newsnight-list-item.product.type-product{
    background: #f1effc;
    border-radius: 18px;
    padding: 22px 26px;
    margin-bottom: 22px;
    box-shadow: 
        0 10px 25px rgba(16, 24, 40, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.6);
    transition: all 0.35s ease;
}

.shop-list-area .newsnight-list-item.product.type-product:hover{
    box-shadow:
        0 16px 40px rgba(16,24,40,0.12),
        inset 0 1px 0 rgba(255,255,255,0.7);
    transform: translateY(-4px);
}
.newsnight-product.product.type-product .product-card .product-title{
	position: relative;
	z-index: 9;
}
/* Grid view unaffected */


body.woocommerce-cart .col-xl-8,
body.woocommerce-checkout .col-xl-8{
    width:100%!important;
    max-width:100%!important;
}
.wc-block-checkout__actions_row button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button{
	background: transparent;
	 border: none
}
.wc-block-checkout__actions_row button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button:hover{
	background-color:transparent;
    border: none;

}


/* Fix WooCommerce password show/hide button */
.woocommerce-form.woocommerce-form-login.login .password-input{
	position: relative;
}
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input,
.woocommerce .show-password-input {
    background: transparent !important;
    border: none !important;
    color: #111 !important;
    width: 32px;
    height: 32px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1 !important;
    visibility: visible !important;
}

.woocommerce .show-password-input::before {
    content: "👁";
    font-size: 18px;
}


/* Fix Remember Me checkbox only */
.woocommerce-form-login__rememberme input[type="checkbox"]{
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid #0a1c5a !important;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    display: inline-block !important;
    opacity: 1 !important;
    position: relative;
	visibility: visible !important;
}

/* Align text properly */
.woocommerce-form-login__rememberme{
    display: flex;
    align-items: center;
    gap: 8px;
}

.wc-block-components-button.wp-element-button.wc-block-components-totals-coupon__button .wc-block-components-button__text:hover {
    background-color: var(--theme-color);
    border: 1px solid var(--theme-color);
}