/* ========================================================================== GrowDeshi — Single product page Loaded on is_product() (see inc/woocommerce.php). Product cards in the related section reuse .pcard / .shop-grid from shop.css (also enqueued on products). ========================================================================== */ .product-page { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } /* Breadcrumb */ .product-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 14px 0; font-family: var(--font-ui); font-size: 12px; border-bottom: 0.5px solid var(--c-line); } .product-breadcrumb a { color: #52B788; font-weight: 600; text-decoration: none; } .product-breadcrumb a:hover { color: #2D6A4F; text-decoration: underline; } .product-breadcrumb .ph { color: #9C9A92; font-size: 12px; } .product-breadcrumb__current { color: var(--c-soil); font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Main 2-col */ .product-main { display: grid; grid-template-columns: 1fr; gap: 32px; padding: clamp(24px, 4vw, 40px) 0; } @media (min-width: 1024px) { .product-main { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } } /* -------------------------------------------------------------------------- Gallery -------------------------------------------------------------------------- */ .product-gallery__main { position: relative; aspect-ratio: 1 / 1; border-radius: 14px; border: 0.5px solid var(--c-line); background: #D8F3DC; overflow: hidden; } .product-gallery__main::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(45,106,79,0.06) 1px, transparent 1px); background-size: 14px 14px; } .product-gallery__main::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 28%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 60%); } .product-gallery__img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; padding: clamp(16px, 4vw, 40px); cursor: zoom-in; } .product-gallery__season { position: absolute; top: 16px; left: 16px; z-index: 2; display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 11px; font-family: var(--font-bengali); font-size: 11.5px; font-weight: 600; background: #2D6A4F; color: #D8F3DC; } .product-gallery__wish { position: absolute; top: 16px; right: 16px; z-index: 2; width: 44px; height: 44px; border: none; border-radius: 999px; background: rgba(255,255,255,0.94); box-shadow: 0 2px 6px rgba(45,106,79,0.18); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #5C4033; font-size: 19px; transition: transform .15s, color .15s; } .product-gallery__wish:hover { transform: scale(1.08); } .product-gallery__wish.is-active { color: #E63946; } .product-gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; } .product-gallery__thumb { aspect-ratio: 1 / 1; border-radius: 10px; border: 0.5px solid var(--c-line); background: #D8F3DC; overflow: hidden; cursor: pointer; padding: 6px; } .product-gallery__thumb.is-active { border: 1.5px solid #52B788; box-shadow: var(--c-card-shadow); } .product-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; } /* -------------------------------------------------------------------------- Buy box -------------------------------------------------------------------------- */ .product-buy { display: flex; flex-direction: column; } .product-buy__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .product-buy__cat { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: #D8F3DC; color: #0F6E56; font-family: var(--font-bengali); font-size: 12px; font-weight: 700; } .product-buy__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--cat, #52B788); } .product-buy__rating { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 13px; color: #1A2E24; text-decoration: none; } .product-buy__rating span { color: #6B6960; } .product-buy__rating--empty { color: #9C9A92; font-family: var(--font-bengali); } .product-buy__rating--empty .gd-stars { opacity: 0.45; } .product-buy__title { font-family: var(--font-bengali); font-weight: 800; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.2; letter-spacing: -0.6px; color: #1A2E24; margin: 12px 0 0; text-wrap: balance; } .product-buy__sub { font-family: var(--font-ui); font-size: 14.5px; color: #6B6960; margin: 6px 0 0; } .product-buy__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; } .product-buy__spec { display: flex; align-items: flex-start; gap: 10px; border-radius: 10px; padding: 12px; background: #F5F0E8; border: 0.5px solid var(--c-line); } .product-buy__spec-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: #fff; color: #2D6A4F; font-size: 18px; flex-shrink: 0; } .product-buy__spec-text { display: flex; flex-direction: column; min-width: 0; } .product-buy__spec-label { font-family: var(--font-ui); font-size: 11px; color: #6B6960; } .product-buy__spec-value { font-family: var(--font-bengali); font-size: 12.5px; font-weight: 600; color: #1A2E24; line-height: 1.4; } .product-buy__price-row { margin-top: 24px; padding-top: 20px; border-top: 0.5px solid var(--c-line); } .product-buy__price .pcard__price-now { font-size: 40px; letter-spacing: -1.2px; } .product-buy__price .pcard__price-was { font-size: 18px; } .product-buy__vat { font-family: var(--font-bengali); font-size: 12px; color: #9C9A92; margin: 6px 0 0; } .product-buy__free { color: #2D6A4F; font-weight: 600; } .product-buy__stock { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-family: var(--font-bengali); font-size: 13px; font-weight: 600; } .product-buy__stock .ph { font-size: 15px; } .product-buy__stock--in { color: #2D6A4F; } .product-buy__stock--low { color: #F4A261; } .product-buy__stock--out { color: #E63946; } .product-buy__stock-qty { opacity: 0.7; font-weight: 500; } .product-buy__weight { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 7px 12px; border-radius: 999px; background: #D8F3DC; color: #1F3528; font-family: var(--font-bengali); font-size: 13px; font-weight: 600; } .product-buy__weight .ph { font-size: 16px; color: #2D6A4F; } .product-buy__weight strong { font-weight: 800; color: #2D6A4F; } .product-buy__actions { margin-top: 20px; } .product-buy__row { display: flex; align-items: stretch; gap: 10px; } .product-qty { display: inline-flex; align-items: center; height: 52px; border: 1px solid var(--c-line); border-radius: 10px; background: #fff; overflow: hidden; flex-shrink: 0; } .product-qty__btn { width: 44px; height: 100%; border: none; background: transparent; color: #2D6A4F; cursor: pointer; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; } .product-qty__btn:hover { background: #F6F4EF; } .product-qty__input { width: 40px; height: 100%; border: none; outline: none; text-align: center; font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: #1A2E24; background: transparent; } .product-add { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border: none; border-radius: 10px; background: #2D6A4F; color: #D8F3DC; font-family: var(--font-bengali); font-weight: 700; font-size: 14px; cursor: pointer; transition: background .18s, transform .1s; } .product-add:hover { background: #085041; } .product-add:active { transform: scale(.98); } .product-add .ph { font-size: 17px; } .product-add.is-disabled { background: #F6F4EF; color: #9C9A92; cursor: not-allowed; width: 100%; } .product-wishbtn { width: 52px; height: 52px; flex-shrink: 0; border: 0.5px solid var(--c-line); border-radius: 10px; background: #fff; color: #6B6960; cursor: pointer; font-size: 19px; display: inline-flex; align-items: center; justify-content: center; transition: color .15s, background .15s; } .product-wishbtn:hover { background: #F6F4EF; } .product-wishbtn.is-active { color: #E63946; } .product-buybtn { width: 100%; margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border: none; border-radius: 10px; background: #F4A261; color: #1A2E24; font-family: var(--font-bengali); font-weight: 700; font-size: 14px; cursor: pointer; transition: background .18s; } .product-buybtn:hover { background: #FFB87A; } .product-buybtn .ph { font-size: 16px; } .product-buy__assurance { margin-top: 16px; display: grid; grid-template-columns: 1fr; gap: 10px; padding: 14px; border: 0.5px solid var(--c-line); border-radius: 12px; background: #fff; } @media (min-width: 480px) { .product-buy__assurance { grid-template-columns: 1fr 1fr; } } .product-buy__assure { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 12px; color: #1A2E24; } .product-buy__assure .ph { color: #52B788; font-size: 15px; flex-shrink: 0; } .product-buy__assure [lang="bn"] { font-weight: 600; } .product-buy__share { display: flex; align-items: center; gap: 8px; margin-top: 20px; flex-wrap: wrap; } .product-buy__share-label { font-family: var(--font-bengali); font-size: 12.5px; font-weight: 600; color: #5C4033; } .product-share { width: 36px; height: 36px; border-radius: 999px; border: 0.5px solid var(--c-line); background: #F6F4EF; color: #6B6960; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; text-decoration: none; transition: transform .15s, color .15s; } .product-share:hover { transform: scale(1.08); color: #2D6A4F; } /* -------------------------------------------------------------------------- Tabs -------------------------------------------------------------------------- */ .product-tabs { padding: clamp(24px, 4vw, 40px) 0; border-top: 0.5px solid var(--c-line); } .product-tabs__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } .product-tabs__nav { display: flex; gap: 8px; border-bottom: 0.5px solid var(--c-line); overflow-x: auto; } .product-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 4px; border: none; background: none; cursor: pointer; font-family: var(--font-bengali); font-size: 13.5px; font-weight: 600; color: #6B6960; white-space: nowrap; } .product-tab + .product-tab { margin-left: 16px; } .product-tab.is-active { color: #2D6A4F; } .product-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.5px; height: 2px; background: #2D6A4F; } .product-tab__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: #F6F4EF; color: #9C9A92; font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; } .product-tab.is-active .product-tab__count { background: #D8F3DC; color: #2D6A4F; } .product-tab-panel { display: none; padding-top: 24px; } .product-tab-panel.is-active { display: block; } .product-tab-panel__desc { font-family: var(--font-bengali); font-size: 15px; line-height: 1.8; color: var(--c-soil); max-width: 720px; } .product-tab-panel__desc p { margin: 0 0 1em; } .product-specs { margin-top: 24px; max-width: 560px; } .product-specs__label { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #52B788; margin-bottom: 10px; } .product-specs__label [lang="bn"] { text-transform: none; } .product-specs__table { border: 0.5px solid var(--c-line); border-radius: 12px; overflow: hidden; } .product-specs__row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; padding: 12px 16px; font-size: 13.5px; } .product-specs__row:nth-child(even) { background: #F6F4EF; } .product-specs__k { color: #6B6960; font-family: var(--font-ui); } .product-specs__v { color: #1A2E24; font-weight: 600; font-family: var(--font-bengali); } .product-reviews-empty { font-family: var(--font-bengali); color: #6B6960; padding: 16px 0; } /* -------------------------------------------------------------------------- Related -------------------------------------------------------------------------- */ .product-related { border-top: 0.5px solid var(--c-line); } .product-related__inner { max-width: var(--container-max); margin: 0 auto; padding: clamp(32px, 5vw, 56px) var(--container-pad); display: flex; flex-direction: column; gap: clamp(32px, 5vw, 48px); } .product-related__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #52B788; } .product-related__eyebrow [lang="bn"] { text-transform: none; font-family: var(--font-bengali); } .product-related__rule { width: 16px; height: 1px; background: #52B788; opacity: 0.6; } .product-related__title { font-family: var(--font-bengali); font-weight: 800; font-size: 22px; letter-spacing: -0.3px; color: #1A2E24; margin: 6px 0 16px; } .product-related__head { margin-bottom: 16px; } /* Horizontal product carousel (4 per row on desktop, scroll for more) */ .product-carousel { position: relative; } .product-carousel__track { display: flex; gap: 18px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 2px 6px; } .product-carousel__track::-webkit-scrollbar { display: none; } .product-carousel__track > .pcard { flex: 0 0 78%; scroll-snap-align: start; } @media (min-width: 560px) { .product-carousel__track > .pcard { flex: 0 0 calc((100% - 18px) / 2); } } @media (min-width: 768px) { .product-carousel__track > .pcard { flex: 0 0 calc((100% - 36px) / 3); } } @media (min-width: 1024px) { .product-carousel__track > .pcard { flex: 0 0 calc((100% - 54px) / 4); } } /* Keep card internals aligned across the row: cards already stretch to equal height (flex), so reserve 2 title lines and pin the price/stock/Add group to the bottom — Add buttons (and the rows above them) line up regardless of how long each product title is or whether a card has a rating. */ .product-carousel__track > .pcard .pcard__title { min-height: 2.7em; } .product-carousel__track > .pcard .pcard__price { margin-top: auto; } .product-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 999px; border: 0.5px solid var(--c-line); background: #fff; color: #2D6A4F; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 4px 14px rgba(45,106,79,0.16); transition: background .15s, color .15s, opacity .2s; } .product-carousel__arrow:hover { background: #2D6A4F; color: #fff; } .product-carousel__arrow--prev { left: -6px; } .product-carousel__arrow--next { right: -6px; } .product-carousel__arrow[hidden] { display: none; } @media (max-width: 767px) { .product-carousel__arrow { display: none; } } /* -------------------------------------------------------------------------- Sticky mobile add-to-cart bar -------------------------------------------------------------------------- */ .product-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: #fff; border-top: 0.5px solid var(--c-line); box-shadow: 0 -4px 16px rgba(45,106,79,0.10); transform: translateY(100%); transition: transform .25s ease; } .product-stickybar.is-visible { transform: translateY(0); } .product-stickybar[hidden] { display: none; } .product-stickybar__inner { max-width: var(--container-max); margin: 0 auto; padding: 10px var(--container-pad); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .product-stickybar__info { display: flex; align-items: center; gap: 10px; min-width: 0; } .product-stickybar__img { width: 40px; height: 40px; border-radius: 8px; background: #D8F3DC; object-fit: contain; flex-shrink: 0; } .product-stickybar__title { font-family: var(--font-bengali); font-size: 13px; font-weight: 600; color: #1A2E24; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; } .product-stickybar__price { font-family: var(--font-bengali); font-size: 14px; font-weight: 800; color: #2D6A4F; } .product-stickybar .product-add { flex: 0 0 auto; height: 44px; padding: 0 18px; } @media (min-width: 861px) { .product-stickybar { display: none; } } /* -------------------------------------------------------------------------- Buy-box button EN suffix + gallery zoom hint (parity with reference design) -------------------------------------------------------------------------- */ .product-add__en { opacity: 0.7; font-weight: 600; } .product-buybtn .product-add__en { color: inherit; } @media (max-width: 600px) { .product-add__en { display: none; } } .product-gallery__zoom { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(26,46,36,0.88); color: #D8F3DC; font-family: var(--font-bengali); font-size: 11.5px; font-weight: 500; opacity: 0; pointer-events: none; backdrop-filter: blur(4px); transition: opacity .2s ease; } .product-gallery__zoom .ph { font-size: 13px; } .product-gallery__main:hover .product-gallery__zoom { opacity: 1; } /* -------------------------------------------------------------------------- Reviews tab — native WooCommerce review list + form, brand-styled. Scoped to #product-reviews so it never leaks into other comment forms. -------------------------------------------------------------------------- */ /* The duplicate WC "Reviews" h2 is redundant with our tab label. */ #product-reviews .woocommerce-Reviews-title { display: none; } #product-reviews #reviews { margin: 0; } /* Native rating summary (avg + per-star distribution) */ .product-reviews-summary { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 20px; margin-bottom: 24px; border: 0.5px solid var(--c-line); border-radius: 14px; background: #fff; } @media (min-width: 720px) { .product-reviews-summary { grid-template-columns: minmax(140px, 200px) 1fr; gap: 40px; align-items: center; } } .product-reviews-summary__score { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .product-reviews-summary__avg { font-family: var(--font-ui); font-weight: 800; font-size: 64px; line-height: 1; letter-spacing: -2px; color: #2D6A4F; } .product-reviews-summary__score .gd-stars { font-size: 18px; color: #F4A261; } .product-reviews-summary__count { font-family: var(--font-bengali); font-size: 13px; color: #6B6960; } .product-reviews-summary__bars { display: flex; flex-direction: column; gap: 8px; } .product-reviews-summary__bar { display: grid; grid-template-columns: 40px 1fr 28px; gap: 10px; align-items: center; } .product-reviews-summary__bar-label { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-ui); font-size: 12px; color: #6B6960; } .product-reviews-summary__bar-label .ph-star { color: #F4A261; font-size: 11px; } .product-reviews-summary__track { height: 10px; border-radius: 999px; background: #F6F4EF; overflow: hidden; } .product-reviews-summary__fill { display: block; height: 100%; border-radius: 999px; background: #52B788; } .product-reviews-summary__bar-count { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: #1A2E24; text-align: right; } /* Empty state */ #product-reviews .woocommerce-noreviews { font-family: var(--font-bengali); font-size: 14px; color: #6B6960; margin: 0 0 20px; padding: 16px 18px; border: 0.5px dashed var(--c-line-strong); border-radius: 12px; background: #FBFAF6; } /* Review list */ #product-reviews .commentlist { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; } #product-reviews .commentlist li.review .comment_container { display: flex; gap: 14px; padding: 18px; border: 0.5px solid var(--c-line); border-radius: 12px; background: #fff; } #product-reviews .commentlist img.avatar { position: static; width: 44px; height: 44px; border-radius: 999px; margin: 0; padding: 0; border: none; float: none; flex-shrink: 0; } #product-reviews .commentlist .comment-text { margin: 0; border: none; padding: 0; flex: 1; min-width: 0; } #product-reviews .commentlist .meta { font-family: var(--font-ui); font-size: 13px; color: #6B6960; margin: 0 0 8px; } #product-reviews .commentlist .woocommerce-review__author { font-weight: 700; color: #1A2E24; } #product-reviews .commentlist .woocommerce-review__dash { color: #9C9A92; } #product-reviews .commentlist .description { font-family: var(--font-bengali); font-size: 14px; line-height: 1.7; color: var(--c-soil); } #product-reviews .commentlist .description p { margin: 0 0 0.6em; } /* Review-list star display (WC font-based .star-rating) tinted to brand amber */ #product-reviews .star-rating { color: #F4A261; margin: 2px 0 6px; } #product-reviews .star-rating::before { color: #E8E6DF; } #product-reviews .star-rating span::before { color: #F4A261; } /* Custom star input widget (replaces the WC rating