/* ================================================
   GITANJALI AWARDS — Shared "Inner Page" Stylesheet
   Loads on every non-home template (CMS pages, category/product
   listing, etc.) — see includes/head.php. Home never loads this file.
   ================================================ */

/* ================================================
   CMS "BTGRID" SHOWCASE BLOCKS
   Admin-authored alternating image/text panels, e.g. the About Us
   "We have… / We Create…" blocks. Markup stays exactly as saved by
   CKEditor — these rules only reskin the existing Bootstrap utility
   classes (btgrid / bg-light / rounded-3 / row-1 / col-md-6 / content /
   card_min_H) to match the site's look.
   ================================================ */

/* Plain intro paragraph (btgrid with no bg-light, centered lead text) */
.inner-content .btgrid .content > p.text-center:first-child {
  font-size: 16.5px;
  color: var(--text-mid);
  max-width: 760px;
  margin: 0 auto 18px;
  line-height: 1.9;
}

/* Showcase panel card */
.inner-content .btgrid.bg-light {
  background: var(--cream) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg) !important;
  padding: 30px !important;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.inner-content .btgrid.bg-light:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.inner-content .btgrid.bg-light .row-1 { row-gap: 20px; }

/* Image cell inside a panel */
.inner-content .card_min_H {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 6px;
}
.inner-content .card_min_H p { margin: 0; }
.inner-content .card_min_H img {
  border-radius: var(--radius);
  box-shadow: none;
  margin: 0;
}

/* Text cell inside a panel */
.inner-content .btgrid.bg-light .content h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 14px;
  position: relative;
  padding-bottom: 12px;
}
.inner-content .btgrid.bg-light .content h4::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 42px; height: 3px;
  background: var(--gold);
  border-radius: 2px;
}
.inner-content .btgrid.bg-light .content ul,
.inner-content .btgrid.bg-light .content p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .inner-content .btgrid.bg-light { padding: 22px !important; }
  .inner-content .card_min_H { min-height: auto; margin-bottom: 4px; }
}

/* ================================================
   READING WIDTH
   The template no longer wraps CMS content in its own Bootstrap column
   (that was compounding with any grid the admin content defines itself,
   e.g. the About Us showcase panels, squeezing everything down to a
   fraction of the page width). Instead: plain text-only pages (no
   internal .row/grid of their own) get a comfortable capped reading
   width here; pages that define their own grid layout are left at full
   container width so that layout isn't fought by an outer restriction.
   ================================================ */
.inner-content:not(:has(.row)) {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}


/* ================================================
   CATEGORY / PRODUCT LISTING
   Page header + breadcrumb come from the shared rules above.
   Everything below is specific to the category/product listing
   template (price filter sidebar, subcategory grid, product grid,
   inquiry form) — reuses .product-card / .contact-form-card /
   .form-label / .btn-gold / .btn-outline-gold / .section-label /
   .section-title / .divider-gold defined above.
   ================================================ */

.category-section { background: var(--cream); }

/* ================================================
   CATEGORY DESCRIPTION (CMS rich text — reuses .inner-content
   typography from custom-new.css)
   ================================================ */
.category-description { margin-bottom: 36px; }

/* ================================================
   SIDEBAR — PRICE FILTER
   ================================================ */
.shop-sidebar {
  position: sticky;
  top: 90px;
}

.filter-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
}

.filter-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.filter-options { list-style: none; margin: 0 0 18px; padding: 0; }
.filter-options li { margin-bottom: 4px; }

.filter-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--transition);
}
.filter-radio:hover { background: var(--gold-pale); }
.filter-radio input[type="radio"] {
  accent-color: var(--gold);
  width: 16px; height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.filter-radio span {
  font-size: 13.5px;
  color: var(--text-mid);
}

.filter-range-inputs {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.filter-range-inputs .form-control {
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13.5px;
  background: var(--cream);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.filter-range-inputs .form-control:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,136,42,0.12);
  background: var(--white);
  outline: none;
}

.filter-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-actions .btn-gold,
.filter-actions .btn-outline-gold {
  flex: 1;
  text-align: center;
  padding: 10px 14px;
  font-size: 12px;
  cursor: pointer;
}

@media (max-width: 991px) {
  .shop-sidebar { position: static; margin-bottom: 30px; }
}

/* ================================================
   SUBCATEGORY GRID
   (when the current category still has child categories)
   ================================================ */
.subcat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  position: relative;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.subcat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-5px);
  border-color: rgba(184,136,42,0.25);
  z-index: 2;
}

