/* Shared layout rules: allow content to shrink without clipping it. */
main,section,article,aside,.row>[class*="col-"],.product-info,.product-detail,.panel,.admin-product-cell>div{min-width:0}
img{max-width:100%}
h1,h2,h3,p,li,.formatted-description,.preserve-lines,.review,.product-detail,.total-row,.summary-item,.metric strong,footer a{overflow-wrap:break-word;word-break:normal}
.form-label:has(>.form-control),.form-label:has(>.form-select){display:block;width:100%}
.form-control,.form-select{max-width:100%;min-width:0}
textarea{resize:vertical}
.section-head,.shop-heading,.admin-heading{flex-wrap:wrap}
.detail-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.detail-price del{white-space:nowrap}
.gallery{width:100%;min-width:0;overscroll-behavior-x:contain;padding-bottom:4px}
.gallery-thumb{flex:0 0 auto}
.product-image-picker,.size-choices,.filter-swatches{min-width:0}
.product-card .btn{min-height:44px}
.admin-page .table-responsive{max-width:100%;overscroll-behavior-x:contain}
.admin-page .table{min-width:640px}
.admin-page .table th,.admin-page .table td:not(:first-child){white-space:nowrap}
.admin-page .metric{height:100%}
.admin-page .metric strong{font-size:clamp(20px,2.1vw,26px)}
.image-colour-dialog{max-height:90dvh;overscroll-behavior:contain}
.ql-editor{overflow-wrap:break-word;word-break:normal}
@media(max-width:991px){
    .navbar>.brand{max-width:calc(100% - 62px)}
    .navbar-toggler{min-width:44px;min-height:44px;padding:7px}
    .navbar-collapse{width:100%;flex-basis:100%}
    .navbar-nav .nav-link{padding:12px 4px;min-height:44px}
    .bag-link{min-height:44px}
    .product-detail h1{font-size:clamp(26px,4vw,36px)}
    .admin-heading{gap:12px}
    .admin-page .table-responsive{padding:16px}
}
@media(max-width:767px){
    .catalog-layout{display:block}
    .filter-panel{position:static;margin-bottom:20px;padding:16px}
    .filter-panel summary{margin:0;min-height:24px}
    .filter-panel[open] summary{margin-bottom:18px}
    .container-xxl{padding-left:16px;padding-right:16px}
    .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .section-head{align-items:flex-start;gap:12px}
    .section-head>a{white-space:normal}
    .hero-copy{padding:30px 0}
    .hero h1{font-size:clamp(30px,7vw,44px)}
    .hero-photo{height:clamp(250px,70vw,390px)}
    .image-note{left:12px;right:12px;bottom:14px;font-size:17px;text-align:center}
    .collection-tile{padding:24px;min-height:185px}
    .announcement{font-size:11px;padding:8px 12px}
    .announcement span{display:none}
    .admin-nav{flex-wrap:nowrap;overflow-x:auto;gap:5px;padding-bottom:12px;overscroll-behavior-x:contain}
    .admin-nav a{flex-shrink:0;display:flex;align-items:center;min-height:44px;padding:9px 12px}
    .admin-heading h1{font-size:clamp(28px,7vw,38px)}
    .admin-heading .btn{padding:10px 14px}
    .panel{padding:18px}
    .variant-editor,.shipping-editor,.size-editor{padding:12px}
    .admin-page .form-label,.form-label{font-size:13px}
    .form-control,.form-select{font-size:16px;min-height:44px}
    input[type=color].form-control{width:56px;padding:5px}
    input[type=file].form-control{font-size:13px}
    .btn,.quantity-control button,.size-choice span{min-height:44px}
    .quantity-control{height:46px;flex-shrink:0}
    .quantity-control button{width:40px}
    .quantity-control input{width:42px;font-size:16px}
    .product-detail form>.d-flex{flex-wrap:wrap}
    .product-detail #add-to-bag{min-width:130px}
    .filter-links a{display:flex;align-items:center;min-height:40px}
    .filter-swatch>span{width:40px;height:40px}
    .mini-swatches a{width:24px;height:24px}
    .image-colour-dialog{padding:16px;width:calc(100% - 20px)}
    .image-colour-dialog h2{font-size:20px}
    .image-colour-dialog>.d-flex{align-items:flex-start!important}
    .image-remove-control{min-height:36px;align-items:center}
    .pending-image-card{width:calc(50% - 5px);max-width:140px}
    .pending-image-card img{width:100%;height:95px}
    .colour-image-current{flex-wrap:wrap}
    .ql-toolbar.ql-snow{padding:8px 4px}
    .ql-snow.ql-toolbar button{width:32px;height:36px}
    .ql-snow .ql-picker{height:36px}
    footer{margin-top:40px;padding-top:30px}
    footer .brand{font-size:28px}
    .summary-item>div,.cart-row>div{min-width:0}
    .cart-row>strong{white-space:normal}
}
@media(max-width:374px){
    .navbar .brand{font-size:23px;gap:6px}
    .navbar .brand small{font-size:6px;letter-spacing:.16em}
    .navbar-toggler{padding:6px;width:44px}
    .navbar-toggler-icon{width:24px;height:24px}
    .hero .btn{font-size:12px;padding:10px 12px}
    .product-info{padding:9px}
    .product-info h2{font-size:12px}
    .product-card .price{font-size:14px}
    .product-card .btn{font-size:10px;padding:8px}
    .panel{padding:14px}
    .product-image-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
    .product-detail #add-to-bag{flex-basis:100%}
}
@media(hover:none){.product-card:hover,.product-card:hover .product-image img{transform:none}}

