/* Shared button treatment for the custom preference/favourite/replacement forms,
   matching the site's own accent colour and its established "selected option"
   hover treatment (see .frame-variations .frame_option and .actionButtons button). */
#shado_category_form .button,
#image-selection-form .button {
	display: inline-block;
	font-size: 16px;
	padding: 8px 20px;
	line-height: 20px;
	background: transparent;
	border: 2px solid #00dfde;
	border-radius: 3px;
	color: #000000;
	text-decoration: none;
	cursor: pointer;
	transition: all .2s;
}
#shado_category_form .button:hover,
#image-selection-form .button:hover {
	background-color: #d3fafa;
	color: #000000;
}

/* Selected frame inside WooCommerce's fullscreen PhotoSwipe gallery. */
.pswp .pswp__zoom-wrap .shado-photoswipe-frame {
	position: absolute;
	z-index: 2;
	display: block;
	max-width: none;
	max-height: none;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* Product subscription selector — matches the site's selection-card pattern. */
.single-product .frame-variations td.value > label:has(#subscribe_service) {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 54px;
	margin: 0;
	padding: 12px 15px;
	border: 1px solid #dfe5e5;
	border-radius: 12px;
	background: #fbfdfd;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: #292929;
	box-sizing: border-box;
	cursor: pointer;
	user-select: none;
	transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.single-product .frame-variations td.value > label:has(#subscribe_service):hover {
	border-color: rgba(0, 184, 183, 0.55);
	background: #f1ffff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
	transform: translateY(-1px);
}

.single-product .frame-variations td.value > label:has(#subscribe_service:checked) {
	border-color: #00c7c6;
	background: #e9ffff;
	box-shadow: inset 0 0 0 1px rgba(0, 223, 222, 0.22), 0 6px 18px rgba(0, 223, 222, 0.1);
}

.single-product #subscribe_service {
	position: relative;
	width: 22px;
	height: 22px;
	min-width: 22px;
	margin: 0;
	border: 2px solid #aeb8b8;
	border-radius: 6px;
	background: #fff;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.single-product #subscribe_service::after {
	content: "";
	position: absolute;
	top: 5px;
	left: 4px;
	width: 10px;
	height: 6px;
	border-left: 2px solid #000;
	border-bottom: 2px solid #000;
	opacity: 0;
	transform: rotate(-45deg) scale(0.7);
	transition: opacity 140ms ease, transform 140ms ease;
}

.single-product #subscribe_service:checked {
	border-color: #00dfde;
	background: #00dfde;
	box-shadow: 0 3px 10px rgba(0, 223, 222, 0.28);
}

.single-product #subscribe_service:checked::after {
	opacity: 1;
	transform: rotate(-45deg) scale(1);
}

.single-product #subscribe_service:focus-visible {
	outline: 3px solid rgba(0, 223, 222, 0.4);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.single-product .frame-variations td.value > label:has(#subscribe_service),
	.single-product #subscribe_service {
		transition: none;
		transform: none;
	}
}

/* Term list on category preference page */
#shado_category_form ul{list-style: none !important; padding: 20px 0 !important; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem;}
#shado_category_form ul li{width: calc(33.333% - 1rem); box-sizing: border-box;}
@media (max-width: 768px){
	#shado_category_form ul li{width: calc(50% - 1rem);}
}
@media (max-width: 480px){
	#shado_category_form ul li{width: 100%;}
}