.subcat-img-wrap {
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 24px;
  border-bottom: 1px solid var(--border);
}
.subcat-img-wrap img {
  max-height: 200px;
  width: auto;
  object-fit: contain;
  transition: transform var(--transition);
}
.subcat-card:hover .subcat-img-wrap img { transform: scale(1.06); }

.subcat-info { padding: 18px 20px 20px; text-align: center; }
.subcat-name {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 4px;
}
.subcat-count {
  font-size: 12.5px;
  color: var(--text-mid);
  margin: 0 0 16px;
}
/* Subcategory tiles reuse .product-link (custom-new.css) for their
   "View Products" CTA — this just wires up the same hover animation
   for the .subcat-card wrapper. */
.subcat-card:hover .product-link { gap: 10px; }

/* ================================================
   PRODUCT GRID
   (reuses .product-card / .product-img-wrap / .product-info /
   .product-title / .product-link from custom-new.css — these rules
   only add the price + model-no row specific to shop listings)
   ================================================ */
.shop-product-card { display: flex; flex-direction: column; height: 100%; }
.shop-product-card .product-img-wrap {
  min-height: 300px;
  background: var(--white);
}
.shop-product-card .product-img-wrap img { max-height: 260px; }

.shop-model-no {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-mid);
  margin: 0 0 6px;
}

.shop-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.shop-price .old-price {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-mid);
  text-decoration: line-through;
}

.shop-product-card .product-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Action buttons — always one line, equal width, shrink to fit */
.shop-actions {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  margin-top: auto;
}
.shop-actions .btn-gold,
.shop-actions .btn-outline-gold {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 8px;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 400px) {
  .shop-actions { flex-wrap: wrap; }
  .shop-actions .btn-gold,
  .shop-actions .btn-outline-gold { flex: 1 1 100%; }
}

/* Empty state */
.shop-empty {
  background: var(--white);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 60px 24px;
  text-align: center;
  color: var(--text-mid);
}
.shop-empty i {
  font-size: 34px;
  color: var(--gold-pale);
  margin-bottom: 14px;
  display: block;
}
.shop-empty h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  color: var(--navy);
  margin: 0 0 6px;
}

/* ================================================
   INQUIRY / CONTACT SECTION
   (reuses .contact-form-card / .form-label / .form-control /
   .section-label / .section-title / .divider-gold from custom-new.css)
   ================================================ */
.category-inquiry-wrap {
  background: var(--cream);
  padding: 70px 0;
}

.category-inquiry-note {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.85;
}

@media (max-width: 767px) {
  .category-inquiry-wrap { padding: 46px 0; }
}

/* ================================================
   PRODUCT DETAILS PAGE
   Replaces the old elevateZoom/fancybox/jcarousel setup (jQuery-plugin
   heavy, and the hover-zoom simply didn't work on touch devices) with:
   - a plain thumbnail-swap gallery (vanilla JS)
   - a CSS-driven hover-zoom lens, auto-disabled on touch/no-hover
     devices via a feature-detect media query — so it never tries (and
     fails) to do a hover effect where there's no hover
   - tap/click on the image opens a modal with the full-resolution
     image; since the site's viewport meta doesn't lock scaling, mobile
     users get native OS pinch-zoom on that image for free
   ================================================ */
.product-detail-section { background: var(--white); }

/* ---- Gallery ---- */
.pd-gallery { position: sticky; top: 90px; }

.pd-main-img-wrap {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
  cursor: zoom-in;
}
.pd-main-img-wrap img#pdMainImage {
  width: 100%;
  height: 420px;
  object-fit: contain;
  padding: 30px;
  display: block;
  position: relative;
  z-index: 1;
  background: var(--white);
}

/* Hover-zoom lens: desktop / mouse pointers only */
@media (hover: hover) and (pointer: fine) {
  .pd-main-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--pd-zoom-img, none);
    background-repeat: no-repeat;
    background-size: 220%;
    background-position: var(--pd-zoom-x, 50%) var(--pd-zoom-y, 50%);
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 2;
    pointer-events: none;
  }
  .pd-main-img-wrap.zooming::after { opacity: 1; }
}

