/** Shopify CDN: Minification failed

Line 892:0 Unexpected "="

**/
/* ==========================================================
DAILY LENSES CSS
File: assets/daily-lenses.css

PURPOSE
This file contains only the CSS used by the Daily Lenses section.

WHAT IS INCLUDED
1. Main 3-column top layout
2. Gallery card and thumbnails
3. Product title and price area
4. Purchase card and package cards
5. Lens header and prescription table
6. Qty stepper
7. Savings bar and total bar
8. Add to cart button
9. Tabs
10. Store information dialog
11. Responsive styles
12. Reduced motion support
========================================================== */


/* ==========================================================
SECTION: ROOT
Base wrapper for the Daily Lenses section only
========================================================== */
.glp-root,
.glp-root * {
  box-sizing: border-box;
}

.glp-root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
}


/* ==========================================================
SECTION: TOP LAYOUT
Gallery + info + sidebar
========================================================== */
.glp-top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(240px, 0.85fr);
  gap: 28px;
  align-items: start;
  margin-bottom: 32px;
}


/* ==========================================================
SECTION: MAIN CARDS
Shared card style for all top and content boxes
========================================================== */
.glp-gallery-card,
.glp-info-card,
.glp-sidebar-card,
.glp-purchase-card,
.glp-tabs {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.glp-gallery-card {
  padding: 20px;
}

.glp-info-card {
  padding: 28px;
}

.glp-sidebar-card {
  padding: 24px;
}

.glp-purchase-card {
  padding: 32px;
  margin-bottom: 28px;
}


/* ==========================================================
SECTION: GALLERY
Main image and thumbnail buttons
========================================================== */
.glp-gallery-stage {
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: 14px;
  background: #f8f8f8;
}

.glp-main-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.glp-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.glp-thumb {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
}

.glp-thumb.is-active {
  border-color: #0b4f84;
  box-shadow: 0 0 0 3px rgba(11, 79, 132, 0.12);
}

.glp-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ==========================================================
SECTION: PRODUCT INFO
Title, price, short description
========================================================== */
.glp-title {
  margin: 0 0 14px;
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.15;
  font-weight: 800;
  color: #0b4f84;
}

.glp-price-area {
  margin-bottom: 16px;
}

.glp-price-area .price {
  font-weight: 800;
}

.glp-short-desc {
  margin-bottom: 18px;
  color: #374151;
  font-size: 15px;
  line-height: 1.75;
}


/* ==========================================================
SECTION: PACKAGE HEADING
Main package title and subtitle
========================================================== */
.glp-package-heading {
  margin: 0 0 22px;
  text-align: center;
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 800;
  color: #111827;
}

.glp-subtitle-he {
  margin: -8px 0 22px;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: #6b7280;
  font-weight: 500;
}


/* ==========================================================
SECTION: PACKAGE GRID
Package selection cards
========================================================== */
.glp-package-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.glp-package-card {
  position: relative;
  display: block;
  cursor: pointer;
}

.glp-package-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.glp-package-inner {
  height: 100%;
  padding: 18px;
  border: 2px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
}

.glp-package-card.is-active .glp-package-inner {
  border-color: #0b4f84;
  background: linear-gradient(135deg, rgba(11, 79, 132, 0.02) 0%, rgba(11, 79, 132, 0.05) 100%);
  box-shadow: 0 0 0 4px rgba(11, 79, 132, 0.12);
}

.glp-package-badge-img {
  text-align: center;
}

.glp-package-name {
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}

.glp-package-sub {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #0b4f84;
}

.glp-package-note {
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: #6b7280;
}

.glp-package-meta {
  display: inline-block;
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f3f4f6;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
}

.glp-package-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 20px;
  background: #dcfce7;
  color: #15803d;
  font-size: 12px;
  font-weight: 800;
}

.glp-package-compare {
  margin-top: 10px;
  margin-bottom: 2px;
  font-size: 13px;
  color: #9ca3af;
  text-decoration: line-through;
}

.glp-package-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}

.glp-package-price {
  font-size: 22px;
  font-weight: 900;
  color: #c40020;
}

.glp-package-unit {
  font-size: 12px;
  color: #6b7280;
}


/* ==========================================================
SECTION: LENS HEADER
Header above the prescription table
========================================================== */
.glp-lens-header {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
}

.glp-lens-header-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.glp-lens-header-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  color: #111827;
}

