/* Trendy Jewel: storefront components added after the main build.
   Payment strip, service strip, delivery check, low stock, WhatsApp button, reels. */

/* Payment strip ------------------------------------------------------------ */
.tj-pay{margin:20px 0 0;padding:16px 18px;border:1px solid var(--tj-line);background:var(--tj-white)}
.tj-pay__title{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:13px;font-weight:500;color:var(--tj-ink)}
.tj-paylogos{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tj-paylogo{display:inline-flex;align-items:center;justify-content:center;height:34px;min-width:54px;padding:0 10px;border:1px solid var(--tj-line);border-radius:6px;background:#fff;color:#333}
.tj-paylogo img{display:block;width:auto;max-width:54px;height:20px;object-fit:contain}
.tj-paylogo--text{gap:6px;font-size:12px;font-weight:500;white-space:nowrap}
.tj-paylogos--footer .tj-paylogo{border-color:transparent}
.tj-footer__pay .tj-paylogos{justify-content:flex-end}
@media (max-width:640px){.tj-footer__pay .tj-paylogos{justify-content:flex-start}.tj-paylogo{height:32px;padding:0 8px}.tj-paylogo img{max-width:46px;height:18px}}

/* Delivery check ----------------------------------------------------------- */
.tj-pin{margin:16px 0 0;padding:16px 18px;border:1px solid var(--tj-line)}
.tj-pin__label{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:13px;font-weight:500;color:var(--tj-ink)}
.tj-pin__row{display:flex;gap:8px}
.tj-pin__input{flex:1;min-width:0;height:44px;padding:0 14px;border:1px solid var(--tj-line);border-radius:0;font:inherit;font-size:15px;letter-spacing:.04em;background:var(--tj-white)}
.tj-pin__input:focus{outline:2px solid var(--tj-black);outline-offset:1px;border-color:var(--tj-black)}
.tj-pin__btn{height:44px;padding:0 22px;border:1px solid var(--tj-black);background:var(--tj-black);color:var(--tj-white);font:inherit;font-size:13px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.tj-pin__btn:hover{background:var(--tj-white);color:var(--tj-black)}
.tj-pin__msg{min-height:0;margin:0;font-size:13px}
.tj-pin__msg:not(:empty){margin-top:10px}
.tj-pin__msg.is-good{color:#1d6b3a}
.tj-pin__msg.is-bad{color:#b3261e}

/* Service strip ------------------------------------------------------------ */
.tj-service{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:16px 0 24px;padding:0;list-style:none;border:1px solid var(--tj-line)}
.tj-service li{display:flex;gap:12px;align-items:flex-start;margin:0;padding:16px;border-bottom:1px solid var(--tj-line)}
.tj-service li:nth-child(odd){border-right:1px solid var(--tj-line)}
.tj-service li:nth-last-child(-n+2){border-bottom:0}
.tj-service svg{flex:none;margin-top:2px;color:var(--tj-ink)}
.tj-service strong{display:block;margin-bottom:2px;font-size:14px;font-weight:500;color:var(--tj-ink)}
.tj-service span{display:block;font-size:12.5px;line-height:1.5;color:var(--tj-muted)}
.tj-service a{color:var(--tj-ink);text-decoration:underline;text-underline-offset:2px}

/* Low stock ---------------------------------------------------------------- */
.tj-lowstock{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:14px;font-weight:500;color:#b3261e}
.tj-lowstock span{width:8px;height:8px;border-radius:50%;background:#b3261e;animation:tj-pulse 1.6s ease-in-out infinite}
@keyframes tj-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.4)}}

/* WhatsApp help button ------------------------------------------------------- */
.tj-wa{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:#25d366;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.22);transition:transform .2s}
.tj-wa:hover{transform:scale(1.07);color:#fff}
.tj-wa:focus-visible{outline:3px solid var(--tj-black);outline-offset:3px}

/* Reels ---------------------------------------------------------------------- */
.tj-reels{padding-inline:0;background:var(--tj-white)}
.tj-reels__track{display:flex;gap:14px;overflow-x:auto;padding:4px var(--tj-gutter) 8px;scrollbar-width:none;overscroll-behavior-x:contain}
.tj-reels__track::-webkit-scrollbar{display:none}
.tj-reels__track:focus-visible{outline:2px solid var(--tj-black);outline-offset:-2px}
.tj-reel{position:relative;flex:none;width:clamp(150px,19vw,250px);aspect-ratio:9/16;margin:0;overflow:hidden;background:var(--tj-soft)}
.tj-reel__video{display:block;width:100%;height:100%;object-fit:cover}
.tj-reel__sound{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;transition:background .2s}
.tj-reel__sound:hover,.tj-reel__sound.is-on{background:#000}
.tj-reel__on,.tj-reel__sound.is-on .tj-reel__off{display:none}
.tj-reel__sound.is-on .tj-reel__on{display:block}

/* FAQ ------------------------------------------------------------------------------------- */
.tj-faq__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;align-items:start}
.tj-faq__list{border-top:1px solid var(--tj-line)}
.tj-faq__item{border-bottom:1px solid var(--tj-line)}
.tj-faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;font-size:17px;font-weight:500;color:var(--tj-ink);cursor:pointer;list-style:none}
.tj-faq__item summary::-webkit-details-marker{display:none}
.tj-faq__item summary svg{flex:none;transition:transform .2s}
.tj-faq__item[open] summary svg{transform:rotate(45deg)}
.tj-faq__item p{margin:0 0 22px;max-width:720px;font-size:15.5px;line-height:1.75;color:var(--tj-body)}
.tj-faq--product .tj-faq__inner{grid-template-columns:1fr}
@media (max-width:900px){.tj-faq__inner{grid-template-columns:1fr;gap:20px}.tj-faq__item summary{font-size:16px;padding:16px 0}}

/* Product gallery: visible before the slider script runs, clear thumbnails, arrows ---------- */
.woocommerce-product-gallery{opacity:1!important}
/* Keep the room of the thumbnail row before the slider script adds it, so nothing jumps. */
.tj-has-thumbs .woocommerce-product-gallery{aspect-ratio:1/1.2}
.woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__image:not(:first-child){display:none}
/* Images fill the square, 15px corners, a very light 1px border and 10px between slides. */
.woocommerce-product-gallery__image{background:transparent}
.woocommerce-product-gallery__image img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;box-sizing:border-box;border:1px solid #ececec;border-radius:15px;background:#fafafa}
.woocommerce-product-gallery .flex-viewport{overflow:hidden;height:auto!important;aspect-ratio:1/1;position:relative;touch-action:pan-y pinch-zoom}
.woocommerce-product-gallery__wrapper{touch-action:pan-y pinch-zoom}
.flex-control-thumbs{list-style:none;padding:0;margin:10px 0 0;gap:10px}
.flex-control-thumbs img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;box-sizing:border-box;border:1px solid #ececec;border-radius:10px;background:#fafafa;opacity:.75;transition:opacity .2s,border-color .2s}
.flex-control-thumbs img.flex-active{border-color:#111;opacity:1}

/* Zoom button: a clean magnifier. */
.woocommerce-product-gallery__trigger{top:12px;right:22px;width:40px;height:40px;border:1px solid #ececec;background:#fff;box-shadow:none;color:#111;transition:background .2s,color .2s}
.woocommerce-product-gallery__trigger:before{width:18px;height:18px;border:0;border-radius:0;box-shadow:none;transform:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center/contain no-repeat}
.woocommerce-product-gallery__trigger:hover{background:#111;color:#fff}

/* Previous and next buttons (built in app.js, icon only). */
.tj-galnav{position:absolute;top:50%;z-index:6;display:grid;place-items:center;width:40px;height:40px;margin-top:-20px;padding:0;border:1px solid #ececec;border-radius:50%;background:#fff;color:#111;cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.tj-galnav:hover{background:#111;color:#fff}
.tj-galnav svg{display:block}
.tj-galnav--prev{left:12px}
.tj-galnav--next{right:22px}
@media (hover:hover) and (min-width:768px){.tj-galnav{opacity:0}.woocommerce-product-gallery:hover .tj-galnav,.tj-galnav:focus-visible{opacity:1}}

/* Product cards: no quick add circle on phones and tablets, and no stray check mark. */
.tj-quick .button.added:after{content:none}
@media (hover:none),(max-width:1023px){.tj-quick{display:none}}

/* Side cart scrolling: only the item list scrolls, the shipping bar and the totals stay in view. */
.tj-drawer{height:100vh;height:100dvh;max-height:100dvh}
.tj-drawer__body{min-height:0}
.widget_shopping_cart_content.tj-drawer__body{overflow:hidden}
.widget_shopping_cart_content .tj-ship,.widget_shopping_cart_content .tj-mini__foot{flex:none}
.widget_shopping_cart_content .tj-mini{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;margin:0;list-style:none}

/* Page width: 90% on desktop and tablet, full width with 10px side padding on mobile -------- */
:root{--tj-gutter:0px}
.tj-container,.tj-banners{width:90%;min-width:90%;max-width:90%;margin-inline:auto;padding-inline:0}
.tj-reels__track{padding-inline:5%}
@media (max-width:767px){
	:root{--tj-gutter:10px}
	.tj-container,.tj-banners{width:100%;min-width:100%;max-width:100%;margin-inline:0;padding-inline:10px}
	.tj-reels__track{padding-inline:10px}
}

/* Responsive ----------------------------------------------------------------- */
@media (max-width:640px){
	.tj-service{grid-template-columns:1fr}
	.tj-service li:nth-child(odd){border-right:0}
	.tj-service li:nth-last-child(2){border-bottom:1px solid var(--tj-line)}
	.tj-reel{width:44vw}
	.tj-wa{bottom:84px;right:14px;width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce){
	.tj-lowstock span{animation:none}
}