.pd-zoom-hint {
  position: absolute;
  bottom: 14px; right: 14px;
  background: rgba(26,42,58,0.82);
  color: var(--white);
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  z-index: 3;
  pointer-events: none;
}

.pd-thumb-strip {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.pd-thumb {
  flex: 0 0 76px;
  width: 76px; height: 76px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  transition: border-color var(--transition);
}
.pd-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pd-thumb:hover { border-color: var(--gold-light); }
.pd-thumb.active { border-color: var(--gold); }

/* Full-image zoom modal */
.pd-zoom-modal-body {
  padding: 0;
  background: var(--cream);
  text-align: center;
}
.pd-zoom-modal-body img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

@media (max-width: 991px) {
  .pd-gallery { position: static; margin-bottom: 32px; }
}

/* ---- Product info column ---- */
.pd-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 6px;
}
.pd-model { font-size: 13px; color: var(--text-mid); margin: 0 0 16px; }

.pd-price, .prccr {
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pd-price .text-decoration-line-through,
.prccr .text-decoration-line-through {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-mid);
}

.pd-short-desc {
  font-size: 14.5px;
  color: var(--text-mid);
  line-height: 1.8;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.pd-attr-label {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--navy);
  display: block;
  margin-bottom: 10px;
}

.pd-attr-row { margin-bottom: 20px; }
.pd-attr-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-attr-pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 2px solid var(--border);
  border-radius: 30px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mid);
  cursor: pointer;
  transition: all var(--transition);
}
.btn-check:checked + .pd-attr-pill {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
  font-weight: 600;
}
.pd-attr-pill:hover { border-color: var(--gold-light); }
.pd-attr-error { font-size: 12px; color: #C0392B; display: block; margin-top: 6px; }

.pd-qty-row { margin-bottom: 20px; }
.pd-qty-input {
  max-width: 140px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  background: var(--cream);
}
.pd-qty-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,136,42,0.12);
  background: var(--white);
  outline: none;
}
.pd-qty-note { font-size: 12.5px; color: #C0392B; margin: 8px 0 0; }

.pd-custom-row { margin-bottom: 20px; }
.pd-custom-row textarea {
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  background: var(--cream);
  width: 100%;
  min-height: 90px;
}
.pd-custom-row textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,136,42,0.12);
  background: var(--white);
  outline: none;
}

.pd-upload-row { margin-bottom: 22px; }
.pd-upload-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 26px 20px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--cream);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition), background var(--transition);
}
.pd-upload-box:hover { border-color: var(--gold); background: var(--gold-pale); }
.pd-upload-box i { font-size: 22px; color: var(--gold); }
.pd-upload-title { font-size: 14px; font-weight: 600; color: var(--navy); }
.pd-upload-hint { font-size: 12px; color: var(--text-mid); }
.pd-upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.pd-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.pd-actions .btn-gold,
.pd-actions .btn-outline-gold {
  flex: 1 1 200px;
  text-align: center;
  cursor: pointer;
  border: 2px solid var(--gold);
}

.pd-gst-note {
  font-size: 13px;
  color: var(--text-mid);
  margin-bottom: 20px;
}
.pd-gst-note ul { margin: 6px 0 0; padding-left: 20px; }

.pd-whatsapp {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #E9F9EE;
  border: 1px solid #BFEACD;
  border-radius: var(--radius);
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 500;
  transition: box-shadow var(--transition);
}
.pd-whatsapp:hover { box-shadow: var(--shadow-sm); }
.pd-whatsapp i { font-size: 26px; color: #1BD741; flex-shrink: 0; }

/* ---- Description / common content ---- */
.pd-description { margin-top: 60px; }
.pd-description h3 {
  margin-top: 0 !important;
}

/* ---- Related products (owl-carousel — restyled to match .product-card) ---- */
.related-products-section { background: var(--cream); position: relative; }
.related-products-section .owl-stage-outer { padding: 6px 4px 20px; }
.related-products-section .product-card { margin: 0 10px; }
.related-products-section .product-img-wrap { min-height: 240px; }
.related-products-section .product-img-wrap img { max-height: 190px; }

/* Prev/Next arrows — same look as the hero slider / testimonial arrows */
.related-products-section .owl-nav {
  position: absolute;
  top: 42%;
  left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.related-products-section .owl-nav button.owl-prev,
.related-products-section .owl-nav button.owl-next {
  pointer-events: auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--border);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  margin: 0 -18px;
}
.related-products-section .owl-nav button.owl-prev:hover,
.related-products-section .owl-nav button.owl-next:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}