.glp-lens-header-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  background: #ecfdf5;
  color: #15803d;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.glp-lens-header-subtitle {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}


/* ==========================================================
SECTION: LENS BOX
Outer wrapper for prescription area
========================================================== */
.glp-lens-box {
  margin-bottom: 24px;
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
}

.glp-lens-heading {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}


/* ==========================================================
SECTION: TABLE WRAP
Horizontal scroll for the prescription table
========================================================== */
.glp-lens-scroll {
  overflow-x: auto;
}


/* ==========================================================
SECTION: PRESCRIPTION TABLE
Main table for eye values and qty
========================================================== */
.glp-lens-table {
  width: 100%;
  border-collapse: collapse;
}

.glp-lens-table th,
.glp-lens-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  float: none;
}

.glp-lens-table th {
  font-size: 13px;
  font-weight: 800;
  color: #374151;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

.glp-lens-table tbody tr:last-child td {
  border-bottom: none;
}

/* Sticky first column for Eye header and Eye labels */
.glp-lens-table td:first-child,
.glp-lens-table th:first-child {
 position: static !important;
  left: auto !important;
  z-index: auto !important;
  
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}



.glp-eye-label {
  min-width: 56px;
  font-size: 14px;
  font-weight: 800;
  color: #0b4f84;
}


/* ==========================================================
SECTION: SELECTS AND FIXED VALUES
Dropdown fields and fixed BC / DIA values
========================================================== */
.glp-select {
  min-width: 100px;
  padding: 8px 10px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-size: 14px;
  cursor: pointer;
}

.glp-select:focus {
  outline: none;
  border-color: #0b4f84;
  box-shadow: 0 0 0 3px rgba(11, 79, 132, 0.1);
}

.glp-fixed {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 6px;
  background: #f9fafb;
  color: #111827;
  font-size: 15px;
  font-weight: 700;
}


/* ==========================================================
SECTION: QTY STEPPER
Plus / minus controls inside Qty column
========================================================== */
.glp-stepper {
  display: flex;
  align-items: center;
  border: 2px solid #d1d5db;
  border-radius: 10px;
  overflow: hidden;
}

.glp-step-btn {
  width: 34px;
  height: 34px;
  border: none;
  background: #f9fafb;
  color: #374151;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.glp-step-value {
  min-width: 32px;
  padding: 0 4px;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  color: #111827;
}


/* ==========================================================
SECTION: DISABLED ROW STATE
Used when right or left eye row becomes inactive
========================================================== */
#glp-row-right-disabled,
#glp-row-left-disabled,
.glp-row-disabled {
  opacity: 0.5;
}

.glp-row-disabled .glp-select,
.glp-row-disabled .glp-step-btn,
.glp-row-disabled .glp-stepper {
  pointer-events: none;
}


/* ==========================================================
SECTION: SAVINGS BAR
Discount savings message
========================================================== */
.glp-savings-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  padding: 12px 18px;
  border: 1.5px solid #22c55e;
  border-radius: 10px;
  background: #f0fdf4;
  color: #15803d;
  font-size: 15px;
}

.glp-savings-icon {
  font-size: 20px;
}

.glp-savings-text {
  line-height: 1.5;
}

.glp-savings-text strong {
  color: #15803d;
  font-weight: 700;
}


/* ==========================================================
SECTION: TOTAL BAR
Shows total quantity and total price
========================================================== */
.glp-total-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding: 18px 24px;
  border: 2px solid #c3d9f0;
  border-radius: 12px;
  background: linear-gradient(135deg, #eef4fb 0%, #e0eaf5 100%);
}

.glp-total-info {
  font-size: 15px;
  color: #374151;
}

.glp-total-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.glp-total-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
}

.glp-total-price {
  font-size: 40px;
  line-height: 1;
  font-weight: 900;
  color: #c40020;
}


/* ==========================================================
SECTION: ACTION BUTTONS
Add to cart button area
========================================================== */
.glp-button-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.glp-atc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff7411, #ff9900);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.glp-atc-btn:disabled {
  background: #d1d5db;
  box-shadow: none;
  cursor: not-allowed;
}


/* ==========================================================
SECTION: TABS
Description / shipping / reviews
========================================================== */
.glp-tabs {
  overflow: hidden;
  margin-bottom: 40px;
}

.glp-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 2px solid #e5e7eb;
  background: #f9fafb;
}