/* image preference page */
.productBox{margin:20px 0;}
.productBoxlet{border: 1px solid #ddd; padding: 20px; display: flex; flex-wrap: wrap; gap: 15px; margin: 20px 0;}
.groupBox{width: 100%; display: flex; flex-wrap: wrap; gap: 15px;}
.product-grid{width: 100%; display: flex; flex-wrap: wrap; gap: 2%; box-sizing: border-box;}

#image-selection-form label {font-size: 16px;}
.product-box {position: relative; border: 1px solid #ddd; cursor: pointer; flex: 1 1 calc(19% - 1%); max-width: calc(19% - 1%); display: flex; flex-direction: column;}
@media (max-width: 992px) {
    .product-box {
        flex: 1 1 31%; 
        max-width: 31%;
    }
}
@media (max-width: 768px) {
    .product-box {
        flex: 1 1 48%; 
        max-width: 48%;
    }
}
@media (max-width: 480px) {
    .product-box {
        flex: 1 1 100%;
        max-width: 100%;
    }
}
.product-box a {width: 100%; position: relative; display: block; overflow: hidden; flex-shrink: 0;}
.product-box a img {width: 100%; height: auto; float: left;}
.product-box a {width: 100%; position: relative; display: block; overflow: hidden;}
/* Dark hover overlay removed on request -- no hover effect on favourite image thumbnails, matching /shop/ */
.product-box a::after {content: "👁️"; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; pointer-events: none;}
.product-box a:hover::after {opacity: 0; pointer-events: none;}
.product-box .heart-wrapper{position:absolute; top: 8px; right: 8px; width:22px; height: 22px; margin:0; padding:0; z-index: 800;}
.product-box .heart-wrapper span{text-shadow: 1px 1px 1px #0A0A0A;}
.product-box .titleBar {text-align: center; border-top: 1px solid #ddd; padding: 5px 0; background-color: #FFF; display: flex; justify-content: center; align-items: center; width: 100%; float: none; min-height: 50px; box-sizing: border-box;}
.product-box .titleBar h5 {padding: 0 5px; margin: 0; width: 100%;}

/* category/orientation filter controls on the favourites & image-selection pages */
.image-filter-controls {display: flex; flex-wrap: wrap; gap: 20px; margin: 20px 0;}
.image-filter {display: flex; flex-direction: column; gap: 6px;}
.image-filter label {font-size: 14px; font-weight: 600;}
.image-filter select {
	padding: 8px 32px 8px 10px;
	border: 1px solid #ddd;
	border-radius: 0;
	background-color: #fff;
	min-width: 200px;
	font-size: 14px;
	line-height: 20px;
	color: #000000;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000000' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px;
	transition: border-color 0.2s ease;
}
.image-filter select:hover {border-color: #00dfde;}
.image-filter select:focus {outline: none; border-color: #00dfde;}

/* image selection page */
.subGrid {max-width: 900px;}
.subGrid .subBox {border: 1px solid #ddd; padding: 20px; margin-bottom: 20px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.subGrid .subBox h3{width: 100%; margin:0;}

.subBox .clientBox {width:100%; border: 1px solid #ddd; padding: 20px; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px;}
.clientBox .orderImage {width: calc(33.333% - 10px);}
.clientBox .orderImage a{width: 100%; position: relative; display: block; overflow: hidden;}
.clientBox .orderImage a::after {content: "👁️"; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); color: white; font-size: 2.5rem; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; filter: grayscale(100%);}
.clientBox .orderImage a:hover::after {opacity: 1; pointer-events: auto;}
.clientBox .orderImage a img {width: 100%; height: auto; float: left;}
.clientBox .orderDetails {width: calc(66.666% - 10px);}
.clientBox .orderDetails ul {margin: 0; list-style: none;}
.clientBox .orderDetails ul li {font-size: 16px;}

.subBox .selectBox {width:100%; border: 1px solid #ddd; padding: 20px; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 20px;}
.selectBox .selectImage {position: relative; width: calc(50% - 10px);}
.selectBox .selectImage p{font-size: 14px;}
.selectBox .selectImage a {width: 100%; position: relative; display: block; overflow: hidden;}
.selectBox .selectImage a::after {content: "👁️"; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); color: white; font-size: 2.5rem; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; filter: grayscale(100%);}
.selectBox .selectImage a:hover::after {opacity: 1; pointer-events: auto;}
.selectBox .selectImage a img {width: 100%; height: auto; float: left;}
.selectBox .selectImage .titleBar {text-align: center; border-top: 1px solid #ddd; padding: 5px 0; background-color: #FFF; display: block; width: 100%; float: left;}
.selectBox .selectImage .titleBar h5 {padding: 0 5px; margin:0;}
.selectBox .selectImage input.lockImage {position:absolute; top: 8px; right: 8px; width:16px; height: 16px; margin:0; padding:0; background: rgba(255,255,255,0.8); border-radius: 4px;}
.selectBox .selectImage input.lockImage:checked{outline:2px solid green;}
.selectBox .selectImage input.lockImage:not(:checked){outline: 2px solid red;}
.selectBox .uploader.lookup-trigger{width: calc(50% - 10px); max-width: 100%; min-height: 250px; border: 2px dashed #999; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; text-align: center; position: relative; box-sizing: border-box; padding: 20px 10px; gap: 10px;}
.selectBox .uploader p{font-size: 14px; line-height: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; gap: 8px; cursor: pointer;}
.selectBox .uploader.lookup-trigger span.upload-button{display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border: 2px solid #00dfde; border-radius: 50%; font-size: 28px; color: #00dfde; user-select: none; transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;}
.selectBox .uploader.lookup-trigger span.upload-button:hover{background-color: #d3fafa; border-color: #00dfde; color: #000000;}

.subBox .actionButtons {width: 100%; padding: 20px; display: flex; justify-content: center; align-items: center; gap: 10px;}
.actionButtons button {font-size: 16px; padding: 5px 10px; line-height: 20px; background: transparent; position: relative; border: 2px solid #00dfde; border-radius: 3px; transition: all .2s; color: #000000; margin: 0; text-decoration: none; display: inline-block; cursor: pointer;}
.actionButtons button:hover{background-color: #d3fafa; color:#000000;}
.lockSelection.visually-disabled {opacity: 0.5; pointer-events: auto; cursor: not-allowed;}

.subBox .historyBox {width: 100%; border: 1px solid #ddd; padding: 20px; display: flex; flex-wrap: wrap; gap: 10px;}
.historyBox .historyBoxlet {position: relative; border: 1px solid #ddd; cursor: pointer; flex: 1 1 calc(24% - 1%); max-width: calc(24% - 1%); display: flex; flex-direction: column;}
.historyBox .historyBoxlet a,
.historyBox .historyBoxlet .historyBoxlet-unlinked {width: 100%; position: relative; display: block; overflow: hidden; flex-shrink: 0;}
.historyBox .historyBoxlet a img,
.historyBox .historyBoxlet .historyBoxlet-unlinked img {width: 100%; height: auto; float: left;}
.historyBox .historyBoxlet a span,
.historyBox .historyBoxlet .historyBoxlet-unlinked > span {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); color: white; font-size: 2.5rem; display: flex; justify-content: center; align-items: center; opacity: 1; transition: opacity 0.3s ease; pointer-events: none; filter: grayscale(100%);}
.historyBox .historyBoxlet a:hover span,
.historyBox .historyBoxlet .historyBoxlet-unlinked:hover > span {opacity: 0; pointer-events: auto;}
.historyBox .historyBoxlet-current {border-color: #00dfde; border-width: 2px;}
.historyBox .historyBoxlet-current a span,
.historyBox .historyBoxlet-current .historyBoxlet-unlinked > span {font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: rgba(0,223,222,0.85); color: #000000; filter: none;}

#imageUploaderModal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10000; background: white; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0,0,0,0.3); padding: 20px; display: none; max-width: 90vw; max-height: 90vh; width: 80%; overflow-y: auto; }
#imageUploaderModal .image-filter {margin: 10px;}
#imageCategorySelect,
#pickerOrientationSelect {
	min-width: 200px;
	margin: 10px;
	padding: 8px 32px 8px 10px;
	border: 1px solid #ddd;
	border-radius: 0;
	background-color: #fff;
	font-size: 14px;
	line-height: 20px;
	color: #000000;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000000' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-size: 12px;
	transition: border-color 0.2s ease;
}
#imageCategorySelect:hover,
#pickerOrientationSelect:hover {border-color: #00dfde;}
#imageCategorySelect:focus,
#pickerOrientationSelect:focus {outline: none; border-color: #00dfde;}
#imageUploaderModal .product-list {display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start;}
#imageUploaderModal .productSelect {border: 1px solid #ddd; cursor: pointer; display: flex; flex-direction: column; margin: 0; flex: 1 1 calc(19% - 1%); max-width: calc(19% - 1%);}
#imageUploaderModal .productSelect span {width: 100%; position: relative; flex-shrink: 0; float: none; display: block;}
#imageUploaderModal .productSelect img {width: 100%; height: auto; max-width: 100%; object-fit: contain; display: block;}
#imageUploaderModal .productSelect span::after {content: "✓"; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); color: greenyellow; font-size: 3rem; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; user-select: none; filter: none; z-index: 10;}
#imageUploaderModal .productSelect:hover span::after {opacity: 1; pointer-events: auto;}
#imageUploaderModal .productSelect .titleBar {text-align: center; border-top: 1px solid #ddd; padding: 5px 0; background-color: #FFF; display: flex; justify-content: center; align-items: center; width: 100%; float: none; min-height: 50px; box-sizing: border-box;}
#imageUploaderModal .productSelect h5 {padding: 0 5px; margin: 0; width: 100%;}
#imageUploaderModal #modalCloseBtn {float: right; font-weight: bold; cursor: pointer; color: red; font-size: 3em; margin-bottom: 10px; height:25px;}

/* remove quantity column from cart table */
.woocommerce table.cart td.product-quantity, .woocommerce table.cart th.product-quantity, .woocommerce table.cart td.product-price, .woocommerce table.cart th.product-price {display: none;}

/* Force cart table to recalc width after hiding columns */
.woocommerce-cart table.cart {
    table-layout: auto !important;
    width: 100% !important;
}

/* Make each visible column stretch normally */
.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td {
    width: auto !important;
}

/* Optional: Make Product and Subtotal columns wider */
.woocommerce-cart table.cart .product-name {
    width: 60% !important;
}

.woocommerce-cart table.cart .product-subtotal {
    width: 20% !important;
    text-align: right;
}



/* stop zoom effect on product featured image */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .zoomImg {opacity: 0 !important; pointer-events: none !important;}

/* checkout page */
.woocommerce-checkout .wc-block-components-sidebar {display: none !important;}
.wc-block-checkout__main {width: 100% !important; max-width: none !important;}

.woocommerce-table__product-name.product-name strong{display:none;}

/* style meta list under featured image */
.product-metaList {
    list-style: none !important;
    padding: 0 !important;
    margin: 10px 0 0 0 !important;
    font-size: 14px;
    color: #333;
  }
  .product-metaList a {
    text-decoration: none;
    color: #0073aa;
    transition: text-decoration 0.3s ease;
  }
  .product-metaList a:hover {
    text-decoration: underline;
  }
  

/* Ensure the wrapper has positioning context */
.frame-overlay-wrapper {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Ensure no overflow when images are adjusted */
}

/* Overlay image (the frame) */
#frame-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
    display: none;  /* Initially hidden */
}

/* Ensure the correct orientation frame image is shown */
.frame-overlay-wrapper .frame-overlay.landscape {
    width: 100%;  /* Ensure the landscape frame fits within the container */
    height: 100%; /* Ensure the height is maintained */
}

.frame-overlay-wrapper .frame-overlay.portrait {
    width: 100%; /* Ensure portrait frame fits within the container */
    height: 100%; /* Ensure the height is maintained */
}

/* Optional: Ensure the product image behaves as expected */
.woocommerce-product-gallery__image img {
    width: 100%;  /* Product image should stretch to fill its container */
    height: auto;  /* Maintain aspect ratio */
    object-fit: contain; /* Ensure the product image fits the container without distortion */
}


.single_variation_wrap .single_variation {
	display: none !important;
}
body.show-variation-price .single_variation_wrap .single_variation {
    display: block !important;
}

/* hide sub box */
.bos4w-display-wrap {display: none !important;}

/* product page styling */
#shado-price-table{margin-top: 2em;}
#shado-price-table .shop_table{border-width: 1px !important;}
#shado-price-table .shop_table th{font-weight: 500;}
#shado-price-table .shop_table td{text-align: right;}
#shado-price-table .shop_table td small{font-size: 14px; text-decoration: line-through;}

.woocommerce div.product form.cart .variations select{max-width: 75% !important;}

.frame-variations {
    width: 100%;
}

.frame-variations tr{width: 100%;
    margin: 0 0 10px; display: inline-table;}
.frame-variations th,
.frame-variations td {
    width: 100%;
    padding: 0 0 10px; display: inline-table;
}

.frame-option-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.frame-option {
    width: 70px;
    text-align: center;
    cursor: pointer;
    
}

.frame-option img {
    width: 100%;
    height: auto;
    display: block; border: 1px solid #e5e5e5;
    padding: 2px;
    border-radius: 4px;
    transition: border-color 0.2s ease-in-out;
    overflow: hidden;
}

.frame-option .frame-title {
    font-size: 12px; line-height: 14px; margin-top: 2px; text-align:none;
}

.frame-option.selected img {
    border: 2px solid #00DFDE; padding: 1px;
}