/* Dots */
.related-products-section .owl-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.related-products-section .owl-dot span {
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: all var(--transition);
}
.related-products-section .owl-dot.active span {
  width: 24px;
  border-radius: 4px;
  background: var(--gold);
}

@media (max-width: 767px) {
  .related-products-section .owl-nav { display: none; }
}

/* ---- FAQ accordion ---- */
.pd-faq { margin-top: 20px; }
.pd-faq .accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius) !important;
  overflow: hidden;
  margin-bottom: 12px;
}
.pd-faq .accordion-button {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  background: var(--white);
  padding: 16px 20px;
}
.pd-faq .accordion-button:not(.collapsed) {
  background: var(--gold-pale);
  color: var(--navy);
  box-shadow: none;
}
.pd-faq .accordion-button:focus { box-shadow: none; border-color: var(--border); }
.pd-faq .accordion-button::after { flex-shrink: 0; }
.pd-faq .accordion-body {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.8;
  padding: 18px 20px;
}

@media (max-width: 767px) {
  .pd-main-img-wrap img#pdMainImage { height: 300px; padding: 20px; }
  .pd-actions .btn-gold,
  .pd-actions .btn-outline-gold { flex: 1 1 100%; }
}

/* ================================================
   CART / CHECKOUT (server-rendered HTML)
   The product table + order summary here are NOT built in the view —
   they're generated as a raw HTML string in
   Gitanjali1_shoppingcart::mycart() (and a near-identical block in
   checkout()), then echoed as-is via $cart_data. These rules target the
   exact classes that controller already outputs, so the cart looks
   right without touching that logic.
   ================================================ */

.cart-wide-container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px;
}

.cart-page-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
}

.error_message {
  flex: 1 1 100%;
  background: #FDECEA;
  border: 1px solid #F3C4BE;
  color: #C0392B;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 13.5px;
  margin-bottom: 4px;
}

/* ---- Product table ---- */
.carttabsec {
  flex: 2 1 640px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-sm);
}

.carttabsec table.taler {
  width: 100%;
  border-collapse: collapse;
  margin: 0 !important;
  border: none !important;
}
.carttabsec table.taler tr:first-child th {
  background: var(--navy);
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 16px 14px;
  border: none !important;
  text-align: center;
}
.carttabsec table.taler td {
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 18px 14px;
  vertical-align: middle !important;
  font-size: 13.5px;
  color: var(--text-mid);
}
.carttabsec table.taler tr:last-child td { border-bottom: none !important; }

.lftimg {
  width: 100px;
  flex: 0 0 100px;
}
.lftimg img,
.proig,
.img_border {
  width: 100px;
  height: 100px;
  object-fit: contain;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
}

.product-detail-portion { padding-left: 16px; text-align: left; }
.product-name {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 6px;
  line-height: 1.4;
}
.product-detail-portion p {
  font-size: 12.5px;
  color: var(--text-dark);
  margin: 4px 0 0;
}
.customimage img {
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-top: 6px;
}

.item-quantity { text-align: center; }
.product-qty-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cart-quantity-select {
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  background: var(--cream);
  color: var(--text-dark);
}
.cart-quantity-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,136,42,0.12);
  outline: none;
  background: var(--white);
}
.delete_icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #C0392B;
  text-transform: uppercase;
  transition: color var(--transition);
}
.delete_icon::before {
  content: '\f2ed'; /* fa-trash */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 12px;
}
.delete_icon:hover { color: var(--navy); }
.delete_icon .pricesr1 { font-size: inherit; }

/* ---- Order summary ---- */
.rightcartsum { flex: 1 1 320px; max-width: 400px; }