.glp-tab-btn {
  flex: 1 1 200px;
  padding: 16px 18px;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #6b7280;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.glp-tab-btn.is-active {
  color: #0b4f84;
  border-bottom-color: #0b4f84;
  background: #fff;
}

.glp-tab-panel {
  display: none;
  padding: 24px;
}

.glp-tab-panel.is-active {
  display: block;
}


/* ==========================================================
SECTION: FOCUS STATES
Keyboard accessibility for buttons and fields
========================================================== */
.glp-thumb:focus-visible,
.glp-step-btn:focus-visible,
.glp-select:focus-visible,
.glp-atc-btn:focus-visible,
.glp-tab-btn:focus-visible {
  outline: 3px solid rgba(11, 79, 132, 0.18);
  outline-offset: 3px;
}

.glp-package-card:focus-within .glp-package-inner {
  border-color: #0b4f84;
  box-shadow: 0 0 0 3px rgba(11, 79, 132, 0.12);
}


/* ==========================================================
SECTION: STORE INFO
Pickup / store information block and modal
========================================================== */
.gl-pickup-info {
  margin-top: 15px;
  text-align: center;
  font-size: 13px;
}

.gl-pickup-info p {
  margin: 2px 0;
}

.gl-sub-text {
  margin: 2px 0;
  color: #6b7280;
}

.gl-info-link {
  padding: 0;
  border: none;
  background: none;
  color: #374151;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.gl-store-dialog {
  width: calc(100% - 32px);
  max-width: 420px;
  border: none;
  padding: 0;
  background: transparent;
}

.gl-store-dialog::backdrop {
  background: rgba(17, 24, 39, 0.45);
  backdrop-filter: blur(3px);
}

.gl-store-dialog-card {
  position: relative;
  padding: 24px 22px 20px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  text-align: center;
}

.gl-store-dialog-title {
  margin: 0 0 14px;
  color: #004a99;
  font-size: 22px;
  font-weight: 800;
}

.gl-store-dialog-content p {
  margin: 0 0 8px;
  color: #374151;
  line-height: 1.6;
}

.gl-store-dialog-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 999px;
  background: #f3f4f6;
  color: #111827;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}


/* ==========================================================
SECTION: RESPONSIVE
Tablet and mobile layout changes
========================================================== */
@media (max-width: 1199px) {
  .glp-top {
    grid-template-columns: 1fr 1fr;
  }

  .glp-sidebar-card {
    grid-column: 1 / -1;
  }

  .glp-package-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .glp-top {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .glp-purchase-card {
    padding: 18px;
  }

  .glp-package-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .glp-package-inner {
    padding: 14px;
  }

  .glp-title {
    margin-bottom: 10px;
    font-size: 24px;
  }

  .glp-subtitle-he {
    margin: -4px 0 16px;
    font-size: 13px;
  }

  .glp-total-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .glp-total-price {
    font-size: 30px;
  }

  .glp-tab-btn {
    flex: 1 1 100%;
    padding: 14px 12px;
  }

  .glp-lens-heading {
    margin-bottom: 12px;
    font-size: 16px;
  }

  .glp-lens-table th,
  .glp-lens-table td {
    padding: 10px 8px;
    font-size: 12px;
  }

  .glp-lens-table td:first-child,
  .glp-lens-table th:first-child {
    min-width: 72px;
  }

  .glp-package-heading {
    margin-bottom: 18px;
    font-size: 20px;
  }

  .glp-atc-btn {
    min-height: 48px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .glp-package-grid {
    gap: 10px;
  }

  .glp-tabs-nav {
    gap: 0;
  }

  .glp-tab-btn {
    padding: 12px 8px;
    font-size: 12px;
  }

  .glp-total-price {
    font-size: 24px;
  }

  .glp-atc-btn {
    min-height: 44px;
    font-size: 15px;
  }

  .glp-lens-scroll {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
}


/* ==========================================================
SECTION: REDUCED MOTION
Turns off transitions and animations for users who prefer less motion
========================================================== */
@media (prefers-reduced-motion: reduce) {
  .glp-root *,
  .glp-root *::before,
  .glp-root *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================
/* Fix: prevent Dawn's cart drawer from hiding main content */
========================================================== */

main[aria-hidden="true"],
#MainContent[aria-hidden="true"],
.main-content[aria-hidden="true"] {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}


.daily-lens-card {
  position: relative;
}

.daily-lens-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
}

.daily-lens-card__badge img {
  width: 80px;
  height: auto;
  display: block;
}