/* Consistent, compact product card rows at every grid width. */
.product-info h2{height:3em;min-height:3em;overflow:hidden}
.product-type-label{height:1.5em;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-rating{height:20px;min-height:20px;flex-wrap:nowrap;white-space:nowrap}
.card-rating .review-stars{flex-shrink:0}
.card-rating>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.card-options{height:26px;min-height:26px;flex-wrap:nowrap}
.mini-swatches{flex-wrap:nowrap;gap:6px;min-width:0}
.mini-swatches a.more-colours{display:flex;align-items:center;justify-content:center;width:auto;min-width:22px;height:24px;border:0;outline:0;background:transparent;font-size:11px;color:var(--forest)}
.product-card .price{height:24px;min-height:24px;flex-wrap:nowrap;white-space:nowrap}
.product-card .btn{height:44px;white-space:nowrap}
@media(max-width:640px){
    .card-rating{height:34px;min-height:34px;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
    .card-options{height:46px;min-height:46px;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}
    .card-availability{line-height:14px}
    .product-card .price{height:36px;min-height:36px;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;line-height:1.4}
}

/* Keep the colour picker compact, with four patches per row. */
.colour-filter .filter-swatches{display:grid;grid-template-columns:repeat(4,34px);gap:10px;align-items:center}
.colour-filter .filter-swatch[hidden]{display:none}
.colour-filter .filter-swatch>span{width:34px;height:34px}
.colour-filter .filter-swatch:not(.all-colours):has(input:checked)>span::after{content:'✓';display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--forest);color:#fff;font-size:14px}
.colour-toggle{margin-top:14px;padding:6px 0;border:0;background:none;color:var(--forest);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.colour-toggle:focus-visible{outline:2px solid var(--forest);outline-offset:4px}

/* ===== Every screen size: fixes from the full-site check (26 Sep 2026) ===== */
/* Keep hidden helper text (e.g. a table's "Actions" label) inside the table's own scroll box,
   so it can never make the whole page scroll sideways. */
.table-responsive{position:relative}
/* Money never splits across two lines ("Rs" above "1,500.00"). */
.total-row>strong,.summary-item b,.cart-row>strong,.metric strong,.table td:has(> .price-cell){white-space:nowrap}
.total-row>span{min-width:0}
.grand small{font-size:13px;font-weight:400;color:#65705f}
/* Easy-to-see, easy-to-tap checkboxes (checkout terms, filters, newsletter). */
.form-check{padding-left:1.9em}
.form-check .form-check-input{width:1.25em;height:1.25em;margin-left:-1.9em;margin-top:.15em;border:1.5px solid #7d8878}
.form-check-input:focus{border-color:var(--forest);box-shadow:0 0 0 3px #344f4026}
.image-remove-control input{width:20px;height:20px;flex:0 0 20px}
/* Readable small labels (were 6–10px). */
.eyebrow{font-size:11px}
.product-type-label,.featured-caption .eyebrow{font-size:10.5px;letter-spacing:.1em}
.card-availability,.card-rating,.card-rating span,.collection-tile span,.sale-badge,.colour-filter .all-colours span{font-size:11px}
.brand small{font-size:9px}
@media(max-width:575px){.navbar .brand small{display:none}}
/* Larger tap areas for carousel dots, colour dots, footer and breadcrumb links. */
.featured-controls .carousel-indicators{gap:0}
.featured-controls .carousel-indicators button{border-left:8px solid transparent;border-right:8px solid transparent}
@media(pointer:coarse){.mini-swatches{gap:4px}.mini-swatches a{width:24px;height:24px}}
footer a{padding:3px 0}
.footer-email{overflow-wrap:normal;word-break:normal}
.breadcrumb a{display:inline-block;padding:3px 0}
/* Info pages: section headings. */
.page-content .page-subheading{font:700 17px/1.4 Arial,Helvetica,sans-serif;letter-spacing:0;margin:28px 0 6px}
.page-content .preserve-lines{margin-bottom:0}
/* Friendly error pages. */
.error-page{text-align:center;margin-top:40px;margin-bottom:40px}
.error-page h1{font-size:clamp(28px,6vw,40px);margin-bottom:12px}
.error-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
/* Admin menu: every section visible on phones (wraps instead of hiding off-screen). */
@media(max-width:767px){
    .admin-nav{flex-wrap:wrap;overflow-x:visible;gap:6px;padding-bottom:14px}
    .admin-nav a{flex-shrink:1;min-height:40px;padding:8px 12px;border:1px solid var(--border);background:#fff;font-size:13px}
    .admin-nav a.active{border-color:var(--forest)}
}
/* Tables become labelled cards on phones, so no column is hidden off to the side. */
@media(max-width:767px){
    .table-responsive:has(> .table-stack),.panel .table-responsive:has(> .table-stack){overflow-x:visible;padding-top:4px;padding-bottom:4px}
    .table.table-stack,.admin-page .table.table-stack{min-width:0;margin-bottom:0}
    .table-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    .table-stack,.table-stack tbody,.table-stack tr,.table-stack td{display:block;width:100%}
    .table-stack tr{padding:14px 0;border-bottom:1px solid var(--border)}
    .table-stack tr:last-child{border-bottom:0}
    .table-stack>:not(caption)>*>*{border:0;padding:0;background:transparent}
    .table-stack td{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:4px 0!important;text-align:right;white-space:normal!important;overflow-wrap:anywhere}
    .table-stack td[data-label]::before{content:attr(data-label);flex:0 0 auto;max-width:48%;font-size:12px;font-weight:600;color:#65705f;text-align:left}
    .table-stack td.cell-main{display:block;text-align:left;padding-bottom:8px!important;font-size:15px}
    .table-stack td.cell-main>a{display:inline-block;padding:4px 0;font-weight:700}
    .table-stack td.cell-actions{justify-content:flex-start;padding-top:10px!important}
    .table-stack td small{display:block;font-size:12px}
    .table-stack .admin-product-cell{align-items:flex-start}
}
/* Tables on tablets: fit the screen by wrapping text instead of hiding columns to the side. */
.table-stack .admin-product-cell{min-width:0}
.table-stack .admin-product-cell>a{flex:0 0 auto}
@media(min-width:768px){
    .admin-page .table.table-stack{min-width:0}
    .admin-page .table-stack th,.admin-page .table-stack td:not(:first-child){white-space:normal}
    .table-stack td[data-label="Date"],.table-stack td[data-label="Total"],.table-stack td[data-label="Amount"],.table-stack td[data-label="Customer discount"],.table-stack td.cell-actions{white-space:nowrap}
}
/* Home carousel controls fit small phones (arrows, dots and Pause in one row). */
@media(max-width:420px){
    .featured-controls{gap:0;padding:4px}
    .featured-controls .carousel-indicators{flex:0 1 auto;min-width:0;flex-wrap:wrap;justify-content:center}
    .featured-controls .carousel-indicators button{border-left-width:6px;border-right-width:6px}
    .featured-controls #carousel-pause{padding-left:10px;padding-right:4px}
}
/* Product photo thumbnails: four fit side by side on small phones. */
@media(max-width:400px){.gallery{gap:6px}.gallery img{width:60px;height:66px}}
/* Smallest phones: keep card text readable. */
.product-type-label,#featured-carousel .featured-caption .eyebrow{font-size:11px;letter-spacing:.08em}
.product-card .price del{font-size:11px}
@media(max-width:374px){.product-card .btn{font-size:11px;padding:8px}}
/* Touch screens: a little more room around small text links. */
@media(pointer:coarse){
    .clear-link,.shop-heading>a,.cart-row a.fw-semibold,.contact-email,.admin-page a.small.d-block,main>a.d-inline-block,.admin-page .d-flex.gap-3>a,.featured-caption a:not(.featured-arrow){padding-top:4px;padding-bottom:4px}
    .shop-heading>a,.cart-row a.fw-semibold,.contact-email,main>a.d-inline-block,.admin-page .d-flex.gap-3>a{display:inline-block}
    .filter-panel summary,.admin-page details>summary,.size-overrides summary{padding-top:6px;padding-bottom:6px}
}
@media(max-width:420px){
    .featured-controls>button:not(#carousel-pause){min-width:38px}
    .featured-controls .carousel-indicators button{border-left-width:8px;border-right-width:8px}
}
.image-remove-control{min-height:32px}
.brand small{font-size:10px;letter-spacing:.2em}
@media(pointer:coarse){
    .section-head>a{display:inline-block;padding-top:4px}
    .table td a{display:inline-block;padding-top:4px;padding-bottom:4px}
}
@media(max-width:420px){#featured-carousel .featured-controls{gap:0;padding:4px}}
@media(max-width:767px){
    .table-stack td[data-label]{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:0;align-items:baseline}
    .table-stack td[data-label]::before{grid-row:1 / span 4;max-width:none}
    .table-stack td[data-label]>*{grid-column:2}
}
/* Phones turned sideways and small tablets: three products per row instead of two very tall ones. */
@media(min-width:600px) and (max-width:767px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* The catalogue filter becomes a full-height drawer on phones (only when catalog.js runs; without it the panel stays in the page); the product grid stays unchanged. */
@media(max-width:767px){
    html.js-catalog body:has(.catalog-page .filter-panel[open]){overflow:hidden}
    .catalog-page{max-width:none}
    .catalog-page .shop-heading{margin:4px 0 24px}
    .catalog-page .shop-heading h1{font-size:32px}
    .catalog-page .catalog-layout{display:block}
    .catalog-page .filter-panel{position:relative;max-height:none;margin-bottom:20px;padding:0;overflow:visible;border-radius:12px}
    .catalog-page .filter-panel>summary{display:flex;align-items:center;min-height:50px;margin:0;padding:0 16px;list-style:none}
    .catalog-page .filter-panel>summary::-webkit-details-marker{display:none}
    .catalog-page .filter-panel>summary::after{content:'Filters';margin-left:auto;padding:5px 10px;border-radius:20px;background:#eef2e9;color:var(--forest);font-size:11px}
    html.js-catalog .catalog-page .filter-panel[open]{position:fixed;inset:0;z-index:1100;margin:0;padding:0 16px 28px;border:0;border-radius:0;background:var(--cream);overflow-y:auto;overscroll-behavior:contain}
    html.js-catalog .catalog-page .filter-panel[open]>summary{position:sticky;top:0;z-index:2;margin:0 -16px 22px;padding:0 16px;background:var(--forest);color:#fff}
    html.js-catalog .catalog-page .filter-panel[open]>summary::after{content:'Close';background:#ffffff1f;color:#fff}
    .catalog-page .filter-panel[open] form{max-width:560px;margin:0 auto}
    .catalog-page .filter-section{padding-bottom:18px;margin-bottom:18px}
    .catalog-page .catalog-layout .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .catalog-page .product-info h2{font-size:12px}
    .catalog-page .product-card .price{font-size:15px}
    .reassurance-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
}
@media(min-width:600px) and (max-width:767px){.catalog-page .catalog-layout .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Shop filters. With JavaScript (html.js-catalog) filters apply as soon as they change, so "Apply filters" is hidden everywhere.
   Phones: quick filters sit in one sideways-scrolling row; the "Filters" chip opens the panel, which then only holds
   size, colour, price and sort, and its "Show N styles" button closes it. */
.quick-filters,.filter-done{display:none}
html.js-catalog .filter-apply{display:none}
@media(max-width:767px){
    .quick-filters{display:block;margin:-10px -16px 18px}
    .quick-filters-track{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:2px 16px 6px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
    .quick-filters-track::-webkit-scrollbar{display:none}
    .quick-filters-track.at-end{-webkit-mask-image:none;mask-image:none}
    .quick-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 15px;border:1px solid #d3dbcd;border-radius:999px;background:#fff;color:var(--ink);font-size:13px;font-weight:500;line-height:1.2;white-space:nowrap;text-decoration:none}
    .quick-chip:hover{border-color:var(--forest);color:var(--forest);text-decoration:none}
    .quick-chip[aria-current="true"]{border-color:var(--forest);background:var(--forest);color:#fff}
    .quick-chip:focus-visible{outline:3px solid #b2956a;outline-offset:2px}
    .quick-chip-filters{display:none;border-color:var(--forest);color:var(--forest);font-weight:600}
    html.js-catalog .quick-chip-filters{display:inline-flex}
    .quick-chip-filters svg{width:17px;height:17px}
    .quick-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--forest);color:#fff;font-size:11px;font-weight:700}
    .quick-divider{flex:0 0 1px;height:22px;background:#d3dbcd}
    html.js-catalog .catalog-page .filter-panel:not([open]){display:none}
    html.js-catalog .catalog-page .filter-panel form>fieldset{display:none}
    html.js-catalog .catalog-page .filter-panel .filter-done{display:block;position:sticky;bottom:12px;z-index:2;margin-top:8px;padding:13px 16px;box-shadow:0 -14px 0 var(--cream),0 8px 20px #29392f26}
    html.js-catalog .catalog-page .filter-panel .clear-link{display:block;text-align:center;margin-top:12px}
}