.orderbx-bxcr {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
}
.glc-titleor {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.glc-colrscs ul { list-style: none; margin: 0; padding: 0; }
.glc-colrscs li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
.lftarbx1, .rhtarbx1 { display: inline-flex; }
.totpbx, .totpbx1 {
  font-size: 13.5px;
  color: var(--text-mid);
}
.totpbx1 { font-weight: 700; color: var(--navy); font-size: 15px; }
.totprc { font-size: 15px; font-weight: 600; color: var(--text-dark); }
.glc-colrscs li:has(.totpbx1) { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 16px; }
.glc-colrscs li:has(.totpbx1) .totprc { font-size: 20px; font-weight: 700; color: var(--gold); }
.clr { clear: both; }

#processdata:not(:empty) { margin-top: 14px; }

.btnplace { margin-top: 20px; }
.btnplace .btn.btn-warning {
  display: block;
  width: 100%;
  background: var(--gold);
  border: 2px solid var(--gold);
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 13px 20px;
  border-radius: 6px;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.btnplace .btn.btn-warning:hover {
  background: transparent;
  color: var(--gold);
  transform: translateY(-2px);
}

/* ---- Empty cart state (bare <table>, no class — see mycart()) ---- */
.cart-page-body > table {
  width: 100%;
  background: var(--white);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}
.cart-page-body > table td { padding: 70px 20px; text-align: center; }
.cart-page-body > table h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
}
.cart-page-body > table h3 span { color: var(--navy) !important; }

@media (max-width: 991px) {
  .rightcartsum { max-width: 100%; flex-basis: 100%; }
}
@media (max-width: 767px) {
  .carttabsec table.taler { min-width: 640px; }
  .carttabsec table.taler tr:nth-child(2) td { padding-top: 26px; }
}

@media (max-width: 575px) {
  .lftimg { width: 64px; flex: 0 0 64px; }
  .lftimg img, .proig, .img_border { width: 64px; height: 64px; padding: 5px; }
  .product-detail-portion { padding-left: 10px; }
  .carttabsec table.taler { min-width: 560px; }
  .carttabsec table.taler th,
  .carttabsec table.taler td { padding: 14px 10px; font-size: 12.5px; }
  .carttabsec table.taler tr:nth-child(2) td { padding-top: 24px; }
  /* GST is the least essential column on a small screen — drop it so
     Item / Quantity / Unit Price / Total Price fit without scrolling */
  .carttabsec table.taler th:nth-child(4),
  .carttabsec table.taler td:nth-child(4) { display: none; }
}

/* ================================================
   CHECKOUT
   Like the cart page, most of this markup/classes are generated
   server-side in Gitanjali1_shoppingcart::checkout() and echoed as
   $cart_data — same .carttabsec/.taler/.product-qty-box/etc. rules
   above already style that part. These rules cover what's actually
   written in the checkout view itself: the step indicator, billing/
   shipping form, and order-summary card.
   ================================================ */

.checkout-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
  margin-top: 28px;
}
.checkout-form-col { flex: 2 1 640px; }
.checkout-summary-col { flex: 1 1 320px; max-width: 400px; }

/* ---- Step indicator ---- */
.checkout-progress-indicator {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.checkout-progress-indicator .step-1,
.checkout-progress-indicator .step-2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 500;
  border: 2px solid var(--border);
  color: var(--text-mid);
}
.checkout-progress-indicator .active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
  font-weight: 600;
}
.checkout-progress-indicator .inactive { background: var(--cream); }
.checkout-progress-indicator .arwstep {
  width: 34px;
  height: 2px;
  background: var(--border);
  position: relative;
}
.checkout-progress-indicator .arwstep::after {
  content: '\f105';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 12px;
  color: var(--text-mid);
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
}

/* ---- Login prompt ---- */
.txtalr {
  background: var(--gold-pale);
  border: 1px solid rgba(184,136,42,0.25);
  color: var(--navy);
  padding: 12px 18px;
  border-radius: var(--radius);
  font-size: 13.5px;
  margin-bottom: 24px;
}
.txtalr a { color: var(--gold); font-weight: 600; text-decoration: underline; }
.txtalr a:hover { color: var(--navy); }

/* ---- Cart items block above the form ---- */
.chkbx-bx { margin-bottom: 32px; }

/* ---- Billing / shipping form card ---- */
.chkbxrt {}
.chkbx-bxrtsp {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-sm);
}
.glc-titlechk {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 6px;
}
.comptxtchk {
  font-size: 13px;
  color: var(--text-mid);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.chkbx-bxrtsp label:not(.radbx):not([for^="rdn_"]) {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  display: flex;
  align-items: center;
}
.chkbx-bxrtsp .text-red { color: #C0392B; }

.chkbx-bxrtsp .form-control,
.checkoutdata .form-control,
.checkoutdata select {
  border: 1px solid var(--input-border) !important;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13.5px;
  background: var(--cream);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.chkbx-bxrtsp .form-control:focus,
.checkoutdata .form-control:focus,
.checkoutdata select:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(184,136,42,0.12);
  background: var(--white);
  outline: none;
}

/* Ship-to-billing / ship-to-different-address choice */
.radbx {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 24px;
  margin-bottom: 10px;
  font-size: 13.5px;
  color: var(--text-dark);
}
.radbx .radbts { accent-color: var(--gold); width: 16px; height: 16px; cursor: pointer; }
.radbx label { font-weight: 500; cursor: pointer; margin: 0 !important; }

.chkbx-bxrt1 {
  margin-top: 10px;
  padding-top: 20px;
  border-top: 1px dashed var(--border);
}

.checkout-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.bckbtn a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-mid);
  font-size: 13px;
  font-weight: 600;
}
.bckbtn a:hover { color: var(--navy); }
.bckbtn .arwsp { font-size: 15px; }
.bckbtn input[type="button"] {
  background: var(--gold);
  color: var(--white);
  border: 2px solid var(--gold);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 11px 26px;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.bckbtn input[type="button"]:hover { background: transparent; color: var(--gold); }

/* ---- Order summary card ---- */
.checkoutdata {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
}
.checkoutdata table {
  width: 100%;
  border-collapse: collapse;
}
.checkoutdata table td {
  padding: 9px 0;
  font-size: 13px;
  color: var(--text-dark);
  border: none;
}
.checkoutdata table tr:last-child td {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  font-size: 16px;
}
.checkoutdata table tr:last-child strong { color: var(--navy); font-size: 15px; }
.checkoutdata table tr:last-child span { color: var(--gold); font-weight: 700; font-size: 19px; }
.checkoutdata #coupon_code {
  margin-bottom: 10px;
  width: 100%;
}
.checkoutdata .btn.btn-warning {
  background: var(--navy);
  border: 2px solid var(--navy);
  color: var(--white);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.checkoutdata .btn.btn-warning:hover { background: transparent; color: var(--navy); }

.checkoutdata > div[align="center"] { margin-top: 18px; text-align: center; }
.checkoutdata > div[align="center"] .btn.btn-warning {
  display: block;
  width: 100%;
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
  font-size: 13px;
  padding: 13px 20px;
}
.checkoutdata > div[align="center"] .btn.btn-warning:hover { background: transparent; color: var(--gold); }

@media (max-width: 991px) {
  .checkout-summary-col { max-width: 100%; flex-basis: 100%; }
}
@media (max-width: 767px) {
  .chkbx-bxrtsp { padding: 22px 18px; }
  .chkbx-bxrtsp .row > label { margin-top: 12px; }
}

/* ================================================
   INVOICE / REVIEW & PAYMENT (step 2 of checkout)
   Reuses .checkout-progress-indicator / .carttabsec / .taler etc.
   from the cart & checkout sections above. These rules cover what's
   unique to this page: the billing/shipping review cards and the
   payment gateway panel.
   ================================================ */

.bldvsec {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  height: 100%;
  box-shadow: var(--shadow-sm);
}
.bldv {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.bldvsec .row.form-group {
  margin: 0 0 12px;
  font-size: 13.5px;
}
.bldvsec .row.form-group label {
  color: var(--text-mid);
  font-weight: 600;
  margin: 0;
}
.bldvsec .row.form-group > div {
  color: var(--text-dark);
}

/* ---- Payment panel ---- */
.payraad {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-sm);
  max-width: 480px;
  margin: 0 auto;
}
.payraad h4 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: var(--navy);
  margin-bottom: 22px;
}
.payraad .btn.btn-primary {
  background: var(--gold);
  border: 2px solid var(--gold);
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 13px 34px;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.payraad .btn.btn-primary:hover {
  background: transparent;
  color: var(--gold);
  transform: translateY(-2px);
}
.payraad img { margin-top: 18px; max-width: 220px; }

@media (max-width: 767px) {
  .payraad { padding: 26px 20px; }
}

/* ================================================
   INVOICE $cart_data EXTRAS
   Gitanjali1_shoppingcart::invoice() was restructured to match
   checkout.php: an <h4 class="invoice"> site-name heading, a simple
   .inv_date row, the item table (.taler, same as cart/checkout), and
   the Sub Total/GST/Discount/Shipping/Grand Total summary now reuses
   the exact same .checkoutdata markup as checkout.php's order summary
   — so it's styled by the .checkoutdata rules above already, not
   duplicated here.
   ================================================ */

.chkbx-bx h4.invoice {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 14px;
}

.inv_date {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 20px;
  margin-bottom: 20px;
  font-size: 13.5px;
  color: var(--text-dark);
}
.inv_date span:first-child { font-weight: 600; color: var(--navy); }

.checkoutdata.mt-4 { margin-top: 24px; }

/* ================================================
   MY ACCOUNT DASHBOARD
   ================================================ */
.account-welcome {
  font-family: 'Playfair Display', serif;
  color: var(--navy);
  margin-bottom: 6px;
}
.account-subtext { color: var(--text-mid); font-size: 14px; margin-bottom: 30px; }

.account-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  height: 100%;
  text-align: center;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.account-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-5px);
  border-color: rgba(184,136,42,0.25);
}
.account-card-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--gold-pale);
  color: var(--gold);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.account-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  color: var(--navy);
  margin-bottom: 8px;
}
.account-card p {
  font-size: 13.5px;
  color: var(--text-mid);
  margin-bottom: 20px;
  line-height: 1.7;
}

/* ================================================
   SITEMAP
   Styles the raw recursive <ul><li><a>…</a><ul>…</ul></li></ul> markup
   from Gitanjali_frontpage_model::GetSitemap() generically — it's two
   root <ul> blocks back to back (pages, then categories/products) and
   depth varies per branch, so nothing here assumes a fixed level count;
   indentation and the connector lines simply compound naturally through
   normal nesting, however deep a given branch goes.
   ================================================ */
.sitemap-section { background: var(--cream); }

.sitemap-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Root level: a flowing tree, not boxed cards — each top-level page/
   category is a plain section heading with its full subtree open
   beneath it. On wide screens the whole thing balances itself into two
   newspaper-style columns (CSS multi-column, not a rigid grid), so long
   product names still get a full column's width to wrap in rather than
   being squeezed into a narrow card. */
.sitemap-tree > ul {
  column-count: 2;
  column-gap: 60px;
}
.sitemap-tree > ul > li {
  break-inside: avoid;
  margin-bottom: 30px;
}
.sitemap-tree > ul > li:last-child { margin-bottom: 0; }

/* Separates the "pages" tree from the "categories/products" tree with
   a labelled divider instead of just a gap. */
.sitemap-tree > ul + ul {
  margin-top: 10px;
  padding-top: 46px;
  border-top: 1px solid var(--border);
  position: relative;
}
.sitemap-tree > ul + ul::before {
  content: 'Categories & Products';
  position: absolute;
  top: 18px;
  left: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
}
.sitemap-tree > ul:first-child::before {
  content: 'Site Pages';
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  column-span: all;
}

.sitemap-tree > ul > li > a {
  font-family: 'Playfair Display', serif;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 2px solid var(--gold);
  transition: color var(--transition);
}
.sitemap-tree > ul > li > a::before {
  content: '\f07b'; /* fa-folder */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: var(--gold);
  font-size: 14px;
  flex-shrink: 0;
}
.sitemap-tree > ul > li > a:hover { color: var(--gold); }

/* Nested levels (2, 3, 4…): a genuine tree — a vertical trunk line
   with a horizontal tick branching off to each item. Depth compounds
   automatically since each level just nests inside the previous <li>,
   so this reads correctly whether a product sits 2 or 5 levels deep. */
.sitemap-tree ul ul {
  margin: 6px 0 0 5px;
  padding-left: 18px;
  border-left: 1px dashed var(--border);
}
.sitemap-tree ul ul li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 9px;
}
.sitemap-tree ul ul li:last-child { margin-bottom: 0; }
.sitemap-tree ul ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 12px;
  width: 12px; height: 0;
  border-top: 1px dashed var(--border);
}
.sitemap-tree ul ul li > a {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-mid);
  display: inline-block;
  transition: color var(--transition);
}
.sitemap-tree ul ul li > a:hover { color: var(--gold); }

@media (max-width: 767px) {
  .sitemap-tree > ul { column-count: 1; }
  .sitemap-tree > ul:first-child::before { column-span: none; }
}

/* ================================================
   FLASH MESSAGE / ALERT
   Used by change_password.php, reset_password_success.php — anywhere a
   session flashdata success/error message needs to render.
   ================================================ */
.form-alert {
  border-radius: var(--radius);
  padding: 14px 42px 14px 18px;
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 24px;
  position: relative;
}
.form-alert-success { background: #E8F6EE; color: #1E7B45; border: 1px solid #BFE6CE; }
.form-alert-error { background: #FDEEEC; color: #C0392B; border: 1px solid #F5C6C0; }
.form-alert strong {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}
.form-alert-close {
  position: absolute;
  top: 10px; right: 12px;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.55;
}
.form-alert-close:hover { opacity: 1; }

/* ================================================
   ORDER LIST
   ================================================ */
.order-table-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}
.order-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 900px; }
.order-table thead th {
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 14px 16px;
  text-align: left;
  white-space: nowrap;
}
.order-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dark);
  vertical-align: middle;
  white-space: nowrap;
}
.order-table tbody tr:last-child td { border-bottom: none; }
.order-table tbody tr:hover { background: var(--cream); }

.order-status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.order-status-paid { background: #E8F6EE; color: #1E7B45; }
.order-status-pending { background: #FDF3E3; color: #B8882A; }
.order-status-failed,
.order-status-unpaid { background: #FDEEEC; color: #C0392B; }

/* Pagination (CI's create_links() output — see .pagination full_tag_open
   in Gitanjali1_user_admin::orderlist()) */
.order-pagination { margin-top: 28px; display: flex; justify-content: center; }
.order-pagination .pagination {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.order-pagination .pagination li a,
.order-pagination .pagination li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text-mid);
  font-size: 13px;
  font-weight: 600;
  background: var(--white);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.order-pagination .pagination li a:hover { border-color: var(--gold); color: var(--gold); }
.order-pagination .pagination li.active a,
.order-pagination .pagination li.active span {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

/* ================================================
   ORDER SUMMARY
   The line-item table, address cards, and totals below are built as a
   raw HTML string in Gitanjali1_user_admin::ordersummary() (not a view
   file) and echoed via $order_html — these classes are what that string
   now targets, replacing the old inline-styled table.
   ================================================ */
.order-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  font-size: 13.5px;
  color: var(--text-mid);
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.order-summary-meta strong {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gold);
  margin-bottom: 3px;
}

.order-line-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.order-line-table th {
  background: var(--cream);
  color: var(--navy);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 2px solid var(--border);
}
.order-line-table td {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.order-line-product { display: flex; align-items: center; gap: 14px; }
.order-line-product img {
  width: 60px; height: 60px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--cream);
  padding: 4px;
  flex-shrink: 0;
}
.order-line-title { font-weight: 600; color: var(--navy); margin: 0 0 3px; }
.order-line-meta { font-size: 12px; color: var(--text-mid); margin: 0; line-height: 1.6; }

.order-line-table tfoot td { border-bottom: none; padding: 9px 14px; }
.order-line-table tfoot tr td:first-child { text-align: right; color: var(--text-mid); }
.order-line-table tfoot tr.order-grand-total td {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  border-top: 2px solid var(--border);
  padding-top: 14px;
}

.order-address-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.order-address-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.order-address-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gold-pale);
}
.order-address-card p { font-size: 13.5px; color: var(--text-mid); line-height: 1.7; margin: 0; }
.order-address-amount { font-size: 22px; font-weight: 700; color: var(--gold); font-family: 'Playfair Display', serif; }

@media (max-width: 767px) {
  .order-line-table { font-size: 12.5px; }
  .order-line-product img { width: 48px; height: 48px; }
}